HTML5完整教程

1、培训教程什么是HTML5？HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML4.01和XHTML1.0标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。HTML5时间表HTML5的八大新特性语义离线存储设备通用连接多媒体三维、图形与特效性能与集成CSS3语义思考：什么是语义化？语义化：是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.语义化的(X)HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏

2、览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。简化的文档类型和字符集 2021-11-16p 声明位于声明位于HTMLHTML文档中的最前文档中的最前面的位置，它位于面的位置，它位于 标签之前。标签之前。p该标签告知浏览器文档所使用的该标签告知浏览器文档所使用的HTMLHTML或或 XHTMLXHTML规范。规范。p在在HTML4HTML4中，中，标签可以声明三标签可以声明三种种 DTD DTD 类型，分别表示严格版本（类型，分别表示严格版本（StrictStrict）、过渡版本（）、过渡版本（TransitionalTransiti

3、onal）和基于框架（和基于框架（FramesetFrameset）的）的 HTML HTML 文档文档。HTML5的标签 2021-11-16HTML5的字符集 2021-11-16pHTML5HTML5的字符集也得到了简化，只需要的字符集也得到了简化，只需要使用使用UTF-8UTF-8即可，使用一个即可，使用一个metameta标记就标记就可以指定可以指定HTML5HTML5的字符集，代码如下：的字符集，代码如下：HTML5的字符集 2021-11-16pHTML5HTML5的字符集也得到了简化，只需要的字符集也得到了简化，只需要使用使用UTF-8UTF-8即可，使用一个即可，使用一个me

4、tameta标记就标记就可以指定可以指定HTML5HTML5的字符集，代码如下：的字符集，代码如下：语义化的文档标签pHTML5HTML5的设计者们认为的设计者们认为网页应该像网页应该像XMLXML文档和文档和图书一样有结构。图书一样有结构。p通常，网页中有导航、通常，网页中有导航、网页体内容、工具栏、网页体内容、工具栏、页眉和页脚等结构。页眉和页脚等结构。pHTML5HTML5中增加了一些新中增加了一些新的标记以实现这些网页的标记以实现这些网页结构，这些新标记及其结构，这些新标记及其定义的网页布局定义的网页布局 十个常用的新标签列表定义文章定义文章的侧边栏一组媒体对象以及文字定义figure

5、的标题定义页脚定义页眉定义导航 定义文档中的区段定义日期和时间被弃用的标签：、和。标签 2021-11-16p标签用于定义文档的页眉（介绍信息标签用于定义文档的页眉（介绍信息）。）。p使用使用标签的例子。标签的例子。欢迎光临我的网站欢迎光临我的网站我是黑龙江傲立我是黑龙江傲立网页的其他部分网页的其他部分. 2021-11-16标签 p 标签用于定义导航链接。标签用于定义导航链接。p 【例例1-171-17】 使用使用 标签的例子。标签的例子。欢迎光临我的网站欢迎光临我的网站我是黑龙江傲立我是黑龙江傲立首页首页简介简介联系方式联系方式网页的其他部分网页的其他部分.本文档创建于本文档创建于2012

6、-10-07 2021-11-16标签示例 标签 2021-11-16p 标签用于定义文档中的区段，例如标签用于定义文档中的区段，例如章节、页眉、页脚或文档中的其他部分。章节、页眉、页脚或文档中的其他部分。p使用使用标签的例子。标签的例子。 HTML5 HTML5是最新的是最新的HTML标准标准.标签 2021-11-16p标签用于定义文章或网页中的主要标签用于定义文章或网页中的主要内容。内容。p使用使用标签的例子。标签的例子。微软在发布微软在发布Windows Phone 8时曾表示，移时曾表示，移动版动版IE10在在HTML5上比起上比起IE9将会有长足的将会有长足的进步，看来他们并没有吹

7、嘘。根据外站进步，看来他们并没有吹嘘。根据外站WPCentral近日对各大浏览器进行的跑分测近日对各大浏览器进行的跑分测试，我们可以看到，试，我们可以看到，IE10的成绩是的成绩是IE9的两的两倍有余。倍有余。.标签 2021-11-16p 标签用于定义主要内容之外的其他内容。标签用于定义主要内容之外的其他内容。p 使用使用标签的例子。标签的例子。微软在发布微软在发布Windows Phone 8时曾表示，移动时曾表示，移动版版IE10在在HTML5上比起上比起IE9将会有长足的进步，看将会有长足的进步，看来他们并没有吹嘘。根据外站来他们并没有吹嘘。根据外站WPCentral近日对各大近日对各

8、大浏览器进行的跑分测试，我们可以看到，浏览器进行的跑分测试，我们可以看到，IE10的成绩的成绩是是IE9的两倍有余。的两倍有余。HTML5HTML5是最新的是最新的HTML标准。目前标准。目前HTML5的标准草案的标准草案已进入了已进入了W3C制定标准制定标准5大程序的第大程序的第1步。预期要到步。预期要到2022年才会成为年才会成为 W3C 推荐标准。推荐标准。HTML5无疑会成无疑会成为未来为未来10年最热门的互联网技术。年最热门的互联网技术。2021-11-16aside标签示例2021-11-16标签 p标签用于定义独立的流内容（图标签用于定义独立的流内容（图像、图表、照片、代码等等）

9、。像、图表、照片、代码等等）。p使用使用 元素为元素为 figure figure 添加添加标题。标题。 黄浦江上的的卢浦大桥黄浦江上的的卢浦大桥 拍摄者：拍摄者：W3School 项目组，拍摄时间：项目组，拍摄时间：2010 年年 10 月月 2021-11-16标签示例 2021-11-16标签 p标签用于定义区段（标签用于定义区段（sectionsection）或文档的页）或文档的页脚。通常，该元素包含作者的姓名、文档的创作日脚。通常，该元素包含作者的姓名、文档的创作日期或者联系方式等信息。期或者联系方式等信息。p使用使用标签的例子。标签的例子。 Posted by: W3School

10、Contact information: .2021-11-16标签示例 2021-11-16一个综合示例 网页标题网页标题 次级标题次级标题 提示信息提示信息 导航导航 链接链接1 链接链接2 链接链接3 文章标题文章标题 文章内容文章内容. 文章注脚文章注脚 相关内容相关内容 相关辅助信息或者服务相关辅助信息或者服务. 页脚页脚 2021-11-162021-11-16HTML5的新增内联元素 1 1标签标签 2 2标签标签 3 3标签标签 4 4标签标签 2021-11-16标签 p标签用于定义带有记号的文本。标签用于定义带有记号的文本。p使使标签的例子。标签的例子。目前目前HTML5的

11、标准草案已进入了的标准草案已进入了W3C制定标准制定标准5大大程序的第程序的第1步。预期要到步。预期要到2022年才会成年才会成为为 W3C 推荐标准。推荐标准。2021-11-16标签示例 2021-11-16标签 p 标签用于定义公历的时间（标签用于定义公历的时间（2424小时制）或日期小时制）或日期，时间和时区。，时间和时区。标签的属性如下：标签的属性如下：p datetimedatetime，用于指定日期，用于指定日期 / / 时间。如果不指定此时间。如果不指定此属性，则元素的内容给定日期属性，则元素的内容给定日期 / / 时间。其语法格式如时间。其语法格式如下：下：p pubdate

12、pubdate，用于指定指示，用于指定指示 元素中的日期元素中的日期 / / 时间是文档（或最近的前辈时间是文档（或最近的前辈 元素）的发布元素）的发布日期。其语法格式如下：日期。其语法格式如下：2021-11-16标签示例 p使使标签的例子。标签的例子。2013年春节是年春节是2013-02-102013年年 春节春节p目前所有主流浏览器都不支持目前所有主流浏览器都不支持 标签。标签。 2021-11-16标签 标签用于定义度量衡。仅用于已知最大和最小值标签用于定义度量衡。仅用于已知最大和最小值的度量。浏览器会使用图形方式表现的度量。浏览器会使用图形方式表现标签。标签。标签的属性说明如下：标

13、签的属性说明如下： highhigh，定义度量的值位于哪个点，被界定为高的值。，定义度量的值位于哪个点，被界定为高的值。 lowlow，定义度量的值位于哪个点，被界定为低的值。，定义度量的值位于哪个点，被界定为低的值。 maxmax，定义最大值。默认值是，定义最大值。默认值是 1 1。 minmin，定义最小值。默认值是，定义最小值。默认值是 0 0。 optimumoptimum，定义什么样的度量值是最佳的值。如果该值，定义什么样的度量值是最佳的值。如果该值高于高于 high high 属性，则意味着值越高越好。如果该值属性，则意味着值越高越好。如果该值低于低于 low low 属性的值，则

14、意味着值越低越好。属性的值，则意味着值越低越好。lvalue value 定义度量的值。定义度量的值。p目前目前IEIE浏览器不支持浏览器不支持 标签。标签。 2021-11-16标签 p 标签的例子。标签的例子。30%2021-11-16标签示例 ChromeIEEdge2021-11-16标签 标签用于定义定义一个进度条标签用于定义定义一个进度条。它的属性说明如下：。它的属性说明如下： maxmax，定义完成的值。，定义完成的值。l valuevalue，定义进度条的的当前值，如果不，定义进度条的的当前值，如果不指定指定valuevalue值，则显示一个动态的进度条值，则显示一个动态的进度

15、条。pInternet Explorer 9 Internet Explorer 9 以及更早的版本以及更早的版本浏览浏览器器不支持不支持 标签。标签。 2021-11-16标签 p使用使用标签的例子。标签的例子。下载进度：下载进度：85%处理中，请稍候：处理中，请稍候：2021-11-16标签示例 2021-11-16支持动态页面 1 1菜单菜单 2 2右键菜单右键菜单3 3在在标签中使用标签中使用asyncasync属性属性4 4标签标签 2021-11-16标签p在在HTML5HTML5中，可以使用中，可以使用标签定义菜单，多标签定义菜单，多用于表单中组织控件列表。用于表单中组织控件列表

16、。p 标签的常用属性如表标签的常用属性如表1-31-3所示。所示。 属性说明autosubmit如果为 true，那么当表单控件改变时会自动提交label文档的背景色type定义显示那种类型的菜单。可选值为context、toolbar和list，默认值是 list2021-11-16标签示例 新建新建 打开打开 保存保存 剪切剪切 复制复制 粘贴粘贴 2021-11-16标签示例2021-11-16使用标签定义菜单项 p 标签的常用属性如表所示。标签的常用属性如表所示。 属性属性说明说明label菜单项的标题菜单项的标题icon菜单项前面显示的图标菜单项前面显示的图标onclick指定单击此

17、菜单项时执行的指定单击此菜单项时执行的JavaScript代码代码p目前仅目前仅Firefox 8.0 Firefox 8.0 以及更高的版本支持以及更高的版本支持 标签。标签。2021-11-16使用标签定义菜单项 pHTML5HTML5支持在网页中创建和使用自定义的右键菜支持在网页中创建和使用自定义的右键菜单。在网页元素中可以使用单。在网页元素中可以使用contextmenucontextmenu属性指属性指定此元素使用的右键菜单。定此元素使用的右键菜单。2021-11-16标签示例请在框中右键点击，就可以看到快捷菜单！请在框中右键点击，就可以看到快捷菜单！ 本例只在本例只在 Firefo

18、x 中有效！中有效！2021-11-16标签示例2021-11-16Script脚本异步加载（无阻塞并发处理）pasyncasync属性是属性是HTML5HTML5的新属性。的新属性。p在在标签中使用标签中使用asyncasync属性可以指属性可以指定异步执行指定的脚本。也就是在加载定异步执行指定的脚本。也就是在加载网页的同时执行指定的脚本。网页的同时执行指定的脚本。p如果不指定如果不指定asyncasync属性，正常情况下，当属性，正常情况下，当浏览器在解析浏览器在解析HTMLHTML源文件时如果遇到外源文件时如果遇到外部的部的scriptscript，那么解析过程会暂停，并，那么解析过程会

19、暂停，并发送请求来下载发送请求来下载scriptscript文件，只有文件，只有scriptscript完全下载并执行后才会继续执行完全下载并执行后才会继续执行DOMDOM解析解析。2021-11-16p演示一个传统的执行演示一个传统的执行JavaScriptJavaScript脚本的例子。脚本的例子。Hello World!2021-11-162021-11-16需要等到外部脚本加载完成执需要等到外部脚本加载完成执行后，才加载剩余网页部分行后，才加载剩余网页部分2021-11-16p 使用使用asyncasync属性异步执行属性异步执行JavaScriptJavaScript脚本的例子。脚本

20、的例子。Hello World!2021-11-162021-11-162021-11-16标签 p 标签用于描述文档或文档某个部分的细节。标签用于描述文档或文档某个部分的细节。p 标签描述文档细节的例子。标签描述文档细节的例子。数据库文档说明数据库文档说明.本文档用于描述数据库结构本文档用于描述数据库结构.由开发部数据库小组维护。最后修由开发部数据库小组维护。最后修改于改于2012-10-152021-11-16标签 http:/ 数字字段滑动组件类型匹配除了这些，还有搜索进度条25%密钥输出10 + 5 = And so on正则匹配必填字段选项列表 增强的表单控件2021-11-16HT

21、ML5表单-新的 Input 类型emailurlnumberrangeDate pickers (date, month, week, time, datetime, datetime-local)searchcolor2021-11-16Input 类型类型 - emailemail 类型用于应该包含类型用于应该包含 e-mail 地址的输入域。地址的输入域。在提交表单时，会自动验证在提交表单时，会自动验证 email 域的值。域的值。2021-11-16Input 类型类型 - urlurl 类型用于应该包含类型用于应该包含 URL 地址的输入域。地址的输入域。在提交表单时，会自动验证在

22、提交表单时，会自动验证 url 域的值。域的值。Homepage: 2021-11-16Input 类型类型 - numbernumber 类型用于应该包含数值的输入域。类型用于应该包含数值的输入域。还能够设定对所接受的数字的限定：还能够设定对所接受的数字的限定：属性属性值值描述描述maxnumber规定允许的最大值minnumber规定允许的最小值stepnumber规定合法的数字间隔（如果 step=3，则合法的数是 -3,0,3,6 等）valuenumber规定默认值2021-11-16Input 类型类型 number（一般限定）（一般限定）Points: 2021-11-16Inp

23、ut 类型类型 number（多限定）（多限定）2021-11-16Input 类型类型 - rangerange 类型用于应该包含一定范围内数字值的输入域。类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。类型显示为滑动条。还能够设定对所接受的数字的限定：还能够设定对所接受的数字的限定：属性属性值值描述描述maxnumber规定允许的最大值minnumber规定允许的最小值stepnumber规定合法的数字间隔（如果 step=3，则合法的数是 -3,0,3,6 等）valuenumber规定默认值2021-11-16Input 类型类型 - range2021-11-

24、16Input 类型类型 - Date Pickers（日期选择器）（日期选择器）HTML5 拥有多个可供选取日期和时间的新输入类型：拥有多个可供选取日期和时间的新输入类型：date - 选取日、月、年选取日、月、年month - 选取月、年选取月、年week - 选取周和年选取周和年time - 选取时间（小时和分钟）选取时间（小时和分钟）datetime - 选取时间、日、月、年（选取时间、日、月、年（UTC 时间）时间）datetime-local - 选取时间、日、月、年（本地时间）选取时间、日、月、年（本地时间）2021-11-16Input 类型类型 - Date Pickers（

25、日期选择器）（日期选择器） 2021-11-16Input 类型类型 - Date Pickers（日期选择器）（日期选择器） Week: Month: Time: Date and time: Date and time local: 2021-11-16Input 类型类型 - Date Pickers（日期选择器）（日期选择器）2021-11-16Input 类型类型 - searchsearch 类型用于搜索域，比如站点搜索或类型用于搜索域，比如站点搜索或 Google 搜索。搜索。search 域显示为常规的文本域。域显示为常规的文本域。2021-11-16Input 类型类型 -

26、teltel 类型用于应该包含类型用于应该包含 手机号码的输入域。手机号码的输入域。在提交表单时，配合属性设置后，会自动验证在提交表单时，配合属性设置后，会自动验证 tel 域的值。域的值。2021-11-16Input 类型类型 - colorcolor类型用于颜色拾取。类型用于颜色拾取。2021-11-16Input 类型类型 - color2021-11-16HTML5表单-HTML5 表单元素HTML5 拥有若干涉及表单的元素和属性。拥有若干涉及表单的元素和属性。datalistkeygenoutputInput typeIEFirefoxOperaChromeSafaridatali

27、st1143.X3445NokeygenNo43.X3445NooutputNoNo9.5NoNo浏览器支持2021-11-16HTML5 表单元素-datalist 元素datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：Webpage: option 元素永远都要设置元素永远都要设置 value 属性。属性。2021-11-16HTML5 表单元素-datalist 元素2021-11-16HTML5 表单元素-keygen 元素key

28、gen 元素的作用是提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。Username: Encryption: 2021-11-16HTML5 表单元素-keygen 元素2021-11-16HTML5 表单元素-output 元素output 元素用于不同类型的输出，比如计算或脚本输出： function multi() a=

29、parseInt(prompt(请输入第请输入第1个数字。个数字。,0); b=parseInt(prompt(请输入第请输入第2个数字。个数字。,0); document.formsformresult.value=a*b; 两数的乘积为两数的乘积为:2021-11-16HTML5 表单元素-output 元素2021-11-16HTML5 表单元素-output 元素2021-11-16HTML5表单-HTML5 表单属性HTML5 新的表单属性。新的表单属性。本次只涉及 和 元素的新属性。新的新的 form 属性：属性：autocompletenovalidate新的新的 input 属

30、性：属性：autocompleteautofocusformform overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)height 和和 widthlistmin, max 和和 stepmultiplepattern (regexp)placeholderrequired2021-11-16新的 form 属性-autocomplete 属性autocomplete 属性。属性。autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。autocomplete 适

31、用于 标签，以及以下类型的 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。在某些浏览器中在某些浏览器中，需要，需要启用自动完成功能，以使该启用自动完成功能，以使该属性生效。属性生效。2021-11-16新的 form 属性-autocomplete 属性First name: Last name: E-mail: 2021-11-16新的 form 属性-autocomplete 属性2021-11-16新的 form

32、属性-autocomplete 属性2021-11-16新的 form 属性-autofocus 属性autofocus 属性。属性。autofocus 属性规定在页面加载时，域自动地获得焦点。注释：autofocus 属性适用于所有 标签的类型。2021-11-16新的 form 属性-autofocus 属性微数据(Microdata)一个页面的内容，例如人物、事件或评论不仅要给用户看，还要让机器可识别。而要让机器知会特定内容含义，我们就需要使用规定的标签和属性。HTML5微数据规范是一种标记内容以描述特定类型的信息，例如评论、人物信息或事件。每种信息都描述特定类型的项，例如人物、事件或评

33、论。例如，事件可以包含venue、startingtime、name和category属性。http:/ 评分:四星商户 618封点评离线存储Web存储(WebStorage)HTML5提供了两种在客户端存储数据的新方法：llocalStorage-用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期。lsessionStorage-用于存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，当会话结束后数据也随之销毁。以前，这些都是由Cookie完成的。但是Cookie有4KB的大小限制，而且会随HTTP请求一起被传递，无形中拖慢网页速度而且效率不高。lo

34、calStorage.length;localStorage.key(index);localStorage.setItem(foo, bar); localStorage.getItem(foo);localStorage.removeItem(foo);localStorage.clear();IndexedDataBase对于存储少量的数据，WebStorage能够很好的完成任务，但是对大量的结构化数据进行处理时，它就力所不及了，而这正是IndexedDB的应用所在。IndexedDB严格遵循W3C的同源策略，每个源都拥有独立的存储空间，每个存储空间内又可以创建多个数据库，每个数据库可以

35、包含多个表，每个表都是一个json对象列表，可以存储多个json对象，比如name:sonic,age:27。ApplicationCache使用ApplicationCache，你可以指定哪一个文件是浏览器缓存保留的并提供给用户离线使用的。这时候你的网站工作起来就像是线上一样，并且他们不会感觉到和真正在线使用有任何差异。那么，哪一部分文件是浏览器要保存的呢？这一切都定义在缓存清单文件中。CACHE MANIFEST# version 1.0.0#缓存 定义了哪些资源是浏览器可以缓存的CACHE:/html5/src/logic.js/html5/src/style.css/html5/src

36、/background.png#网络 定义了哪些资源是需要用户在线才能使用的NETWORK:*设备通用拖拽与拖放(Drag&Drop)与文件处理(FileAPI)过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的鼠标事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，还要不停地获取鼠标的坐标，不停的修改元素的位置，代码要堆很多，而且性能也很差，现在有了HTML5原生的Drag&Drop拖拽事件，再结合FileAPI中的FileReader，一切变得soeasy连接WebSocket现在，很多网站为了实现即时通

37、讯，所用的技术都是轮询。这种模式需要浏览器不断的向服务器发出请求，然而HTTP请求的header信息是非常长的，这样会占用很多的带宽和服务器资源。WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。能更好的节省服务器资源和带宽并达到实时通讯。在WebSocketAPI中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。桌面通知(Notifications)通过桌面通知系统，网站可以在用户桌面弹出一条通知，无论用户是否浏览当前网页，甚至最小化了浏览器，通知均可到达用户桌面。if (window.web

38、kitNotifications.checkPermission() = 0) var title = 领跑HTML5支持 傲游升级自主内核, text = 桌面通知时HTML5的独门秘籍; window.webkitNotifications.createNotification(, title, text).show(); 多媒体音频和视频(Audio+Video)Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。三维、图形与特效Canvas画布元素传统的网页，总是使用GIF或者JPEG来显示图像，这种图形是需要事先画好的“静

39、态”的图像。而Canvas，则是用Javascript的一种绘图手段。可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。 var ctx = document.getElementById(canvas).getContext(2d); ctx.fillRect(20, 25, 150, 100); ctx.beginPath(); ctx.arc(220, 110, 100, Math.PI * 1/2, Math.PI * 3/2); ctx.lineWidth = 15; ctx.lineCap = round; ctx.strokeStyle = rgba(255, 127,

40、 0, 0.5); ctx.stroke();WebGLWebGL是一种3D绘图标准，有别于过往需加装浏览器插件，透过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持；第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。性能与集成XMLHttpRequest2作为XMLHttpRequest的改进版，XMLHttpRequestLevel2在功能上有了很大的改进。支持跨源XMLHttpReq

41、uest和进度事件（Progressevents）。计算上传进度：xhr.upload.addEventListener(progress, function (e) var pc = parseInt(100 (e.loaded / e.total * 100);progress.style.backgroundPosition = pc + %;CSS3CSS选择器(CSSSelector)属性选择器Eatt=val匹配属性att的值以val开头的元素Eatt$=val匹配属性att的值以val结尾的元素Eatt*=val匹配属性att的值包含val字符串的元素结构性伪类E:nth-chi

42、ld(n)匹配父元素的第n个子元素，第一个编号为1E:nth-child(odd)匹配父元素的奇数个子元素E:nth-child(even)匹配父元素的偶数个子元素反选伪类E:not(s)匹配不符合当前选择器的任何元素同级元素选择器EF匹配任何在E元素之后的同级F元素完整的CSS3选择器：/TR/css3-selectors/#selectors颜色(Color)透明度：opacity: 0.1;opacity: 0.5;opacity: 0.9;RGBA色彩模式：color: rgba(255, 0, 0, 0.75);PS: RGBA是在RGB的基础上多了控制alpha透明度的参数。HSL色彩模式：color: hsl(0, 100%, 50%);PS: HSL色彩模式是工业界的一种颜色标准，HSL分别代表色调，饱和度，亮度三个通道。分栏(Columns)column-count: 3;c