- 网页设计与制作教程:Web前端开发(第6版)
- 刘瑞新主编
- 1423字
- 2021-12-17 16:15:05
2.1 基本块级元素
基本块级元素包括标题元素、段落元素和水平线元素。
2.1.1 标题元素hl~h6
﹤hl﹥~﹤h6﹥标签可定义标题。其中,﹤hl﹥定义最大的标题,﹤h6﹥定义最小的标题。由于h元素拥有确切的语义,因此在开发过程中需要选择恰当的标签层级构建文档的结构。通常,﹤h1﹥用于最顶层的标题,﹤h2﹥、﹤h3﹥和﹤h4﹥用于较低的层级,﹤h5﹥和﹤h6﹥由于文档层级关系很低、字号非常小而很少使用。该标签支持全局标准属性和全局事件属性。
通过设置不同大小的标题,增加文章的条理性。标题元素的格式为:
﹤hn﹥标题文字﹤/hn﹥
n指定标题文字的层级,n取1~6之间的值。
【例2-1】列出HTML中的各级标题。本例文件2-1.html在浏览器中的显示效果如图2-1所示。
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_24_01.jpg?sign=1739478563-FMrJ90KITWlGtCZ27A4F29bIgjw6ACNT-0-d4b650a304eef6f1a2e48d422f085f45)
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_24_02.jpg?sign=1739478563-nI0cPHWzg5OcBU8WtZNcXrPmMIX4dlKf-0-ca4186a66321dbe3278b7bee3d786d49)
图2-1 标题示例显示
在HTML5中,推荐使用CSS设置标题元素的属性。
2.1.2 段落元素p和换行元素br
段落标签﹤p﹥…﹤/p﹥定义段落,浏览器增加段前、段后的行距。段落的行数会依据浏览器窗口的大小而改变。而且如果段落元素的内容中有多个连续的空格(按〈Space〉键),或者连续多个换行(按〈Enter〉键),浏览器都将解读为一个空格( )。该标签支持全局标准属性和全局事件属性。段落元素的格式为:
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_24_03.jpg?sign=1739478563-G3sO5buqxhYnClalZ3a2xCPkqmrFmxlg-0-0e8c78ff1f7fe93f1424540ca3fa60a0)
3 标题元素h1~h6
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_24_04.jpg?sign=1739478563-kvTXoGZ6rwjh3A6i7kbDTFOQHANMkjpW-0-8262b81d2caade6b126fb63b2d9e46fe)
4 段落元素p和换行元素br
﹤p﹥段落文字﹤/p﹥
在HTML5中,推荐使用CSS设置段落元素p的属性。
若要正常地换行,使用﹤br/﹥标签。﹤br/﹥标签定义一个换行,通常放在﹤p﹥标签内。需要注意的是,不要使用﹤br/﹥标签分段落,它们的语义不同,在浏览器中的显示也不同,﹤br/﹥不会增加段前、段后的行距。换行元素的格式为:
﹤br/﹥
【例2-2】列出包含﹤p﹥标签的多种属性。本例文件2-2.html在浏览器中的显示效果如图2-2所示。
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_25_01.jpg?sign=1739478563-hbfPBRBn5XlBjAbhMCCzg6s7sYUBlDlk-0-beec53094597c07de5711761da8fdb89)
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_25_02.jpg?sign=1739478563-j2xi2JD6KKgqMilSAZOHgRgzaS6YIh3Y-0-3a316d3e47cdba0ccbc4e7404ba78125)
图2-2 段落、换行示例
﹤h3﹥1.1.1  Web服务器﹤/h3﹥
﹤p﹥Web服务器也称为WWW(World Wide Web)服务器,一般指网站服务器,WWW是Internet的多媒体信息查询工具,是Internet上发展最快和目前用得最广泛的服务。﹤br/﹥正是WWW工具使得近年来Internet迅速发展,且用户数量飞速增长。﹤/p﹥
﹤p﹥    Web服务器的主要功能是提供网上信息浏览服务。﹤br/﹥Web服务器可以解析HTTP,当Web服务器接收到一个HTTP请求时,会返回一个HTTP响应,这样浏览器等Web客户端就可以从服务器上获取网页(HTML),包括CSS、JS、音频、视频等资源。﹤/p﹥
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_25_03.jpg?sign=1739478563-r3uS10EUgzIDYIBi5GUk1a9MH8YasWGU-0-8739cbebf5d7229d8b8a8940041fe52b)
2.1.3 水平线元素hr
使用水平线元素hr,可以在浏览器中创建一条水平标尺线(Horizontal Rule),可以在视觉上将文档分割成多个部分。线段的样式由标签的参数决定。水平线元素的格式为:
﹤hr/﹥
在HTML5中,推荐使用CSS设置水平线元素的其他属性(线条粗细、长度、颜色等)。
【例2-3】 水平线元素的基本用法。本例文件2-3.html在浏览器中的显示效果如图2-3所示。
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_25_04.jpg?sign=1739478563-MYDllGnPbENcSfeNwrPAHjJPDVXEltoL-0-a99f623c31a254650f94ebdde92ebd22)
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_25_05.jpg?sign=1739478563-wEaSTQLwT0vxLntbcCbbvKlSWEMQ7Y6h-0-9965bd524edab3b7de2e8cd83abed216)
图2-3 水平线元素示例
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_25_06.jpg?sign=1739478563-zk4sk4K3sMhUdz1EtoUa2eqc1iNt1yeQ-0-97b03f445a0ae26cfbdef517a728ea86)
5 水平线元素hr
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_26_01.jpg?sign=1739478563-nmMOkNdi5GFzAagx9UaAjf24oHuSwq0P-0-affbe0c1b19a3ccc2762ac9edda8fbbd)
﹤hr/﹥标签强制执行一个简单的换行,将导致段落的对齐方式重新回到默认值设置(左对齐)。在HTML5中,所有﹤hr/﹥标签的呈现属性可以使用,但不推荐使用,要想更灵活地控制并美化页面布局,推荐使用CSS设置。
2.1.4 注释元素
注释元素用于在源代码中插入注释。注释的作用是方便自己和项目组的其他人员阅读和调试代码,便于以后对自己代码的理解和修改。当浏览器遇到注释时会自动忽略注释内容,浏览者在浏览器中看不见这些注释,注释只有在用文本编辑器打开文档源代码时才可见。注释元素的格式为:
﹤!--注释内容--﹥
注释并不局限于一行,长度不受限制。结束标签与开始标签可以不在一行上。
【例2-4】注释示例。本例文件2-4.html在浏览器中的显示效果如图2-4所示。
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_26_02.jpg?sign=1739478563-uMrYulHuO3oZLM06i1ZbymwnkYVe9qxG-0-9a03bf2219002be07a5c8df28db8c3ee)
![](https://epubservercos.yuewen.com/DF99B2/21889220801186806/epubprivate/OEBPS/Images/978-7-111-66646-2_26_03.jpg?sign=1739478563-DJ4RLYRXvRmziNOYDDEq3oSbZDBYS4xt-0-3a8b7ea389dd37008f736b0b8cb32528)
图2-4 注释显示效果
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯,这样就不会把脚本显示为纯文本。