- 网页设计与制作教程: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所示。


图2-1 标题示例显示
在HTML5中,推荐使用CSS设置标题元素的属性。
2.1.2 段落元素p和换行元素br
段落标签﹤p﹥…﹤/p﹥定义段落,浏览器增加段前、段后的行距。段落的行数会依据浏览器窗口的大小而改变。而且如果段落元素的内容中有多个连续的空格(按〈Space〉键),或者连续多个换行(按〈Enter〉键),浏览器都将解读为一个空格( )。该标签支持全局标准属性和全局事件属性。段落元素的格式为:

3 标题元素h1~h6

4 段落元素p和换行元素br
﹤p﹥段落文字﹤/p﹥
在HTML5中,推荐使用CSS设置段落元素p的属性。
若要正常地换行,使用﹤br/﹥标签。﹤br/﹥标签定义一个换行,通常放在﹤p﹥标签内。需要注意的是,不要使用﹤br/﹥标签分段落,它们的语义不同,在浏览器中的显示也不同,﹤br/﹥不会增加段前、段后的行距。换行元素的格式为:
﹤br/﹥
【例2-2】列出包含﹤p﹥标签的多种属性。本例文件2-2.html在浏览器中的显示效果如图2-2所示。


图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﹥

2.1.3 水平线元素hr
使用水平线元素hr,可以在浏览器中创建一条水平标尺线(Horizontal Rule),可以在视觉上将文档分割成多个部分。线段的样式由标签的参数决定。水平线元素的格式为:
﹤hr/﹥
在HTML5中,推荐使用CSS设置水平线元素的其他属性(线条粗细、长度、颜色等)。
【例2-3】 水平线元素的基本用法。本例文件2-3.html在浏览器中的显示效果如图2-3所示。


图2-3 水平线元素示例

5 水平线元素hr

﹤hr/﹥标签强制执行一个简单的换行,将导致段落的对齐方式重新回到默认值设置(左对齐)。在HTML5中,所有﹤hr/﹥标签的呈现属性可以使用,但不推荐使用,要想更灵活地控制并美化页面布局,推荐使用CSS设置。
2.1.4 注释元素
注释元素用于在源代码中插入注释。注释的作用是方便自己和项目组的其他人员阅读和调试代码,便于以后对自己代码的理解和修改。当浏览器遇到注释时会自动忽略注释内容,浏览者在浏览器中看不见这些注释,注释只有在用文本编辑器打开文档源代码时才可见。注释元素的格式为:
﹤!--注释内容--﹥
注释并不局限于一行,长度不受限制。结束标签与开始标签可以不在一行上。
【例2-4】注释示例。本例文件2-4.html在浏览器中的显示效果如图2-4所示。


图2-4 注释显示效果
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯,这样就不会把脚本显示为纯文本。