基于HTMLCanvas的画图板设计和实现.doc

摘 要

Web2.0带来丰富互联网技术让全部些人全部享受到了技术发展和体验进步乐趣。而作为下一代互联网标准，HTML5自然也是备受期待和瞩目。HTML5是近十年来Web开发标准巨大飞跃。和以前版本不一样，HTML5并非仅仅用来表示Web内容，它新使命是将Web带入一个成熟应用平台，在HTML5平台上，视频、音频、图象、动画，和同电脑交互全部被标准化。现阶段对于HTML5技术研发和开发工作关键集中在技术草案确实立和新互联网应用开发上，而伴随互联网发展，HTML标准也在不停改变，HTML标准已经走过第4代了，因为它能够用简单标签元素，替换属性能实现之前需要用很多复杂JavaScript代码才能有实现功效，HTML5越来越受到欢迎。
HTML5带来很多令人激动新特征，这在之前HTML中是不可见到。其中一个最值得提及特征就是用于绘画 HTML Canvas，能够对2D或位图进行动态、脚本渲染。本文具体分析了HTML5技术介绍和发展前景，并深入探讨了HTML5引入关键标签Canvas元素，介绍了Canvas能够实现关键功效，在此基础上实现了部分类似Windows画图板功效，包含铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功效，在实现过程中也利用了最新CSS3技术，最终再次总结了这次毕设经验和对未来展望。
本文针对其引入Canvas绘图元素进行了深入研究，此元素能够替换画图作为动画渲染工具，效率和安全性更高，开发更便捷，必将是以后动画，游戏等应用首选开发方法，前景很好。

【关键词】Web2.0 HTML5 CSS3 Canvas

ABSTRACT
Web2.0 brings a wealth of Internet technology for all to enjoy the fun of technology development and experience progress. As a next-generation Internet standard, HTML5 is naturally highly anticipated and attention. HTML5 is a huge leap over the past decade Web development standards. Unlike the previous version,HTML5 is not just used to represent Web content, its new mission is the Web into a full-fledged application platform, HTML5 platform, video, audio, image, animation, and interaction with the computer be standardized. At this stage for the HTML5 technology and development work focused on the establishment of the draft technology and new Internet application development, HTML standards are changing with the development of the Internet, HTML standard has gone through four generations, because it simple label elements, instead of before the property can be realized with a lot of complex JavaScript code in order to achieve the functions, HTML5 has been more popular.
HTML5 brings a lot of exciting new features. This is not seen in the previous HTML. One of the most worth mentioning the characteristics is HTML Canvas for painting, 2D or bitmap rendering of dynamic script. I detailed analysis the HTML5 technology introduction and development prospects, a deeper look into the core of the introduction of HTML5 tag Canvas element, the Canvas can be achieved, based on the a similar Windows drawing board, including pencil, stamp imitation, draw a straight line, circle, rectangle, eraser, background image, take a swatch in the realization of the process also takes advantage of the latest CSS3 techniques and, finally, this complete set up experience and vision for the future.
This paper introduces the Canvas drawing elements which conducted research, this element can replace the drawing as a tool for animation rendering, higher efficiency and security, the development of more convenient, be the future animation, games and other application development method of choice , the outlook is very good.

【Key words】WEB2.0 HTML5 CSS3 Canvas

目 录

前 言 1
第一章 相关HTML5和画图板 2
第一节 HTML5介绍 2
第二节 HTML5特征 2
第三节 HTML5中国外发展现实状况 3
第四节 画图工具 4
第二章 相关技术介绍 5
第一节 Canvas元素介绍 5
第二节 第一个Canvas程序实现 5
第三节 JavaScript及jQuery介绍 7
第四节 CSS3介绍 9
第五节 开发工具DreamWeaver介绍 12
第六节 调试工具Firefox及Firebug介绍 13
第三章 功效设计 16
第一节 需求设计 16
第二节 基础原理 17
第三节 布局及界面设计 19
第四节 JavaScript设计 20
第四章 功效实现 21
第一节 简单功效实现 21
第二节 前台显示实现 24
第三节 JavaScript画图实现 25
第四节 最终效果 32
第五节 不足之处 38
第五章 结束语 39
致 谢 40
参考文件 41
附 录 42

前 言

伴随互联网时代高速发展，上网早已经成为人民日常生活中一个必不可少部分，大家能够在网络上获取信息，甚至于在网络上完成日常正常生活。看新闻，看电视，订餐等等。
HTML上个版本早在1999年制订，伴随二十一世纪网络不停发展，已经不能适应该前需求，于是HTML5营运而生了。HTML5是HTML下一个关键修订版本，以期能在互联网应用快速发展时候，使网络标准达成符合现代网络需求，现仍处于发展阶段。它期望能够降低浏览器对丰富性网络应用服务插件需要，而且提供更多能有效增强网络应用标准集。
HTML5出现再次告诉我们，我们生活，日常办公，越来越有可能全在网页端实现了。现在大家喜爱在电脑上绘图，画图版作为一个日常生活工具，现在也能在我们网页端实现了。HTML5一个很有用实用特征是用于绘画Canvas元素，Canvas拥有很多绘制功效如画笔、矩形、圆形、字符和图像处理方法，她为大家在网页绘图及图像处理带来了方便。

第一章 相关HTML5和画图板

第一节 HTML5介绍

HTML标准自1999年12月公布HTML4.01后，后继HTML5和其它标准被束之高阁，为了推进Web标准化运动发展，部分企业联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组，WHATWG） 组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML 2.0。在 年，双方决定进行合作，来创建一个新版本 HTML。
HTML5 草案前身名为 Web Applications 1.0，于被WHATWG提出，于被W3C接纳，并成立了新 HTML 工作团体。
HTML5 第一份正式草案已于1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经含有了一些 HTML5 支持。
12月17日，万维网联盟（W3C）正式宣告凝结了大量网络工作者心血HTML5规范已经正式定稿。依据W3C讲话稿称：“HTML5是开放Web网络平台奠基石。”
支持HTML5浏览器包含Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；中国傲游浏览器（Maxthon），和基于IE所推出360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器一样含有支持HTML5能力。
HTML5提供了部分新元素和属性，比如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎索引整理，同时愈加好帮助小屏幕装置和视障人士使用，除此之外，还为其它浏览要素提供了新功效，如<audio>和<video>标识。

第二节 HTML5特征

一、取消了部分过时HTML4标识
其中包含纯粹显示效果标识，如<font>和<center>，它们已经被CSS替换。
新HTML5 吸收了XHTML2 部分提议，包含部分用来改善文档结构功效，比如，新HTML 标签 header, footer, dialog, aside, figure 等使用，将使内容创作者愈加语义地创建文档，之前开发者在实现这些功效时通常全部是使用DIV。

二、将内容和展示分离
b 和 i 标签仍然保留，但它们意义已经和之前有所不一样，这些标签意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。

三、部分全新表单输入对象
包含日期，URL，Email 地址，其它对象则增加了对非拉丁字符支持。HTML5 还引入了微数据，这一使用机器能够识别标签标注内容方法，使语义Web 处理更为简单。总来说，这些和结构相关改善使内容创建者能够创建更洁净，更轻易管理网页，这么网页对搜索引擎，对读屏软件等更为友好。

四、全新，更合理Tag
多媒体对象将不再全部绑定在object或 embed Tag 中，而是视频有视频Tag，音频有音频Tag。

五、当地数据库
这个功效将内嵌一个当地SQL 数据库，以加速交互式搜索，缓存和索引功效。同时，那些离线Web 程序也将所以获益匪浅。不需要插件富动画。

六、Canvas 对象
将给浏览器带来直接在上面绘制矢量图能力，这意味着用户能够脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。

七、浏览器中真正程序
将提供 API 实现浏览器内编辑，拖放，和多种图形用户界面能力。内容修饰Tag 将被剔除，而使用CSS。

第三节 HTML5中国外发展现实状况

中国市场支持HTML5标准浏览器已经从不到2%发展到超出三成百分比，这一百分比将有望突破突破70%。越来越多PC浏览器开始重视而且支持HTML5发展同时，HTML5也越来越受到移动互联网重视。
相对于 PC 平台而言，移动平台一直是开发者更为关心，因为移动平台浏览器品种较少，版本也普遍集中在最新正式版。同时，因为移动设备更新换代速度要比 PC 愈加快，硬件支持和浏览器情况全部要比 PC平台情况愈加好。移动平台上主流 5 款浏览器(iOS Safari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0、Firefox for Android 15.0)，现在对标准支持度均高于 60%。其中表现居首是 Chrome for Android，而支持度相对较低 Android 系统自带浏览器 Android Browser 对 HTML5 支持度也在 60%以上。
另外，硬件加速促进了HTML5标准发展和应用。在使用 HTML5 开发时，开发者常常会谈到一个问题就是性能。使用 HTML5 动画、Canvas、WebGL 到底能否带来愈加好用户体验，和其实际性能密不可分。现在中国外主流浏览器均支持硬件加速，这对 HTML5 发展无疑是个好消息。能够支持硬件加速浏览器版本有：Chrome 18+、Firefox 4+、IE 9+、Safari 5.1+、Opera 12+。中国有360 安全浏览器、搜狗浏览器和QQ 浏览器。手机系统情况也比较乐观，主流智能手机系统 iOS、Android 和 Windows Phone 上原生浏览器全部已经支持硬件加速。Android 4.0+上 Chrome在硬件加速方面更是超越了原生浏览器表现。
年 12 月 17日，W3C 公布了 HTML5 和 Canvas 2D 两个标准完全定义版本，标志着 HTML5 标准已经在趋向稳定。在，支持 HTML5 PC 浏览器将会有一个较大增加。 除Chrome、Firefox 之外，微软推出 IE9、IE10 对HTML5 支持度全部大幅提升，相信 HTML5 大面积使用只是时间问题。另外，移动平台HTML5比PC平台发展愈加快。因为移动设备更新换代速达远远超出PC，而且硬件性能也能够完全支持HTML5。
很多大企业在HTML5 Canvas开发上下足了功夫， 或成为HTML5更普及十二个月。

第四节 画图工具

画图板简单灵巧，深得广大用户喜爱，其占用资源少、操作简单、功效等特点为用户小型图形开发工作带来了很多便利。当用户要处理部分要求不是很高工作时，能够利用画图工具来完成，比如实现部分简单操作如画直线，图片，图片图片等功效。
用过微软Windows操作系统人一定全部对Windows自带画图板很熟悉。同图像处理软件界“大哥大”Photoshop比起来，它即使不及Photoshop功效强大、内容丰富，不过作为Windows一直以来全部内带附件程序，它含有小巧玲珑、简单实用等其它绘图软件所不含有优点。同时它风格也被很多其它绘图软件所效仿。
Windows 画图程序一直伴伴随 Windows 各个版本，这个很简单，几乎没有什么用处程序拥有最基础绘图功效，很适适用来涂鸦。HTML5 Canvas 对象使在线绘图成为可能，即使 HTML5 还远未成熟，但大家已经迫不及待地用它设计部分让人惊叹应用。

第二章 相关技术介绍

第一节 Canvas元素介绍

Canvas元素最先由苹果企业Safari浏览器引入，以后Chrome和Firefox也全部支持了这一元素，现在该元素已被加入HTML5标准草案，而且得到了全部主流浏览器支持。
HTML5 Canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您能够控制其每一像素。Canvas 拥有多个绘制路径、矩形、圆形、字符和添加图像方法。
向 HTML5 页面添加 Canvas 元素并要求元素 ID、宽度和高度：
<canvas id="mycanvas" width="200" height="100"></canvas>
这么就可创建Canvas元素。

第二节 第一个Canvas程序实现

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="mycanvasTag" width="400" height="400"
style="background-color:blue;border:10px yellow solid"></canvas>
<br />
<a href="index.html">back</a>
</div>
</body>
</html>

这个 Canvas 宽度和高度均为 400 像素，边框为黄色，背景为蓝色。Canvas 上没有任何实际绘图。绘图经过属于 Canvas JavaScript 方法完成。

下面我们介绍下Canvas方法：

表2.1 Canvas方法介绍
方法
用途
getContext(contextId)
公开在 Canvas 上绘图需要 API。惟一（目前）可用 contextID 是 2d。
height
设置 Canvas 高度。默认值是 150 像素。
width
设置 Canvas 宽度。默认值是 300 像素。
createLinearGradient(x1,y1,x2,y2)
创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。
createRadialGradient(x1,y1,r1,x2,y2,r2)
创建一个放射状渐变。圆圈起始坐标是 x1,y1，半径为 r1。圆圈结束坐标为 x2,y2，半径为 r2。
addColorStop(offset,color)
向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生位置。offset 必需介于 0 到 1 之间。
fillStyle
设置用于填充一个区域颜色在这里就比如说，fillStyle='rgb(255,0,0)'.
strokeStyle
设置用于绘制一根直线颜色在这里就比如说，fillStyle='rgb(255,0,0)'.
fillRect(x,y,w,h)
填充一个定在 x 和 y，宽度和高度分别为 w 和 h 矩形。
strokeRect(x,y,w,h)
绘制一个定在 x 和 y，宽度和高度分别为 w 和 h 矩形轮廓。
moveTo(x,y)
将绘图位置移动到坐标 x,y。
lineTo(x,y)
从绘图方法结束最终位置到 x,y 绘制一条直线。

Canvas 元素本身是没有绘图能力。全部绘制工作必需在 JavaScript 内部完成：
<script type="text/javascript">
var c=document.getElementById("mycanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect (0, 0, 150, 75);
</script>
JavaScript 使用 ID 来寻求 Canvas 元素：
var c=document.getElementById("mycanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建 HTML5 对象，拥有多个绘制路径、矩形、圆形、字符和添加图像方法，现在还没有3d对象。
下面两行代码绘制一个红色矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect (0, 0, 150, 75);
fillStyle 方法将方块染成了红色，fillRect 则方法要求了形状、位置和尺寸。相类似就能够经过浏览器提供基础方法，构建出激感人心应用。

第三节 JavaScript及jQuery介绍

JavaScript是一个由NetscapeLiveScript发展而来原型化继承面向对象动态类型区分大小写用户端脚本语言，关键目标是为了处理服务器端语言，比如Perl，遗留速度问题，为用户提供更流畅浏览效果。当初服务端需要对数据进行验证，因为网络速度相当缓慢，只有28.8kbps，验证步骤浪费时间太多。于是Netscape浏览器Navigator加入了JavaScript，提供了数据验证基础功效。因为AJAX出现，JavaScript功效被越来越多丰富，能做事情也越来越多，是Web2.0时代象征。
一个完整 JavaScript 实现是由以下 3 个不一样部分组成：关键（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。
JavaScript一个关键功效就是面向对象功效，经过基于对象程序设计，能够用更直观、模块化和可反复使用方法进行程序开发。
jQuery是继prototype以后又一个优异JavaScript框架。它是轻量级JS库(压缩后只有21k) ，它兼容CSS3，还兼容多种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，而且方便地为网站提供AJAX交互。jQuery还有一个比较大优势是，它文档说明很全，而且多种应用也说得很具体，同时还有很多成熟插件可供选择。jQuery能够使用户HTML页面保持代码和HTML内容分离，也就是说，不用再在HTML里面插入一堆JS来调用命令了，只需定义id即可。现在，jQuery已经成为最流行JavaScript库，在世界前10000个访问最多网站中，有超出55%在使用jQuery。
jQuery包含以下特点：
① 动态特效；
② 异步AJAX；
③ 经过插件来扩展；
④ 方便工具 - 比如浏览器版本判定；
⑤ 渐进增强；
⑥ 链式调用；
⑦ 多浏览器支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+；
jQuery库是一个单独JavaScript文件，能够保留到当地或服务器直接引用，也能够从多个公共服务器中选择引用。有Media Temple、谷歌、Microsoft等多家企业给jQuery提供CDN服务，比较常见引用地址以下：
<script type="text/javascript" src=". com/ajax/libs/jquery/1.8/jquery.min.js"></script>
现在版本是1.9.0（截止1月）。
最常使用jQuery基础方法是.ready()方法：
$(document).ready (function () {
//script goes here
});
或其简写：
$(function () {
//script goes here
});
当DOM加载完就能够实施（比window.onload更早），在同一个页面里能够数次出现.ready()。
实例：为元素添加单击事件，发生对象隐藏效果。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready (function () {
$("p").click (function () {
$(this).hide ();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
结果：隐藏页面内<p>标签。
选择器：
jQuery 使用 sizzle引擎，支持CSS选择，Xpath选择等方法。以下列举了多个特征：
$("p") 选择全部 <p> 元素；
$("p.intro") 选择全部包含class为"intro" <p> 元素；
$("#demo") 选择 id为"demo" 元素；
$("[href]") 选择全部带有 href 属性元素；
$("[href='#']") 选择全部带有 href 值等于 "#" 元素；
$("[href!='#']") 选择全部带有 href 值不等于 "#" 元素；
$("[href$='.jpg']") 选择全部 href 值以 ".jpg" 结尾元素；
$("[href^='/imgaes/']") 选择全部 href 值以 /imgaes/" 开头元素；
更多具体信息请参见jQuery APISelectors部分。
事件处理：
直接绑定指定事件，事件类型即方法名，支持click、focus、blur、submit等。
$("#button").click (function () {
//script goes here
});
用on来绑定事件，off来解绑事件，第一个参数为事件名，第二个参数为回调函数。1.7.2版本开始支持。
$("#button").onclick (function (){
//script goes here
});
在1.7.1或更早版本，需要用bind/unbind（常规绑定），live/die（预绑定）来替换on/off。更多具体信息请参见jQuery APIEvents部分。
动态特效：
$("#msg").show ("fast");
$("#msg").hide ("slow");
$("#msg").fadeIn ();
$("#msg").fadeOut ();
以上代码实现一个ID为MsgjQuery对象渐入和淡出。函数接收参数除了快慢等，还能够接收整型，作为渐入或淡出完成时间，单位为MS。更多具体信息请参见jQuery APIEffects部分。

第四节 CSS3介绍

CSS即层叠样式表（Cascading Stylesheet）。 在网页制作时采取CSS技术，能够有效地对页面布局、字体、颜色、背景和其它效果实现愈加正确控制。 只要对对应代码做部分简单修改，就能够改变同一页面不一样部分，或页数不一样网页外观和格式。CSS3是CSS技术升级版本，CSS3语言开发是朝着模块化发展。以前规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为部分小模块，更多新模块也被加入进来。这些模块包含： 盒子模型、列表模块、超链接方法 、语言模块 、背景和边框 、文字特效 、多栏布局等。
CSS3带来无和伦比页面表现能力，而这些在以前只能靠图片，多层标签嵌套或JS才能实现，现在只需要几行CSS3就能实现，效率也比原来要高很多。

一、布局
Grid布局应用很广泛，最简单例子就是内容分栏显示。
对于这个布局复杂三栏网页来说，假如使用CSS3Grid布局话，我们只需这么写：
body {columns:3;column-gap:0.5in;}
img {float:pagetopright;width:3gr;}
其中，body部分申明页面为3栏，栏间距为0.5英寸；img中float属性指明图片浮动位置为页面右上角，而宽度为3个栏宽。只需这么两行CSS，就能够实现这个复杂布局。

二、边框
border-color：控制边框颜色，而且有了更大灵活性，能够产生渐变效果；
border-image：控制边框图象；
border-corner-image：控制边框边角图象；
border-radius：能产生类似圆角矩形效果；

三、背景
background-origin：决定了背景在盒模型中初始位置，提供了3个值，border, padding和content；
border：控制背景起始于左上角边框；
padding：控制背景起始于左上角留白；
content：控制背景起始于左上角内容；
background-clip：决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding；
border：会覆盖住背景；
padding：不会覆盖背景；
background-size：能够指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域宽度、高度，和background-origin位置决定；
multiple backgrounds：多重背景图象，能够把不一样背景图象只放到一个块元素里。

四、 特征
① 圆角表格，对应属性：border-radius。
② 以往对网页上文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效属性，而且不止加阴影这种效果。对应属性：font-effect。
③ 丰富了对链接下划线样式，以往下划线全部是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线颜色和位置进行任意改变。（还有对应顶线和中横线样式，效果和下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。
④ 在文字下点多个点或打个圈以示关键，CSS3也开始加入了这项功效，这应该在一些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。

五、颜色
HSL colors：除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前通常全部是作图时候用HSL色谱，但这么一来会包含更多颜色。H用度表示，S和L用百分比表示，比如HSL（0,100%, 50%）。
HSLA colors：加了个不透明度（Apacity），用0到1之间数来表示，比如hsla（0,100%,50%,0.2）。
Opacity：直接控制不透明度，用0到1之间数来表示。
RGBA colors：和HSLA colors类似，加了个不透明度。一直以来，浏览器透明一直无法实现单纯颜色透明，每次使用alpha后就会把透明属性继承到子节点上。换句话说，极难实现背景颜色透明而文字不透明效果。直到RGBA颜色出现这一切将成为现实。实现这么效果很简单，设置颜色时候我们使用标准RGBA（）单位即可，比如RGBA（255,0,0,0.4）这么就出现了一个红色同时拥有alpha透明为0.4颜色。经过测试Firefox3.0、Safari3.2、Opera10全部支持了RGBA单位。
Resize：能够由用户自己调整DIV大小，有horizontal（水平）vertical（垂直）或both（同时），或同时调整。假如再加上max-width或min-width话还能够预防破坏布局。

六、文字效果
text-shadow：文字投影，可能是因为MAC OSXSafari浏览器开始支持投影才特意增加。
text-overflow：当文字溢出时，用“…”提醒。包含ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，现在还是部分支持，但有趣是IE6竟然也支持。ellipsis-word能够省略掉最终一个单词，对汉字意义不大，inherit能够继承父级元素。

七、选择器
CSS3增加了更多CSS选择器，能够实现更简单不过更强大功效，比如：nth-child()等。
Attribute selectors：在属性中能够加入通配符，包含^,$,*等；
[att^=val]：表示开始字符是valatt属性；
[att$=val]：表示结束字符是valatt属性；
[att*=val]：表示包含最少有一个valatt属性。
其它模块：
media queries：感觉叫媒体选择比较适宜，能够为网页中不一样对象设置不一样浏览设备比如能够为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页；
multi-column layout：多列布局，让文字以多列显示，包含column-width、column-count、column-gap三个值；
column-width：指定每列宽度；
column-count：指定列数；
column-gap：指定每列之间间距；
column-rule-color：控制列间颜色；
column-rule-style：控制列间样式；
column-rule-width：控制列间宽度；
column-space-distribution：平均分配列间距。

八、影响
CSS3将完全向后兼容，所以没有必需修改现在设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3关键影响是将能够使用新可用选择器和属性，这些会许可实现新设计效果（譬如动态和渐变），而且能够很简单设计出现在设计效果（比如说使用分栏）。

第五节 开发工具DreamWeaver介绍

DreamWeaver是个原本由Macromedia企业所开发著名网站开发工具。它使用所见即所得接口，亦有HTML编辑功效。它现在有Mac和Windows系统版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本Dreamweaver了。 Dreamweaver自MX版本开始，使用了Opera排版引擎 "Presto" 作为网页预览。
Dreamweaver能够用最快速方法将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上颜色可设定最靠近网页安全色。对于选单，快捷键和格式控制，全部只要一个简单步骤便可完成。Dreamweaver能和您喜爱设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体利用步骤自然顺畅。除此之外，