在HTML文档中，除了前面提到的和等基础标签外，还有许多其他重要的标签。这些标签共同构成了网页的基本框架和内容。接下来，我们将深入探讨HTML网页的基本标签及其作用。
2.1 标题标签
标题标签在HTML中占据着举足轻重的地位，它们通常用于定义网页的标题或主题，从而体现出标签的语义化特点。在HTML中，标题标签按照重要性从大到小依次为h1、h2、h3、h4、h5和h6，其中h1的级别最高，而h6的级别最低。通过对比不同级别的标题标签，我们可以更清晰地看到它们在网页中的不同作用和效果。接下来，我们将通过示例演示这些标题标签的实际应用和效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
运行效果为：
2.2 段落标签
在HTML中，我们使用段落标签来定义文本中的段落。通过简单的标签，我们可以将文本内容划分为不同的段落，使得网页结构更加清晰易懂。下面通过示例演示这些标题标签的实际应用和效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>《哪吒之魔童闹海》</h1>
<p>“石矶娘娘”：从一个邪恶的女魔头变成了心思单纯、爱美又壮实的角色。</p>
<p>2025年目标:“谈个敖丙的爹，买个哪吒的手镯”</p>
</body>
</html>
运行效果：
2.3 换行标签
换行标签用于实现文本的换行显示。通过这个标签，我们可以轻松地将文本内容分隔成不同的行，从而确保网页布局的整齐划一。换行标签的使用使得文本更加易于阅读，也提高了网页的整体美观度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>换行标签</title>
</head>
<body>
<h1>不问别离</h1>
你一句不问别离<br/>
还是你不愿再提<br/>
那未完留下的迷<br/>
却始终遥不可及<br/>
在某个黑色雨夜<br/>
随风声轻轻摇曳<br/>
我想在说句感谢<br/>
</body>
</html>
运行效果为：
2.4 水平线标签
水平线标签用于在网页中创建水平分隔线。通过这个标签，我们可以将网页内容划分为不同的段落，使得布局更加清晰，也增强了网页的可读性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hr标签</title>
</head>
<body>
<h1>《哪吒之魔童闹海》</h1>
<hr>
<p>“石矶娘娘”：从一个邪恶的女魔头变成了心思单纯、爱美又壮实的角色。</p>
<p>2025年目标:“谈个敖丙的爹，买个哪吒的手镯”</p>
</body>
</html>
运行效果：
2.5 字体样式标签
字体样式标签用于调整网页中文字的显示效果。通过这些标签，我们可以改变文字的字体、大小、颜色等属性，从而使得网页内容更加丰富多彩，同时也增强了网页的视觉吸引力。字体样式标签的使用，是网页设计不可或缺的一部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体样式标签</title>
</head>
<body>
<strong>哪吒之魔童闹海简介</strong><br/>
<em>天劫之后,哪吒、敖丙的灵魂虽保住了,但肉身很快会魂飞魄散。太乙真人打算用七色宝莲给二人重塑肉身。但是在重塑肉身的过程中却遇到重重困难,哪吒、敖丙的命运将走向何方?</em>
</body>
</html>
运行效果：
2.6 注释与特殊符号
注释用于在代码中添加说明，帮助开发者理解代码的功能和逻辑。而特殊符号，如<和>，则用于在HTML中插入无法直接显示的字符，如小于号和大于号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注释与特殊符号</title>
</head>
<body>
<!-- 四大名著 -->
<p><<西游记>></p>
<p><<三国演义>></p>
<p><<红楼梦>></p>
<p><<水浒传>></p>
©友帅老师
</body>
</html>
运行效果：
2.7 图像标签
在网页中，常见的图像格式包括jpg、gif、png和bmp。其中，JPG和gif因其广泛的支持性和适用性，在网页制作中最为常用。 接下来，我们将深入探讨图像标签的语法。图像标签用于在网页中嵌入图片，其基本语法为。在这个标签中，各个参数将发挥至关重要的作用。特别要强调的是alt属性和title属性，它们分别用于在图像无法加载或需要额外提示时显示替代文字和提示文字。同时，alt属性常与src属性配合使用，共同指定要显示的图像。 注意： img标签与之前学习的br标签相似，它是一个单标签，以“/”直接闭合，这种设计有助于体现标签的语义化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img标签</title>
</head>
<body>
<img src="../../imgs/html/nezha.png" />
</body>
</html>
运行效果：
2.8 链接标签
链接不仅允许用户从一个页面轻松跳转到另一个页面，还提供了锚链接和功能性链接等高级功能。下面我们通过示例代码演示如何创建一个文本超链接和一个图像超链接，并展示target参数的不同设置如何影响目标窗口的打开位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接标签</title>
</head>
<body>
<a href="./2-7-img标签.html" target="_blank">哪吒</a>
</body>
</html>
小结
通过本次介绍，我们深入了解了链接标签在网页开发中的关键作用。掌握了链接标签的语法，了解了如何通过参数来指定链接的目标和显示方式。同时，也探讨了路径的表示方法，包括相对路径和绝对路径，以及target属性的常用值self和blank。最后，通过示例代码，亲自实践了如何创建文本超链接和图像超链接，并观察了target参数的不同设置对目标窗口打开位置的影响。
