![HTML+CSS+JavaScript网页制作(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/883/33892883/b_33892883.jpg)
2.1 基本块级标签
基本块级标签包括标题标签、段落标签和水平线标签。
2.1.1 标题标签<h#>…</h#>
在页面中,标题是一段文字内容的核心,所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点,可以通过设置不同大小的标题,增加文章的条理性。标题文字标签的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/20_01.jpg?sign=1739911741-jrfwvSXPPA0SoJHPTIhthT08ChneAb6z-0-6f957a5db9cba2aaaa2cca31c3cc8ffb)
“#”用来指定标题文字的大小,#取1~6之间的值,取1时文字最大,取6时文字最小。
属性align用来设置标题在页面中的对齐方式,包括:left(左对齐)、center(居中)或right(右对齐),默认为left。
【演练2-1】列出HTML中的各级标题,本例文件2-1.html在浏览器中显示的效果如图2-1所示。代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/20_03.jpg?sign=1739911741-NGbvRUM0UFgHlGK2jLZ7ajz1MRCNNIFu-0-d1ec546477b0fd7710eab903b32f6764)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/20_02.jpg?sign=1739911741-fLGUQOTQ7RSqpuIBI9gbGgeCQJ7UBbVK-0-ad1f29237cfaa5c951e0a93ad08a16e9)
图2-1 各级标题
2.1.2 段落标签<p>…</p>
段落标签放在段落的头部和尾部,用于定义一个段落。<p>…</p>标签不但能使后面的文字换到下一行,还可以使两段之间多加一空行,相当于<br/><br/>标签。段落标签的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/20_04.jpg?sign=1739911741-7xIJ1M0nRLdUqXvPv9ivlERQe7Q27tr1-0-32dcca1fd78d027d4fb04919fe1cae3a)
其中,属性align用来设置段落文字在网页上的对齐方式:left(左对齐)、center(居中)和right(右对齐),默认为left。格式中的“|”表示“或者”,即多项选其一。
【演练2-2】列出包含<p>标签的多种属性,本例文件2-2.html在浏览器中显示的效果如图2-2所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_01.jpg?sign=1739911741-IgX9lR9OwG6KJi0UGvm1N1FhJRrJcS0g-0-33a17e0172dfa0c567f78d9791c77d6a)
图2-2 <p>标签示例
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_02.jpg?sign=1739911741-VMiFGzvRONyF0qHnHLXvqsMqimv8KKyg-0-f2f0f18eecc2c1505b95275b6740d317)
【说明】在HTML中,所有<p>标签的呈现属性可以使用,但不推荐使用,要想更灵活地控制并美化外观,需要通过CSS去实现。
2.1.3 水平线标签<hr/>
在页面中插入一条水平标尺线(horizontal rules),可以将不同功能的文字分隔开,看起来整齐、明了。当浏览器解释到HTML文档中的<hr />标签时,会在此处换行,并加入一条水平线段。线段的样式由标签的参数决定。水平线标签的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_03.jpg?sign=1739911741-0z0VHORvuR56xQVWOtYzca5UdiwjvXUB-0-dd68eb7ea08f4fd5cdbdd7e9e4f72cb6)
其中,属性size设定线条粗细,以像素为单位,默认值为2。
属性width设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。所谓绝对值,是指线段的长度是固定的,不随窗口尺寸的改变而改变。所谓相对值,是指线段的长度相对于窗口的宽度而定,窗口的宽度改变时,线段的长度也随之增减,默认值为100%,即始终填满当前窗口。
属性color设定线条色彩,默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示,见表2-1。
表2-1 色彩代码表
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_04.jpg?sign=1739911741-q2RrdBl947yl3aaPbKAGiVbHL8TDJOUH-0-fb78604f398f1eae721842a9d32cf39c)
(续)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_01.jpg?sign=1739911741-r7YyN76KAFV1kgfI8vJEezwrgoKpUjDL-0-1fd869b32c26b2a27edb3bcf4b49b135)
【演练2-3】<hr/>标签的基本用法,本例文件2-3.html在浏览器中显示的效果如图2-3所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_02.jpg?sign=1739911741-IYU4dpNEmaFgUd9FuPspXKQHgNRZ2VWz-0-946307940500aecf295426b14c9891e0)
图2-3 <hr/>标签示例
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_03.jpg?sign=1739911741-NW5BOBTPwJeDRuNRRkdsCUEeuGQ9tfbv-0-5ee3a58f81a751f63f96a726a0e76f10)
【说明】<hr/>标签强制执行一个简单的换行,将导致段落的对齐方式重新回到默认值设置(左对齐)。
在HTML中,所有<hr>标签的呈现属性可以使用,但不推荐使用,要想更灵活地控制并美化外观,需要通过CSS去实现。
【演练2-4】使用两种方法控制水平线的外观,本例文件2-4.html在浏览器中显示的效果如图2-4所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_04.jpg?sign=1739911741-J0mlAaEWJ1Xw5oCdS8Strg2MtJD4D1vP-0-f9e09a14ce4834917024827c203eec48)
图2-4 对比效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_05.jpg?sign=1739911741-5RdJLkqUM6q4hDCoSpHOHlxKjjLySMcH-0-61ce5a7c07e4da4828751cd9980634d5)
【说明】代码中的style="height:2px;border-width:0;color:blue;background-color:blue"表示水平线为高度2px无边框无阴影的蓝色实线,恰好与<hr/>标签设置的显示效果一致。
2.1.4 案例——制作梦想橱柜常见问题解答页面
【演练2-5】使用基本块级标签制作梦想橱柜常见问题解答页面,本例文件2-5.html在浏览器中显示的效果如图2-5所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/23_01.jpg?sign=1739911741-OmWtzKhXbBowxcIX0WQflvzXWkaxLZSN-0-985841f0ba9e49f39a989e1db9b064ae)
图2-5 页面显示效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/23_02.jpg?sign=1739911741-EGJKIQuV8FUQZ2gfwyvz3WE03Xs5BS4i-0-d2422febf59274238bb81b2e50c75b08)
【说明】在本例中,段落的开头为了实现首行缩进的效果,在段落标签<p>后面连续加上4个“ ”空格符号。