跳到主要内容
HTML 标签详解：网页结构、文本、表单与常用标签指南 | 极客日志
HTML / CSS 大前端
HTML 标签详解：网页结构、文本、表单与常用标签指南 系统讲解了 HTML 核心标签体系，涵盖初始结构、文本标签（标题、段落、强调）、媒体交互（图片、超链接）、表格、列表及表单组件的使用方法。通过示例演示了标签语法、属性配置及语义化区别，旨在帮助开发者掌握构建网页结构的基础能力，为后续学习 CSS 和 JavaScript 奠定基础。
前言
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基石，是每一位前端开发者踏入 Web 世界的关键钥匙。它通过一系列语义化与功能性的标签，为网页搭建起清晰的结构骨架，让文本、图片、表单等各类内容得以有序呈现，是网页与用户交互的第一层语言。
对于想要系统学习 HTML 的初学者，或是需要回顾基础的开发者而言，本文将围绕 HTML 的核心标签体系展开讲解。
我们会从最基础的初始 HTML 结构标签入手，逐步深入到文本标签（标题、段落、强调类等）、媒体与交互标签（图片、超链接）、表格标签、列表标签（无序、有序、自定义）、表单标签（容器、输入控件、辅助标签等）的使用方法与场景，最后也会涉及无语义标签的相关知识。通过对这些内容的学习，你将全面掌握 HTML 构建网页结构的核心能力，为后续学习 CSS（美化网页样式）、JavaScript（实现网页交互）奠定坚实的基础。
一、HTML 结构
1.1 初始 HTML 标签
标签就是类似于<body>内容</body>这种形式的字段，比如下面百度的主页：
可以看到就是由众多标签组成的。
关于标签可以分为两类：
双标签：有开始，有结束；比如<body>内容....</body>，其中的<body>就是开始标签，而</body>就是结束标签;
单标签：只有开始，比如，图片标签<img>。
在双标签之间放的是标签对应的内容，而在标签内部则可以设置标签的属性；
关于有哪些标签以及如何进行使用，在后面会详细进行介绍。
1.2 标签的层次
标签之间的结构关系，组成了一颗 DOM 树的结构，就是一颗多叉树。
其中有几个规定：
html标签是根标签，所有标签都是它的子标签；<head>是网页属性配置标签，<body>是网页主体内容标签，它们是父子标签。
在进行前端编写时，我们通常会采用 vscode 作为我们的开发工具，此处推荐几个好用的插件：
Auto Rename Tag：可以自动将双标签进行对称修改处理，修改一侧另一侧会自动修改；Live Server：可以让我们修改后的 HTML 界面，直接在网页中查看变化，不再需要手动刷新网页了；view-in-browser：让我们一键打开浏览器，查看 HTML 网页效果。
通过输入!然后按回车，可以让我们快速自动生成 HTML 代码框架：
<!DOCTYPE html>：一个文档类型说明，告诉浏览器当前 HTML 文档使用的是 HTML5 规范；<html lang="en">：告诉浏览器，当前文档中主要内容是英文；<meta charset="UTF-8">：文档的字符编码采用的是 UTF-8；<meta name="viewport" content="width=device-width, initial-scale=1.0">：是关于移动设备适配使用的。
二、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 >
如果一个段落中内容过长，可能会导致一个段落占据多行的情况，比如下面：
此时如果我们想要在一个段落的中间对内容进行换行操作，此时就可以使用换行标签 ：
<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 >
三、媒体与交互标签
3.1 图片标签 关于图片标签有很多可以进行设置的属性，下面进行重点介绍：
属性 说明 src 图片路径 alt 图片路径不对时，显示的文案提示 title 提示文本，鼠标放在图片上，进行提示 height/width 图片的高度/宽度 border 图片边框大小
<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 超链接标签 属性 说明 href 超链接跳转的地址 target 跳转的方式，_self本页面跳转，_blank新标签页打开
<body >
<a href ="#" 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 >
其中的<table></table>表示一个容器，中间存放的内容都属于有一个表格内容；
<thead></thead>表示表格的头部区域，th是表示头部的每一个单元格；<tr></tr>表示表格的每一行，而<td></td>则是表格一行中的每一单元格。
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>（列表项）
使用方法与上面类似，此处就不进行展示了。
其中可以对列表起始位置的数值进行设置：start=
也可以设置顺序列表排列的符号类型：type=，可以选择1使用数字，a使用小写字母，A使用大写字母，i使用小写阿拉伯数字，I使用大写阿拉伯数字。
5.3 自定义列表
定义列表：<dl>（容器）+ <dt>（术语）+ <dd>（解释）
<body >
<dl >
<dt > 这是一个自定义列表</dt >
<dd > 内容 1</dd >
<dd > 内容 2</dd >
<dd > 内容 3</dd >
</dl >
</body >
六、表单标签 名称 说明 表单域，容器 <form>...</form>输入控件 <input>...下拉菜单 <select>...</select>下拉选项 <option>...</option>多行文本 <textarea></textarea>
6.1 表单容器标签 <form>唯一的表单容器标签，通过属性控制表单行为：
action：指定表单数据提交的服务器地址（URL）；method：指定提交方式（get 或 post）；
6.2 输入控件标签
6.2.1 输入框 其中关于输入，可以输入很多类型，通过type=属性进行控制：
文本输入：text输入单行文本， password输入密码：
效果演示：
<body >
<form action ="" >
账号<input type ="text" > <br />
密码<input type ="password" >
</form >
</body >
数值输入：type="number"（仅允许数字）、type="range"（滑块选择数值）；
<body >
<form action ="" >
年龄<input type ="number" > <br />
1<input type ="range" > 100
</form >
</body >
媒体输入：type="file"（文件上传）、type="image"（图片按钮，可提交表单），该属性比较简单，此处就不再进行演示了；
选择输入：type="radio"（单选按钮，互斥选择），type="checkbox"（复选框，可多选）；
<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 >
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 表单辅助标签
为表单控件绑定文本说明，点击文本可聚焦到对应的控件（尤其适合复选框、单选按钮），通过 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 中多个空格相连，浏览器会将其合并为一个，所以可以使用 来保证多个空格同时显示；<：小于符号；>：大于符号；&：按位与符号。 相关免费在线工具 Base64 字符串编码/解码 将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器 将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
Markdown转HTML 将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
HTML转Markdown 将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
JSON 压缩 通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
JSON美化和格式化 将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online
