3.1　标题文字的建立

浏览器中可以显示标题文字，所谓标题文字就是以某种固定的字号显示文字。HTML文档中的标题文字可以用1级～6级进行区分，本节将对如何设置标题文字及其对齐方式进行讲解。

3.1.1　标题文字标签—<h>

HTML中的标题文字共分6级，每一级在字号上有明显的区别，从1级～6级依次减小。语法格式如下。

     1级标题：<h1>…</h1>
     2级标题：<h2>…</h2>
     3级标题：<h3>…</h3>
     4级标题：<h4>…</h4>
     5级标题：<h5>…</h5>
     6级标题：<h6>…</h6>

【例3.1】标题文字标签的使用。（实例位置：资源包\TM\sl\3\1）

本实例实现在网页中显示一则程序员笑话，其中“程序猿的笑话”通过1级标题实现，笑话内容由4级标题实现，具体代码如下。

运行这段代码，可以看到网页中“程序猿的笑话”的标题和内容分别以两种不同大小的文字显示，而且它们与以普通正文显示的“发布时间”等内容有明显的区别，效果如图3.1所示。

图3.1　标题文字标签的使用

3.1.2　标题文字对齐方式属性—align

默认情况下，标题文字是左对齐的，但在网页设计过程中，你可以根据实际需求对标题文字的对齐方式进行设置，这需要在<h>标签中设置align属性。语法格式如下。

     <h1 align=对齐方式></h1>

align属性需要放在标题标签的后面，如“<h1 align="">”，该属性的取值如表3.1所示。

表3.1　align属性的取值

【例3.2】设置标题文字的对齐方式。（实例位置：资源包\TM\sl\3\2）

本实例通过各级标题显示图书的详细信息，并将信息设置为居中对齐。具体代码如下。

     <!--显示商品图标-->
     <h2 align="center">
          <img src="book.jpg" width="170">
     </h2>
     <!--显示图书名称-->
     <h5 align="center">
     书名：《Python树莓派开发从入门到精通》
     </h5>
     <!--显示图书作者-->
     <h5 align="center">作者：明日科技</h5>
     <!--显示出版社-->
     <h5 align="center">出版社：清华大学出版社</h5>
     <!--显示图书出版时间-->
     <h5 align="center">出版时间：2021年10月</h5>
     <!--显示图书页数-->
     <h5 align="center">页数：400页</h5>
     <!--显示图书价格-->
     <h5 align="center">价格：89.80元</h5>

运行这段代码，效果如图3.2所示。

图3.2　标题文字的对齐效果

注意

上面代码中在<h2>二级标题中间插入了一个<img>标签，该标签是一个图片标签，第6章将对其进行详细讲解，这里了解即可。

编程训练（答案位置：资源包\TM\sl\3\编程训练）

【训练1】对比各级标题的样式区别　分别使用<h1>～<h6>标题标签显示“明日科技”四个字。

【训练2】显示一首古诗　使用一级标题标签和四级标题标签在网页上居中显示一首您熟悉的古诗，其中，古诗标题使用一级标题标签，古诗内容使用四级标题标签。

上一章目录下一章