1. `<html>` 标签：
`<html>` 标签用于定义 HTML 文档的开始和结束。在 `<html>` 中，我们可以包含 `<head>` 和 `<body>` 标签，以便定义文档的头部和主体部分。在 HTML5 中，我们可以省略 `<html>` 标签。
例子：
<html> <head> <title>文章标题</title> </head> <body> <p>在这篇文章中，我想要分享我的思考和经验。随着社会的不断发展，我们需要不断学习和适应新的环境和挑战。希望我的分享能够给读者带来一些启示和帮助。</p > </body> </html>
2. `<head>` 标签：
`<head>` 标签定义了文档的头部，包含文档的元数据，如标题、关键词等信息，不会在浏览器窗口中显示。我们可以在 `<head>` 中包含 `<title>`、`<meta>`、`<link>`、`<style>`、`<script>` 等标签。
例子：
以下是一个使用 `<head>` 标签定义文档头部信息的 HTML 代码：
```
<!DOCTYPE html> <html> <head> <title>这是文档的标题</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <h1>这是文章的主题</h1> <p>这是文章的正文内容</p> </body> </html>
```
其中：
- `<title>` 标签定义了文档的标题；
- `<meta>` 标签用于设置页面的元数据，如编码格式、关键词等；
- `<link>` 标签用于引入外部样式表；
- `<script>` 标签用于引入外部脚本文件或者内嵌 JavaScript 代码；
- 此外还可以包含其他的元数据信息，如 Open Graph Protocol 等。
3. `<title>` 标签：
`<title>` 标签用于定义文档的标题。浏览器会将 `<title>` 中的文本显示在浏览器的标题栏或标签页上。`<title>` 标签应该放在 `<head>` 中。
例子：
<html> <head> <title>这是文档的标题</title> </head> <body> <h1>这是文章的主题</h1> <p>这是文章的内容。</p> </body> </html>
4. `<body>` 标签：
`<body>` 标签定义文档的主体部分，包含页面的所有内容，如文本、图像、视频等。`<body>` 标签应该放在 `<html>` 中。
例子：
<html> <head> <title>这是文档的标题</title> </head> <body> <h1>这是文章的主题</h1> <p>这是文章的内容。</p> <img src="https://oss.qunapu.com/upload/2023/05/202305111683812052443796.jpg" alt="这是例子图片"> </body> </html>
5. `<p>` 标签：
`<p>` 标签定义一个段落。一系列连续的文本或行内元素会被组合成一个段落。
例子：
例如，以下是一个使用 `<p>` 标签定义了一个段落的 HTML 代码：
```
<html> <head> <title>这是文档的标题</title> </head> <body> <h1>这是文章的主题</h1> <p>这是文章的第一个段落。</p> <p>这是文章的第二个段落。</p> </body> </html>
```
6. `<img>` 标签：
`<img>` 标签用于定义图像。`<img>` 元素必须包含 src 属性，该属性指定图像的 URL。`<img>` 元素可以包含 alt、width、height、srcset、sizes 等属性。
例子：
以下是一个使用 `<img>` 标签显示图片的 HTML 代码：
```
<html> <head> <title>这是文档的标题</title> </head> <body> <h1>这是文章的主题</h1> <p>下面是一张图片：</p> <img src="https://oss.qunapu.com/upload/2023/05/202305111683812052443796.jpg" alt="这是例子图片" width="500" height="200"> </body> </html>
```
其中，`src` 属性指定了图片的 URL，`alt` 属性指定了图片的替换文本（在图片无法加载时显示），`width` 和 `height` 属性指定了图片的宽度和高度，以确保图片能正确地显示出来。我们还可以使用 `srcset` 和 `sizes` 属性指定不同屏幕大小下显示不同尺寸（宽度）的图片。
7. `<a>` 标签：
`<a>` 标签用于定义超链接。`<a>` 元素必须包含 href 属性，该属性指定链接的 URL。`<a>` 元素可以包含 title、target、download 等属性。
例子：
以下是一个使用 `<a>` 标签创建超链接的 HTML 代码：
```
<html> <head> <title>这是文档的标题</title> </head> <body> <h1>这是文章的主题</h1> <p>通过超链接访问其他网页：</p> <a href=" " target="_blank" title="打开例子网页">跳转到示例站点</a> </body> </html>
```
其中，`href` 属性指定了链接的 URL，`target` 属性指定了链接的打开方式，`_blank` 表示在新窗口中打开链接。`title` 属性指定了鼠标悬停在链接上时显示的文本。我们还可以使用 `download` 属性指定链接下载资源。
8. `<ul>` 和 `<li>` 标签：
`<ul>` 标签定义无序列表，包含一组无序的列表项。列表项由 `<li>` 标签定义，可以包含任意 HTML 元素。
例子：
以下是一个使用 `<ul>` 和 `<li>` 标签定义无序列表的 HTML 代码：
```
<!DOCTYPE html> <html> <head> <title>这是文档的标题</title> </head> <body> <h1>这是文章的主题</h1> <p>这是文章的正文内容</p> <ul> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3<ul> <li>嵌套列表项 1</li> <li>嵌套列表项 2</li> </ul> </li> <li>列表项 4</li> </ul> </body> </html>
```
其中：
- `<ul>` 标签定义了一个无序列表；
- `<li>` 标签定义了列表项，可以包含任意 HTML 元素；
- 可以嵌套无序列表，创建更复杂的列表结构。
9. `<ol>` 和 `<li>` 标签：
`<ol>` 标签定义有序列表，包含一组有序的列表项。列表项由 `<li>` 标签定义，可以包含任意 HTML 元素。`<ol>` 元素可以包含 start、reversed、type 等属性。
例子：
以下是一个使用 `<ol>` 和 `<li>` 标签定义有序列表的 HTML 代码：
```
<!DOCTYPE html> <html> <head> <title>这是文档的标题</title> </head> <body> <h1>这是文章的主题</h1> <p>这是文章的正文内容</p> <ol start="3" type="I"> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3<ol reversed> <li>嵌套列表项 1</li> <li>嵌套列表项 2</li> </ol> </li> <li>列表项 4</li> </ol> </body> </html>
```
其中：
- `<ol>` 标签定义了一个有序列表；
- `<li>` 标签定义了列表项，可以包含任意 HTML 元素；
- `<ol>` 元素可以包含 start、reversed、type 等属性，分别用于设置列表项的起始编号、倒序排列和列表类型；
- 可以嵌套有序列表，创建更复杂的列表结构。
10. `<table>`、`<tr>`、`<th>`、`<td>` 标签：
`<table>` 标签定义表格，`<tr>` 标签定义表格行，`<th>` 标签定义表头单元格，`<td>` 标签定义表格数据单元格。
例子：
以下是一个使用 `<table>`、`<tr>`、`<th>`、`<td>` 标签定义表格的 HTML 代码：
```
<!DOCTYPE html> <html> <head> <title>这是文档的标题</title> </head> <body> <h1>这是文章的主题</h1> <p>这是文章的正文内容</p> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>18</td> <td>男</td> </tr> <tr> <td>小红</td> <td>20</td> <td>女</td> </tr> </tbody> </table> </body> </html>
```
其中：
- `<table>` 标签定义了一个表格；
- `<thead>` 标签定义了表格的表头，包含一行或多行表头单元格；
- `<tr>` 标签定义了表格的行，包含一个或多个单元格；
- `<th>` 标签定义了表头单元格，通常在单元格中加粗并居中显示文本；
- `<td>` 标签定义了表格数据单元格，通常左对齐显示文本；
- `<tbody>` 标签定义了表格的主体，包含一行或多行数据行单元格。
11. `<form>`、`<input>`、`<label>` 标签：
`<form>` 标签定义一个表单，通常包含多个表单输入域，如文本输入框、下拉框、复选框等。`<input>` 元素定义表单的输入域，`<label>` 元素定义输入域的标签。
例子：
以下是一个使用 `<form>`、`<input>`、`<label>` 标签定义表单的 HTML 代码：
```
<!DOCTYPE html> <html> <head> <title>这是文档的标题</title> </head> <body> <h1>这是文章的主题</h1> <p>这是文章的正文内容</p> <form action="/submit" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名" required> <br> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="请输入密码" required> <br> <label for="gender">选择性别：</label> <select id="gender" name="gender"> <option value="male">男</option> <option value="female">女</option> </select> <br> <label for="interest">选择爱好：</label> <br> <input type="checkbox" id="interest1" name="interest" value="reading"> <label for="interest1">阅读</label> <input type="checkbox" id="interest2" name="interest" value="sports"> <label for="interest2">运动</label> <input type="checkbox" id="interest3" name="interest" value="music"> <label for="interest3">音乐</label> <br> <input type="submit" value="提交"> </form> </body> </html>
```
其中：
- `<form>` 标签定义了一个表单；
- `action` 属性用于指定表单提交的 URL；
- `method` 属性用于指定表单提交的方法，可以是 POST 或 GET；
- `<label>` 元素定义了表单输入域的标签，使用 `for` 属性关联了对应的输入域；
- `<input>` 元素定义了表单的输入域，通过 `type` 属性指定类型，可以是文本输入框、密码输入框、下拉框、单选框、复选框等；
- `id` 属性用于标识输入域；
- `name` 属性用于指定输入域的名称，作为表单提交时的参数名；
- `value` 属性用于设置输入域的初始值；
- `placeholder` 属性用于设置输入域的占位符；
- `required` 属性用于指定输入域为必填项。
12. `<div>` 和 `<span>` 标签：
`<div>` 标签定义一个块级（block-level）容器，用于组合其他 HTML 元素。`<span>` 标签定义一个内联（inline）容器，用于对其他文本或行内元素进行分组和样式化。
例子：
以下是一个使用 `<div>` 和 `<span>` 标签定义容器的 HTML 代码：
```
<!DOCTYPE html>
<html>
<head>
<title>这是文档的标题</title>
<style>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}
.box {
width: 200px;
height: 200px;
background-color: #444;
color: #fff;
text-align: center;
}
.text-red {
color: red;
}
.text-bold {
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<span class="text-red">这是一个内联容器，可以用于对文字进行样式设置。</span>
<br>
<span class="text-bold">这也是一个内联容器，可以用于对文字进行样式设置。</span>
</div>
</div>
</body>
</html>```
其中：
- `<div>` 标签定义了一个块级容器，用于组合其他 HTML 元素；
- `<span>` 标签定义了一个内联容器，用于对其他文本或行内元素进行分组和样式化；
- `class` 属性用于指定 CSS 样式名称，可以通过 CSS 来设置容器的布局、样式等；
- CSS 样式 `.wrapper` 用于设置一个占满屏幕的容器，居中显示并显示背景颜色；
- CSS 样式 `.box` 用于设置一个宽高为 200px 的矩形容器，显示在父容器中央，居中对齐并显示背景颜色和文字颜色；
- CSS 样式 `.text-red` 和 `.text-bold` 用于设置容器内的文字颜色和字体粗细等样式。
专题推荐：