HTML / CSS大前端
HTML 标签详解：构建网页骨架的核心语法与用法
HTML 是构建网页的基础语言，系统讲解了 HTML 核心标签体系。内容涵盖初始结构、文本标签（标题、段落、强调）、媒体交互（图片、链接）、表格、列表及表单标签的使用方法。通过语义化标签规范页面结构，结合常用属性实现布局与交互，为学习 CSS 和 JavaScript 奠定基础。
HTML 是构建网页的基础语言，系统讲解了 HTML 核心标签体系。内容涵盖初始结构、文本标签（标题、段落、强调）、媒体交互（图片、链接）、表格、列表及表单标签的使用方法。通过语义化标签规范页面结构，结合常用属性实现布局与交互，为学习 CSS 和 JavaScript 奠定基础。
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基石，是每一位前端开发者踏入 Web 世界的关键钥匙。它通过一系列语义化与功能性的标签，为网页搭建起清晰的结构骨架，让文本、图片、表单等各类内容得以有序呈现，是网页与用户交互的第一层语言。
对于想要系统学习 HTML 的初学者，或是需要回顾基础的开发者而言，本文将围绕 HTML 的核心标签体系展开讲解。
我们会从最基础的初始 HTML 结构标签入手，逐步深入到文本标签（标题、段落、强调类等）、媒体与交互标签（图片、超链接）、表格标签、列表标签（无序、有序、自定义）、表单标签（容器、输入控件、辅助标签等）的使用方法与场景，最后也会涉及无语义标签的相关知识。通过对这些内容的学习，你将全面掌握 HTML 构建网页结构的核心能力，为后续学习 CSS（美化网页样式）、JavaScript（实现网页交互）奠定坚实的基础。
标签就是类似于 <body>内容</body>，这种形式的字段，比如百度的主页：
可以看到就是由众多标签组成的。
关于标签可以分为两类：
<body>内容....</body>，其中的 <body> 就是开始标签，而 </body> 就是结束标签;<img>关于有哪些标签以及如何进行使用，在后面会详细进行介绍。
标签之间的结构关系，组成了一颗 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">：是关于移动设备适配使用的。以下是一张关于常见文本标签的列表：
| 名称 | 说明 |
|---|---|
| 标题 | <h1>标题名</h1> 通过修改数字，来指定标签级别 |
| 段落 | <p>内容</p> |
| 加粗 | <strong>内容</strong> 或 <b></b> |
| 倾斜 | <em>内容</em> 或 <i></i> |
| 删除线 | <del>内容</del> 或 <s></s> |
| 下划线 | <ins>内容</ins> 或 <u></u> |
<h1>标题名称</h1>：一级标签；<h2>,<h3>...<h6>，最多可以到六级标题。效果演示：
<body><h1>这是一个一级标题</h1><h2>这是一个二级标题</h2><h3>这是一个三级标题</h3><h4>这是一个四级标题</h4><h5>这是一个五级标题</h5><h6>这是一个六级标题</h6></body>
<p>段落内容</p>，段落标签属于块标签，不会和其他标签内容共占一行。<body><p>这是第一段</p><p>这是第二段</p><p>这是第三段</p></body>
如果一个段落中内容过长，可能会导致一个段落占据多行的情况，比如下面：
此时如果我们想要在一个段落的中间对内容进行换行操作，此时就可以使用换行标签：
<br/>
这是一个单标签，专门用来进行换行操作的：
<body><p>这是第一段，这里有一个换行标签<br/>，这是第一段...</p><p>这是第二段</p><p>这是第三段</p></body>
<strong>内容</strong> 或 <b>内容</b>，该标签属于行内标签；效果演示：
<body><strong>第一个加粗字段</strong><strong>第二个加粗字段</strong></body>
<strong> 和 <b> 标签都能让文本在视觉上呈现'加粗'效果，它们的核心区别在于'语义'（含义）；<strong> 是对语义化的'强调重要性'，而 <b> 仅仅是进行加粗操作；比如：屏幕阅读器（帮助视障用户浏览网页的工具）会通过语调变化强调 <strong> 包裹的内容，让用户感知到其重要性；<em>内容</em> 或 <i>内容</i>，该标签与上面标签一样，也是一个行内标签。效果演示：
<body><em>第一个倾斜字段</em><em>第二个倾斜字段</em></body>
<del>内容</del> 或 <s>内容</s> 是一个行内标签。效果演示：
<body><del>第一个删除线</del><del>第二个删除线</del></body>
<ins>内容</ins> 或 <u>内容</u> 是一个行内标签。<body><ins>第一个下划线</ins><ins>第二个下划线</ins></body>
此处重点介绍两个：
| 名称 | 说明 |
|---|---|
| 图片 | <img> |
| 超链接 | <a></a> |
<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>
<a>跳转提示</a>.与图片一样，超链接标签也有一些属性可以进行设置：
| 属性 | 说明 |
|---|---|
| href | 超链接跳转的地址 |
| target | 跳转的方式，_self 本页面跳转，_blank 新标签页打开 |
效果演示：
<body><a href="#" target="_blank">点击，跳转到我的主页</a></body>
<a> 标签中间的内容，不仅仅可以是文字，也可以是图片。表格标签就是 <table></table> 但是其内部又衍生出来了，很多标签：
| 名称 | 说明 |
|---|---|
| 表格 | 属于容器，<table>内容</table> |
| 表格中的一行 | 属于容器，<tr>内容</tr> |
| 一个单元格 | <td>内容</td> |
| 指定表格头部区域 | 属于容器，<thead>内容</thead> |
| 表头单元格 | 默认会居中加粗，<th>内容</th> |
表格标签使用起来，相对复杂一点，一下是一个使用方法演示：
<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>
效果演示：
<table></table> 表示一个容器，中间存放的内容都属于有一个表格内容；<thead></thead> 表示表格的头部区域，th 是表示头部的每一个单元格；<tr></tr> 表示表格的每一行，而 <td></td> 则是表格一行中的每一单元格。对于表格来说，也有一些常用的属性可以进行设置：
| 属性 | 说明 |
|---|---|
| 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><>男
| 名称 | 说明 |
|---|---|
| 无序列表容器 | <ul>...</ul> |
| 有序列表容器 | <ol>...</ol> |
| 列表项 | <li>...</li> |
| 自定义列表容器 | <dl>...</dl> |
| 自定义列表解释项 | <dt>...</dt> |
| 自定义列表说明项 | <dd>...</dd> |
<ul>（容器）+ <li>（列表项）<ol>（容器）+ <li>（列表项）<dl>（容器）+ <dt>（术语）+ <dd>（解释）<ul>（容器）+ <li>（列表项）
效果演示：<body><ul><li>内容 1</li><li>内容 2</li><li>内容 3</li></ul></body>
对于无序列表，有一个经常设置的属性：
type：表示列表项目前面符号的内容，有三个：disc实心圆，square方块，circle空心圆。<ol>（容器）+ <li>（列表项）
使用方法与上面类似，此处就不进行展示了。start=type=，可以选择 1 使用数字，a 使用小写字母，A 使用大写字母，i 使用小写阿拉伯数字，I 使用大写阿拉伯数字。<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> |
<form> 唯一的表单容器标签，通过属性控制表单行为：
action：指定表单数据提交的服务器地址（URL）；method：指定提交方式（get 或 post）；input其中关于输入，可以输入很多类型，通过 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>
当然也可以使用 checkbox 表示多选。
<textarea></textarea>其中可以设置文本框的宽度和高度，使用 cols/rows。
效果演示：
<body><form action=""><textarea name="" id="" cols="30" rows="10">请输入内容....</textarea></form></body>
<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>
标签关联：<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>
<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 中的特殊字符：
：空格，在 HTML 中多个空格相连，浏览器会将其合并为一个，所以可以使用 来保证多个空格同时显示；<：小于符号；>：大于符号；&：按位与符号。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online