半桔：个人主页
🔥 个人专栏: 《前端扫盲》《手撕面试算法》《C++从入门到入土》
🔖为什么有人总是赞美生活的丰富多彩？我想这是因为他们善于品尝生活中随时出现的意外。 -余华-
文章目录
- 前言
- 一. HTML结构
-
- 1.1 初始HTML标签
- 1.2 标签的层次
- 二. HTML文本标签
-
- 2.1 标题标签
- 2.2 段落标签
- 2.3 强调标签
-
- 2.3.1 加粗
- 2.3.2 倾斜
- 2.3.3 删除线
- 2.3.4 下划线
- 三. 媒体与交互标签
-
- 3.1 图片标签
- 3.2 超链接标签
- 四. 表格标签
-
- 4.1 表格的使用
- 4.2 表格的属性
- 五. 列表标签
-
- 5.1 无序列表
- 5.2 有序列表
- 5.3 自定义列表
- 六. 表单标签
-
- 6.1 表单容器标签
- 6.2 输入控件标签
-
- 6.2.1 输入框
- 6.2.2 多行文本输入
- 6.2.3 下拉选择器
- 6.3 表单辅助标签
- 6.4 按钮标签
- 七. 无语义标签
前言
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基石，是每一位前端开发者踏入 Web 世界的关键钥匙。它通过一系列语义化与功能性的标签，为网页搭建起清晰的 “结构骨架”，让文本、图片、表单等各类内容得以有序呈现，是网页与用户交互的 “第一层语言”。
对于想要系统学习 HTML 的初学者，或是需要回顾基础的开发者而言，本文将围绕 HTML 的核心标签体系展开讲解。
我们会从最基础的初始 HTML 结构标签入手，逐步深入到文本标签（标题、段落、强调类等）、媒体与交互标签（图片、超链接）、表格标签、列表标签（无序、有序、自定义）、表单标签（容器、输入控件、辅助标签等）的使用方法与场景，最后也会涉及无语义标签的相关知识。通过对这些内容的学习，你将全面掌握 HTML 构建网页结构的核心能力，为后续学习 CSS（美化网页样式）、JavaScript（实现网页交互）奠定坚实的基础。
一. HTML结构
1.1 初始HTML标签
- HTML代码都是由标签组成的。
标签就是类似于<body>内容</body>，这种形式的字段，比如下面百度的主页：
可以看到就是由众多标签组成的。
关于标签可以分为两类：
- 在双标签之间放的是标签对应的内容，而在标签内部则可以设置标签的属性；
关于有哪些标签以及如何进行使用，在后面会详细进行介绍。
1.2 标签的层次
标签之间的结构关系，组成了一颗DOM树的结构，就是一颗多叉树。 
- 因此多叉树的节点中有哪些关系，标签就有那些关系.
其中有几个规定：
在进行前端编写时，我们通常会采用vscode作为我们的开发工具，此处推荐几个好用的插件：
通过输入!然后按回车，可以让我们快速自动生成HTML代码框架：
下面我将对其中的字段进行一个简单的介绍：
二. HTML文本标签
以下是一张关于常见文本标签的列表：
| 标题 | <h1>标题名</h1>通过修改数字，来指定标签级别 |
| 段落 | <p>内容</p> |
| 加粗 | <strong>内容</strong>或<b></b> |
| 倾斜 | <em>内容</em>或<i></i> |
| 删除线 | <del>内容</del>或<s></s> |
| 下划线 | <ins>内容</ins>或<u></u> |
2.1 标题标签
- 语法：<h1>标题名称</h1>：一级标签；
- <h2>,<h3>…<h6>，最多可以到六级标题。
效果演示：
<body>
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>
</body>
2.2 段落标签
- 语法：<p>段落内容</p>，段落标签属于块标签，不会和其他标签内容共占一行。
<body>
<p>这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>
</body>
如果一个段落中内容过长，可能会导致一个段落占据多行的情况，比如下面： 
此时如果我们想要在一个段落的中间对内容进行换行操作，此时就可以使用换行标签：
<br>/
这是一个单标签，专门用来进行换行操作的：
<body>
<p>这是第一段,这是第一段,这里有一个换行标签<br/>,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>
</body>
2.3 强调标签
2.3.1 加粗
- 语法：<strong>内容</strong>或<b>内容</b>，该标签属于行内标签；
效果演示：
<body>
<strong>第一个加粗字段</strong>
<strong>第二个加粗字段</strong>
</body>
- <strong>和<b>标签都能让文本在视觉上呈现 “加粗” 效果，它们的核心区别在于 “语义”（含义）；
- <strong>是对语义化的 “强调重要性”，而<b>仅仅是进行加粗操作；比如：屏幕阅读器（帮助视障用户浏览网页的工具）会通过语调变化强调<strong>包裹的内容，让用户感知到其重要性；
2.3.2 倾斜
- 语法：<em>内容</em>或<i>内容</i>，该标签与上面标签一样，也是一个行内标签。
效果演示：
<body>
<em>第一个倾斜字段</em>
<em>第二个倾斜字段</em>
</body>
2.3.3 删除线
- 语法：<del>内容</del>或<s>内容</s>是一个行内标签。
效果演示：
<body>
<del>第一个删除线</del>
<del>第二个删除线</del>
</body>
2.3.4 下划线
- 语法：<ins>内容</ins>或<u>内容</u>是一个行内标签。
<body>
<ins>第一个下划线</ins>
<ins>第二个下划线</ins>
</body>
三. 媒体与交互标签
此处重点介绍两个：
| 图片 | <img> |
| 超链接 | <a></a> |
3.1 图片标签
- 语法：<img src="图片路径">。
关于图片标签有很多可以进行设置的属性，下面进行重点介绍：
| src | 图片路径 |
| alt | 图片路径不对时，显示的文案提示 |
| title | 提示文本，鼠标放在图片上，进行提示 |
| height/width | 图片的高度/宽度 |
| border | 图片边框大小 |
| 对于alt效果演示： |
<body>
<img src="./" alt="没有找到图片">
</body>
- height , width , border的单位都是px，并且对于height, width来说，一般只设置一个，另一个会等比例进行缩放。
对于title , height , width , border效果演示：
<body>
<img src="./头像.jpg" height="100px" title="这是一个头像" border="1px">
</body>
3.2 超链接标签
- 语法：<a>跳转提示</a>.
与图片一样，超链接标签也有一些属性可以进行设置：
| href | 超链接跳转的地址 |
| target | 跳转的方式，_self本页面跳转，_blank新标签页打开 |
| 效果演示： |
<body>
<a href="https://banju.blog.csdn.net/" target="_blank">点击,跳转到我的主页</a>
</body>
- 关于<a>标签中间的内容，不仅仅可以是文字，也可以是图片。
四. 表格标签
表格标签就是<table></table>但是其内部又衍生出来了，很多标签：
| 表格 | 属于容器，<table>内容</table> |
| 表格中的一行 | 属于容器，<tr>内容</tr> |
| 一个单元格 | <td>内容</td> |
| 指定表格头部区域 | 属于容器，<thead>内容</thead> |
| 表头单元格 | 默认会居中加粗，<th>内容</th> |
4.1 表格的使用
表格标签使用起来，相对复杂一点，一下是一个使用方法演示：
<body>
<table>
<thead>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</thead>
<tr>
<td>张三</td>
<td>17</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>31</td>
<td>男</td>
</tr>
</table>
</body>
效果演示： 
4.2 表格的属性
对于表格来说，也有一些常用的属性可以进行设置：
| cellspacing | 每个单元格之间的距离 |
| cellpadding | 内容距离边框的距离，默认是1 |
| 当然表格也可以设置边框。 |
效果演示：
<body>
<table border="1px" cellspacing="0" cellpadding="10">
<thead>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</thead>
<tr>
<td>张三</td>
<td>17</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>31</td>
<td>男</td>
</tr>
</table>
</body>
五. 列表标签
| 无序列表容器 | <ul>…</ul> |
| 有序列表容器 | <ol>…</ol> |
| 列表项 | <li>…</li> |
| 自定义列表容器 | <dl>…</dl> |
| 自定义列表解释项 | <dt>…</dt> |
| 自定义列表说明项 | <dd>…</dd> |
- 无序列表：<ul>（容器）+ <li>（列表项）
- 有序列表：<ol>（容器）+ <li>（列表项）
- 定义列表：<dl>（容器）+ <dt>（术语）+ <dd>（解释）
5.1 无序列表
- 无序列表：<ul>（容器）+ <li>（列表项） 效果演示：
<body>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</body>
对于无序列表，有一个经常设置的属性：
- type：表示列表项目前面符号的内容，有三个：disc实心圆，square方块，circle空心圆。
5.2 有序列表
- 有序列表：<ol>（容器）+ <li>（列表项） 使用方法与上面类似，此处就不进行展示了。
5.3 自定义列表
- 定义列表：<dl>（容器）+ <dt>（术语）+ <dd>（解释）
<body>
<dl>
<dt>这是一个自定义列表</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
</body>
六. 表单标签
可以使用表单标签实现与服务器进行交互。
| 表单域，容器 | <from>…</from> |
| 输入控件 | <input>… |
| 下拉菜单 | <select>…</select> |
| 下拉选项 | <option>…</option> |
| 多行文本 | <textarea></textaarea> |
6.1 表单容器标签
<form>唯一的表单容器标签，通过属性控制表单行为：
- action：指定表单数据提交的服务器地址（URL）；
- method：指定提交方式（get 或 post）；
6.2 输入控件标签
6.2.1 输入框
- 语法：input
其中关于输入，可以输入很多类型，通过type=属性进行控制：
<body>
<form action="">
账号<input type="text"><br/>
密码<input type="password">
</form>
</body>
<body>
<form action="">
年龄<input type="number"><br/>
1<input type="range">100
</form>
</body>
<body>
<form action="">
性别:<input type="radio">男<input type="radio">女
</form>
</body>
此时就可以进行选择了，当时如果直接这样进行设置，两个可以同时进行选择，但是我们希望的是只能选择一个。
- 此时就需要对数据框进行唯一标识，使用name=来让两个选项具有一个标识；
- 还可以使用checked来让一个作为默认选项。
<body>
<form action="" >
性别:<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender">女
</form>
</body>
当然也可以使用ckeckbox表示多选。
6.2.2 多行文本输入
- 语法：使用<textarea></textarea>
其中可以设置文本框的宽度和高度，使用cols/rows。
效果演示：
<body>
<form action="" >
<textarea name="" id="" cols="30" rows="10">请输入内容….</textarea>
</form>
</body>
6.2.3 下拉选择器
- 语法：使用<select></select>来进行实现，其中<option></option>表示对应的选项。
效果演示：
<body>
<form action="" >
<select name="" id="">
<option value="">选项1</option>
<option value="">选项2</option>
<option value="">选项3</option>
<option value="">选项4</option>
</select>
</form>
</body>
6.3 表单辅助标签
标签关联：<label>
- 为表单控件绑定文本说明，点击文本可聚焦到对应的控件（尤其适合复选框、单选按钮），通过 for 属性与控件的 id 关联。
例如，上面我们写的性别选择：
<body>
<form action="">
性别:<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender">女
</form>
</body>
现在如果我们希望，在点击中文汉字的时候也能进行也能实现选择，就可以使用lable来进行实现。
<body>
<form action="">
性别:
<input type="radio" name="gender" checked="checked" id="male">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
</form>
</body>
6.4 按钮标签
**<button>**最灵活的按钮，可包含文本、图标等内容，通过 type 属性定义行为：
- type="submit"：默认值，点击提交表单；
- type="reset"：点击重置表单（清空输入）；
- type="button"：无默认行为，需配合脚本使用（如弹窗）。
关于按钮标签，要搭配JS进行使用，后续会专门写一篇博客讲JS。
<body>
<form action="">
<button type="button">一个按钮</button>
<button type="submit">现在提交</button>
<button type="reset">重置</button>
</form>
</body>
七. 无语义标签
无语义标签分为两种：<div></div>和<span></span>。
其中<div>是块标签，独占一行，而<span>是行内标签，不独占一行。
- 无语义标签没有固定的用途，可以该标签做任何事情，一般负责网页布局。
下面补充几个HTML中的特殊字符：
