2.3　HTML常用标签

以前的HTML由一堆没有语义的冷冰冰的标签构成。最泛滥的就是DIV+CSS，当时的页面源代码一打开就是一堆DIV+CSS，为了改变这种状况，开发者和官方提出了让HTML结构语义化。

语义化就是用合理、正确的标签来展示内容，例如用h1～h6定义标题、用li定义列表等。使用语义化标签的好处有两点：一是有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息；二是便于团队开发维护，可读性较高。根据常用标签的功能特点归纳为基础标签、文本格式化标签、列表标签、图像标签、超链接标签、框架标签、容器标签和标签嵌套。

2.3.1　基础标签

常用的基础标签如表2-2所示。

1．标题标签<h1>～<h6>

为了使网页更具语义化，经常会在页面中用到标题标签，HTML提供了6个等级的标题。<h1>标签所标记的字体最大，标签使用的数字越大则字体越小，直至<h6>标签所标记的字体最小，如例2-3所示。标题标签的默认状态为左对齐显示的黑体字。

【例2-3】　标题标签应用

在浏览器中的显示效果如图2-5所示。

标题标签的align属性用来定义标题字的对齐方式，其常用属性值有3个：left（居左）、center（居中）、right（居右），如例2-4所示。

【例2-4】　标题标签属性应用

在浏览器中的显示效果如图2-6所示。

2．段落标签<p>

在网页中要把文字有条理地显示出来，离不开段落标签，就如同平常写文章一样，整个网页也可以分为若干段落，而段落的标签就是<p></p>，如例2-5所示。

<p>标签的align属性的常用属性值为left（居左）、center（居中）、right（居右）。

【例2-5】　段落标签应用

在浏览器中的显示效果如图2-7所示。

3．换行标签<br>

<br>可插入一个简单的换行符，就和普通文本文档插入的换行符作用一样，都表示强制换行。<br>标签是空标签（单标签），<br>标签每次只能换一行，如需换多行，则可以写多个<br>标签，如例2-6所示。

【例2-6】　换行标签应用

在浏览器中的显示效果如图2-8所示。

注意：<br>标签只用于简单地开始新的一行，而当浏览器遇到<p>标签时，通常会在相邻的段落之间插入垂直的间距。

4．水平线标签<hr>

在网页中常常会看到一些水平线将段落与段落之间隔开，使文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过水平线标签<hr>来完成，<hr/>就是创建横跨网页水平线的标签，可以在视觉上将文档分隔成多个部分，如例2-7所示。

水平线标签<hr>的属性、属性值及描述如表2-3所示。

【例2-7】　水平线标签应用

在浏览器中的显示效果如图2-9所示。

温馨提示：获取颜色的属性值时可以下载“屏幕颜色拾取工具”，获取十六进制数和rgb函数值。

5．字体标签<font>

<font>标签是一个设置文本文字样式的标签，可以设置文本的字体样式、字体的尺寸、字体的颜色，如表2-4所示。下面通过简单的代码示例，为大家介绍HTML中<font>标签的用法，如例2-8所示。

【例2-8】　字体样式的应用

在浏览器中的显示效果如图2-10所示。

注意：在HTML5中不推荐使用<font>标签，建议用CSS代替。

6．预格式化<pre>

利用<pre>标签对网页中的文字段落进行预格式化，浏览器会完整地保留设计者在源文件中所定义的格式，包括空格、缩进及其他特殊格式，如例2-9所示。

【例2-9】　预格式化标签应用

在浏览器中的显示效果如图2-11所示。

2.3.2　文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下画线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示，常用的文本修饰标签如表2-5所示。

下面通过简单的代码示例，介绍文本格式化标签的用法，如例2-10所示。

【例2-10】　文本格式化标签应用

在浏览器中的显示效果如图2-12所示。

注意：使用<em></em>表示着重的文本，替代<i></i>斜体标签；使用<strong></strong>表示重要文本，替代<b></b>粗体标签，但<i></i>和<b></b>仍可以使用。

2.3.3　特殊符号

浏览器总会截短HTML页面中的空格。如果在文本中写10个空格，则在显示该页面之前，浏览器会删除其中的9个。如果需要在页面中增加空格的数量，则需要使用&nbsp；字符实体，其他特殊字符的插入与空格符号的插入方式相同，如例2-11所示，特殊符号如表2-6所示。

【例2-11】　特殊字符应用

在浏览器中的显示效果如图2-13所示。

2.3.4　图像标签

图片是在网页中必不可少的元素，灵活地应用会给网页增添不少色彩。使用img标签将图片插入网页中。<img>是单标签，图片样式由img标签的属性决定。img标签有两个必选属性：src、alt，其他属性为可选属性，具体属性、取值及描述如表2-7所示。

基本语法如下：

src是source的简写，用于指明图片的存储路径，通常是URL形式。可以采用相对路径和绝对路径来表示文件的位置，如src="D:\web\logo.jpg"是采用绝对路径，而src="images/logo.jpg"是采用相对路径。

在网页中插入图像的应用如例2-12所示。

【例2-12】　图像标签应用

代码解释：在代码中加入了title属性，当鼠标悬停在图片上时显示属性值内容；在代码中设置了图像的宽、高及边框；在代码中加入了alt属性，当图片未能正常显示时，用于给用户的提示信息。

在浏览器中的显示效果如图2-14所示。

图像img标签的hspace和vspace属性用来控制图像的水平距离和垂直距离，而且两者均以像素为单位。hspace属性用于调整图像左右两边的空白距离，vspace属性用于调整图像的上下空白距离。

基本语法如下：

注意：在实际应用中很少直接使用图像的对齐属性，一般采用CSS替代。

2.3.5　绝对路径和相对路径

如去一个地方，首先要明确到达此地的路径。编程也是如此，要加载图片或者引入其他代码文件，也需要设置正确的路径。

路径分为绝对路径与相对路径：

（1）山西省太原市南内环街967号xxx小区17号楼2单元502，这是一个绝对路径。

（2）15号楼左手边那栋楼2单元502，这是一个相对路径。

由此得出，绝对路径是对一个位置的路径进行完整描述，相对路径则是以某一个事物为参考描述位置。

程序中的相对路径与绝对路径也是同样的道理，下面进行详细介绍。

1．绝对路径

完整地描述文件位置的路径为绝对路径，举两个最为常见的绝对路径的例子。

（1）完整的URL地址，例如，https://z3.ax1x.com/2021/07/28/WIzidA.jpg。DNS服务器能够将网址解析到服务器硬盘下WIzidA.jpg图片文件。

（2）完整盘符，例如，D:\web\images\logo.jpg。图片的存储位置得到了完整描述，非常明确。

特别说明：WebStorm开发工具有的版本不支持对绝对路径的访问，工具自身有缺陷，可选用其他开发工具演示。

2．相对路径

相对于当前文件的路径，前端开发中比较常用的是路径表示方法。首先介绍路径的语法格式：

（1）“/”表示根目录。

（2）“./”表示当前所在的路径，可以省略不写。

（3）“../”表示上一层路径。

（4）“../../”表示当前文件所在目录的上上级目录，依此类推。

3．相对路径实例

demo1目录下有demo1.1文件夹、images文件夹及index3.html文件，demo1.1文件夹下有index2.html和2.jpg文件，images文件夹下有1.jpg和demo1.2/index1.html文件，文件夹目录如图2-15所示。

如index2.html引用2.jpg，则文件路径如下：

如index1.html引用images文件夹下的1.jpg，则文件路径如下：

如index2.html引用images文件夹下的1.jpg，则文件路径如下：

index3.html访问demo1.1文件夹中的2.jpg，则文件路径如下：

4．两者比较

相对路径更方便更改，相对比较灵活，但是如果使用不慎，则易造成链接失效，并且容易被人抄袭；绝对路径能避免这个问题，但是灵活性上相对较弱。网页中不推荐使用绝对路径，因为网页制作完成后需要将所有的文件上传到服务器，使用绝对路径会造成图片路径错误，网页无法正常显示设置的图片。

2.3.6　超链接标签

超链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都由超级链接串接而成，超链接完成了页面之间的跳转。超链接是浏览者和服务器进行交互的主要手段，在后面的技术中会逐步深化学习。

1．基本语法

超链接标签属性介绍如下。

（1）href：链接指向的目标地址（URL），必需属性。

（2）name：用于设定锚的名称。

（3）title属性：用于定义鼠标经过时的提示文字。

（4）target属性：指向打开的目标窗口，如表2-8所示。

2．超链接应用

添加了链接后的文字有其特殊的样式，以和其他文字区分，默认链接样式为蓝色文字，有下画线。超级链接用于跳转到另一个页面，<a></a>标签有一个href属性负责指定新页面的网址。href指定的地址一般使用相对地址。

网站开发中，href属性的链接URL的方式有以下两种：

（1）外部链接，如http://www.baidu.com。

（2）内部链接，直接链接内部页面名称即可，如<a href="index.html">首页</a>。

如果当时没有确定链接目标，则通常将链接标签的href属性值定义为“#”（href="#"），表示该链接暂时为一个空链接。

不仅可以创建文本超链接，在网页中各种网页元素（如图像、表格、声频、视频等）都可以添加超链接，如例2-13所示。

【例2-13】　超链接应用

在浏览器中的显示效果如图2-16所示。

3．什么是锚

很多网页文章的内容比较多，导致页面很长，浏览者需要不断地拖动浏览器的滚动条才能找到需要的内容。超级链接的锚功能可以解决这个问题，锚（anchor）的概念引自于船只上的锚，锚被抛下后，船只就不容易漂走、迷路。实际上锚用于在单个页面内的不同位置进行跳转，有的地方叫作书签，如例2-14所示。

通过创建锚点链接，用户能够快速定位目标内容。创建锚点链接分为以下两步：

（1）使用<a href="#锚点名">链接文本</a>创建链接文本。

（2）使用相应<a name="锚点名"></a>标注跳转目标的位置。

【例2-14】　超链接的锚

在浏览器中的显示效果如图2-17所示。

4．HTML5新增download属性

download属性规定被下载的超链接目标。该属性也可以设置一个值来规定下载文件的名称。所允许的文件类型有.img、.pdf、.txt、.html等，浏览器将自动检测正确的文件扩展名，文件大小没有限制。

基本语法格式如下：

注意：只有Firefox和Chrome浏览器支持download属性。

2.3.7　框架标签

框架标签用于在网页的框架定义子窗口。由于框架标签对于网页的可用性有负面影响，所以在HTML5不再支持HTML4中原有的框架标签<frame>和<frameset>，只保留了内联框架标签<iframe>，也叫浮动框架标签。

iframe标签也是一个比较特殊的框架，是一个可以放在浏览器中的小窗口，可以出现在页面的任何一个位置上，但是整个页面并一定在框架页面上，iframe框架完全由开发者定义高度和宽度，以便在网页中嵌套另外一个网页，如例2-15所示。

基本语法如下：

iframe标签的属性及描述如表2-9所示。

【例2-15】　浮动框架标签应用

代码解释：在第1个iframe标签中插入一个名称为left的浮动框架，并为其设置了内部显示的网页、宽、高、边框；在第2个iframe标签中插入一个名称为right的浮动框架，并为其设置了内部显示的网页、宽、高、边框、左右边距等属性；在a href锚点将浮动框架left、right设置为超链接的链接目标。在浏览器中的显示效果如图2-18所示。单击超链接时会在左、右浮动框架中分别显示不同的页面，如图2-19所示。

2.3.8　容器标签

在网页制作过程中，可以把一些独立的逻辑部分划分出来，放在一个标签中，这个标签的作用就相当于一个容器，常用的容器标签有<div>和<span>。

<div>简单而言是一个区块容器标签，也就是说<div></div>之间是一个容器，可以容纳段落、标题、表格、图片、章节、摘要和备注等各种HTML元素，因此，可以把<div>与</div>中的内容视为一个独立的对象，用于CSS的控制。声明时只要对<div>进行相应的控制，其中的各标签元素都会因此而改变。

<span>标签和<div>标签一样，作为容器标签而被广泛用于HTML语言中，如例2-16所示。

<div>标签与<span>标签的区别如下。

（1）div和span元素没有特定的语义，都是用来帮助页面排版的元素。

（2）<div>是一个块级（block-level）元素，它包围的元素会自动换行。

（3）<span>仅仅是一个行内元素（Inline Element），在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用<span>元素。

（4）容器级的标签（<div>）可以嵌套其他所有的标签，文本的标签（<span>）只能嵌套文字、超链接、图片。

【例2-16】　容器标签应用

在浏览器中的显示效果如图2-20所示。

注意：<span>标签可以包含于<div>标签之中，成为它的子元素，而反过来则不成立，即<span>标签不能包含<div>标签。