HTML5的语义化标签及属性，可以让开发者非常方便地实现清晰的Web页面布局，加上CSS3的效果渲染，使快速建立丰富灵活的Web页面变得相对简单一些。本单元通过对网站首页设计的探析与训练，重点熟悉HTML5网页的基本结构及组成元素、HTML5的语义和结构标签、<!DOCTYPE>声明等，学会CSS样式的定义与样式表的插入，掌握网站首页的设计方法。

教学导航

实例探析

【任务1-1】探析携程旅行网的首页

【效果展示】
携程旅行网首页0101.html的浏览效果如图1-1所示。

携程旅行网首页0101.html的主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，顶部内容为广告图片，中部内容为多个图片超链接，底部包括多个导航链接，侧边栏为长形按钮。

【网页探析】
1．网页0101.html的HTML代码探析
携程旅行网首页0101.html的HTML代码如表1-1所示。

网页0101.html主体结构的HTML代码如表1-2所示，该网页主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，其中项部结构使用< header>标签实现，中部结构使用< nav>标签实现，底部结构使用< footer>标签实现，侧边栏使用< n aside>标签实现。

2．网页0101.html的CSS代码探析
网页0101.html通用CSS代码定义如表1-3所示。

网页0101.html主体结构的CSS代码如表1-4所示。

网页0101.html顶部内容的CSS代码定义如表1-5所示。

网页0101.html中部内容的CSS代码定义如表1-6所示。

网页0101.html底部内容的CSS代码定义如表1-7所示。

网页0101.html侧边栏的CSS代码定义如表1-8所示。

知识梳理

1．HTML5印象
HTML5是万维网的核心语言，是标准通用置标语言下的一个应用超文本标记语言（HTML）的第五次重大修改，HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG （Web Hypertext Application Technology Working Group）提出，于2007年被万维网联盟（W3C）接纳，并成立了新的HTML工作团队。
HTML 5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。
2012年12月17日，万维网联盟（W3C）宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石”。
2013年5月6日，HTML5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言——超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像标签及svg也进行了改进，性能得到进一步提升。
支持HTML5的浏览器包括Firefox（火狐浏览器）、IE9（Internet Exploer）及其更高版本、Chrome（谷歌浏览器）、Safari、Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。
HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用程序的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行。如今基于HTML5标准的Web应用程序开发，开发人员可以轻松地进行调试、修改。
2．CSS3印象
CSS即层叠样式表（Cascading Style Sheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
CSS3将完全向后兼容，网络浏览器也还将继续支持CSS2。CSS3主要影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（动态和渐变），而且可以很简单地设计出现在的设计效果（如使用分栏）。
3．HTML5的主要特性
（1）语义特性（Class：Semantic）
HTML5赋予网页更好的意义和结构，更加丰富的标签将随着对RDFa、微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
（2）本地存储特性（Class：Offline & Storagf）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache及本地存储功能。
（3）设备兼容特性（Class：Device Access）
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据相连，如视频影音可直接与Microphones及摄像头相连。
（4）连接特性（Class：Connectivity）
更有效的连接工作效率，使得基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
（5）网页多媒体特性（Class：Multimedia）
支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS、摄像头、影音功能相得益彰。
（6）三维、图形及特效特性（Class： 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
（7）性能与集成特性（Class：Performance & Integration）
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助你的Web应用和网站在多样化的环境中更快速的工作。
（8）CSS3特性（Class：CSS3）
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。
4．HTML5的主要变化
HTML5提供了一些新的元素和属性，如< nav>（网站导航块）和< footer>。这种标签将有利于搜索引擎的索引整理，同时更好地帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如< audio>和< video>标记。
（1）取消了一些过时的HTML4标记
其中包括纯粹显示效果的标记，如< font>和< center>，它们已经被CSS取代。HTML 5吸取了XHTML2一些建议，包括一些用来改善文档结构的功能，例如，新的HTML标签< header>、< footer>、< dialog>、< aside>、< figure>等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用< div>。
（2）将内容和展示分离
< b>和< i>标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。< u>、< font>、< center>、< strike>这些标签则被完全去掉了。
（3）一些全新的表单输入对象
包括日期、URL、Email地址，其他的对象则增加了对非拉丁字符的支持。HTML5还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净、更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。
（4）全新的、更合理的Tag
多媒体对象将不再全部绑定在object或embed Tag 中，而是视频有视频的Tag，音频有音频的Tag。
（5）本地数据库
这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索、缓存及索引功能。同时，那些离线Web程序也将因此获益匪浅。
（6）Canvas对象
将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash和Silverlight，直接在浏览器中显示图形或动画。
（7）浏览器中的真正程序
将提供API实现浏览器内的编辑与拖放，以及各种图形用户界面的能力。内容修饰Tag将被剔除，而使用CSS。
（8）HTML5取代Flash在移动设备的地位。
（9）HTML5突出的特点就是强化了Web页的表现性，增加了本地数据库。
5．HTML5的发展趋势
HTML5规范开发完成时，将成为主流。据统计，2013年全球约有10亿手机浏览器支持HTML5，同时HTML Web开发者数量已达到200多万。毫无疑问，HTML5将成为未来5～10年内，移动互联网领域的主宰者。
据IDC的调查报告统计，截至2012年5月，有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。
从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。从用户可读性上说，原先一大堆东西，像初学者第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。
从如今层出不穷的移动应用就知道，在这个智能手机和平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。
许多游戏开发商都被Facebook或者Zynga推动着发展，而未来的Facebook应用生态系统是基于HTML5的，尽管在HTML 5平台开发出游戏非常困难，但游戏开发商却都愿意那么做。
6．HTML5新增的标签和废除的标签
HTML5中，新增加了多个标签元素，同时也废除了多个标签元素。
（1）HTML5新增的标签
HTML5新增的标签及其功能说明如表1-9所示。

（2）HTML5废除的标签
HTML5废除的标签如表1-10所示

7．HTML5新增和废除的标签属性
HTML5中，在新增加和废除很多标签元素的同时，也增加和废除了很多属性。
（1）HTML5新增的属性
HTML5新增的属性如表1-11所示。

（2）HTML5废除的属性
HTML4中一些属性在HTML5中不再被使用，而是采用其他属性或其他方式进行替代，如表1-12所示。

8．HTML5语义和结构标签实例代码探析
新建example01.html网页文件，该网页的浏览效果如图1-2所示。

网页example01.html对应的HTML代码如表1-13所示。

下面对表1-13中的HTML代码的结构及组成进行探析。
（1）HTML5的文档声明
创建example01.html网页文件，如果用的网页编写工具已经支持HTML5文件类型，那么，应该生成如下的HTML5模板： < !DOCTYPE html>
< html>
< head>
< meta charset="utf-8">
< title>无标题文档< /title>
< /head>
< body>
< /body>
< /html>
说明：第一行< !DOCTYPE html>是HTML5对文档类型的简化描述，文档类型的作用是验证器依据它来判断该采用何种规则去验证代码；强制浏览器以标准模式渲染页面。
（2）头部
网页example01.html的头部代码由< header>标签实现，如表1-13中18～20行所示。
< header>标签不能和h1、h2、h3这些标题混为一谈，< header>元素可以包含从公司logo到搜索框在内的各式各样的内容。同一个页面可以包含多个< header>元素，每个独立的区块或文章都可以含有自己的< header>。
（3）尾部
网页example01.html的尾部由< footer>标签实现，如表1-13中39～41行所示。
< footer>元素位于页面或者区块的尾部，用法和< header>基本一样，也会包含其他元素。
（4）导航
网页example01.html的导航由< nav>标签实现，如表1-13中22～29行所示。
网页导航对于一个网页来说至关重要，快速方便的导航是留住访客所必须的。导航可以被包含在< header>或< footer>或者其他区块中，一个页面可以有多个导航。
（5）区块和文章
网页example01.html的区块和文章由< section>和< article>标签实现，如表1-13中21～38行所示。
< section>元素将页面的内容合理归类与布局，可以看到< article>元素还可以包含很多元素。
（6）旁白和侧边栏
网页example01.html的侧边栏由< aside>实现，如表1-13中34～36行所示。
< aside>标签可实现旁白，一般加在< article>中使用，< aside>元素是为主内容添的附加信息，加入引言、图片等。侧边栏不一定是旁白，可以看作是右面的一个区域，包含链接，可用< section>和< nav>实现。
9．HTML5中典型的标记方法
（1）内容类型（ContentType）
HTML5扩展仍然为“.html”或者“.htm”，内容类型（ContentType）仍然为“text/html”。
（2）DOCTYPE声明
HTML5中使用< !DOCTYPE html>声明，该声明方式适用所有版本的HTML，HTML5中不可以使用版本声明。
（3）指定字符编码
HTML5中的字符编码推荐使用UTF-8，HTML5中可以使用元素直接追加charset属性的方式来指定字符编码：< meta chaarset="UTF-8">。
HTML4中使用< meta http-equiv="Content-Type" content="text/html;charset=UTF-8">继续有效，但不能同时混合使用两种方式。
（4）具有boolean值的属性
当只写属性而不指定属性值时表示属性为true，也可以将属性名设定为属性值或将空字符串设定为属性值；如果想要将属性值设置为false，可以不使用该属性。
（5）引号
指定属性时属性值两边既可以用双引号也可以用单引号。当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时，属性两边的引号可以省略。例：< input type="text"> < input type='text'> < input type=text>。
10．HTML5主要的语义和结构标签说明
HTML5提供新的元素来创建更好的页面结构。
（1）< header>标签
用于定义文档的头部区域，表示页面中一个内容区块或整个页面的标题。
（2）< section>标签
用于定义文档中的节（section、区段），表示页面中的一个内容区块，如章节、页眉、页脚或页面的其他部分。可以和< h1>、< h2>等元素结合起来使用，表示文档结构。
（3）< footer>标签
用于定义文档或节的页脚部分，表示整个页面或页面中一个内容区块的脚注，通常包含文档的作者、版权信息、使用条款链接、联系信息等。可以在一个文档中使用多个< footer>元素，< footer>元素内的联系信息应该位于< address>标签中。
（4）< article>标签
用于定义页面中一块与上下文不相关的独立内容，如一篇文章。< article>元素的潜在来源可能有论坛帖子、报纸文章、博客条目、用户评论等。
（5）< aside>标签
用于定义页面内容之外的内容，表示article元素内容之外的与article元素内容相关的辅助信息。
（6）< hgroup>标签
用于对整个页面或页面中的一个内容区块的标题进行组合。
11．< !DOCTYPE>声明的用法
< !DOCTYPE>声明必须是HTML文档的第一行，位于< html> 标签之前。< !DOCTYPE>声明不是HTML标签，它是指示Web浏览器关于页面应使用哪个HTML版本进行编写的指令。
在HTML 4.01中，< !DOCTYPE>声明引用DTD，因为HTML 4.01基于SGML。DTD规定了标签语言的规则，这样浏览器才能正确地呈现内容。HTML5不基于SGML，所以不需要引用DTD。在HTML 4.01中有3种< !DOCTYPE>声明。在HTML5中只有一种——< !DOCTYPE html>。
< !DOCTYPE>声明没有结束标记，并且对大小写不敏感。应始终向HTML文档添加< !DOCTYPE>声明，这样浏览器才能获知文档类型。
12．HTML的注释标签< !--…-->的用法
网页中HTML的注释标签< !--…-->使用实例如下：
< !--这是一段注释，注释不会在浏览器中显示。-->
所有浏览器都支持注释标签，注释标签用于在源代码中插入注释，注释不会显示在浏览器中。使用注释对代码进行解释，这样做有助于在以后的时间对代码的编辑，当编写了大量代码时尤其有用。
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯，这样就不会把脚本显示为纯文本。观察以下JavaScript代码：

注释行结尾处的两条斜杠（//）是JavaScript注释符号，这样可以避免JavaScript执行“-->”标签。
13．如何插入样式表
浏览网页时，当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有以下3种。
（1）外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。 < link>标签通常用在文档的头部，示例代码如下所示：

浏览器会从文件外部样式表mystyle.css中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑，样式表应该以.css扩展名进行保存。外部样式表文件不能包含任何的html标签，下面是一个样式表文件的实例：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
注意不要在属性值与单位之间留有空格。假如使用“margin-left: 20 px”而不是“margin-left: 20px”，它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。
（2）内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用< style>标签在文档头部定义内部样式表，示例代码如下所示：

（3）内联样式
由于内联样式要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势，应慎用这种方法，当样式仅需要在一个元素上应用一次时可以使用内联样式。
要使用内联样式，需要在相关的标签内使用样式（style）属性，style属性可以包含任何CSS属性。以下代码展示如何改变段落的颜色和左外边距：

14．网页中的多重样式
如果网页中某些属性在不同的样式表中被同样的选择器定义，那么属性值将被继承过来。
例如，外部样式表拥有针对h3选择器的3个属性，代码如下：

而内部样式表拥有针对h3选择器的两个属性，代码如下：

假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：
color: red; text-align: right; font-size: 20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
15．标记-moz-、-webkit-、-o-和-ms-的解释
（1）-moz-：以-moz-开头的样式代表Firefox浏览器特有的属性，只有Webkit浏览器可以解析。moz是Mozilla的缩写。
（2）-webkit-：以-webkit-开头的样式代表Webkit浏览器特有的属性，只有Webkit浏览器可以解析。WebKit是一个开源的浏览器引擎，Chrome、Safari浏览器即采用WebKit内核。
（3）-o-：以-o-开头的样式代表Opera浏览器特有的属性，只有Opera浏览器可以解析。
（4）-ms-：以-ms-开头的样式代表IE浏览器特有的属性，只有IE浏览器可以解析。

引导训练

【任务1-2】设计苏宁易购网的首页

【任务描述】
编写HTML代码和CSS代码，设计图1-3所示苏宁易购网的首页0102.html。

苏宁易购网首页0102.html的主体结构为上、中、下结构，如图1-3所示。顶部内容包括3个导航超链接和1个Logo图片；中部内容包括多个由图片和文字组成的导航超链接；底部内容也由3个部分组成，从上至下依次为当前用户和“回顶部”锚点链接按钮、登录和注册超链接、版权信息。
网页0102.html顶部结构使用