查字典图书网
查字典图书网
HTML作为一种标记语言（markup language），设计和制作网站是其最为常见的一种应用。很多人都有过使用HTML的相关经验，但是，当大家面对HTML5这样一种全新的标记语言标准时，必定要问：利用HTML5做网站到底有什么好处？与HTML 4相比，HTML5又有哪些进步？进步的原因是什么？学习HTML5的难点又在哪里？Web设计师又应该如何应对这一变化？下面将就这些问题展开探讨，并给出一些实例，同时也给出作者对搜索引擎优化（SEO ）带来问题的思考，给出大家比较熟悉和习惯的开发环境，供读者参考。 注意 本章是从传统网页的角度介绍如何使用HTML5设计网站，不涉及移动设备和移动互联网 上的相关设计和开发（移动互联网的相关内容会在第5章中介绍）。 1.1 大多数人不了解HTML5时代的网页设计 也许你从来没有做过网站，也许你已经用HTML 4和CSS2制作了大量Web 2.0时代的网页和网站，也许你已经非常精通DIV+CSS的网页设计与制作模式，但是，HTML 5的出现将让所有的人都站在同一个新的起跑线上。 在了解和学习HTML5的过程中，我们认为，使用HTML5制作一个网站，恐怕是很多网页设计师（哪怕是有经验的网页设计师）需要重新认真学习的。 为了保证相关的新特性能够在不被支持的时候也能完整地显示相关的内容，业内人士提出了两种说法：一个是优雅降级（Graceful Degradation，有时也叫平稳退化），另一个是渐进增强（Progressive Enhancement）。这两种说法都是从用户体验入手的：前者保障用户体验 ，假定在当前浏览器不支持的情况下确保用户依然可以完整地查看内容；后者提高用户体验，假定在当前浏览器支持的情况下，确保用户可以获得最好的内容展示效果。 一般有经验的网页设计师会认为：我已经能熟练使用和掌握Photoshop、Fireworks，甚至还会使用Dreamweaver、Visual Studio等网页设计与制作工具，为什么还说我不懂HTML5的网页设计呢？确实如此，我们可以毫不客气地说，HTML5诞生后，你真的不懂网页设计了！ 下面说一下你不懂HTML5网页设计的10大理由。 阴影代码可控。以前，在用HTML 4制作网页的时候，因为无法在网页中直接制作阴影和圆角，所以大量网页效果都是美工设计好之后直接定格在图片中的。而现在HTML5将改变现有的网页设计与制作的工作模式，设计人员凭着一张PNG或者PSD设计图中的相关尺寸、角度等数据，就可以直接用CSS制作还原出设计稿。请注意：在这里，传统的切图与拼接工作会减少，但图片中的位置数据将被高度重视，用于设计还原。 动画简单易懂。以前，制作一个简单的动画效果必须要依赖JavaScript和Flash，编写大量的脚本，或者制作动画帧。而现在，依赖强大的CSS3动画属性将快速高效地开发出各种动画效果，甚至3D效果的制作都将是一件轻而易举的事情。 渐变数值化操作。以前，制作一个渐变或渐进效果需要使用图形设计软件做好线性渐变效果，定了就不能随便改，还要控制图片的尺寸，以防效率不高。而现在，使用一个简单的线性命令就可以轻松搞定一切。制作人员要做的就是关注几个转换点的位置与数值而已。 字体图片矢量化。以前，制作一个带有个性化字体的Web效果需要用图片来辅助完成。而现在，强大的CSS3网络字体功能将把一切字体图片都还原成文字元素，而不再需要依赖图片。仅凭这一点，制作人员就可以在大规模开发中大大提高工作效率，减少大量重复的美工劳动。 表单验证轻松搞定。以前，制作一个表单提交页面，需要各种验证与判断，现在则只需要在标签内使用自带的属性和正则表达式，就能解决问题。 数据类型扩大一倍。大量新增的input属性带来的更加友好的用户界面，是以前需要花费巨大的精力与成本去实现的。可以毫不夸张地说，从一个小小的input标签属性的变化就可以预见HTML5应用的美好前景。 行业工作流程需要重组。以前，制作一个网站的流程是：美工设计好效果图，客户和美工反复商量、确认、修改，开发人员最终完成制作并上传至服务器。在这个过程中，客户和美工可能常会为一个像素（pixel）的问题纠缠不清，而切图人员和程序员也可能在分解效果图时因为粗心而导致效果略有出入。在网站上线后，前端的各种用户体验会逼迫设计人员再次修改。现在，这样的工作模式将会改变。 个人职业生涯重新定位。大部分网页设计人员都是平面美工，而HTML5独有的3D Web技术将会给美工带来全新的挑战。如何展现一个3D网页，如何让交互的用户体验更好，将是令设计人员最为头疼的事情。当然，这可能也是最有意思、最有价值的事情。 原生支持无需插件。以前网页中对音频和视频的处理都会依赖各种插件来完成，这一直是使用HTML 4标准进行网页设计时的一个遗憾。但是，现在HTML5对音频和视频的处理有了强大的支持，audio和video标签就是专门为此而诞生的。各种可控的属性、预载、插页功能都令人激动不已，因为我们知道原生的意义重大。 对Web设计人员的要求更高。一直以来，人们都认为网页设计人员不必会动态脚本语言，甚至不必会网页切图。现在，HTML5标准将赋予网页设计人员更多的工作和使命、更高的要求、更为广博的知识结构、更有想象力的设计灵感¬。 朋友，不必紧张！一个新的技术时代来临的时候，基本上相关技术人员都会比较茫然，同时技术人员也会相对缺乏。比如，在2000年，大部分美工都是从平面美工转过来的，真正专业的网页美工并不多，更没有几个人在设计网页的时候会考虑人体工程、视觉习惯和承受能力等问题。再比如，2005年至2011年，很多美工经历了技术的演进后，为了能够适应用户的需求，在掌握了Photoshop、Fireworks、Dreamweaver和Flash等网页设计与制作工具后，又逐渐要求自己能够会DIV+CSS切图、JavaScript脚本编写等。但是，他们依然甚少有人可以在动画、HTML+CSS制作、JavaScript、用户交互与体验设计等多个方向都表现优秀。 一个可能天天都会看8小时以上的页面效果，与一个在高速公路边以时速140公里左右闪过，最多看5秒钟的广告牌，这两者在设计思路、表达方式和颜色效果上有区别吗？答案是：有，而且有很大的区别。同样，在移动互联网时代，用户可能会利用琐碎时间来使用和查看设备内容，用手指和其他部位来操作设备，这些都是没有任何经验可以借鉴的。只有反复体验，才有可能设计出好的作品。 前端工程师的岗位应运而生，但杰出者并不多。 HTML5向网页设计者提供了强大的表现能力和极其丰富的表现效果，它需要网页设计者有充分的想象力和实现能力。大胆地想象，大胆地创意吧，在HTML5的表现中，无论怎么大胆都不为过。 苹果公司的精神领袖乔布斯说过：“网页将为你的手指而设计。” HTML5标准的出现意味着，对于网页设计而言，现在是最好的时代，也是最坏的时代。 1.2 HTML5带来的网页结构、设计风格及理念的变化 毋庸置疑，一个熟练掌握HTML 4的技术人员（包括前端工程师和后台开发人员）在长时间的学习和工作后，都会对工程项目中一些常见的效果、风格和难点有所掌握。大多数时候，HTML 4的技术瓶颈决定了技术人员能做到哪一步，能做出什么样的效果，能实现什么样的项目。 HTML5在音频、视频、动画、应用、页面效果和开发效率等方面给网页结构带来了巨大的变化，对传统网页设计风格及相关理念带来了冲击。本节将试图预测未来网页设计及相关应用的一些风格和特点。 1.2.1 HTML 4时代的几个特征 为了辅助读者更好地对比两个不同时代的东西，我们特意总结了一下HTML 4时代的几个特征，供大家参考。 Web的head区域声明还不够细致，不适用于所有媒体，如手机、平板电脑等新出现的设备。 Web的body区域过于粗放，除了div和table外，再没有其他更好的标签用于表示更加清晰的页面结构。 缺少圆角、阴影、渐进等特效的快速处理方法 。 缺少简单动画的快速高效处理方法。 缺少专门处理音频和视频的标签。 对表单数据处理缺少验证和过滤。 对本地存储缺少管理和控制能力。 网页不能高效实时通信。 网页上不能直接显示3D动画，总是要借助其他插件。 1.2.2 一个典型的HTML5页面 为了让读者更好地对HTML5的网页有一个简单的理解与认识，也为了让读者能够顺利读懂HTML5网页代码的准确意思，我们在代码清单1-1的页面结构代码的每行代码结束后都加了注释。（如果在阅读过程中有不解的地方，也不要紧，这只是让读者对HTML5的页面结构有一个基本的了解。） 代码清单1-1 <!DOCTYPE html> <!-- 声明文档结构类型 --> <html lang=zh-cn> <!-- 声明文档文字区域--> <head> <!-- 文档的头部区域 --> <meta charset=utf-8> <!-- 文档的头部区域中元数据区的字符集定义，这里是utf-8，表示国际通用的字符集编码格式 --> <!--[if IE]><![endif]--> <!-- 文档的头部区域的兼容性写法 --> <title>一个不带CSS样式的HTML5布局</title> <!-- 文档的头部区域的标题。这里要注意，这个title的内容对于SEO来说极其重要--> <!--[if IE 9]><meta name=ie content=9><![endif]--> <!-- 文档的头部区域的兼容性写法 --> <!--[if IE 8]><meta name=ie content=8 ><![endif]--> <!-- 文档的头部区域的兼容性写法 --> <meta name=description content=一个不带CSS样式的HTML5布局> <!-- 文档的头部区域元数据区关于文档描述的定义 --> <meta name=author content=秀野堂主> <!-- 文档的头部区域元数据区关于开发人员姓名的定义 --> <meta name=copyright content=HTML5研究小组> <!-- 文档的头部区域元数据区关于版权的定义 --> <link rel=shortcut icon href=favicon.ico> <!-- 文档的头部区域的兼容性写法 --> <link rel=apple-touch-icon href=custom_icon.png> <!-- 文档的头部区域的apple设备的图标的引用 --> <meta name=viewport content=width=device-width, user-scalable=no > <!-- 文档的头部区域对于不同接口设备的特殊声明。宽=设备宽，用户不能自行缩放 --> <link rel=stylesheet href=main.css> <!-- 文档的头部区域的样式文件引用 --> <!--[if IE]><link rel=stylesheet href=win-ie-all.css><![endif]--> <!-- 文档的头部区域的兼容性样式文件引用写法 --> <!--[if IE 7]><link rel=stylesheet type=text/css href=win-ie7.css><![endif]--> <!-- 文档的头部区域的IE7浏览器的兼容性写法 --> <!--[if lt IE 8]><script src=http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8. js></script><![endif]--> <!-- 文档的头部区域的关于让IE8也兼容HTML5的JavaScript脚本（本书作者希望读者可以少考虑兼容性， 多做技术研究） --> <script src=script.js></script> <!-- 文档的头部区域的JavaScript脚本文件调用 --> </head> <body> <header>HTML5文档的头部区域</header> <nav>HTML5文档的导航区域</nav> <section>HTML5文档的主要内容区域 <aside> HTML5文档的主要内容区域的侧边导航或菜单区 </aside> <article> HTML5文档的主要内容区域的内容区 <section>以下是一个section和article的嵌套，循环表现章节与内容之间的父子关系，包 含关系。 <aside> </aside> <article> <header>HTML5文档的嵌套区域，可以对某个article区域进行头部和脚部的定义。 这样做，可以有非常清晰和严谨的文档目录结构关系。 <footer> </article> </section> </article> </section> <footer>HTML5文档的脚部区域</footer> </body> </HTML> 在浏览器中执行上述代码后，效果如图1-1所示。 图 1-1 注意 由于是HTML5代码，请注意使用支持HTML5的浏览器，本例使用Chrome浏览器调试。关于HTML5开发环境和调试环境的具体内容，可参见1.6节。 1.2.3 小结 从上面的HTML页面代码结构看，HTML5网页新增的标签规范了页面结构。 本例给出了对IE7、IE8的兼容性支持，但本书后续部分将不再为IE6、IE7、IE8提供兼容性代码示例。若有需要，读者可以去微软官方站点查询，例如MSDN等。 为了更好地适应全球用户的访问，增强用户体验，请注意使用UTF-8编码，并在保存文件的时候也使用UFT-8编码，以免导致兼容问题，产生错误。如果使用GB2312，则请使用ANSI编码格式保存文件。 1.3 HTML5带来的标签变化 自从1999年以来，在HTML的浏览器端，执行与解释工作一直都未有革命性的突破。现在，为了将全世界使用的HTML代码规范起来，更好地说明信息的结构与内容，W3C 推出了HTML5的相关标准与定义。 W3C对HTML的理解与定义是与时俱进的，因此标准编写小组在总结现有的情况后，对现有的标签、属性和事件进行了增加、删除和修改，为未来网页设计与制作提供了更为方便的标签，使得网页呈现更炫丽的表现效果。本章将与之前的HTML标准进行对比，指出到目前为止HTML5标准中标签、属性和事件的变化。 1.3.1 什么是标签 标签（tag）是HTML语言最基本的元素和组成部分，它使一个网页分出范围、内容区、解释区以及各种内容的引用。简单地说，标签是使网页内各种内容互相区分，使内容与数据更加有序的、特殊的、约定好的符号。 作为一种标记语言，HTML有着自己的规范。长久以来，HTML语言因为被浏览器全面卓越地兼容而产生了大量的应用。这不仅影响了世界，同时也吸引了大量的开发人员加入其中。与此同时，HTML在浏览器端应用的延伸引发了一系列的变化和问题。这将是本书探讨的一个重要话题，也是Web App产生的自然推动力。 在标记语言发展的过程中，出现了大量的分类，如VML、UML、MML、CML、XHTML、XML等。这里有必要介绍一下XML的概念，因为这可能是最容易混淆的一个概念。 XML有两个定义：一个是eXtensible Markup Language，即可扩展标记语言，这是有序数据格式的一种，也是被广泛应用的一种中间件数据格式；另一个是X Markup Language，把所有的标记语言作为一个分类，统称为XML，因此XML又可以是一个标签语言的集合。 1.3.2 标签的分类 以往，人们在制作网页的时候，基本上不考虑标签与标签之间的关系，只求高度还原网页设计效果图和设计意图，并不追求Web本身在数据集合和数据存储上的意义与规范。再加上浏览器强大的兼容性，因此很多Web App在真正发布的时候，都存在结构无序，信息噪声和标签混乱的情况。 经过10多年的准备与积累，W3C公开对HTML的标签进行分类，这样做带来了以下几个好处。 使Web页面的内容更加有序和规范。 使搜索引擎更加容易按照HTML5规则识别出有效内容。 使Web页面更接近于一种数据字段和表。（所有的header、footer、article、section等都成了天然的数据集与字段。） 从整个世界的角度说，信息和知识将更加有序。 截至目前为止，HTML5新增了27个标签，废弃了16个标签，具体介绍可参见附录A。 下面我们根据HTML5现有的标准规范，把HTML5的标签按优先等级定义为结构性标签、级块性标签、行内语义性标签、交互性标签 4大类（此处仅列出一些新增的HTML标签供大家理解）。 1. 结构性标签 结构性标签（construct tag）主要负责Web的上下文结构的定义，确保HTML文档的完整性，这类标签包括以下几个。 section。用于表达书的一部分或一章，或者一章内的一节。在Web页面应用中，该标签也可以用于区域的章节表述。 header。页面主体上的头部，注意区别于head标签。这里可以给初学者提供一个判断的小技巧：head标签中的内容往往是不可见的，而header标签往往在一对body标签之中。 footer。页面的底部（页脚）。通常，人们会在这里标出网站的一些相关信息，例如关于我们、法律申明、邮件信息、管理入口等。 nav。是专门用于菜单导航、链接导航的标签，是navigator的缩写。 article。用于表示一篇文章的主体内容，一般为文字集中显示的区域。 2. 级块性标签 级块性标签（block tag）主要完成Web页面区域的划分，确保内容的有效分隔，这类标签包括以下几个。 aside。用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单页面显示上看，就是侧边栏，可以在左边，也可以在右边。从一个页面的局部看，就是摘要。 figure。是对多个标签进行组合并展示的标签，通常与figcaption联合使用。 code。表示一段代码块。 dialog。用于表达人与人之间的对话。该标签还包括dt和dd这两个组合标签，它们常常同时使用。dt用于表示说话者，而dd则用来表示说话者说的内容。 3. 行内语义性标签 行内语义性标签（in-line tag ）主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础，这类标签包括以下几个。 meter。表示特定范围内的数值，可用于工资、数量、百分比等。 time。表示时间值。 progress。用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监视。 video。视频标签，用于支持和实现视频（含视频流）文件的直接播放，支持缓冲预载和多种视频媒体格式，例如MPEG-4、OggV和WebM等。 audio。音频标签，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频媒体格式。 4. 交互性标签 交互性标签（interactive tag）主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，这类标签包括以下几个。 details。用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如点击）与legend交互才会显示出来。 datagrid。用来控制客户端数据与显示，可以由动态脚本即时更新。 menu。主要用于交互菜单（这是一个曾被废弃现在又被重新启用的标签）。 command。用来处理命令按钮。 1.3.3 近十几年来的HTML 学习HTML5时，首先必须知道HTML在1999年后的历史（虽然HTML源自1991年），这对于了解整个HTML的全局和框架体系有着非常重要的意义。下面先来看一组数据。 从1999年至2011年，HTML的标签已经有12年没有重大变动。 从1999年至2011年，全球浏览器的种类增加了至少20种。 从1999年至2011年，全球网页的数量增加了1000万。 从1999年至2011年，全球网民的数量增加了5000倍。 从1999年至2011年，全球网站的数量增加了10 000倍。 1.3.4 Web的变化趋势 未来Web页面的发展明显具备以下几个趋势。 对Web页面的结构将会出现更加准确的定义。也就是说，页面的表现越来越丰富，但从基本结构上看（即从代码上看）会越来越清晰。 因为行内样式（in-line style）会干扰HTML代码的整洁度，所以行内样式将会越来越不受欢迎。 触摸（touch）与移动（mobile）将是未来网页的发展方向。也就是说，应用越人性化、越简单和高效，就会越受用户喜爱。 客户端与服务器端更加紧密。客户端完成的运算越来越多。所谓瘦服务端战略（参见第7章）、浏览器即操作系统的概念等，正在一一变成现实。 1.4 HTML5带来的表单数据内容进化 HTML5 Web Forms 2.0是对目前Web表单的全面提升，它在保持了简便易用的特性的同时，增加了许多内置的控件或者控件属性来满足用户的需求，并且同时减少了开发人员的编程工作。 HTML5 Web Forms 2.0内置的表单校验系统为不同类型的输入控件提供了新的属性，以控制这些控件的输入行为，比如我们常见的必填项属性required，以及为数字类型控件提供的max、min属性等。而在提交表单的时候，一旦校验错误，浏览器将不执行提交操作，而是显示相应的检验错误信息。 Web表单是网页中常见的应用。网站注册、登录、内容发布、修改、论坛讲座，处处都有Web表单的身影。表单担负着大量的用户和Web后台更新交互信息的任务。 每一个Web开发人员都或多或少地操作过Web表单，使用它收集、整理用户信息，或提供用户发布言论、问题的界面等。而在实际工作中，一些在用户看起来最平常不过的功能，比如说输入类型检查、表单校验、错误提示等，Web开发人员却需要花费大量精力利用JavaScript和DOM编程来实现。虽然随着Ajax的流行，出现了一些JavaScript的工具库，比如Dojo、YUI、jQuery等，它们都提供了方便的JavaScript 部件或者API来减轻开发人员的负担，但是这远远不够，其应用的方便程度不高，而复杂程度却急剧加大。另外，由于不是浏览器原生的功能，在应用时往往还会有一些意想不到的bug。 HTML5的表单支持改变了这一切！下面让我们来细细品味HTML5的表单支持的变化，HTML 10多年来的精华全在于此了。 注意 我们在这里使用了变化和进化这两个不同的词，说明这一节中要介绍的内容，希望读者能够细细体会。 1.4.1 数据提交格式的变化 数据提交格式以前有两种。第一种是动态文件，数据以字符串格式提交。enctype属性指定了表单数据向服务器提交时所采用的编码类型，默认值是"application/x-www-form- urlencoded"。具体代码如下： <form action="XXX.php" method="post" enctype="application/x-www-form-urlencoded" id="test"> <input type="text" name="user_name"> <input type="submit" name="submit" value="提交"> </form> 第二种是动态文件，数据以二进制格式传输，提交后需要重新转换格式，具体代码如下： <form action="XXX.php" method="post" enctype="multipart/form-data" id="test"> <input type="file" name="user_pic"> <input type="submit" name="submit" value="提交"> </form> 其中enctype="multipart/form-data"告诉服务器，客户端传来的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法。 现在增加一种动态文件，form的内容将会以XML的形式提交，具体代码如下： <form action="XXX.php" method="post" enctype="application/x-www-form+xml" id="test"> <input type="text" name="user_name"> <input type="submit" name="submit" value="提交"> </form> 这不是单纯的数量上的增加，这意味着，数据的提交从单纯的线性字符串走向结构性的对象数据。（其实，也可以说得再直白一点，就是一种类似JSON数据的提交。）服务器端将接收到这样的XML格式的表单数据： <submission> <field name="user_name" index="0">Peter</field> </submission> 1.4.2 数据提交范围的变化 在以往的Web表单提交概念中，所有的表单提交元素必须在<form>和</form>之间。而现在，表单可以定向索引，提交方式也更加灵活。但是，浏览器对于HTML5标准下的<form></form>标签有了新的规范和约束。在制定一个表单时，要求上下级严格对称标签，否则表单不生效，无法正则触发submit事件。下面通过实例简要说明一下过去的代码、新的代码和新的夸张一点的代码的特点。 过去的代码如下： <form action="XXX.php" method="post" enctype="application/x-www-form-urlencoded" id="test"> <label for=user_name>用户名</label><input type="text" name="user_name"> <label for= user_password>密码</label><input type="password" name="user_password"> <input type="submit" name="submit" value="提交"> </form> 新的代码如下： <form action="XXX.php" method="post" enctype="application/x-www-form-urlencoded" id="test"> <label for=user_name>用户名</label><input type="text" name="user_name"> <label for= user_password >密码</label><input type="password" name="user_password"> <input type="submit" name="submit" value="提交"> </form> <label for=user_address>地址</label><input form="test" name="user_address"> 这种游离于form标签之外的表单提交形式，有助于用户不拘泥于页面的结构，可以将表单数据在任意范围内提交出去。 新的夸张一点的代码如下所示： <form action="XXX.php" method="post" enctype="application/x-www-form-urlencoded" id="test"></form> <label form="test" for=user_name>用户名</label><input type="text" name="user_name"> <label form="test" for= user_password >密码</label><input type="password" name= "user_password"> <input form="test" type="submit" name="submit" value="提交"> <label form="test" for=user_ address >地址</label><input form="test" name="user_ address"> 这样的页面代码也是正确的、可以执行的。如果你做过Web表单设计，你一定知道这样做的好处与意义。如果你从来没有接触过表单设计与提交，那就试着了解一下这样做的好处吧。当用户需要在页面的多个位置向服务器端提交数据时，开发者可以通过input标签中新增的form属性来指定要提交的表单，而不必在多个地方设置表单。总而言之，就是在过去，一个页面是一个容器，表单在容器中必须以<form>标签开始，以</form>标签结束，而且是独立存在的，两个<form>标签不能互相交叉。现在，页面中有多个表单，而且多个表单中的内容可以互相交替存在，互不影响，开发者更加自由。 1.4.3 表单数据类型的增加 新增的表单数据类型有以下几种。 <input type=url>这是网址专用的数据类型。 <input type=email>这是电子邮件专用的数据类型。 <input type=date>这是日期专用的数据类型。 (date, month, week, time, datetime, datetime-local)<input type=number>这是数字专用的数据类型。 <input type=range>这是滑动条（表示区间、范围等）。 <input type=search>这是搜索框。 <input type=color>这是颜色。 <input type=telephone>这是电话类型。 图1-2和图1-3是各类数据类型的综合应用截图。 图 1-2 图 1-3 注意 在提交表单时，Opera浏览器中必须有name属性，否则会不起作用。 也许，以后还会有新的数据类型出现，但是现在这几个已经非常给力了。 1.4.4 表单属性和验证方式的进化 在HTML5的众多变化中，表单数据合法性和有效性验证是极为重要的一部分。实践证明：大量安全问题是因为表单数据没有进行合法性和有效性验证而引起的。由于表单数据没有进行合法和有效性验证而被攻击和入侵，进而导致数据泄露和安全事故，对政府、企业和个人等都造成了巨大的损失。 同时，也有很大一部分设¬¬计师和制作人员，由于不太会编写浏览器端的数据验证程序，也因为各种原因不太会使用网上的一些框架，导致有些产品缺少对表单数据进行合法性和有效性验证，留下了安全隐患。 鉴于此，HTML5在表单属性和验证其合法性方面进行了规范，大大地节省了浏览器端的代码量，提高了代码效率，也统一了安全问题。虽然服务器端依然需要验证，但已经有效地从两端（客户端和服务器端）中的一端解决了问题。因此，我们更愿意称之为进化，而不是变化。 下面我们将一一讲解其重要属性。正则表达式部分我们只作一些常用的内容过滤介绍，有兴趣的读者可以深入研究一下。 (1) 必填项属性required。防空白提交的写法可以是 <input type=text required> 或者 <input type=text required=yes> (2) 占位属性placeholder，即还未输入内容的input中默认显示的占位字符。具体写法如下： <input type=text placeholder="请输入你的姓名"> (3) 数字类型控件提供的max、min属性。 (4) 正则表达式属性pattern。正则表达式判断只能填写a～z、A～Z和0～9内的字符，具体代码如下： <input type=text pattern=[ a-zA-Z0-9]> (5) data属性，可外联数据源，例如： <select data="http://domain/数据源文件"></select> (6) 自动完成属性autocomplete。这是一个双向属性，它开启时可以帮助用户尽快完成表单填写，关闭后又可以防止泄露个人隐私数据。 如果希望替用户在第二次填写表单时能够快速填写完单，节省时间，则可以设定autocomplete 的值为on。具体写法如下： <input type="text" name="name" autocomplete="on" > 如果希望整个表单都能够自动完成，则可以这样写： <form action=" " method=" " autocomplete="on"> 如果不希望替用户保存电子邮件地址，则可以设定autocomplete 的值为off，用来防止恶意猜想用户信息，具体写法如下： <input type="email" name="email" autocomplete="off" > (7) 步长设定属性step。该属性可以限制输入的数字，step为上一个数字与下一个数字的间隔，例如： <input type="number" max="9" min="0" step="2"/> (8) 其他新增属性。除了上述几个属性外，还有几个新增属性，简要介绍如下。 onerror。当发生错误时运行脚本。 onhaschange。当发生变化时运行脚本。 oncontextmenu。当触发上下文菜单时运行脚本。 onformchange。当表单改变时运行脚本。 onforminput。当表单获得用户输入时运行脚本。 oninput。当元素获得用户输入时运行脚本。 oninvalid。当元素无效时运行脚本。 1.4.5 文件上传控件和重复模型的应用 以前的文件上传控件一直都是一次只能上传一个文件，后来虽然有各种Flash或者JavaScript特制出来的多文件上传系统，但是其往往要依赖插件或者庞大复杂的DIV层。改进后的文件上传控件可以使用一个控件上传多个文件，并且设计人员可以规定上传文件的类型（accept），甚至可以设定每个文件上传时最大的大小（maxlength）。这与我们在桌面应用程序上常见的上传功能基本是一模一样，但这在整个HTML5标准体系中只是冰山一角。 另外，HTML5提供一套重复机制来帮助我们构建一些重复输入列表，其中包括添加、删除、上移、下移之类的按钮。通过这一套重复机制，开发人员可以非常方便地实现我们经常看到的编辑列表。这是一种很常见的模式，我们可以增加条目、删除某个条目或者移动某个条目等。 1.4.6 小结 一般情况下，浏览器遇到不支持的输入类型的时候会将其解析为默认的text。 W3C只规范了HTML5 表单的内容，并没有定义其实现方式，因此各浏览器实现的UI出现差异不可避免。 在运用Forms 2.0开发的过程中，遇到的最大问题是浏览器的支持问题。现有情况下，Opera浏览器对Forms 2.0的支持是最好的。在实验中，请大家使用Opera浏览器测试Forms 2.0。 注意 在具体工程案例中应该先行测定Forms 2.0在各浏览器中的支持情况，以免出现顾此失彼的局面，进而影响工程进度。 1.5 HTML5与SEO SEO是近年来比较火爆的一个行业，相对集中在美容整形、医疗、培训、票务、团购服务等多个领域。从技术上说，SEO是一种利用搜索引擎的习惯和规则将某个网页（或网站）的搜索引擎排名迅速人为提升到非常靠前位置的一种技术手段。 鉴于目前市面上已经长期存在SEO（搜索引擎优化）这样一种行业和职业，大量的从业人员与之休戚相关，我们认真准备了一节来仔细分析HTML5与SEO的关系，同时也指出SEO的未来和问题，供广大读者参考。本节将从技术趋势、从业者、行业本身、社会责任4个角度去分析SEO的现状与未来，希望读者从HTML5的角度看SEO的时候，能有一个冷静和客观的评判。 1.5.1 技术趋势 HTML5标准虽然还没有成为“推荐”状态 ，但是HTML5的语法规范、标签、部分API标准已被国内外很多大型门户网站所采用，例如百度（首页）、淘宝（局部网页）、谷歌、腾讯等，甚至连2012年英国伦敦奥林匹克运动会的官网和商务网站都采用了相关技术。 HTML5除了给Web设计人员带来冲击以外，它的另一个行业影响意义就是，在HTML5标签进行结构性变化后，随之而来的内容、样式、链接、表单等连锁反应将会改变目前搜索引擎蜘蛛 所识别的范围，而由此衍生出的影响将会波及目前在国内日渐红火的SEO行业。很多SEO从业人员和公司面临着新的学习要求和知识结构的更新，而搜索引擎服务提供商也面临着同样的问题。据估计，单纯从全国SEO行业近两年服务的企业营业额来看，HTML5间接影响下的SEO行业规模及上下游行业人员、企业、单位，将是空前的。可以说，这是对社会电子商务、网络广告行为的一次重新调整和驯化，希望那些还没有意识到这一点的人早点醒悟。 在语义网研究领域，一开始是由谷歌、微软、雅虎、Opera浏览器等互联网公司推动向网页添加含义，制定更好的标准，但自2011年以来，百度、腾讯、UC浏览器、360浏览器这样的国内公司开始积极参与W3C标准组织，大力参与相关活动，他们会在可以预见的未来影响互联网世界的行业标准，进而影响世界和我们的生活。 软件巨头们推动辅助搜索的进步，也使其他类型的智能网络应用成为可能。他们影响W3C标准，推动搜索引擎的变化，鼓励网站运营者让他们页面中的内容和含义对搜索引擎和机器人程序而言容易理解。这一举动或许最终会促使电脑像人一样理解在线信息的技术的普及。如果这些努力有用的话，结果将不仅是更好地搜索结果，也将带来一批几乎能够和我们一样理解在线信息的智能应用和服务。与之相类似的有苹果公司的Siri 。 如果你在学习HTML5的同时也有兴趣了解互联网语义学方面的知识，我们向大家推荐http://schema.org/这个网站。在国内，有些较早研究语义网的朋友在坚持为语义学贡献自己的力量。如果有条件，相关从业人员应该认真研读语义学领域的文献。搜索引擎在不远的未来将会发生巨大的变化。 1.5.2 搜索引擎服务商面临的问题 搜索引擎服务商是指提供搜索引擎服务的供应商，如谷歌、百度等。搜索引擎服务商和搜索引擎优化人员在HTML5时代将面临着共同的挑战和机遇。从搜索引擎服务商的角度来看，主要有如下几个方面。 因标签的结构性变化，搜索引擎对内容的重要程度将会有一定侧重和区分。 因标签在内容表现上出现分级，所以不同标签下文字的权重识别将会不同。 HTML5的超链接有预读和导向功能，而超链接在SEO中原有的功能定义是 “网络投票”和“网络引用指向”，新的功能虽然不能改变其“网络投票”和“网络引用指向”的功能，但是从语义网的角度看，应该会削弱其“网络投票”的权重。而搜索引擎对超链接的识别又会如何处理呢？预读的内容和标题中的内容，谁重谁轻呢？这对搜索引擎的智能化提出了新的要求。 目前，搜索引擎对于HTML5的新标签的识别和分解还处于试水和观望阶段。但是，一旦HTML5在2014年正式成为“推荐”状态，那么搜索引擎的搜索算法和蜘蛛将面临非常迫切的更新换代的需求（实际上，搜索引擎服务商已经意识到他们在HTML5时代的价值因被移动互联网稀释而下降。因为从目前来看，移动互联网行业对搜索引擎的依赖并不是很大）。 我们可以乐观地说，HTML5的网站一定会在未来比HTML 4更受搜索引擎的欢迎。毕竟，以HTML5标准制作的网站的内容结构更加清晰，更加符合数据逻辑，这将大大减轻搜索引擎的识别和运算负担。 一个有规则的数据世界将比一个无序的数据世界更加节能和高效。HTML5是否应该打上绿色环保的标签呢？ 1.5.3 SEO从业人员面临的问题 鉴于SEO从业人员与搜索引擎之间的博弈关系，从SEO相关技术的角度出发，SEO必将面临着很多问题。 SEO行业不仅在我国是一个非常新鲜的行业，在国外也是一种全新的行业，但是从作者对国外SEO市场观察和分析来看，国外的整个SEO行业规模加起来都远远没有中文地区大 。 按理说，所有的网站只要符合HTML标准和语义规范，就不应该在结构上有好坏之分。但是，事实是：由于专业水平、敬业水平、知识结构的不同，不同的技术人员制作出来的网站（网页）差异很大，有些甚至只求内容视觉表现，而根本不在乎是否符合标准规范。因此，搜索引擎在识别这些网页时，会按照HTML的基本标准，自主地进行内容筛选和分级。 什么是SEO的核心？大家都会说内容为王。而HTML5的应用将使内容更加有序和有规则，特别是网页结构中的局部内容有序化，将会给网页设计、搜索引擎识别带来全新的体验。而这些内容往往在表现的时候，会由于制作人员没有吃透标签的优先级和包含关系而犯的一些错误，无法正确地向搜索引擎传递准确的信息和关键词。 单纯的SEO人员将会面临的问题主要有如下几点。 没有合适的CMS 工具。很多人都使用网上免费下载的织梦CMS系统或者WordPress等免费模板。我的问题是：如果大家都使用同样的工具，凭什么你的网站会出现在别人面前呢？这种竞争最后比的就是谁的人多，谁的钱多，这是没有技术含量的，建议广大SEO从业人员引以为戒。一个好的系统可以省去大量的工作和成本。 没有真正吃透HTML5标签的优先级，特别是新的标签出来后，这种现象更加明显。 没有理解链接预读的作用，过分夸大外链的功能。 不同的搜索引擎在掺入对HTML5的解释后页面内容分解会有不同的区别，令人难以分辨。 编辑在编写内容的时候，更加需要学习格式和规范。 外链的作用被降低，内容的作用被提升。从理论上讲，采用语义格式会更加受搜索引擎的欢迎。 一个核心的内容将会轻易打败N个重复堆砌的垃圾内容。 建议SEO从业人员从现在就开始关注HTML5，特别是那些利用CMS搞站群的SEO从业人员，尽量早一点采用HTML5的网站结构和标准，这有助于你的网站尽早提升排名。至少，你可以先埋下伏笔，为1年后打下基础。要知道，搜索引擎真正接受你的网站至少要6个月的时间，因为谷歌PR 是半年才更新一次的，你至少需要一个客观的PR评级。 1.5.4 SEO面临的几个社会问题 SEO本来的用意是更好地适应搜索引擎规则，为搜索信息的人提供最正确、最有价值的资料，因此著名的搜索引擎服务商——谷歌公司甚至有专人提供和宣传SEO的技巧，以便让大家更好地制作网站，使信息更有序。但是，近年来，SEO技术的使用开始泛滥，尤其是SEO与黑心医疗机构、售假贩假集团整合在一起后，产生的弊端和后果是极其严重的。 目前看来，SEO至少面临3个较大的社会问题。 信息噪声问题。为了能够在搜索引擎中提升目标网站的排名，SEO从业人员必定会在各种论坛和社区中大量发布一些重复的垃圾信息，这会给普通网民带来严重的阅读障碍和困扰。在互联网世界中，这些靠真人一条一条发出来的信息是极为无聊的资源浪费。 个人安全问题。在这里，我们不得不说一个真实的故事：我们HTML5研究小组的某个成员为了治好自己母亲的病，想要在网上找一种药，但是当他在搜索引擎中输入这种药名时，发现了大量推广信息，打开相应链接后，看到的往往是一些粗制滥造的网站在夸这种药药效好。而有的问答网站中又说这药不好，令他非常烦恼。于是，他在网上咨询朋友，而他的朋友也是借着搜索引擎去查询资料的，普通人又怎么有能力分辨一些经过刻意伪装的信息的真假呢？结果可想而知。 网络信用和价值体系崩坏问题。一些卑劣的SEO从业人员为了个人收益而推动一个虚假的、伪劣的产品的宣传，这本身就是个人价值观念丧失的体现，而其结果明显是造成网络信用大打折扣。 1.6 HTML5的开发环境与调试环境 对于所有的初学者和传统的开发人员而言，HTML5是全新的世界。HTML5既会应用在传统互联网的桌面浏览器上（如：Chrome、Opera、IE等），又会以Web App的形式应用在移动设备的浏览器上（如欧朋浏览器、UC浏览器、Safari浏览器等），还可以借助第三方软件（PhoneGap ）把HTML5打包成原生的可执行的安装文件包。为了让读者能够更清楚地了解HTML5在不同开发环境下所需要的开发工具，我们特意将相关内容分成两部分来介绍，本节只介绍为传统互联网的桌面浏览器制作网站和相关应用所需要的工具，而移动互联网部分的开发工具和环境将在第5章介绍。 1.6.1 HTML5编写工具 目前，普遍用于HTML5网页制作、游戏开发的工具有集成开发工具和纯脚本编写工具两种，其中比较著名的集成开发工具有Adobe公司的Dreamweaver CS 5.5系列、微软公司的FrontPage和Visual Studio 2010系列，比较常见的纯脚本编写工具有EditPlus、NotePad++、UltraEdit、Vim等。 你可以使用任意对HTML支持良好的文本编辑器来编写代码。 在Windows系统下使用EditPlus、NotePad++或者UltraEdit即可。 在Linux系统下，建议使用Vim或者Emacs。 在Mac OS下建议使用Komodo Edit（这是一款免费的跨平台文本编辑器）、Sublime Text 2。 1.6.2 JavaScript开发 目前，对于JavaScript的开发工具而言，有人习惯用简易的编辑器，有人习惯用集成工具。我们普遍熟知的有EditPlus、NotePad++、UltraEdit、WebStorm、YUI Test、Aptana Studio、Komodo Edit、Spket IDE等，请读者根据自己所使用的操作系统来选择相应的开发工具。 在JavaScript项目开发过程中，我们还需要一些排版美化JavaScript代码和压缩JavaScript文件的工具。用于JavaScript压缩的工具有以下几种。 Online JavaScript Compression Tool。一个可以用一些压缩算法（如JSMin和Packer）压缩JavaScript文件的在线JavaScript压缩器。压缩的JavaScript文件是生产环境中的理想文件，因为它们常会将文件大小减小30%～90%。在很大程度上，文件的缩小是通过除去网页浏览者或访问者不需要的注释和多余的空格字符来实现的。 Scriptalizer。一个将多个JavaScript文件组合为一个文件的在线工具。 Dojo ShrinkSafe。一种命令行实用程序，允许用浏览器缩小文件大小，从而缩短响应时间。Dojo压缩器不是建立在脆弱的正则表达式基础上的。它基于来自Mozila专案的JavaScript引擎。由于它基于真正的语法分析流，Dojo压缩器能比基于正则表达式的工具更好地体现替代符（变量名等）的环境。 YUI Compressor。YUI Compressor是一种JavaScript压缩器。除了去除注释和空格之外，它还可以用最小可用变量名来混淆局部变量。即使在使用eval或with之类的构造时（在这些情况下压缩并不合适），这种混淆也是安全的。与JSMin相比，它平均节省20%。 而用于格式化的工具有以下几种。 在线JavaScript代码美化工具jsbeautifiero。这个美化工具可处理散乱或压缩的JavaScript代码，不断对其进行快速的格式化并使其可读。 Aptana Studio。使用Aptana Studio可以采用Ctrl+Alt+F组合键进行快速排版。 1.6.3 HTTP监控 在实际的Web开发中，开发员对于HTTP协议的抓取和监控是必不可少的。因此，我们收集了一些用于HTTP监控的工具，如下所示。 Fiddler。它是一种Web调试代理，记录电脑和网络之间所有的HTTP流量（见图1-4）。使用Fiddler可以检查所有HTTP流量，设置断点，干涉进来或出去的数据。 Live HTTP Headers。它可以在浏览的时候查看网页的HTTP 首部。使用Live HTTP Headers可以调试网页应用程序，找出远端网站使用的是哪种网站服务器，或者查看远端网站发送的小数据文件。 图 1-4 1.6.4 调试环境 在为桌面浏览器环境做HTML5和JavaScript应用开发的过程中，综合各种情况后，我们推荐使用谷歌的Chrome浏览器。 就目前而言，在你学习和应用HTML5时，我们必须给出以下建议和提醒。 若调试视频与音频支持，建议使用多个浏览器进行测试，因为不同的浏览器对不同的音频和视频格式的支持是不一样的。目前，因为谷歌与苹果公司因存在H.264 格式标准的分歧，<audio>和<video>这两个标签在Chrome浏览器和Safrai浏览器上的区别是非常大的，所支持的格式也各不相容。 若调试Canvas动画效果，推荐使用Safrai浏览器或IE 9.0，这可以保证你有最快和最优化的视觉体验。 若想体验HTML5全部表单功能，推荐使用Opera浏览器，这个浏览器对于HTML5 表单的支持前所未有的全面。 若调试基于WebGL的3D Web效果，建议在Chrome浏览器下，使用about:flags命令，打开GPU Accelerated Canvas 2D功能，如图1-5所示。 图 1-5 如果打开了GPU Accelerated Canvas 2D功能，还不能查看WebGL的效果，请在chrome.exe添加“--enable-webgl”作为启动参数（见图1-6），然后再启动。 如果还是不行，请在chrome.exe添加“--ignore-gpu-blacklist”作为启动参数（见图1-7），然后再启动。 图 1-6 图 1-7 1.7 案例：HTML5网站建设 好了，前面说了大量的理论，想必大家很想看看实际的应用是什么样子。现在，为了让读者有一个更好的体验，我们将使用一个HTML5网站的开发案例，向大家展示一个HTML5网站从需求分析到工程实践的全部过程。 1.7.1 需求的提出 公司安排小王按照领导要求制作网站，公司领导要求：能够紧跟时代，视觉效果好，由于客户需要通过网站了解公司，因此时间上较为紧迫，限定3天内完成。 小王了解到：公司有很多客户都是欧美地区的，而且很多国外用户都使用iPhone和iPad上网浏览，小王自己又不会使用图片设计工具软件，也不会用Flash，但是由于HTML5和CSS3能够方便快捷地实现各种渐变和圆角，又能够简单实现动画和运动效果，再加上安全便捷的表单验证等，所以小王毫不犹豫地选择了最新的HTML5技术来实现任务。 1.7.2 需求分析 目标受众：欧美用户 使用语言：英文、中文 改版目标 适应于所有平台和浏览器，具有通用性（这很难，几乎是不可能完成的任务。我们认为，这样的要求是不现实的，尤其是面对IE6、IE7、IE8等对HTML5支持不好的浏览器）； 表单的验证界面和代码要优化（这一块正好可以发挥Forms 2.0的强项）； 整体页面的代码简化，缩小文件大小（依赖CSS3和大量新增标签）； 字体更加美观（依赖CSS3）； 动画更加流畅和高效率（依赖CSS3）； 最好体现出交互性（依赖CSS3和JavaScript）； 要体现出与目前众多网页不同的地方。 综上分析，实现这些任务基本上就是一次重大突破，但仔细一分析，其实也没有应用太多的HTML5的技术，只不过就是融入Forms 2.0技术、各种HTML5标签和CSS3的特效。 1.7.3 系统分析 Web 2.0时代与HTML5时代的网站页面结构对比如下所示。 HTML 4和Web 2.0本身没有HTML5标签上的细框架，只是一个泛泛的head区、body区。HTML5本身就有非常详细的标签上的框架定义，对于不同的位置和等级，都进行了详细的说明。 HTML 4和Web 2.0本身极为强调容器（container）的概念。尽管这个概念已经发展了近7年，但在不同浏览器的兼容性上依然有很大的问题。HTML5已经突破了容器的概念，对于页面的控制完全可以依赖新增标签。另外，HTML5在写法上也会有巨大的改观。 HTML 4和Web 2.0在样式文件上花费的时间越来越多。HTML5的样式写法有了简化，也有了增加。从完成一个项目来看，HTML5的样式代码一定会少于之前的写法。 HTML 4和Web 2.0在动画上的表现很不如人意。HTML5样式可以自带动画和滤镜，效果惊炫，开发容易。 HTML 4和Web 2.0在非系统字体上的表现完全依赖于图片。而由于CSS 3伪类定义特性，HTML5可以随时调用不同的网络字体，将原来需要用图片完成的文字效果直接用网络字体实现出来。 注意 网络字体目前只适用于英文字体。汉字字体由于文件过大，只适用于局域网或高速网（平均带宽在400KB/s以上）。这是HTML5标准在设计时的缺陷，没有充分考虑拼音文字字库与象形文字字库的区别 。用的时候千万要注意，如果非要用汉字字体，则需要使用离线缓存技术缓存字体文件，而且在移动设备上，不建议使用汉字网络字体，原因是移动设备的离线缓存空间不够。 1.7.4 工程实现 看了上述理论上的讲解和分析，本书将在此处提供一个局部工程实现供大家参考，更详细的内容在下面进行介绍。 1. 本实例的文件与文件夹布局 本例代码均在文件夹example_001中，目录分布如图1-8所示，下面简要介绍各文件夹的作用（其中表示根目录）。 Audio 主要存放音频文件。 Images 主要存放图片素材。 Js 主要存放JavaScript代码。 Png 主要存放设计稿的图片。 Style 主要存放样式表文件。 Video 主要存放视频文件。 Index.html表示网站的主索引页面。 Register.html表示网站的注册页面。 2. 本例的文件与文件夹命名简易规则 在任何开发过程中，命名是非常重要的一个环节，这里提供一些简单的说明给大家参考。 首字母大写，其余小写，多个词用下划线连接，如My_Page和Second_Page等。 不同的文件夹用于分类存放各类网站元素（音频、视频、图片等）。 每个文件的名字需望名知义。 文件命名避免多重规则。 不要中文拼音与英文混合使用。 不要以纯数字命名。 图 1-8 3. 网站部分代码 本示例的部分代码如代码清单1-2所示。 代码清单1-2 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>某公司的网站首页</title> <meta name="keywords" content="HTML5"> <meta name="description" content="这是一个HTML5的试验页"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="0"> <meta name="author" content="Author：Adam"> <meta name="robots" content="ALL"> <meta name="copyright" content="HTML5 Developer Community"> <link href="style/main.css" rel="stylesheet" type="text/css"> </head> <body> <section class="container"> <header> <div class="logo">XXX公司 <small> xxx copration</small></div> </header> <nav> <ul> <li><a class="nav" href="/">首页</a> <li><a class="nav" href="/A.html">栏目A</a> <li><a class="nav" href="/B.html">栏目B</a> <li><a class="nav" href="/C.html">栏目C</a> <li><a class="nav" href="/D.html">栏目D</a> <li style="margin-left:60px;"> <form action="/search" method="post"> <li><label for=key>站内搜索：<input type=search name=key requried ></label> <li><label for=button><input type=submit name=button value="搜索"></label> </form> </ul> </nav> <section> <aside class="aside_index_css"> <section> <fieldset style="margin:0px;padding:0px;width:260px;height:400px;"> <form> <legend style="font-family:'logo_font';color:#333;font-size: 20px;">用户登录与注册区域</legend> <p> <label for="uid">用户名：</label> <input type="text" name="uid" class="user_input" required autocomplete="true" placeholder="请填写用户名"pattern= "[a-zA-Z0-9]{4,10}"> <p> <label for="pwd">密码：</label> <input name="pwd" type="password" class="user_input" required autocomplete="true" placeholder="请填写密码"> <p>记住密码：<input type="checkbox" name="remember" checked= "checked" value="1" id="remember" /> <a class="user_link" id="user_reg" title="忘记密码" href=#> 忘记密码</a> <a class="user_link" id="user_reg" title="用户注册" href=#> 用户注册</a> <p><input type="submit" value="登录网站" class="button"> </form> </fieldset> </section> </aside> <article> <fieldset class="custmer_index"> <a class="article_link" href="/1.html">test for HTML5[2012-01-01]</a><br> </fieldset> </article> </section> <footer> <small>版权所有：HTML5研究小组</a></small> <address>Beijing RPC</address> </footer> </section> </body> </html> 4. 运行结果 该实例的运行结果见图1-9。 图 1-9 1.7.5 小结 HTML5使网页的代码量大大减少，开发效率大大提高，这给开发人员带来了巨大的机会。但是我们也应该清醒的认识到：只有完整、全面地学习W3C公布的HTML5相关的技术标准，才能真正掌握HTML5。 在第1章快要结束的时候，让我们回顾一下：我们从最浅的地方说起，最终目的就是希望让读者感觉到HTML5入手是非常容易的，是可以非常容易地让每个人参与起来的，更希望广大读者可以从宏观上了解HTML5的全局。同时，我们总结了一些我们自己认为正确的观点和可靠的经验奉献给大家。