详情
全书分为两大部分：第一部分是HTML进阶内容，主要介绍HTML高级技巧和HTML语义化；第二部分是CSS进阶内容，主要介绍CSS开发技巧、代码规范、性能优化、属性本质、重要概念（如包含块、BFC和IFC等）。
除了知识讲解，教程还融入了大量的开发案例，更加注重编程思维的培养，并且提供学习者一个流畅的学习思路。
书名：Web前端开发精品课 HTML与CSS进阶教程
ISBN：978-7-115-43295-7
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 莫振杰
责任编辑 赵 轩
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
本书内容结合笔者在前后端大量开发中的实战经验，系统化知识，浓缩精华，用通俗易懂的语言直击学习者的痛点。通过本书，能让你从“野生网页设计师”水平提升达到“真正前端工程师”水平。
全书分为两大部分：第一部分是HTML进阶内容，主要介绍HTML高级技巧和HTML语义化；第二部分是CSS进阶内容，主要介绍CSS开发技巧、代码规范、性能优化、属性本质、重要概念（如包含块、BFC和IFC等）。
除了知识讲解，本书还融入了大量的开发案例，更加注重编程思维的培养，并且提供学习者一个流畅的学习思路。
近年来，Web前端技术飞速发展，作用也日趋重要。在Web前端技术中，HTML和CSS是最基础的知识。当前市面上同类书籍很多，但大部分都是介绍基础性的HTML标签和CSS属性，缺乏一本真正体现前端开发水平的书籍。
本书是《Web前端开发精品课HTML和CSS基础教程》的姊妹篇，对于基础知识，不再进行详细介绍。HTML和CSS知识多而杂，因此入门容易精通难。本书对高级部分的内容进行深加工，使其更加完善。为了避免大家多走弯路，笔者把前端碎片化的知识系统化，提供给学习者一个流畅的学习思路。
在编写本书的过程中，笔者得到了很多人的帮助。首先感谢陈志东先生花费大量时间对本书进行细致的审阅，给出诸多非常棒的建议，并且为本书绘制了大量精美的插图。
感谢充满创意和活力的五叶草团队（陈志东、邵婵、程紫梦）一直以来的陪伴和支持。我的人生因为有你们而更加精彩。
感谢赵轩老师（本书责任编辑）在这段时间给予我细心的指导和不懈的支持，有您的帮助本书才得以顺利出版。
由于笔者水平有限，书中难免有错漏之处，读者如果遇到问题或有意见和建议，可以到绿叶学习网（www.lvyestudy.com）或者发邮件（lvyestudy@foxmail.com）与我联系。
我们都知道，前端技术最核心的三大技术是HTML、CSS和JavaScript。HTML定义网页的结构，CSS定义网页的外观，而JavaScript定义页面的行为。其中HTML和CSS是前端技术中最基础的东西。
HTML和CSS入门容易，精通却很难，特别是CSS。“什么？精通很难？我很确定我已经精通CSS了啊！”这种话往往是出自学习三两个月、技术刚入门的人之口。我就曾经碰到不少这样的人。对于HTML来说，确实没有多少东西可以深入的，但是CSS却不一样。
如果你认为自己精通HTML和CSS了，那你可以思考一下下面这些问题。
（1）什么是HTML语义化？对于标题、图片、表格、表单，如何更好地实现这些方面的语义化？
（2）什么是外边距叠加？出现外边距叠加的根本原因是什么？
（3）在CSS中，关于命名、书写以及注释都有哪些好的规范（便于团队开发和后期维护）？
（4）说一下display这几个属性值的区别：block、inline、inline-block、table-cell。
（5）你深入了解过text-indent、text-align、line-height以及vertical-align这几个属性么？它们都有哪些高级技巧。
（6）为什么overflow:hidden可以清除浮动？
（7）CSS都有哪些性能优化技巧？如何使用更高性能的选择器？
（8）如何使用CSS实现各种图形效果，例如三角形、圆、椭圆等？
（9）解释一下这几个概念：包含块、BFC和IFC、层叠上下文。
……
如果你有一半答不上来，说明你连“熟悉CSS”都算不上，更别说“精通CSS”了。因此大家不要学了几个标签就认为自己精通HTML，也不要学了几个属性就觉得自己精通CSS了。不管是哪门技术，自己都应该深入地去学习，自我满足只会让自己滞留不前。
HTML进阶的内容只针对HTML 4.01，而CSS进阶的内容只针对CSS 2.1。对于HTML 5和CSS 3的内容，可以关注绿叶学习网。
本书是《Web前端开发精品课HTML和CSS基础教程》的姊妹篇，两者具有很强的连贯性。本书并不适合没有基础的人学习，对于HTML和CSS入门的相关知识，可以参考本书的姊妹篇，不然在学习本书的过程中可能对有些东西无法理解。
本书虽然涉及的东西很多，但浓缩的都是精华。有一句话说得好：“干扰因素越少，越容易专注一件事”，因此对于书中的技巧我们也会以最简单的例子来讲解。笔者在编写本书的时候也是字斟句酌，该展开的会详细展开，没用的东西一定会一笔带过。希望大家在学习中不要跳跃性地学习。
此外，本书里很多东西比较复杂，一时半会儿可能消化不了，应该多回来翻几遍，并且结合自己的实践来理解。“书读百遍，其义自见。”古人有些话还是说得蛮好的。HTML和CSS这些进阶知识在本书中已经梳理得比较完善了，学习中可以来回翻一番，想当年我们连“翻”的份都没有，因为压根儿就没有这样的一个系统化的学习教程。
对于本书的学习，一定要下载这本书的源代码，一边查看源代码，一边测试效果。本书中的代码请从异步社区www.epubit.com.cn本书页面下载。
很多新手往往分不清HTML、XHTML和HTML5，这一节给大家详细讲解一下这三者的关系和区别。
HTML，全称HyperText Mark-up Language（超文本标记语言），是构成网页文档的主要语言。我们常说的HTML指的是HTML 4.01。
XHTML，全称EXtensible HyperText Mark-up Language（扩展的超文本标记语言），它是XML风格的HTML 4.01，我们可以称之为更严格、更纯净的HTML 4.01。
HTML语法书写比较松散，利于开发者编写。但是对于机器，如电脑、手机等来说，语法越松散，处理起来越困难。因此为了让机器更好地处理HTML，我们才在HTML基础上引入了XHTML。
XHTML相对于HTML来说，在语法上更加严格。XHTML和HTML主要区别如下。
在XHTML中，所有标签必须闭合，例如“<p></p>”“<div></div>”等。此外，空标签也需要闭合，例如<br>要写成<br/>。
错误写法：<p>欢迎来到绿叶学习网
正确写法：<p>欢迎来到绿叶学习网</p>
在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大写。不过标签的属性值可以大写。
错误写法：<Body><DIV></DIV></Body>
正确写法：<body><div></div></body>
在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。
错误写法：<input id=txt type=text/>
正确写法：<input id="txt" type="text"/>
在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。
错误写法：<div name="wrapper"></div>
正确写法：<div id="wrapper"></div>
下面是一个完整的XHTML文档。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>web前端开发精品课系列</title>
</head>
<body>
<p>《web前端开发精品课·HTML和CSS基础教程》</p>
<p>《web前端开发精品课·HTML和CSS进阶教程》</p>
</body>
</html>HTML指的是HTML 4.01，XHTML是HTML的过渡版本，XHTML是XML风格的HTML 4.01。而HTML 5指的是下一代的HTML，也就是HTML 4.01的升级版。
不过HTML 5已经不再是单纯意义上的标签了，它已经远远超越了标签的范畴。HTML 5除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket、本地存储等。这些新增的技术都是使用JavaScript来操作。也就是说，HTML 5使得HTML从一门“标记语言”转变为一门“编程语言”。
对于HTML 5中的新技术，在此不做详细介绍。单纯从新增的标签上来看，HTML 5有以下几个特点。
基于HTML 5设计准则中的“化繁为简”原则，页面的文档类型<!DOCTYPE>被极大地简化了。
XHTML文档声明如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5文档声明如下：
<!DOCTYPE html><div>绿叶学习网</DIV>上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属性都采用小写方式。
<div id=wrapper style=color:red>绿叶学习网</div>上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议标签所有属性值都加引号，单引号或双引号都可以。
在HTML5中，部分具有特殊性属性的属性值是可以省略的。例如，下面代码是完全符合HTML 5规范的：
<input type="text" readonly/>
<input type="checkbox" checked/>上面两句代码等价于：
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="checked"/>在HTML 5中，可以省略属性值的属性如表1-1所示。
表1-1 HTML5中可以省略属性值的属性
| 省 略 形 式 |
等 价 于 |
|---|---|
| checked |
checked="checked" |
| readonly |
readonly="readonly" |
| defer |
defer="defer" |
| ismap |
ismap="ismap" |
| nohref |
nohref="nohref" |
| noshade |
noshade="noshade" |
| nowrap |
nowrap="nowrap" |
| selected |
selected="selected" |
| disabled |
disabled="disabled" |
| multiple |
multiple="multiple" |
| noresize |
noresize="disabled" |
一句话概括HTML、XHTML和HTML 5就是：HTML指的是HTML 4.01，XHTML是HTML的过渡版，HTML 5是HTML的升级版。
对于div和span这两个元素，不少新手也不知道它们之间有什么区别，使用起来也很随便。因此，这里有必要简单介绍一下。
div和span没有任何语义，正是因为没有语义，这两个标签一般都是配合CSS来定义元素样式的。
div和span区别如下。
（1）div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span是行内元素，可以与其他行内元素位于同一行。
（2）div常用于页面中较大块的结构划分，然后配合CSS来操作；span一般用来包含文字等，它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS操作。
其实，除了div和span外，还有一个label标签。div和span是无语义标签，但label是有语义标签。label只适用于表单中，用于显示在输入控件旁边的说明性文字。关于label标签，我们在后面“2.5 表单语义化”一节会详细介绍。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>"<span style="font-weight:bold;color:Red;">视觉化思考</span>"能以独特而有效的方式，让你的心有更大的空间来解决问题。</p>
</body>
</html>在浏览器预览效果如图1-1所示。
图1-1 div和span
在这个例子中，我们想要对“视觉化思考”这几个文字加粗或者改变颜色，此时可以使用span包含文字，然后再进行样式修改。事实上，span标签往往都是用来配合CSS来修饰元素的。
对于div和span，大家经过一些实践，自然而然会有更深刻的理解，在此就不啰嗦了。
id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选择元素，以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感到很迷茫，不知道什么时候用id，什么时候用class，甚至随便使用。
id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。W3C建议，对于页面关键的结构或者大结构，我们才使用id。所谓的关键结构，指的是诸如LOGO、导航、主体内容、底部信息栏等结构。对于一些小地方，还是建议使用class属性。
我们知道搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。因此id属性不要轻易使用。此外，id的命名也十分关键，特别是对搜索引擎优化而言。对于id和class的命名，我们在CSS进阶部分会详细介绍。
class，顾名思义，就是“类”。它采用的思想跟C、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同class的元素具有相同的CSS样式。
如果你要为两个或者两个以上元素定义相同的样式，建议使用class属性。因为这样可以减少大量的重复代码。
注意，对于一个元素而言，我们可以定义多个class。一般来说，定义多个class的目的在于：一般用一个class抽取公共样式，然后用另外一个class定义单独样式。
举个例子，在一个页面中有如图1-2所示的三个栏目，仔细分析我们会发现这三个栏目具有部分相同样式，此时我们可以使用一个class来定义公共样式，但是这三个栏目又有各自的样式。该怎么办呢？这时候我们应该为这三个栏目分别定义不同的class，以便在CSS中控制单独的样式。这就是多个class的用处。
图1-2 绿叶学习网中三个栏目
上图的三个栏目的HTML关键结构如下：
<div class="column blog">
<h2></h2>
<div></div>
</div>
<div class="column manual">
<h2></h2>
<div></div>
</div>
<div class="column tool">
<h2></h2>
<div></div>
</div>对于id和class，我们总结一下：对于页面关键结构，建议使用id；对于小地方，建议使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作，也建议加上id，以便搜索引擎识别页面结构。
在浏览网页的时候，我们会发现几乎所有网站的页面在浏览器标题栏前面都会有一个小图标，如图1-3所示。
图1-3 浏览器标题栏小图标
想要实现这个效果，我们只需要在head标签添加一个link标签即可。
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>rel和type这两个属性的取值是固定形式，无需多讲。href属性取值为小图标的地址，这个地址是根据小图标在站点文件夹路径而定的，跟图片引用路径是一样的道理。
这里注意一下，小图标格式是.ico，而不是.jpeg、.png、.gif等格式。对于.ico格式的图标制作，我们可以搜索一下“在线icon”，会发现很多不错的在线工具，大家可以收藏一下。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>绿叶学习网</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
</head>
<body>
</body>
</html>在浏览器预览效果如图1-4所示。
图1-4 浏览器标题栏小图标预览图
由于HTML简单，很多初学者对它存在一种偏见，觉得它没多少东西，因此在学习的过程中随便对待。其实，学习HTML的重点不在于掌握了多少标签，而是在于掌握标签的语义以及如何编写一个语义结构良好的页面。
在实际开发过程中，很多人由于对标签语义不熟悉，常常用某一个标签代替另外一个标签来实现某些效果。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{font-family:"微软雅黑";font-size:14px;}
.content
{
width:300px;
padding:10px;
border:1px dashed gray;
}
.content div
{
font-size:16px;
font-weight:bold;
height:24px;
line-height:24px;
}
</style>
</head>
<body>
<div class="content">
<div>web前端开发</div>
<p>web前端开发最核心3个技术：HTML、CSS和JavaScript。HTML控制网页的结构，CSS控制网页的样式，JavaScript控制网页的行为。</p></div>
</body>
</html>
在浏览器预览效果如图2-1所示。
图2-1 div实现的标题效果
对于上面的标题效果，正确的做法应该是使用h1～h6标签来实现，但这里却使用div来代替了。虽然页面效果一样，但是这种“用某一个标签代替另外一个标签来实现相同效果”的做法是完全不可取的，因为它违背了HTML这门语言的初衷。
HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义，例如p标签，表示的是“paragraph”，标记的是一个段落；h1标签，表示“header1”，标记的是一个最高级标题……而div和span是无语义的标签，我们应该尽可能少用。
HTML很简单，因此很多初学者往往忽略了它的目的和重要性。我们学习HTML并不是看自己学了多少标签，更重要的是在你需要的地方能否用到正确的语义化标签。把标签用在对的地方，这才是HTML学习的目的所在。
我们都知道前端最核心的技术是HTML、CSS和JavaScript这三种。其中HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。在这三大元素中，HTML才是最重要的，而CSS和JavaScript只是用来修饰结构的。就像你盖房子，房子装饰得再漂亮，如果结构不稳也容易塌。
整站开发时，编写的代码往往都是成千上万行，如果我们全部使用div和span来代替语义化标签，后期维护会非常困难。此外对于一个页面来说，我们可以根据一个页面的外观来判断哪些是标题，哪些是图片。但是搜索引擎跟人不一样，它可“看不懂”一个页面长什么样的。它只会根据HTML代码来识别。搜索引擎一般都是根据HTML标签来识别这里是一个img标签，那里是一个p标签等。如果整个页面都是div和span，搜索引擎小蜘蛛肯定会迷路，可能以后都不想来光顾你这个站点。要是这样的话，你崩溃了，你的老板也跟着崩溃了。
从上面我们知道，编写一个语义结构良好的页面在实际开发中极其重要。主要有两个最大的优点：①利于开发调试和后期维护；②利于搜索引擎优化。在这一章，我们从以下7个方面给大家详细讲解HTML语义化。
（1）标题语义化。
（2）图片语义化。
（3）表格语义化。
（4）表单语义化。
（5）其他语义化。
（6）语义化验证。
（7）HTML 5摒弃的标签。
h1～h6是标题标签，h表示“header”。h1～h6在HTML语义化中占有极其重要的地位。h1～h6按照标题的重要性依次递减，其中h1重要性最高，h6重要性最低。
相对于其他语义化标签，h1～h6在搜索引擎优化（即SEO）中占有相当重要的地位。在一个页面中，h1～h6这6个标签，我们不需要全部都用上，都是根据需要才用的。对于h1～h6，一般情况下我们只会用到h1、h2、h3和h4，很少再会去用h5和h6，因为一个页面不可能用到那么多级的标题。并且从搜索引擎优化的角度来说，h1、h2、h3和h4这4个标签会被赋予一定的权重，而h5和h6的权重跟普通标签差不多，在SEO优化上意义不大。
对于标题h1～h6的语义化，我们需要注意以下四个方面。
（1）一个页面只能有一个h1标签。
（2）h1～h6之间不要断层。
（3）不要用h1～h6来定义样式。
（4）不要用div来代替h1～h6。
h1标签表示每个页面中最高层级的标题，搜索引擎会赋予h1标签最高权重。虽然W3C没有明确规定一个页面不能有多个h1标签，但是我们还是推荐“一个页面一个h1标签”的做法。如果一个页面出现多个h1，对搜索引擎可能不好，也可能会被判以作弊。就像你写文章一样，一个页面就等于一篇文章，你见过一篇文章有多个主标题的么？
搜索引擎对h1～h6标签比较敏感，尤其是h1和h2。一个语义良好的页面，h1～h6应该是完整有序而没有出现断层的。也就是说，要按照“h1、h2、h3、h4”这样的顺序依次排列下来，不要出现“h1、h3、h4”而漏掉h2的情况。
我们都知道h1～h6是有默认样式的，如图2-1所示。在实际开发中，很多时候我们需要为文本定义字体加粗或者字体大小。有些人喜欢用h1～h6来代替CSS，使用标签来控制样式，这是一种非常不好的做法。我们一定要记住，HTML关注的是结构（语义），CSS关注的是样式，结构跟样式应该分离。
图2-2 h1～h6在浏览器中的效果
从语义上来说，一个页面的标题应该使用h1～h6标签，不要使用div来代替。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{font-family:"微软雅黑";font-size:14px;}
.content
{
width:300px;
padding:10px;
border:1px dashed gray;
}
.content div
{
font-size:16px;
font-weight:bold;
height:24px;
line-height:24px;
}
</style>
</head>
<body>
<div class="content">
<div>web前端开发</div>
<p>web前端开发最核心3个技术：HTML、CSS和JavaScript。HTML控制网页的结构，CSS控制网页的样式，JavaScript控制网页的行为。</p>
</div>
</body>
</html>在浏览器预览效果如图2-3所示。
图2-3 div实现的标题效果
div是无语义的标签，如果使用div来代替h1～h6，后期维护比较困难，而且对SEO影响也非常大。因为这种做法会让一个页面丢失大量的权重。
在HTML中，我们使用img标签来表示图片。对于图片的语义化，我们从以下两个方面来深入探讨一下。
（1）alt属性和title属性。
（2）figure元素和figcaption元素。
img标签有两个重要属性：alt和title。
alt属性用于图片描述，这个描述文字是给搜索引擎看的。并且当图片无法显示时，页面会显示alt中的文字。
title属性也用于图片描述，不过这个描述文字是给用户看的。并且当鼠标指针移到图片上时，会显示title中的内容。
<img src="" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">搜索引擎跟人不一样，它看不出一张图片描绘的是什么东西，它只会查看HTML代码，通过img标签的alt属性或者页面上下文来判断图片的内容。因此，对于img标签，我们一定要添加alt属性，以便搜索引擎识别图片的内容。alt属性在搜索引擎优化中也很重要，并且会被赋予一定的权重。
请一定要注意：alt属性是img标签必需属性，一定要添加；title属性是img标签可选属性，可加可不加。建议大家在实际开发中，对于img标签，要记得在alt属性中添加必要的描述信息。
图2-4 “图片+图注”效果
对于如图2-4所示的这种“图片+图注”的效果，我们可以使用如下代码来实现。
<div class="img-list">
<img src="" alt=""/>
<span>HTML入门教程</span>
<div>但是这种实现方式的语义并不好。在HTML 5中，引入了figure和figcaption两个元素来增强图片的语义化。
<figure>
<img src="" alt=""/>
<figcaption></figcaption>
</figure>figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使得页面的语义更加良好。
不少初学者看了《Web前端开发精品课HTML和CSS基础教程》（本书的姊妹篇）跑来问：“不是说表格布局已经被抛弃了吗？为什么还要在书里讲解表格呢？这不是多此一举吗？”其实不然，在实际开发中，我们不建议使用表格布局，应该使用浮动布局或者定位布局。虽然表格拿来做布局的方式被抛弃了，但是这并没有说明表格就一无是处了。
问大家一个问题：如图2-5所示的这种表格数据的展示，应该怎么实现呢？不少得了“table恐惧症”的小伙伴可能会想到使用div来模拟表格。事实上，对于这种表格数据形式，最好的选择还是table。
图2-5 绿叶学习网中的表格
在表格中，我们比较常用的标签是table、tr和td这3个。不过为了加强表格的语义化，W3C还增加了5个标签：th、caption、thead、tbody和tfoot。th表示“表头单元格”；caption表示“表格标题”。thead、tbody和tfoot这3个标签把表格从语义上分为三部分：表头、表身和表脚。有了这几个标签，表格语义更加良好，结构更加清晰。对于这5个标签，我们在本书的姊妹篇中已经做了详细的介绍，这里就不再赘述。表格标签如表2-1所示。
表2-1 表格标签
| 标 签 |
说 明 |
|---|---|
| table |
表格 |
| caption |
标题 |
| thead |
表头（语义划分） |
| tbody |
表身（语义划分） |
| tfoot |
表尾（语义划分） |
| tr |
行 |
| th |
表头单元格 |
| td |
表格单元格 |
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>说明：
thead、tbody和tfoot这三个标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚。很多人容易忽略这三个标签。
上述语法显示效果如图2-6所示。
图2-6 表格标签
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table, thead, tbody, tfoot, th, td
{
border: 1px dashed gray;
}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>在浏览器预览效果如图2-7所示。
图2-7 表格语义化实例
对于thead、tbody和tfoot这3个标签，不一定能够全部都用得上，例如tfoot就很少用。一般情况下，我们都是根据实际需要来使用这3个标签的。
表单跟表格，这是两个完全不一样的概念，不过还是有不少初学者傻傻分不清。对于表单语义化，我们从2个方面来探究一下。
（1）label标签。
（2）fieldset标签和legend标签。
对于图2-8所示效果，我们可能会使用如下HTML代码来实现。
<form action="index.aspx" method="post">
<div>登录绿叶学习网</div>
<p>
<span>账号：</span><input type="text" name="name" />
</p>
<p>
<span>密码：</span><input type="password" name="pwd" />
</p>
<input type="checkbox" name="remember-me" /><span>记住我</span>
<input type="submit" value="登录" />
</form>图2-8 表单效果
W3C规范定义，label标签用于显示在输入控件旁边的说明性文字。也就是将某个表单元素和某段说明文字关联起来。
<label for="">说明性文字</label>label标签for属性值为所关联的表单元素的id，例如<input id="name" type="text"/>，则其所关联的label标签应该为<label for="name"></lable>。
label标签的for属性有两个作用。
（1）语义上绑定了label元素和表单元素。
（2）增强了鼠标可用性。也就是说我们点击label中的文本时，其所关联的表单元素也会获得焦点。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<input id="Radio1" type="radio"/>单选框
<input id="Checkbox1" type="checkbox" />复选框
</div>
<hr/>
<div>
<input id="rdo" name="rdo" type="radio"/><label for="rdo">单选框</label>
<input id="cbk" name="cbk" type="checkbox" /><label for="cbk">复选框</label>
</div>
</body>
</html>在浏览器预览效果如图2-9所示。
图2-9 label标签与单选框/复选框
从这个例子可以看到，在第一组表单中，我们只能点击单选框才能选中单选框，点击它旁边的说明文字是不能选中的。在第二组表单中，我们可以点击单选框来选中单选框，并且点击它旁边的说明文字同样也可以选中单选框。而对于复选框来说，也是一样的效果。
其实，这就是label标签for属性的作用。for属性使得鼠标单击的范围扩大到label元素上，极大地提高了用户单击的可操作性。事实上，label标签有两种关联方式，我们拿复选框来说，下面两行代码是等价的。
<input id="cbk" type="checkbox" /><label for="cbk">复选框</label>
<label>复选框<input id="cbk" type="checkbox"/></label>对于图2-8中的效果，我们使用label标签来增强语义化，修改后的代码如下。
<form action="index.aspx" method="post">
<div>登录绿叶学习网</div>
<p>
<label for="name">账号：</label><input type="text" id="name" name="name"/>
</p>
<p>
<label for="pwd">密码：</label><input type="password" id="pwd" name="pwd"/>
</p>
<input type="checkbox" id="remember-me" name="remember-me"/><label for="remember-me">记住我</label>
<input type="submit" value="登录"/>
</form>在表单中，我们还可以使用fieldset标签来给表单元素进行分组。其中，legend标签用于定义某一组表单的标题。
<fieldset>
<legend>表单组标题</legend>
……
</fieldset>使用fieldset和legend标签有两个作用。
（1）增强表单的语义。
（2）可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。
对于图2-8中的效果，我们使用fieldset和legend这两个标签来增强语义化，修改后的代码如下。
<form action="index.aspx" method="post">
<fieldset>
<legend>登录绿叶学习网</legend>
<p>
<label for="name">账号：</label><input type="text" id="name" name="name" />
</p>
<p>
<label for="pwd">密码：</label><input type="password" id="pwd" name="pwd" />
</p>
<input type="checkbox" id="remember-me" name="remember-me" /><label for="remember-me">记住我</label>
<input type="submit" value="登录" />
</fieldset>
</form>在浏览器预览效果如图2-10所示。
图2-10 加入fieldset和legend的表单
我们可以看到，使用了fieldset和legend这两个标签之后，表单形成了非常美观的“书签”效果。
很多新手会使用<br/>标签来换行，或者使用多个<br/>标签来实现元素之间的上下间距。
<div>
<span>标题</span><br/><br/>
<span>第1部分内容</span><br/>
<span>第2部分内容</span><br/>
<span>第3部分内容</span>
</div><form action="index.aspx" method="post">
<fieldset>
<legend>登录绿叶学习网</legend>
<label for="name">账号：</label><input type="text" id="name" name="name"/><br />
<label for="pwd">密码：</label><input type="password" id="pwd" name="pwd"/><br />
<input type="checkbox" id="remember-me" name="remember-me"/><label for="remember-me">记住我</label>
<input type="submit" value="登录" />
</fieldset>
</form>上面两个例子使用<br/>标签的方式是错误的，这也是<br/>标签很常见的错误用法。事实上，<br/>标签有自己特定的语义，不能随便用来实现换行效果。W3C标准规定，<br/>标签仅仅用于段落中的换行，不能用于其他情况。也就是说，<br/>标签只适合用于p标签内部的换行，不能用于其他标签。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>广东省<br />广州市<br />黄埔大道西601号</p>
</body>
</html>在浏览器预览效果如图2-11所示。
图2-11 <br/>标签的正确用法
在实际开发中，对于列表型的数据，为了实现良好的语义，我们还是建议使用无序列表或者有序列表，不建议使用div等来实现。
图2-12 列表效果
对于如图2-12所示效果，不少新手很可能会写出如下代码来实现。
<div>
<div><span>1</span>HTML教程</div>
<div><span>2</span>CSS教程</div>
<div><span>3</span>JavaScript教程</div>
</div>这种实现方式缺乏语义化，并且也不利于维护。正确的做法是：
<ul>
<li><span>1</span>HTML教程</li>
<li><span>2</span>CSS教程</li>
<li><span>3</span>JavaScript教程</li>
</ul>有人问，每一个列表项前都有数字，不应该使用有序列表来实现吗？为什么这里使用无序列表来实现呢？假如使用有序列表，我们是做不到这种外观效果的。因为有序列表前的数字外观是固定的。在实际开发中，大多数情况下都是使用无序列表，极少情况下会使用有序列表。
图2-13 百度的导航条
图2-14 绿叶学习网的图片列表
图2-15 strong和em标签效果
strong用于实现加粗文本，em用于实现斜体文本。基于结构和样式分离的原则，标签仅仅是为了实现简单的加粗或者斜体效果，我们一般不会用这两个。实际上，W3C对这两个标签赋予“强调”的语义，在strong或者em标签内部的文本被强调为重要文本。并且搜索引擎对这两个标签也赋予一定的权重。如果在一个页面中，为了SEO而想要突出某些关键字，可以使用strong和em这两个标签。一般情况下，我们都是去掉strong和em的默认样式，然后使用CSS重新定义新的样式，但这并不影响这两个标签的语义。也就是说，样式只会改变标签的外观，但不会改变标签的语义。对于去除标签的默认样式，我们在后面“4.5 CSS reset”一节会详细介绍。
在HTML中，del和ins这两个标签是配合使用的。del表示“delete”，用于定义被删除的文本。ins表示“insert”，用于定义被更新的文本。一般情况下，我们会使用CSS来重新定义del和ins标签的样式。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>新鲜的新西兰奇异果</p>
<p><del>原价:￥6.50/kg</del></p>
<p><ins>现在仅售：￥4.00/kg</ins></p>
</body>
</html>在浏览器预览效果如图2-16所示。
图2-16 del标签和ins标签效果
想要在页面显示一张图片，我们有两种方式：一是使用img标签；二是使用背景图片。这两种实现方式最明显的区别在于：使用img标签添加图片，是通过HTML来实现；使用背景图片，是通过CSS来实现。
在实际开发中，很多人添加图片的方式很随意。对于什么时候使用img标签，什么时候使用背景图片，并不是很清楚。我们应该根据HTML的语义来判断。如果图片作为HTML的一部分，并且想要被搜索引擎识别，则应该使用img标签，例如常见的各种图片列表。如果图片仅仅是起到修饰作用，并且不想被搜索引擎识别，则应该使用背景图片。
举个例子，图2-17这个页面中的图标图片就应该使用背景图片实现，因为这些图标并不需要被搜索引擎识别，也不作为HTML的一部分。而图2-18页面中应该使用img标签来实现，因为这是页面HTML结构的一部分，并且希望被搜索引擎识别。
图2-17 背景图片实现的效果
图2-18 img标签实现的效果
以上只是列举了在实际开发中比较常见的语义标签，其实HTML5新增了很多结构语义标签，例如header、nav、aside、footer、article、section等。如果想要实现语义更为良好的页面，我们也应该去关注这些新增的标签。不过结构语义标签是HTML5的内容，因此本书不展开介绍。
前面这几节，我们介绍了页面语义化需要注意的各个地方。那么平常有什么好的办法来判断一个页面是否语义良好呢？一个很简单的办法就是：去掉CSS样式，然后看页面是否还具有很好的可读性。
我们都知道，很多HTML标签都有一定的默认样式，例如p标签有上下边距、strong标签对字体加粗、ul标签有缩进效果，等等。
在前面我们接触过，我们可以使用一个标签来代替另外一个标签，并且使用CSS修饰来实现相同的效果。也就是说，不同的HTML标签可以通过不同的CSS来实现相同的效果。但是“一个语义良好的页面”跟“一个语义不好的页面”在去除样式之后的表现却是截然不同的。
图2-19 语义不好的页面去掉样式后的表现
图2-20 语义良好的页面去掉样式后的表现
从上面两张图我们可以看出：一个语义良好的页面在“CSS裸奔”之后，可读性也是非常高的。想要查看一个页面在“CSS裸奔”下的效果，我们可以使用Firefox浏览器的一款网页调试插件“Web Developer”来测试。
在Web Developer工具栏找到“CSS”→“Disable Styles”→“Disable All Styles”并且选中，就可以查看页面去掉样式后的效果，如图2-21所示。Web Developer插件的安装和使用，请自行搜索，很简单。
图2-21 Web Developer界面
在HTML5中，除了新增标签之外，也有不少标签被舍弃了，如表2-2和表2-3所示。为了实现页面的语义化，我们在实际开发中不应该再去使用这些标签。因此了解哪些标签已经被舍弃是非常有必要的。
对于这些被舍弃的标签，总体可以分为两大类。
（1）仅仅为了定义样式，没有任何语义，因此被舍弃。
（2）很少使用或者已经被新标签代替，因此被舍弃。
表2-2 HTML5舍弃的标签（仅为了定义样式）
| 标 签 |
说 明 |
|---|---|
| basefont |
定义页面文本的默认字体、颜色或尺寸 |
| big |
定义大字号文本 |
| center |
定义文本居中 |
| font |
定义文本的字体样式 |
| strike |
定义删除线文本 |
| s |
定义删除线文本 |
| u |
定义下划线文本 |
表2-3 HTML5舍弃的标签（很少使用或者已被新标签代替）
| 标 签 |
说 明 |
|---|---|
| dir |
定义目录列表，应该用ul代替 |
| acronym |
定义首字母缩写，应该用abbr代替 |
| applet |
定义嵌入的applet，应该用object代替 |
| isindex |
定义与文档相关的可搜索索引 |
| frame |
定义 frameset 中的一个特定的框架 |
| frameset |
定义一个框架集 |
| noframes |
为那些不支持框架的浏览器显示文本 |
对于HTML语义化，我们需要注意以下两点。
（1）我们应该果断舍弃那些仅仅为了定义样式而存在的HTML标签。如果仅仅是为了改变样式，我们应该使用CSS来实现，不要使用HTML标签。
（2）在不同的页面部分，我们优先使用正确的语义化标签。如果没有语义标签可用，才去考虑div和span等无语义标签。
