2.1 标题

标题是对一段文字内容的概括和总结。书籍文本少不了标题，网页文本也不能没有标题。一篇文档的好坏，标题起到重要的作用。在越来越追求“视觉美感”的今天，一个好标题的设计对用户的留存尤为关键。例如，图2.1和图2.2所示的界面效果，同样的标题内容，却使用了不同的页面标签，显示的效果则大相径庭。

2.1.1 标题标签

标题标签共有6个，分别是＜h1＞、＜h2＞、＜h3＞、＜h4＞、＜h5＞和＜h6＞，每个标签在字体大小上都有明显的区别，从＜h1＞标签到＜h6＞标签字体依次变小。＜h1＞标签表示最大的标题，＜h6＞标签表示最小的标题。一般使用＜h1＞标签来表示网页中最上层的标题，而且有些浏览器会默认把＜h1＞标签显示为非常大的字体，所以一些开发者会使用＜h2＞标签代替＜h1＞标签来显示最上层的标题。

标题标签的语法格式如下：

说明：在 HTML5 中，标签大都是由起始标签和结束标签组成的。例如，＜h1＞标签在编码使用时，首先编写＜h1＞起始标签和＜/h1＞结束标签，然后将文本内容放入两个标签之间。

接下来通过一个实例，巧用＜h1＞、＜h4＞和＜h5＞标签，实现一则关于程序员笑话的对话内容。把“程序猿的笑话”放入＜h1＞标签中，代表文章的标题，把发布时间、发布者和阅读数等内容放入较小字号的＜h5＞标签中，把笑话的对话内容放入字号适中的＜h4＞标签中。具体代码如下（实例位置：资源包\MR\源码\02\01）：

运行效果如图2.3所示。

常见错误

如果结束标签漏加“/”，比如把＜/h1＞写成＜h1＞，则会导致浏览器认为是新标题标签的开始，从而导致页面布局错乱。例如，在下面代码的第2行就将＜/h1＞结束标签写成了＜h1＞开始标签。

将会出现如图2.4所示的错误界面。

2.1.2 标题的对齐方式

在默认情况下，标题文字是左对齐的。而在网页的制作过程中，可以实现标题文字的编排设置。最常用的就是关于对齐方式的设置，可以为标题标签添加align属性进行设置。

语法格式如下：

在该语法中，align属性需要设置在标题标签的后面，具体的对齐方式属性值如表2.1所示。

注意：在编写代码的过程中，请注意添加双引号。

接下来，使用标题标签中的align属性，实现图书商品介绍的文字展示。首先将图书名称、图书作者、出版社等介绍内容放入＜h5＞标签内，然后在每个标题标签中添加align属性，属性值设为center。具体代码如下（实例位置：资源包\MR\源码\02\02）：

注意：在代码第11行使用了＜img＞图像标签。＜img＞图像标签可以将外部图片引入当前网页内。有关＜img＞图像标签的具体使用方法，请参考本书第3章的内容。

运行效果如图2.5所示。