HTML 标签实战指南：从零构建网页骨架

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基石。它通过一系列语义化与功能性的标签，为网页搭建起清晰的结构骨架，让文本、图片、表单等各类内容得以有序呈现。

一、HTML 基础结构

1.1 初始 HTML 标签

HTML 代码由标签组成，类似于 <body>内容</body> 的形式。标签主要分为两类：

双标签：有开始和结束，如 <body>...</body>。
单标签：只有开始，如图片标签 <img>。

在双标签之间放置内容，在标签内部设置属性。

1.2 标签的层次

标签之间的结构关系组成了 DOM 树（多叉树）。其中有两个关键规定：

html 标签是根标签，所有其他标签都是它的子节点。
<head> 用于配置网页属性，<body> 用于存放主体内容，二者互为父子关系。

编写时通常使用 VS Code 等工具，推荐安装以下插件提升效率：

Auto Rename Tag：自动同步修改双标签。
Live Server：实时预览 HTML 变化，无需手动刷新。
view-in-browser：一键打开浏览器查看效果。

输入 ! 并回车可快速生成 HTML5 框架，主要字段说明如下：

<!DOCTYPE html>：声明文档类型，告知浏览器使用 HTML5 规范。
<html lang="en">：指定主要内容语言。
<meta charset="UTF-8">：设置字符编码。
<meta name="viewport" ...>：控制移动设备适配。

二、HTML 文本标签

常见文本标签包括标题、段落、强调类等，具体用法如下表所示：

名称	语法示例
标题	`<h1>标题名</h1>`（支持 h1-h6 级）
段落	`<p>内容</p>`
加粗	`<strong>内容</strong>` 或 `<b></b>`
倾斜	`<em>内容</em>` 或 `<i></i>`
删除线	`<del>内容</del>` 或 `<s></s>`
下划线	`<ins>内容</ins>` 或 `<u></u>`

2.1 标题标签

语法为 <h1>标题名称</h1>，数字越大级别越低，最多到六级标题。不同级别的标题字体大小和权重会有所不同。

<body>
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>
</body>

2.2 段落标签

语法为 <p>段落内容</p>。段落属于块级标签，默认独占一行。如果段落内容过长，可以使用换行标签 <br/> 进行强制换行。

<body>
<p>这是第一段，这里有一个换行<br/>继续显示。</p>
<p>这是第二段</p>
</body>

2.3 强调标签

2.3.1 加粗

语法：<strong>内容</strong> 或 <b>内容</b>。

虽然两者视觉效果相同，但核心区别在于语义：

<strong> 表示语义上的强调重要性，屏幕阅读器会改变语调。
<b> 仅表示视觉上的加粗，无特殊语义。

2.3.2 倾斜

语法：<em>内容</em> 或 <i>内容</i>。同样存在语义差异，<em> 表示强调，<i> 表示斜体展示。

2.3.3 删除线与下划线

删除线：<del>内容</del> 或 <s>内容</s>。
下划线：<ins>内容</ins> 或 <u>内容</u>。

三、媒体与交互标签

3.1 图片标签

语法：<img src="图片路径">。

常用属性说明：

属性	说明
src	图片路径
alt	图片加载失败时的替代文案
title	鼠标悬停提示文本
height/width	图片高度/宽度（单位 px）
border	边框大小

注意：alt 属性对无障碍访问非常重要。宽高通常只设一个，另一个会自动等比例缩放。

<body>
<img src="./头像.jpg" width="100" title="这是一个头像" alt="头像">
</body>

3.2 超链接标签

语法：<a href="跳转地址">跳转提示</a>。

常用属性：

href：跳转目标地址。
target：跳转方式，_self 当前页，_blank 新标签页。

<body>
<a href="#" target="_blank">点击跳转到主页</a>
</body>

链接内容不仅可以是文字，也可以是图片。

四、表格标签

表格由 <table> 容器包裹，内部包含行 <tr>、单元格 <td> 及表头 <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>
</table>
</body>

<thead>：定义表格头部区域。
<th>：表头单元格，默认居中加粗。
<tr>：表格行。
<td>：普通单元格。

4.2 表格的属性

常用属性：

cellspacing：单元格间距。
cellpadding：内容与边框的距离。
border：边框宽度。

<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>
</table>
</body>

五、列表标签

列表分为无序、有序和自定义三种。

名称	语法
无序列表	`<ul><li>...</li></ul>`
有序列表	`<ol><li>...</li></ol>`
自定义列表	`<dl><dt>术语</dt><dd>解释</dd></dl>`

5.1 无序列表

使用 <ul> 容器配合 <li> 项。可通过 type 属性设置符号样式（disc 实心圆，square 方块，circle 空心圆）。

5.2 有序列表

使用 <ol> 容器配合 <li> 项。可设置 start 起始数值，type 序号类型（数字、字母等）。

5.3 自定义列表

使用 <dl> 容器，<dt> 定义术语，<dd> 提供解释。

<body>
<dl>
<dt>这是一个自定义列表</dt>
<dd>内容 1</dd>
<dd>内容 2</dd>
</dl>
</body>

六、表单标签

表单用于与服务器交互，核心是 <form> 容器。

6.1 表单容器标签

<form> 属性：

action：提交数据的服务器地址。
method：提交方式（get 或 post）。

6.2 输入控件标签

通过 input 的 type 属性控制输入类型：

文本与密码：text, password。
数值：number (仅数字), range (滑块)。
文件与图片：file, image。
选择：radio (单选), checkbox (多选)。

单选按钮需配合 name 属性实现互斥，checked 可设置默认选中。

<body>
<form action="">
  性别：<input type="radio" name="gender" checked> 男
  <input type="radio" name="gender"> 女
</form>
</body>

6.2.1 多行文本输入

使用 <textarea> 标签，通过 cols 和 rows 设置宽高。

<body>
<form action="">
<textarea name="msg" id="msg" cols="30" rows="10">请输入内容....</textarea>
</form>
</body>

6.2.2 下拉选择器

使用 <select> 包裹多个 <option>。

<body>
<form action="">
<select name="city">
<option value="">选项 1</option>
<option value="">选项 2</option>
</select>
</form>
</body>

6.3 表单辅助标签

使用 <label> 绑定文本说明，通过 for 属性关联控件 id。点击文本即可聚焦控件，提升体验。

<body>
<form action="">
  性别：<input type="radio" name="gender" id="male" checked>
  <label for="male">男</label>
  <input type="radio" name="gender" id="female">
  <label for="female">女</label>
</form>
</body>

6.4 按钮标签

<button> 更灵活，通过 type 定义行为：

submit：提交表单（默认）。
reset：重置表单。
button：无默认行为，需配合 JS。

<body>
<form action="">
<button type="button">普通按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>

七、无语义标签

主要包括 <div> 和 <span>。

<div>：块级标签，独占一行，常用于布局。
<span>：行内标签，不独占一行，常用于局部样式修饰。

它们没有固定用途，主要用于页面结构和样式控制。

此外，HTML 中还有一些特殊字符需要转义：

 ：空格（多个空格会被合并为一个）。
<：小于号 <。
>：大于号 >。
&：按位与符号 &。