上一节教程中，我们已经简单介绍了HTML文件的基本结构和语法规范，本节教程中我们将详细讲解HTML的标签和属性。
1、HTML标签详解
HTML是构建网页的标准语言。HTML代码由“标签”构成，标签用尖括号“< >”包围。每一个HTML文件是由多个“<标签>内容</标签>”标记组成的，所以HTML被称为“标记语言”。标签主要有以下几个特点：
成对标签：大部分标签成对出现，如 <h2>（开始标签）和 </h2>（结束标签），中间包含标签内容。
单标签：有些标签是单标签，只需要使用一个标签即可，如 例如: <br/><hr/><input/><img/>。
大小写不敏感：标签不区分大小写，比如：<html>和<HTML>，但是为了整体美观，推荐全部使用小写。
标签嵌套：标签可以嵌套。但是不能交叉嵌套。比如可以写成：<b><a></a></b>，但是不能写成：<a><b></a></b>。
（1）HTML基本结构标签
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <!doctype> | 表示文档类型 | HTML5使用<!doctype html> |
| <html> | 文件声明 | 让浏览器知道这是html文件 |
| <head> | 头部信息 | 用来完成一个网页的相关设置 |
| <title> | 标题 | 指定整个网页的标题，在浏览器最上方显示 |
| <body> | 主体内容 | 包含了网页所要显示的内容 |
| <script> | 表示脚本 | 定义脚本代码（通常为JavaScript） |
（2）排版标记
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <!--注释--> | 代码注释 | 注释的内容不会显示在网页上（仅在源代码中可见）。 |
| <p> | 段落标记 | 代表一个段落 |
| <br> | 换行标记 | 插入单个换行符 |
| <hr> | 水平线 | 插入一条水平线 |
| <center> | 居中 | 用于居中其包含的文本或图像 |
| <pre> | 定义预格式化的文本 | 使文本按照原始码显示，通常会保留空格和换行符 |
| <div> | 区隔标记 | 表示一块可显示HTML的区域 |
（3）字体标记
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <strong> | 加重语气 | 以粗体显示文本 |
| <b> | 粗体标记 | 产生字体加粗的效果 |
| <em> | 强调标记 | 字体出现斜体效果 |
| <i> | 斜体标记 | 字体出现斜体效果 |
| <tt> | 打字字体 | 用于定义打字机文本 |
| <u> | 加上底线 | 带下划线显示文本 |
| <h1> | 一级标题标记 | 最高级别的标题，字体变粗变大加宽 |
| <h2> | 二级标题标记 | 将字体变粗变大加宽 |
| <h3> | 三级标题标记 | 将字体变粗变大加宽 |
| <h4> | 四级标题标记 | 将字体变粗变大加宽 |
| <h5> | 五级标题标记 | 将字体变粗变大加宽 |
| <h6> | 六级标题标记 | 最低级别的标题，将字体变粗变大加宽 |
| <font> | 字形标记 | 设定字形、大小、颜色 |
| <basefont> | 基准字形标记 | 设定所有字形、大小、颜色 |
| <big> | 字体加大 | 令字体稍为加大 |
| <small> | 表示小文本 | 指定文本要以比当前字体稍小的字体显示 |
| <strike> | 画线删除 | 为字体加一删除线 |
| <code> | 标记代码 | 表示计算机代码文本 |
| <kbd> | 定义键盘文本 | 用来表示文本是从键盘上键入的，字体稍为加宽 |
| <samp> | 范例 | 表示代码范例，字体稍为加宽 |
| <var> | 表示变量 | 表示数学变量或计算机代码中的变量 |
| <cite> | 传记引述 | 用斜体显示标明引文 |
| <blockquote> | 定义块引用 | 表示文本中的一段引用语 |
| <dfn> | 术语定义 | 表示术语的定义 |
| <address> | 地址标记 | 表示特定信息，如地址、签名、作者、文档信息 |
| <sub> | 下标字 | 代表下标文本 |
| <sup> | 上标字 | 表示上标文本，包括指数（平方、立方等） |
（4）清单标记
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <ol> | 顺序列表清单 | 清单项目将以数字、字母顺序排列 |
| <ul> | 无序列表清单 | 清单项目将以圆点排列 |
| <li> | 列表清单项目 | 每一标记标示一项清单项目 |
| <menu> | 选单清单 | 清单项目将以圆点排列，类似<ul> |
| <dir> | 目录清单 | 清单项目将以圆点排列，类似<ul> |
| <dl> | 定义列表清单 | 清单分两层出现 |
| <dt> | 定义列表标题 | 定义列表中各列表项的标题 |
| <dd> | 定义列表条目 | 定义列表中的条目部分 |
（5）表格标记
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <table> | 表格标记 | 用来定义表格，设定表格的各项参数 |
| <caption> | 表格标题 | 表格的标题，对表格的简单描述 |
| <tbody> | 定义表格的主体 | 对表格中的行进行分组，用于组合表格的主体内容 |
| <thead> | 定义表格的头部 | 用于组合表格的表头内容 |
| <tfoot> | 定义表的页脚 | 用于组合表格的页脚内容 |
| <tr> | 表格列 | 表示表格中的一行 |
| <td> | 表格栏 | 指定表格中的单元格 |
| <th> | 表格标题列 | 类似<td>，标题列将在单元格中居中并以粗体显示 |
（6）表单标记
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <form> | 表单标记 | 定义表单，为用户输入创建HTML表单 |
| <textarea> | 多行文本输入控件 | 提供文字方盒以输入多行文本 |
| <input> | 输入标记 | 创建各种表单输入控件，用于收集用户的输入数据 |
| <select> | 选择标记 | 用来创建下拉列表，用户可以从下拉菜单里选择一个选项 |
| <option> | 选项 | 用于创建下拉列表中的选项，每一标记标示一个选项 |
| <button> | 按钮 | 会被显示为一个按钮 |
| <fieldset> | 表示字段集 | 在字段集包含的文本和其它标签外面画一个方框 |
| <legend> | 插入标题 | 在<fieldSet>标签绘制的方框内插入一个标题 |
| <label> | 定义标记 | 为表单标签提供了文本标记，通过for属性建立关联 |
（7）图形标记
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <img> | 图像标记 | 定义页面中的图像，用以插入图像及设定图像属性 |
（8）连结标记
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <a> | 超链接标记 | 用来创建超链接，链接到另一个网页或者HTML文件 |
| <base> | 基准链接标记 | 表示页面中所有链接的基本URL |
（9）框架标记
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <frameset> | 框架集设定 | 定义一个或多个框架，被用来组织多个框架 |
| <frame> | 单个框架设定 | 定义一个特定的框架，在<frameset>中使用 |
| <iframe> | 嵌入框架 | 在网页中间插入框架，用于在网页中嵌入另一个网页 |
| <noframes> | 不支援框架 | 设定当浏览器不支持框架时的提示 |
（10）影像地图
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <map> | 定义图像映射 | 使用图像来创建点击区域，每个区域都链接到另一个页面 |
| <area> | 图像映射区域 | 表示图像映射内的点击区域。与<map><img>标签一起使用。 |
（11）多媒体
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <bgsound> | 背景声音 | 用于插入背景声音或音乐 |
| <embed> | 多媒体 | 允许嵌入声音、音乐或影像等任何类型的内容 |
（12）其他标记
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <marquee> | 滚动文字 | 创建一个滚动的文本字幕 |
| <meta> | 开头定义 | 用来描述一个HTML网页文档的属性 |
| <link> | 关系定义 | 定义文档与外部资源之间的关系 |
（13）样式表
| 标签类型 | 意义 | 作用 |
|---|---|---|
| <style> | 定义样式表 | 用于设置页面中标签的样式，控制网页版面 |
| <span> | 自定义标记 | 通常用于在文本中添加样式，从而对文本中的部分内容设置单独的样式。 |
2、HTML标签的属性
在HTML标签中，标签的属性是用来修饰标签的，属性必须位于开始标签里，一个标签的属性可能不止一个，多个属性之间用空格隔开，多个属性之间不区分先后顺序。例如：
动手练一练：
<img src="image.jpg" alt="描述文字" width="500" height="300">
每个属性都有值，属性和属性值之间用等号链接，属性值包含在引号当中，属性总是以名称/值对的形式出现。
比如：<a href="https://www.example.com">超链接</a>中的“href”就是<a>标签的属性，“https://www.example.com”就是属性值。
HTML中常见的标签属性包括：class、id、src、alt、href、style、title等。这些属性在HTML网页开发中非常重要，开发人员可以通过属性定义文本、图像、链接、表格、表单等标签，并控制它们的外观和行为，从而提升网页的功能性、可访问性和用户体验。
class属性：为标签分配一个或多个类名，以便引用CSS样式或JavaScript脚本。例如：<div class="container highlight"></div>。
id属性：为特定HTML标签指定唯一的标识符，通常用于CSS样式和JavaScript操作。id属性为标签指定了一个唯一的标识符，这个id在整个HTML文档中必须是唯一的。例如：<div id="container">文本内容</div>。
src属性：用于指定图像或脚本文件的来源。在图像标签<img>中，src属性表示图像的文件路径或URL；在脚本标签<script>中，src属性表示外部脚本文件的位置。
alt属性：用于提供图像的替代文本，当图像无法加载时或用户使用屏幕阅读器时，替代文本将被显示。
href属性：用于指定超链接的目标URL，可以是另一个HTML文档的路径或URL。例如：<a href="https://example.com">链接文本</a>。
style属性：直接在标签上定义内联CSS样式。通过使用style属性，可以直接在某个标签上应用CSS规则，而无需使用外部或内部样式表。例如：<p style="color: red; font-size: 15px;">这是一个带有内联样式的段落。</p>。
title属性：属性主要用于提供关于标签的额外信息，当用户将鼠标悬停在该标签上时，浏览器会显示一个小的提示框，显示title属性中定义的内容。例如，<img src="image.jpg" alt="描述性文本" title="这是图片标题">，虽然<img>标签通常使用alt属性来提供替代文本，但title属性也可以用于提供额外的信息。
通过合理使用上面这些属性，开发者可以精确地控制标签的显示方式、交互行为等，进而创建出功能丰富、用户友好的网页。