![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=1739288973-9UGNINmOUJSkqagnqYYJUrh2zm7UpCI1-0-189afdf1b709c630a0457b1e20471da9)
“#”用来指定标题文字的大小,#取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=1739288973-Uyx19MPe8HChcfN2D1v6TqXPxRRSqfz3-0-e56b1c1c27ab70e2198f077bf69d220d)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/20_02.jpg?sign=1739288973-D7EU7jVnXaRpBZZeJ7VdetezZG6oqd3K-0-bc6bc96c12e5e8ca30f51896ce6572da)
图2-1 各级标题
2.1.2 段落标签<p>…</p>
段落标签放在段落的头部和尾部,用于定义一个段落。<p>…</p>标签不但能使后面的文字换到下一行,还可以使两段之间多加一空行,相当于<br/><br/>标签。段落标签的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/20_04.jpg?sign=1739288973-2jzOHWZoCAM7gMC6OuT3Bj9hPHV2Wt3N-0-1fcc650bb119f68ca8a1b9a23ec13a86)
其中,属性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=1739288973-YTgk3Imf2NmNh2xPzFOC1d9dbXe6j2Oi-0-4fc00ea709eb419c35c4c58bd9e4cd10)
图2-2 <p>标签示例
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_02.jpg?sign=1739288973-2uF9FsduqBcGyR8yEYCYAuwyUvN8QgZj-0-d6f693856849c4214b08405b9dc5fbcd)
【说明】在HTML中,所有<p>标签的呈现属性可以使用,但不推荐使用,要想更灵活地控制并美化外观,需要通过CSS去实现。
2.1.3 水平线标签<hr/>
在页面中插入一条水平标尺线(horizontal rules),可以将不同功能的文字分隔开,看起来整齐、明了。当浏览器解释到HTML文档中的<hr />标签时,会在此处换行,并加入一条水平线段。线段的样式由标签的参数决定。水平线标签的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_03.jpg?sign=1739288973-odXLtCJzp23rVzRHzSd0Yl8lzcLlhq88-0-7562fbcaa0eb90a6dbc54ff6e6812c69)
其中,属性size设定线条粗细,以像素为单位,默认值为2。
属性width设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。所谓绝对值,是指线段的长度是固定的,不随窗口尺寸的改变而改变。所谓相对值,是指线段的长度相对于窗口的宽度而定,窗口的宽度改变时,线段的长度也随之增减,默认值为100%,即始终填满当前窗口。
属性color设定线条色彩,默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示,见表2-1。
表2-1 色彩代码表
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/21_04.jpg?sign=1739288973-9zkZUw9Ob6g1EuK96ReQ19fKbr6Ug2pc-0-f9aac6d87c8d755275f5d792694b6f92)
(续)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_01.jpg?sign=1739288973-6XcJXkLEQX1WHLok7jXVfvph4wheTM8F-0-72e3494dea525f9a849a0e085fa61c7d)
【演练2-3】<hr/>标签的基本用法,本例文件2-3.html在浏览器中显示的效果如图2-3所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_02.jpg?sign=1739288973-TclFwW5kvIMkQ1BQdKnKjhumhkKBZt8p-0-9ce8670bcefff1f437d6d604ad3cab15)
图2-3 <hr/>标签示例
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_03.jpg?sign=1739288973-RXsi2nCTttjQdCnn5MPoKktTHUoLyOyA-0-2fa69e0598139c7e4b5aea5099325c56)
【说明】<hr/>标签强制执行一个简单的换行,将导致段落的对齐方式重新回到默认值设置(左对齐)。
在HTML中,所有<hr>标签的呈现属性可以使用,但不推荐使用,要想更灵活地控制并美化外观,需要通过CSS去实现。
【演练2-4】使用两种方法控制水平线的外观,本例文件2-4.html在浏览器中显示的效果如图2-4所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_04.jpg?sign=1739288973-1y7oVgWd1SXw5aWERKviunUbd0XPSpxR-0-ed333ba54c6c68e9e2f3f8267c470225)
图2-4 对比效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/22_05.jpg?sign=1739288973-EkEH2qFM8QqMAjwGpdtkqQXD6AHDLUnL-0-5282e4ecd071b0ae512e2f30c85e5c05)
【说明】代码中的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=1739288973-oWfqIY7pneCmMGRh7CMmompid1DikkC8-0-dd7b65bd90e18a593b264ec2a7d06205)
图2-5 页面显示效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/23_02.jpg?sign=1739288973-Ci5lyqjZG2NmXcoF8uJlyws0XyAca0Sk-0-8e4d169bf3fac57503aeec8ec0993bfd)
【说明】在本例中,段落的开头为了实现首行缩进的效果,在段落标签<p>后面连续加上4个“ ”空格符号。