![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=1739412085-ev9dQR7VvTzVNMnoaL6FXySRVaSqsqUA-0-d4e00d379117954bd54c9d7ba48f972c)
“#”用来指定标题文字的大小,#取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=1739412085-huwP8d5alIjWhrKzBTGlBkISkADYnPeR-0-83ad2d38e69fb40bdb54719436398df8)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/20_02.jpg?sign=1739412085-jUeW0OuDLM3ygYC8M1v9ovHjBFHBWECE-0-f9aa0aed5bee325982bb0d0fbece65e6)
图2-1 各级标题
2.1.2 段落标签<p>…</p>
段落标签放在段落的头部和尾部,用于定义一个段落。<p>…</p>标签不但能使后面的文字换到下一行,还可以使两段之间多加一空行,相当于<br/><br/>标签。段落标签的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/20_04.jpg?sign=1739412085-SIWAeVFQeXKesKQx9Z4lzSNVE7BW66nB-0-de5c18ce2dfeb98fe8b944a2bbb64409)
其中,属性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=1739412085-Y4OdBjjI6m5ynsqmo0GS3wsz4hTr7CHO-0-28c4b9aa4293935c044a79bc21a83f48)
图2-2 <p>标签示例
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_02.jpg?sign=1739412085-XhOo2lK55tErRqIgqERuP53nFplZKoWd-0-b1d3c36faeb4a5f584a7d76633737dba)
【说明】在HTML中,所有<p>标签的呈现属性可以使用,但不推荐使用,要想更灵活地控制并美化外观,需要通过CSS去实现。
2.1.3 水平线标签<hr/>
在页面中插入一条水平标尺线(horizontal rules),可以将不同功能的文字分隔开,看起来整齐、明了。当浏览器解释到HTML文档中的<hr />标签时,会在此处换行,并加入一条水平线段。线段的样式由标签的参数决定。水平线标签的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_03.jpg?sign=1739412085-BdoBw79jUMzJAf9ZqAHMT3Anp87Pe5OG-0-d90b21915f5a78489d40e47c9fa74115)
其中,属性size设定线条粗细,以像素为单位,默认值为2。
属性width设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。所谓绝对值,是指线段的长度是固定的,不随窗口尺寸的改变而改变。所谓相对值,是指线段的长度相对于窗口的宽度而定,窗口的宽度改变时,线段的长度也随之增减,默认值为100%,即始终填满当前窗口。
属性color设定线条色彩,默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示,见表2-1。
表2-1 色彩代码表
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_04.jpg?sign=1739412085-V1S4ogtz1WlenEjPtmLPaBJuhCNjNe11-0-40a9e911ed827e75306582de41318c36)
(续)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_01.jpg?sign=1739412085-vIBo9X6Z5LX0MVFGtku9JW8Z25yUK2kg-0-2a0be5c857496cd250bd820a670740b8)
【演练2-3】<hr/>标签的基本用法,本例文件2-3.html在浏览器中显示的效果如图2-3所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_02.jpg?sign=1739412085-VXkEmI0qVqkZHOLBZagTAP5YCOH1ekVQ-0-491f618ae0e836f1f0d47253fe58a521)
图2-3 <hr/>标签示例
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_03.jpg?sign=1739412085-8v06NbaWXT31sGEmOmGGcWlyKU5dsifD-0-03def6522c48ab61cfa1fb0300387ed2)
【说明】<hr/>标签强制执行一个简单的换行,将导致段落的对齐方式重新回到默认值设置(左对齐)。
在HTML中,所有<hr>标签的呈现属性可以使用,但不推荐使用,要想更灵活地控制并美化外观,需要通过CSS去实现。
【演练2-4】使用两种方法控制水平线的外观,本例文件2-4.html在浏览器中显示的效果如图2-4所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_04.jpg?sign=1739412085-jCHmesDjd3wf8QS97ffkn6OTsavuuzpw-0-6a96b85ab871330128fcc79f267d8aca)
图2-4 对比效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_05.jpg?sign=1739412085-b23o0l7TUpqZpM3kny9thlhjkTPWDy8U-0-1f8792bfc46cdd8a56267720f6786d21)
【说明】代码中的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=1739412085-orhngoJ850vxNkR6dfVpolAfDpMGzA7W-0-c8f026ae2a199d7b46434feacac08bf7)
图2-5 页面显示效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/23_02.jpg?sign=1739412085-zY6b66dwO0j1RdlfAhsxAgfchjNDVx9N-0-5e13978788138237437d20b150044bc1)
【说明】在本例中,段落的开头为了实现首行缩进的效果,在段落标签<p>后面连续加上4个“ ”空格符号。