![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=1739692072-gXS4eiAus9noICWCzr4xfGqP31BcCKUV-0-575bc1758397cdb656955c45c256b3d5)
“#”用来指定标题文字的大小,#取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=1739692072-mwJLxSWA4HOdXH0uwoCBAccoXROOo8Y0-0-3607b25db42d9d8bd70c9aa1d162dbfd)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/20_02.jpg?sign=1739692072-YuRhSiPQNszLxYWWaEoJ4N1kT5icVpGU-0-473637d2abd5faa2066837a76935950c)
图2-1 各级标题
2.1.2 段落标签<p>…</p>
段落标签放在段落的头部和尾部,用于定义一个段落。<p>…</p>标签不但能使后面的文字换到下一行,还可以使两段之间多加一空行,相当于<br/><br/>标签。段落标签的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/20_04.jpg?sign=1739692072-JcJNXqVOCA45eXRGdZ9BNiqph4YhEWHC-0-3088b16bf9044784bb33430061711b90)
其中,属性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=1739692072-QHIOQRdTUk0SbPvSMTnPRZR1Qhdu2hkd-0-e41fb18728f78c4ab5d4e9733b37fdfb)
图2-2 <p>标签示例
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_02.jpg?sign=1739692072-BgCloOkw0lRorIzxb1Td8Bm0968QtsF7-0-bfa425fc642e7c8d686ccbf9b7a08604)
【说明】在HTML中,所有<p>标签的呈现属性可以使用,但不推荐使用,要想更灵活地控制并美化外观,需要通过CSS去实现。
2.1.3 水平线标签<hr/>
在页面中插入一条水平标尺线(horizontal rules),可以将不同功能的文字分隔开,看起来整齐、明了。当浏览器解释到HTML文档中的<hr />标签时,会在此处换行,并加入一条水平线段。线段的样式由标签的参数决定。水平线标签的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_03.jpg?sign=1739692072-odijEXXqXQeo2dxT9dWUMldPlD1JAw2M-0-01c8e8739f6d04540a5676a215aa9e63)
其中,属性size设定线条粗细,以像素为单位,默认值为2。
属性width设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。所谓绝对值,是指线段的长度是固定的,不随窗口尺寸的改变而改变。所谓相对值,是指线段的长度相对于窗口的宽度而定,窗口的宽度改变时,线段的长度也随之增减,默认值为100%,即始终填满当前窗口。
属性color设定线条色彩,默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示,见表2-1。
表2-1 色彩代码表
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_04.jpg?sign=1739692072-hwOQz9ZU6EN4SzJmaysFfBnbVF51zgH5-0-e711ca26fb47e9a4332da544d61e9235)
(续)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_01.jpg?sign=1739692072-Ccy52z4v3Zmot22gs9sNOoC5BmxDEiRt-0-f5479bcf80d0dd3839bc24cff4ac019c)
【演练2-3】<hr/>标签的基本用法,本例文件2-3.html在浏览器中显示的效果如图2-3所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_02.jpg?sign=1739692072-RPZW8CRg2XxxxgrrJtdJyjrRoRmFtqsf-0-89a4bbc46eb729af51011e7d5e8fe98f)
图2-3 <hr/>标签示例
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_03.jpg?sign=1739692072-XvPzKaZGaNDQUxfvdQRC4rjBVff8ujSt-0-cd8d974f086412352c151e76242ef833)
【说明】<hr/>标签强制执行一个简单的换行,将导致段落的对齐方式重新回到默认值设置(左对齐)。
在HTML中,所有<hr>标签的呈现属性可以使用,但不推荐使用,要想更灵活地控制并美化外观,需要通过CSS去实现。
【演练2-4】使用两种方法控制水平线的外观,本例文件2-4.html在浏览器中显示的效果如图2-4所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_04.jpg?sign=1739692072-iUKZuvEiRDJn7Z9HyTuGTXFNc9zuc5Qk-0-b24336974a102c4ee30c5e5ce19e66c7)
图2-4 对比效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_05.jpg?sign=1739692072-lswvnYEy3mC29wuIeZY3g4m4EOiinA5Q-0-d4f5ba724d5d5904ecaabde3c1b44e27)
【说明】代码中的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=1739692072-TyfFd43pDzYOZ7BXeo3nsTTsVaI2uGQY-0-30d4b9b916d4577ccae965580a4c9ec7)
图2-5 页面显示效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/23_02.jpg?sign=1739692072-FpkXXSGDL9JadhFx1eE0Jh1SzR9MKVr0-0-c713a587a38cb254a3b358fbf4ef6925)
【说明】在本例中,段落的开头为了实现首行缩进的效果,在段落标签<p>后面连续加上4个“ ”空格符号。