【前端开发之HTML】（四）HTML 标签进阶：表格、表单、布局全掌握，从新手到实战高手！

_OP_CHEN2026-01-23 10:23

前言

在 HTML 基础学习中，我们掌握了文本排版、图文插入等基础标签，但要构建结构完整、交互流畅的网页，还需要进阶标签的加持 ------ 表格用于数据规整展示、列表用于结构化布局、表单实现用户交互、div&span 搭建页面骨架，再加上 Emmet 快捷键提升编码效率、特殊字符解决显示冲突。这篇文章将手把手带大家吃透这些核心标签，从基础用法到实战技巧，让你快速具备独立搭建复杂网页结构的能力！下面就让我们正式开始吧！

一、表格标签：<table>，数据展示的 "规整神器"

表格是 HTML 中用于展示结构化数据的核心标签，像 Excel 表格一样，通过行、列、单元格的组合，让数据（如报表、名单、课程表）清晰直观。HTML 表格由**

（表格容器）、（行）、
（普通单元格）、<**（表头单元格）等标签构成，支持边框、单元格间距、合并单元格等进阶功能。

1. 表格的基本结构

一个完整的表格包含 "表头" 和 "表体" 两部分，核心标签关系如下：

  • ：整个表格的容器，所有表格元素都需嵌套在其中。
    • ：表格头部区域（可选），用于包裹表头行，语义化更强。
    • ：表格主体区域（可选），用于包裹数据行，区分表头和内容。
    • ：表格的一行，必须嵌套在<table>、<thead>或<tbody>中。
  • <
    • ：表头单元格，嵌套在<tr>中，默认居中加粗，用于显示列标题。
    		• ：普通数据单元格，嵌套在<tr>中，默认左对齐，用于显示具体数据。

    基本结构代码演示：

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格基本结构演示</title>
    <style>
        body {
            padding: 20px;
            font-size: 16px;
            line-height: 1.5;
        }
        table {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h2>学生成绩表（基本结构）</h2>
    <table border="1" cellpadding="10" cellspacing="0" width="600">
        <!-- 表头区域 -->
        <thead>
            <tr>
                <<th>学号</</th>
                <<th>姓名</</th>
                <<th>数学</</th>
                <<th>语文</</th>
                <<th>英语</</th>
                <<th>平均分</</th>
            </tr>
        </thead>
        <!-- 表体区域 -->
        <tbody>
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>95</td>
                <td>88</td>
                <td>92</td>
                <td>91.7</td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>87</td>
                <td>93</td>
                <td>89</td>
                <td>89.7</td>
            </tr>
            <tr>
                <td>003</td>
                <td>王五</td>
                <td>92</td>
                <td>90</td>
                <td>95</td>
                <td>92.3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

    如下所示：

    2. 表格的核心属性

    表格标签的属性用于控制表格样式（如边框、尺寸、间距），虽然现代开发中更推荐用 CSS，但了解基础属性有助于理解表格布局逻辑，常用属性如下（均添加在<table>标签中）：

    属性 作用 取值 说明
    border 设置表格边框宽度 数字（如 1、3）或空字符串 数字越大边框越粗，border=""表示无边框（默认）
    cellpadding 单元格内容与边框的内边距 数字（单位：像素） 默认值为 1 像素，值越大内容越靠单元格中心
    cellspacing 单元格之间的间距 数字（单位：像素）或 0 默认值为 2 像素，cellspacing="0"表示单元格无缝衔接
    width/height 设置表格整体宽度 / 高度 数字（像素）或百分比 百分比（如width="80%"）可实现响应式，随父容器缩放
    align 表格相对于周围元素的对齐方式 left（左对齐）、center（居中）、right（右对齐） 仅控制表格整体位置，不影响单元格内内容对齐

    属性效果对比代码：

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格属性对比</title>
    <style>
        body {
            padding: 20px;
            font-size: 16px;
        }
        .table-demo {
            margin: 30px 0;
        }
    </style>
</head>
<body>
    <h2>1. 默认样式表格（border=""，cellspacing="2"）</h2>
    <table class="table-demo" cellpadding="10" width="500">
        <tr><<th>姓名</</th><<th>年龄</</th></tr>
        <tr><td>张三</td><td>20</td></tr>
    </table>

    <h2>2. 带边框+无缝单元格（border="1"，cellspacing="0"）</h2>
    <table class="table-demo" border="1" cellpadding="10" cellspacing="0" width="500">
        <tr><<th>姓名</</th><<th>年龄</</th></tr>
        <tr><td>李四</td><td>22</td></tr>
    </table>

    <h2>3. 居中表格+宽内边距（align="center"，cellpadding="20"）</h2>
    <table class="table-demo" border="1" cellpadding="20" cellspacing="0" width="500" align="center">
        <tr><<th>姓名</</th><<th>年龄</</th></tr>
        <tr><td>王五</td><td>21</td></tr>
    </table>
</body>
</html>

    运行效果如下：

    3. 进阶技巧：合并单元格

    实际开发中，经常需要合并单元格（如合并表头、合并跨行 / 跨列数据），HTML 通过rowspan（跨行合并）和colspan（跨列合并）实现，核心步骤：确定合并方向→选中目标单元格→设置合并数量→删除多余单元格。

    （1）跨列合并：colspan="n"

    • 作用：横向合并 n 个单元格（合并同一行的多个列）。
    • 目标单元格：合并区域的最左侧单元格。
    • 步骤：
      1. 在目标单元格中添加colspan="合并数量"（如colspan="2"表示合并 2 列）；
      2. 删除合并区域中右侧多余的单元格。

    （2）跨行合并：rowspan="n"

    • 作用：纵向合并 n 个单元格（合并同一列的多个行）。
    • 目标单元格：合并区域的最上方单元格。
    • 步骤：
      1. 在目标单元格中添加rowspan="合并数量"（如rowspan="3"表示合并 3 行）；
      2. 删除合并区域中下方多余的单元格。

    合并单元格实战案例（课程表）：

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>合并单元格实战：课程表</title>
    <style>
        body {
            padding: 20px;
            font-size: 16px;
        }
        table {
            border-collapse: collapse; /* 等价于cellspacing="0"，CSS方式更推荐 */
            width: 800px;
            margin: 0 auto;
        }
        th, td {
            border: 1px solid #333;
            padding: 15px;
            text-align: center;
        }
        th {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center;">周一至周五课程表</h2>
    <table>
        <tr>
            <<th rowspan="2">时间</</th>
            <<th colspan="5">星期</</th>
        </tr>
        <tr>
            <<th>周一</</th>
            <<th>周二</</th>
            <<th>周三</</th>
            <<th>周四</</th>
            <<th>周五</</th>
        </tr>
        <tr>
            <td rowspan="2">上午</td>
            <td>HTML基础</td>
            <td>CSS样式</td>
            <td>JavaScript</td>
            <td>HTML进阶</td>
            <td>项目实战</td>
        </tr>
        <tr>
            <td>计算机网络</td>
            <td>数据结构</td>
            <td>算法</td>
            <td>数据库</td>
            <td>英语</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>自习</td>
            <td>实验课</td>
            <td>自习</td>
            <td>实验课</td>
            <td>班会</td>
        </tr>
        <tr>
            <td colspan="5">社团活动 / 自由安排</td>
        </tr>
    </table>
</body>
</html>

    运行效果如下所示：

    代码说明：

    • 第一行的 "时间" 单元格：rowspan="2"，跨行合并 2 行（覆盖 "上午""下午" 两行）；
    • 第一行的 "星期" 单元格：colspan="5"，跨列合并 5 行（覆盖周一至周五 5 列）；
    • 最后一行的 "社团活动" 单元格：colspan="5"，跨列合并 5 列，占据整行。

    4. 表格的使用场景与注意事项

    （1）适用场景

    • 展示结构化数据：如成绩表、员工名单、产品参数表、财务报表等；
    • 页面布局（老式用法）：早期网页常用表格布局，但现代开发已被 div+CSS 替代，表格仅用于数据展示；
    • 表单布局辅助：如简历填写页面中，用表格对齐 "标签 + 输入框"（虽不推荐，但部分场景仍在用）。

    （2）注意事项

    • 语义化优先 ：用<thead>和<tbody>区分表头和表体，提升代码可读性和 SEO；
    • 避免过度合并：单元格合并过多会导致代码复杂、维护困难，必要时拆分表格；
    • 样式用 CSS 替代属性 ：现代开发中，border、cellpadding等属性建议用 CSS 实现（如border-collapse: collapse替代cellspacing="0"），遵循 "HTML 管结构，CSS 管样式"；
    • 响应式适配 ：表格宽度建议用百分比（如width="100%"），避免固定像素导致小屏幕出现横向滚动条。

    二、列表标签：<ul>|<ol>|<dl>，结构化布局的 "万能工具"

    列表标签是 HTML 中用于展示 "一系列相关内容" 的标签，具有结构清晰、排版整齐的特点，广泛用于导航栏、菜单、步骤说明、底部说明等场景。HTML 列表分为三类：无序列表（<ul>）、有序列表（<ol>）、自定义列表（<dl>），每类都有特定的使用场景。

    1. 无序列表：<ul> + <li>，最常用的 "无序号列表"

    无序列表用于展示无先后顺序、地位平等的内容（如导航项、功能清单、标签集合），默认每个列表项前有 "圆点" 标记（可通过 CSS 修改）。

    核心语法：

    html 复制代码 
    <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

    关键规则：

    • **
        **是容器标签，仅能嵌套<li>，不能直接放文本或其他标签；
      • **
      • **是列表项标签，可嵌套任意内容（文本、图片、链接、甚至其他列表）；
      • 默认样式 ：列表项前有实心圆点（disc），有默认左内边距，无默认上下间距。

    实战案例（导航栏）：

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>无序列表实战：导航栏</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .nav {
            background-color: #333;
            height: 50px;
        }
        .nav ul {
            list-style: none; /* 去掉默认圆点 */
            margin: 0;
            padding: 0;
            display: flex; /* 横向排列（CSS弹性盒） */
        }
        .nav li {
            line-height: 50px;
            padding: 0 20px;
        }
        .nav a {
            color: #fff;
            text-decoration: none;
        }
        .nav li:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">HTML教程</a></li>
            <li><a href="#">CSS教程</a></li>
            <li><a href="#">JS教程</a></li>
            <li><a href="#">项目实战</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</body>
</html>

    运行效果如下：

    代码说明：

    • 用list-style: none去掉默认圆点，这是开发中最常用的操作；
    • 结合 CSS****display: flex实现横向导航，无序列表是导航栏的核心结构。

    2. 有序列表：<ol> + <li>，带序号的 "顺序列表"

    有序列表用于展示有先后顺序、逻辑递进的内容（如步骤说明、排名、教程流程），默认每个列表项前有 "阿拉伯数字" 标记（可通过属性或 CSS 修改序号类型）。

    核心语法：

    html 复制代码 
    <ol>
    <li>第一步：准备工具</li>
    <li>第二步：编写代码</li>
    <li>第三步：测试运行</li>
</ol>

    关键属性（添加在<ol>标签中）：

    属性 作用 取值 示例
    type 设置序号类型 1（阿拉伯数字，默认）、a（小写字母）、A（大写字母）、i（小写罗马数字）、I（大写罗马数字） <ol type="a">
    start 设置序号起始值 数字（必须是整数） <ol start="3">（从 3 开始计数）
    reversed 反向排序（HTML5 新增） 无值（仅写reversed） <ol reversed>（从大到小排序）

    实战案例（教程步骤）：

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>有序列表实战：教程步骤</title>
    <style>
        body {
            padding: 20px;
            font-size: 16px;
            line-height: 1.8;
        }
        .step {
            max-width: 800px;
            margin: 0 auto;
        }
        .step ol {
            padding-left: 25px;
        }
        .step li {
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div class="step">
        <h2>HTML文件创建步骤（从1开始，小写字母序号）</h2>
        <ol type="a" start="1">
            <li>打开VS Code，点击左上角「文件」→「新建文件」，创建空白文件；</li>
            <li>按下「Ctrl+S」保存文件，文件名改为「index.html」，编码选择UTF-8；</li>
            <li>在文件中输入「!」，按下Tab键，自动生成HTML5基础框架；</li>
            <li>在`<body>`标签中编写页面内容（如文本、图片、链接）；</li>
            <li>保存文件后，右键点击文件，选择「在默认浏览器中打开」，预览效果。</li>
        </ol>

        <h2>反向排序示例（从5到1）</h2>
        <ol reversed>
            <li>第五步：预览效果</li>
            <li>第四步：编写内容</li>
            <li>第三步：生成框架</li>
            <li>第二步：保存文件</li>
            <li>第一步：创建文件</li>
        </ol>
    </div>
</body>
</html>

    运行效果如下：

    3. 自定义列表：<dl> + <dt> + <dd>，"标题 + 说明" 的专属列表

    自定义列表用于展示 "一个标题对应多个说明 " 的内容（如术语解释、产品特性、底部导航说明），结构为 "总标题（<dt>）+ 子说明（<dd>）"，默认<dd>有左缩进，无序号或圆点。

    核心语法：

    html 复制代码 
    <dl>
    <dt>标题1</dt>
    <dd>说明1-1</dd>
    <dd>说明1-2</dd>
    <dt>标题2</dt>
    <dd>说明2-1</dd>
    <dd>说明2-2</dd>
</dl>

    关键规则：

    • **
      **是容器标签，仅能嵌套<dt>和<dd>，不能直接放文本；
    • ：定义列表标题（如术语、产品名称），可多个<dt>并列；
    • ：定义对应<dt>的说明内容，一个<dt>可对应多个<dd>；
    • 默认样式 ：<dd>有左内边距（约 40px），<dt>默认加粗（部分浏览器）。

    实战案例（底部说明栏，模仿小米官网）：

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义列表实战：底部说明栏</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-size: 14px;
            color: #666;
        }
        .footer {
            background-color: #f5f5f5;
            padding: 40px 0;
            margin-top: 50px;
        }
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .footer dl {
            width: 150px;
        }
        .footer dt {
            font-size: 16px;
            color: #333;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .footer dd {
            margin: 10px 0;
        }
        .footer a {
            color: #666;
            text-decoration: none;
        }
        .footer a:hover {
            color: #ff6700; /* 小米橙 */
        }
    </style>
</head>
<body>
    <div class="footer">
        <div class="footer-content">
            <dl>
                <dt>学习资源</dt>
                <dd><a href="#">HTML教程</a></dd>
                <dd><a href="#">CSS教程</a></dd>
                <dd><a href="#">JS教程</a></dd>
                <dd><a href="#">实战项目</a></dd>
            </dl>
            <dl>
                <dt>工具下载</dt>
                <dd><a href="#">VS Code</a></dd>
                <dd><a href="#">Chrome浏览器</a></dd>
                <dd><a href="#">Postman</a></dd>
                <dd><a href="#">Git</a></dd>
            </dl>
            <dl>
                <dt>关于我们</dt>
                <dd><a href="#">公司简介</a></dd>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">加入我们</a></dd>
                <dd><a href="#">隐私政策</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">学习路径</a></dd>
                <dd><a href="#">技术支持</a></dd>
                <dd><a href="#">意见反馈</a></dd>
            </dl>
        </div>
    </div>
</body>
</html>

    运行效果如下：

    4. 列表的进阶用法与注意事项

    （1）列表嵌套

    列表项**

  • **中可嵌套任意列表（包括自身类型），实现 "多级菜单""分类清单" 等复杂结构：

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表嵌套示例</title>
    <style>
        body {
            padding: 20px;
            font-size: 16px;
        }
        ul ul {
            list-style-type: circle; /* 子列表用空心圆点 */
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <h2>前端技术栈（列表嵌套）</h2>
    <ul>
        <li>HTML
            <ul>
                <li>基础标签</li>
                <li>进阶标签（表格、表单）</li>
                <li>HTML5新特性</li>
            </ul>
        </li>
        <li>CSS
            <ul>
                <li>基础样式</li>
                <li>选择器</li>
                <li>Flex/Grid布局</li>
                <li>响应式设计</li>
            </ul>
        </li>
        <li>JavaScript
            <ul>
                <li>基础语法</li>
                <li>DOM操作</li>
                <li>异步编程</li>
                <li>框架（Vue/React）</li>
            </ul>
        </li>
    </ul>
</body>
</html>

    运行效果如下所示：

    （2）样式修改（CSS）

    列表的默认样式（圆点、序号、缩进）可通过 CSS 灵活修改：

    css 复制代码 
    /* 去掉列表默认标记 */
ul, ol {
    list-style: none;
}
/* 自定义无序列表标记（用图片） */
ul.custom {
    list-style-image: url("icon.png");
}
/* 自定义有序列表序号颜色 */
ol {
    color: #ff6700;
}
/* 调整列表缩进 */
ul, ol {
    padding-left: 30px;
}

    （3）注意事项

    • 语义化选择：无序列表用于 "无顺序内容"，有序列表用于 "有顺序内容"，自定义列表用于 "标题 + 说明"，避免混用；
    • 避免非法嵌套 ：<ul>/<ol>中仅能放<li>，<dl>中仅能放<dt>/<dd>，否则会导致布局错乱；
    • 性能优化：多级列表嵌套不宜过深，否则会影响页面渲染性能和用户体验。

    三、表单标签：<form>，用户交互的 "核心桥梁"

    表单是 HTML 中用于收集用户输入信息 的核心组件，是网页与用户交互的关键（如登录、注册、搜索、问卷、简历填写）。一个完整的表单由 "表单域（<form>）" 和 "表单控件（输入框、按钮、下拉框等）" 组成，支持数据提交到服务器。

    1. 表单的核心结构

    表单的核心标签关系如下：

    • <form>：表单域容器，所有表单控件都需嵌套在其中，用于定义数据提交的目标和方式；
    • 表单控件 ：用户输入或选择的组件，如<input>（单行输入框、按钮等）、<select>（下拉框）、<textarea>（多行文本域）、<label>（关联标签）。

    表单域<form>的核心属性：

    属性 作用 取值 说明
    action 指定表单数据提交的目标地址 相对路径（如submit.html）或绝对路径（如https://example.com/submit） 未指定时，提交到当前页面
    method 指定数据提交方式 get（默认）或post get：数据拼接在 URL 中（适用于少量、非敏感数据）；post：数据在请求体中（适用于大量、敏感数据）
    name 表单名称 自定义字符串 用于区分多个表单（如页面中有登录和注册两个表单）

    基础表单结构代码：

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单基础结构</title>
    <style>
        body {
            padding: 20px;
            font-size: 16px;
        }
        form {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .form-group {
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center;">简单登录表单</h2>
    <!-- 表单域：数据提交到login.html，使用post方式 -->
    <form action="login.html" method="post" name="loginForm">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
            <input type="submit" value="登录">
            <input type="reset" value="重置">
        </div>
    </form>
</body>
</html>

    运行效果如下：

    2. 核心表单控件详解

    （1）<input>标签："万能输入控件"

    **是表单中最常用的控件，通过type**属性切换不同功能，支持文本输入、密码输入、单选、复选、按钮等，核心属性如下：

    • type：控件类型（必选）；
    • name：控件名称（用于服务器接收数据，单选 / 复选需相同name实现分组）；
    • value：默认值或提交值；
    • id：唯一标识（用于与<label>关联）；
    • required：标记为必填项（HTML5 新增，未填写则阻止提交）；
    • checked：默认选中（仅用于单选 / 复选）；
    • maxlength：输入最大长度（仅用于文本 / 密码框）。
    常用type取值及用法：
    type值 控件类型 用途 代码示例
    text 单行文本框 输入用户名、手机号等普通文本 <input type="text" name="username" placeholder="请输入用户名">
    password 密码框 输入密码（输入内容隐藏为圆点） <input type="password" name="password" placeholder="请输入密码">
    radio 单选框 二选一或多选一（如性别） <input type="radio" name="sex" value="male" checked> 男
    checkbox 复选框 多选（如爱好、技能） <input type="checkbox" name="hobby" value="reading"> 阅读
    submit 提交按钮 提交表单数据 <input type="submit" value="提交表单">
    reset 重置按钮 清空表单所有输入 <input type="reset" value="重置">
    button 普通按钮 触发自定义事件（需配合 JS） <input type="button" value="点击提示" onclick="alert('hello')">
    file 文件选择框 上传文件（如简历、头像） <input type="file" name="resume">
    email 邮箱输入框 验证输入格式为邮箱（HTML5 新增） <input type="email" name="email" required>
    tel 电话输入框 移动端唤起拨号键盘（HTML5 新增） <input type="tel" name="phone" placeholder="请输入手机号">
    date 日期选择框 弹出日期选择器（HTML5 新增） <input type="date" name="birthday">
    <input>控件实战代码：
    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>input控件实战</title>
    <style>
        body {
            padding: 20px;
            font-size: 16px;
            line-height: 2;
        }
        .form-demo {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .form-item {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="form-demo">
        <h2>input控件大全</h2>
        
        <!-- 1. 文本框 + 密码框 -->
        <div class="form-item">
            <label for="uname">用户名：</label>
            <input type="text" id="uname" name="username" placeholder="请输入用户名" maxlength="20" required>
        </div>
        <div class="form-item">
            <label for="pwd">密码：</label>
            <input type="password" id="pwd" name="password" placeholder="请输入6-16位密码" required>
        </div>
        
        <!-- 2. 单选框（性别） -->
        <div class="form-item">
            <span>性别：</span>
            <input type="radio" id="male" name="sex" value="male" checked>
            <label for="male">男</label>
            <input type="radio" id="female" name="sex" value="female">
            <label for="female">女</label>
        </div>
        
        <!-- 3. 复选框（爱好） -->
        <div class="form-item">
            <span>爱好：</span>
            <input type="checkbox" id="hobby1" name="hobby" value="reading">
            <label for="hobby1">阅读</label>
            <input type="checkbox" id="hobby2" name="hobby" value="coding">
            <label for="hobby2">编程</label>
            <input type="checkbox" id="hobby3" name="hobby" value="travel">
            <label for="hobby3">旅行</label>
            <input type="checkbox" id="hobby4" name="hobby" value="sports">
            <label for="hobby4">运动</label>
        </div>
        
        <!-- 4. HTML5新增控件 -->
        <div class="form-item">
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
        </div>
        <div class="form-item">
            <label for="phone">手机号：</label>
            <input type="tel" id="phone" name="phone" placeholder="请输入手机号">
        </div>
        <div class="form-item">
            <label for="birthday">出生日期：</label>
            <input type="date" id="birthday" name="birthday">
        </div>
        
        <!-- 5. 文件上传 -->
        <div class="form-item">
            <label for="avatar">上传头像：</label>
            <input type="file" id="avatar" name="avatar" accept="image/*"> <!-- 仅允许上传图片 -->
        </div>
        
        <!-- 6. 按钮 -->
        <div class="form-item">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="点击提示" onclick="alert('表单填写完成！')">
        </div>
    </div>
</body>
</html>

    运行效果如下：

    （2）<label>标签：提升用户体验的 "关联神器"

    **<label>**标签用于关联表单控件，点击<label>文本时，会自动聚焦到对应的控件（如单选框、复选框），避免用户必须点击小圆圈 / 方框才能选中，极大提升用户体验。

    核心用法：
    • 方式 1：<label>的for属性与控件的id属性值相同；
    • 方式 2：将控件嵌套在<label>内部（无需for和id）。
    代码示例：
    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>label标签用法</title>
    <style>
        body {
            padding: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h2>label标签关联示例</h2>
    
    <!-- 方式1：for + id 关联 -->
    <div style="margin: 20px 0;">
        <label for="agree">我已阅读并同意用户协议</label>
        <input type="checkbox" id="agree" name="agree">
    </div>
    
    <!-- 方式2：控件嵌套在label内部 -->
    <div style="margin: 20px 0;">
        <label>
            <input type="radio" name="pay" value="wechat" checked> 微信支付
        </label>
        <label style="margin-left: 20px;">
            <input type="radio" name="pay" value="alipay"> 支付宝支付
        </label>
    </div>
</body>
</html>

    运行效果如下：

    （3）<select>标签：下拉选择框

    **<select>**用于创建下拉菜单，适用于选项较多（如省份、年份、职业）的场景，节省页面空间，配合<option>标签定义下拉选项。

    核心语法：
    html 复制代码 
    <select name="province">
    <option value="">--请选择省份--</option> <!-- 默认提示选项 -->
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou" selected>广州</option> <!-- 默认选中 -->
</select>

    运行效果如下：

    关键属性：
    • **<select>**的name：控件名称（用于服务器接收数据）；
    • **<option>**的value：选项提交值（默认提交选项文本）；
    • **<option>**的selected：默认选中该选项（无值，仅写selected）；
    • multiple：允许多选（添加在<select>中，按住 Ctrl 键选择）。
    实战案例（出生日期选择）：
    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>select下拉框实战</title>
    <style>
        body {
            padding: 20px;
            font-size: 16px;
        }
        .birth-select {
            margin: 20px 0;
        }
        select {
            padding: 5px;
            font-size: 16px;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <h2>出生日期选择</h2>
    <div class="birth-select">
        <label>出生日期：</label>
        <!-- 年份选择 -->
        <select name="year">
            <option value="">--请选择年份--</option>
            <option value="2000">2000</option>
            <option value="2001">2001</option>
            <option value="2002">2002</option>
            <option value="2003">2003</option>
            <option value="2004">2004</option>
        </select>
        <!-- 月份选择 -->
        <select name="month">
            <option value="">--请选择月份--</option>
            <option value="1">1月</option>
            <option value="2">2月</option>
            <option value="3">3月</option>
            <!-- 省略4-11月 -->
            <option value="12">12月</option>
        </select>
        <!-- 日期选择 -->
        <select name="day">
            <option value="">--请选择日期--</option>
            <option value="1">1日</option>
            <option value="2">2日</option>
            <!-- 省略3-30日 -->
            <option value="31">31日</option>
        </select>
    </div>

    <!-- 多选示例 -->
    <div>
        <label>选择擅长的技术（按住Ctrl可多选）：</label>
        <select name="skill" multiple size="4"> <!-- size：显示4个选项高度 -->
            <option value="html">HTML</option>
            <option value="css">CSS</option>
            <option value="js">JavaScript</option>
            <option value="vue">Vue</option>
            <option value="react">React</option>
            <option value="node">Node.js</option>
        </select>
    </div>
</body>
</html>

    运行效果：

    （4）<textarea>标签：多行文本域

    **<textarea>**用于输入多行文本（如个人简介、项目经历、意见反馈），支持自动换行，可通过属性或 CSS 控制尺寸。

    核心语法：
    html 复制代码 
    <textarea name="intro" rows="5" cols="50" placeholder="请输入个人简介（不少于100字）"></textarea>

    运行效果：

    关键属性：
    • name：控件名称（用于服务器接收数据）；
    • rows：默认显示行数（影响高度）；
    • cols：默认显示列数（影响宽度）；
    • placeholder：提示文本（输入前显示）；
    • resize：是否允许用户调整尺寸（CSS 属性，none禁止调整）。
    实战案例（项目经历输入）：
    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>textarea文本域实战</title>
    <style>
        body {
            padding: 20px;
            font-size: 16px;
        }
        textarea {
            width: 600px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical; /* 仅允许垂直调整尺寸 */
        }
    </style>
</head>
<body>
    <h2>项目经历填写</h2>
    <div style="margin: 20px 0;">
        <label for="project">项目经历（请详细描述你的职责和成果）：</label><br>
        <textarea id="project" name="project" rows="8" placeholder="例如：负责XX项目的前端开发，使用HTML/CSS/JS实现了XX功能，优化了XX性能，用户满意度提升XX%..."></textarea>
    </div>
</body>
</html>

    运行效果如下：

    3. 表单实战：完整简历填写页面

    整合上述表单控件，打造一个功能完整的简历填写页面，包含个人信息、教育背景、求职意向、技能、项目经历等模块：

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历填写表单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
            background-color: #f9f9f9;
        }
        .resume-form {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        .form-section {
            margin: 30px 0;
        }
        .form-section h2 {
            color: #3498db;
            margin-bottom: 20px;
            font-size: 18px;
            border-left: 4px solid #3498db;
            padding-left: 10px;
        }
        .form-item {
            margin: 15px 0;
            display: flex;
            align-items: center;
        }
        .form-item label {
            width: 120px;
            color: #666;
            font-size: 16px;
        }
        .form-item input[type="text"],
        .form-item input[type="tel"],
        .form-item input[type="email"],
        .form-item select {
            flex: 1;
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        .form-item input[type="radio"],
        .form-item input[type="checkbox"] {
            margin: 0 8px;
        }
        .form-item .radio-group,
        .form-item .checkbox-group {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
        }
        .form-item textarea {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            rows: 6;
            resize: vertical;
        }
        .btn-group {
            text-align: center;
            margin-top: 40px;
        }
        .btn-group input {
            padding: 10px 30px;
            margin: 0 10px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        .btn-submit {
            background-color: #3498db;
            color: #fff;
        }
        .btn-reset {
            background-color: #95a5a6;
            color: #fff;
        }
        .btn-submit:hover {
            background-color: #2980b9;
        }
        .btn-reset:hover {
            background-color: #7f8c8d;
        }
    </style>
</head>
<body>
    <form class="resume-form" action="submit-resume.html" method="post">
        <h1>个人简历填写</h1>

        <!-- 基本信息 -->
        <div class="form-section">
            <h2>一、基本信息</h2>
            <div class="form-item">
                <label for="fullname">姓名：</label>
                <input type="text" id="fullname" name="fullname" required placeholder="请输入真实姓名">
            </div>
            <div class="form-item">
                <label>性别：</label>
                <div class="radio-group">
                    <input type="radio" id="male" name="sex" value="male" checked>
                    <label for="male">男</label>
                    <input type="radio" id="female" name="sex" value="female">
                    <label for="female">女</label>
                </div>
            </div>
            <div class="form-item">
                <label>出生日期：</label>
                <select name="birthYear" style="width: 120px; margin-right: 10px;">
                    <option value="">--年--</option>
                    <option value="1998">1998</option>
                    <option value="1999">1999</option>
                    <option value="2000">2000</option>
                    <option value="2001">2001</option>
                    <option value="2002">2002</option>
                </select>
                <select name="birthMonth" style="width: 100px; margin-right: 10px;">
                    <option value="">--月--</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <!-- 省略3-11月 -->
                    <option value="12">12</option>
                </select>
                <select name="birthDay" style="width: 100px;">
                    <option value="">--日--</option>
                    <option value="1">1</option>
                    <!-- 省略2-30日 -->
                    <option value="31">31</option>
                </select>
            </div>
            <div class="form-item">
                <label for="phone">手机号：</label>
                <input type="tel" id="phone" name="phone" required placeholder="请输入11位手机号">
            </div>
            <div class="form-item">
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" required placeholder="请输入常用邮箱">
            </div>
        </div>

        <!-- 教育背景 -->
        <div class="form-section">
            <h2>二、教育背景</h2>
            <div class="form-item">
                <label for="school">就读学校：</label>
                <input type="text" id="school" name="school" required placeholder="请输入学校全称">
            </div>
            <div class="form-item">
                <label for="major">专业：</label>
                <input type="text" id="major" name="major" required placeholder="请输入专业名称">
            </div>
            <div class="form-item">
                <label for="education">学历：</label>
                <select id="education" name="education" required>
                    <option value="">--请选择学历--</option>
                    <option value="high">高中</option>
                    <option value="college">专科</option>
                    <option value="undergraduate">本科</option>
                    <option value="master">硕士</option>
                    <option value="doctor">博士</option>
                </select>
            </div>
        </div>

        <!-- 求职意向 -->
        <div class="form-section">
            <h2>三、求职意向</h2>
            <div class="form-item">
                <label for="position">应聘岗位：</label>
                <select id="position" name="position" required>
                    <option value="">--请选择应聘岗位--</option>
                    <option value="frontend">前端开发工程师</option>
                    <option value="backend">后端开发工程师</option>
                    <option value="qa">测试开发工程师</option>
                    <option value="op">运维开发工程师</option>
                    <option value="product">产品经理</option>
                </select>
            </div>
            <div class="form-item">
                <label>期望薪资：</label>
                <div class="radio-group">
                    <input type="radio" id="salary1" name="salary" value="8-12k">
                    <label for="salary1">8-12K</label>
                    <input type="radio" id="salary2" name="salary" value="12-15k">
                    <label for="salary2">12-15K</label>
                    <input type="radio" id="salary3" name="salary" value="15-20k">
                    <label for="salary3">15-20K</label>
                    <input type="radio" id="salary4" name="salary" value="20k+">
                    <label for="salary4">20K+</label>
                </div>
            </div>
        </div>

        <!-- 专业技能 -->
        <div class="form-section">
            <h2>四、专业技能</h2>
            <div class="form-item">
                <label>擅长技能：</label>
                <div class="checkbox-group">
                    <input type="checkbox" id="skill1" name="skill" value="html">
                    <label for="skill1">HTML</label>
                    <input type="checkbox" id="skill2" name="skill" value="css">
                    <label for="skill2">CSS</label>
                    <input type="checkbox" id="skill3" name="skill" value="js">
                    <label for="skill3">JavaScript</label>
                    <input type="checkbox" id="skill4" name="skill" value="vue">
                    <label for="skill4">Vue</label>
                    <input type="checkbox" id="skill5" name="skill" value="react">
                    <label for="skill5">React</label>
                    <input type="checkbox" id="skill6" name="skill" value="node">
                    <label for="skill6">Node.js</label>
                    <input type="checkbox" id="skill7" name="skill" value="mysql">
                    <label for="skill7">MySQL</label>
                </div>
            </div>
            <div class="form-item">
                <label for="skill-desc">技能描述：</label>
                <textarea id="skill-desc" name="skill-desc" placeholder="请详细描述你的技能水平，如掌握HTML5新特性、熟练使用Vue开发项目等"></textarea>
            </div>
        </div>

        <!-- 项目经历 -->
        <div class="form-section">
            <h2>五、项目经历</h2>
            <div class="form-item">
                <label for="project">项目描述：</label>
                <textarea id="project" name="project" rows="8" placeholder="请详细描述你的项目经历，包括项目背景、你的职责、使用的技术、实现的功能和成果等"></textarea>
            </div>
        </div>

        <!-- 提交按钮 -->
        <div class="btn-group">
            <input type="submit" class="btn-submit" value="提交简历">
            <input type="reset" class="btn-reset" value="重置表单">
        </div>
    </form>
</body>
</html>

    运行效果如下：

    4. 表单的注意事项

    • 语义化命名：name属性值需与服务器接收字段一致，命名规范（如username、phone），避免中文或特殊字符；
    • 必填项标记：关键字段（如用户名、密码、手机号）需添加required属性，或手动添加 "*" 标记，提示用户必填；
    • 数据安全性：敏感数据（如密码）需使用method="post"提交，避免数据暴露在 URL 中；
    • 兼容性：HTML5 新增控件（如date、email）在老旧浏览器中可能不支持，需提供降级方案（如用普通文本框 + 提示）；
    • 用户体验：添加placeholder提示文本，单选 / 复选框配合<label>使用，按钮样式区分（提交按钮突出显示）。

    四、Emmet 快捷键：编码效率的 "加速器"

    在实际开发中，重复编写 HTML 标签会浪费大量时间。Emmet 是一款内置在 VS Code、IDEA 等主流编辑器中的插件（无需额外安装），通过简洁的语法快速生成复杂 HTML 结构，让编码效率翻倍。

    1. Emmet 核心语法规则

    Emmet 语法基于**"缩写 + Tab 键"**，输入缩写后按下 Tab 键，自动生成对应 HTML 代码，核心规则如下：

    （1）快速生成标签

    • 直接输入标签名，按下 Tab 键：生成成对标签（单标签自动生成规范格式）；
    • 示例：
      • 输入**div+Tab** →
      • 输入**img+Tab** →
      • 输入**a+Tab** →

    （2）生成多个重复标签：*

    • 语法：标签名*数量，生成指定数量的重复标签；
    • 示例：

      • 输入**div*3+Tab** → 生成 3 个嵌套的**

        **标签：

        html 复制代码 
        <div></div>
<div></div>
<div></div>

      • 输入**ul>li*5+Tab**→ 生成包含 5 个**

      • 的
          **标签：

          html 复制代码 
          <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

      （3）生成父子关系标签：>

      • 语法：父标签>子标签，生成嵌套的父子标签；
      • 示例：

        • 输入**div>p>span+Tab** → 生成三级嵌套标签：

          html 复制代码 
          <div>
    <p><span></span></p>
</div>

        • 输入**header>nav>ul>li>a+Tab** → 生成导航栏结构：

          html 复制代码 
          <header>
    <nav>
        <ul>
            <li><a href=""></a></li>
        </ul>
    </nav>
</header>

      （4）生成兄弟关系标签：+

      • 语法：标签1+标签2，生成同级的兄弟标签；
      • 示例：

        • 输入**div+p+span+Tab** → 生成三个同级标签：

          html 复制代码 
          <div></div>
<p></p>
<span></span>

        • 输入**h2+div>p+a+Tab** → 混合父子和兄弟关系：

          html 复制代码 
          <h2></h2>
<div>
    <p><a href=""></a></p>
</div>

      （5）给标签添加 ID：#

      • 语法：标签名#id值，生成带id属性的标签；
      • 示例：

        • 输入**div#header+Tab** → <div id="header"></div>

        • 输入**p#intro+Tab** → <p id="intro"></p>

        • 输入**ul#nav>li*3+Tab** → 带 ID 的列表：

          html 复制代码 
          <ul id="nav">
    <li></li>
    <li></li>
    <li></li>
</ul>

      （6）给标签添加类名：.

      • 语法：标签名.类名，生成带class属性的标签；
      • 示例：

        • 输入**div.container+Tab** →

        • 输入**p.text-center+Tab** →

        • 输入**div.card>div.card-title+p.card-content+Tab** → 带多个类名的卡片结构：

          html 复制代码 
          <div class="card">
    <div class="card-title"></div>
    <p class="card-content"></p>
</div>

      （7）给标签添加属性：[]

      • 语法：标签名[属性1=值1 属性2=值2]，生成带自定义属性的标签；
      • 示例：

        • 输入**a[href="https://www.csdn.net" target="_blank" title="CSDN"]+Tab**→ 带多个属性的链接：

          html 复制代码 
          <a href="https://www.csdn.net" target="_blank" title="CSDN"></a>

        • 输入img[src="rose.jpg" alt="玫瑰" width="300px" title="一朵玫瑰"]+Tab → 带完整属性的图片标签：

          html 复制代码 
          <img src="rose.jpg" alt="玫瑰" width="300px" title="一朵玫瑰">

      （8）给标签添加内容：{}

      • 语法：标签名{内容}，生成带默认文本内容的标签；
      • 示例：

        • 输入**p{这是一段文本}+Tab** →

          这是一段文本

        • 输入**ul>li{列表项$}*3+Tab** → 带编号的列表项（$表示递增数字）：

          html 复制代码 
          <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

      （9）生成带编号的内容：$

      • 语法：$表示递增数字，$$表示两位数编号（如 01、02），$$$表示三位数；
      • 示例：

        • 输入**div.item{$}*5+Tab**→ 生成带 1-5 编号的 div：

          html 复制代码 
          <div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>

        • 输入**div.item{第$$页}*3+Tab** → 生成两位数编号：

          html 复制代码 
          <div class="item">第01页</div>
<div class="item">第02页</div>
<div class="item">第03页</div>

      （10）生成 HTML5 基础框架：!

      • 输入**!（英文感叹号）+ENTER** → 自动生成 HTML5 标准框架：

        html 复制代码 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

      2. Emmet 快捷键使用技巧

      • 组合使用语法 ：Emmet 语法可自由组合，生成复杂结构（如div.container>header+main>section*2+aside+footer）；
      • 快速修改：生成代码后，可通过编辑器的 "多光标" 功能批量修改内容（如按住 Alt 键点击多个位置同时编辑）；
      • 自定义缩写：部分编辑器支持自定义 Emmet 缩写（如将常用的布局结构保存为缩写），进一步提升效率；
      • 练习优先级 ：先掌握!、*、>、+、#、.、{}这些核心语法，再逐步学习高级用法。

      五、HTML 特殊字符：解决特殊符号的 "显示难题"

      在 HTML 中，部分字符（如<、>、&、空格）有特殊含义，直接输入会导致浏览器解析错误（如<会被误认为标签开始）。此时需要使用 "HTML 实体字符"（特殊字符的转义序列）来正确显示这些字符。

      1. 常用 HTML 特殊字符

      显示结果 描述 HTML 实体（推荐） 替代写法
      空格 普通空格（多个连续空格会被合并，需用实体表示） &nbsp; -
      < 小于号（小于号） &lt; &#60;
      > 大于号（大于号） &gt; &#62;
      & 和号（&） &amp; &#38;
      " 双引号 &quot; &#34;
      ' 单引号 ' &#39;
      © 版权符号 &copy; &#169;
      ® 注册商标符号 &reg; &#174;
      ™ 商标符号 &trade; &#8482;
      € 欧元符号 &euro; &#8364;
      ¥ 人民币符号 &yen; &#165;

      2. 特殊字符的使用场景与示例

      （1）显示<和>符号

      HTML 标签用<和>包裹，直接输入会被解析为标签，需用**<和>**替代：

      html 复制代码 
      <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>显示小于号和大于号</title>
    <style>
        body {
            padding: 20px;
            font-size: 18px;
        }
        code {
            background-color: #f8f9fa;
            padding: 2px 5px;
            border-radius: 3px;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <h2>HTML标签语法：</h2>
    <p>标签由<code>&lt;标签名&gt;</code>和<code>&lt;/标签名&gt;</code>组成，例如：</p>
    <p><code>&lt;p&gt;这是一个段落&lt;/p&gt;</code></p>
    <p>CSS中的小于号：<code>width &lt; 500px</code></p>
    <p>CSS中的大于号：<code>width &gt; 300px</code></p>
</body>
</html>

      运行效果如下：

      （2）显示多个连续空格

      HTML 中多个连续空格会被合并为一个，需用** **表示每个空格：

      html 复制代码 
      <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>显示多个连续空格</title>
    <style>
        body {
            padding: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h2>多个连续空格示例：</h2>
    <p>直接输入空格（会合并）：前端开发 学习路径</p>
    <p>使用&nbsp;&nbsp;&nbsp;&nbsp;实体（4个空格）：前端开发&nbsp;&nbsp;&nbsp;&nbsp;学习路径</p>
    <p>段落首行缩进（2个字符=4个空格）：&nbsp;&nbsp;&nbsp;&nbsp;HTML是网页的基础，掌握HTML标签是前端开发的第一步。</p>
</body>
</html>

      运行效果如下：

      （3）显示&符号

      &是 HTML 实体的起始符，直接输入会被误认为实体开始，需用**&**替代：

      html 复制代码 
      <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>显示和号</title>
    <style>
        body {
            padding: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h2>和号显示示例：</h2>
    <p>公司名称：ABC&amp;XYZ科技有限公司</p>
    <p>技术栈：HTML&amp;CSS&amp;JavaScript</p>
    <p>网址中的和号：https://example.com/search?query=html&amp;sort=time</p>
</body>
</html>

      （4）显示特殊符号（版权、货币等）

      html 复制代码 
      <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>显示特殊符号</title>
    <style>
        body {
            padding: 20px;
            font-size: 18px;
            line-height: 2;
        }
    </style>
</head>
<body>
    <h2>常用特殊符号：</h2>
    <p>版权所有：&copy; 2024 前端技术博客</p>
    <p>注册商标：HTML&amp;CSS&reg;</p>
    <p>商标符号：Vue.js&trade;</p>
    <p>货币符号：人民币&yen;199 | 欧元&euro;29 | 美元$99</p>
    <p>其他符号：&hearts;（爱心） | &star;（星星） | &check;（对勾）</p>
</body>
</html>

      运行效果：

      3. 特殊字符的使用注意事项

      • 区分大小写 ：HTML 实体通常区分大小写（如&nbsp;不能写成&NBSP;），部分实体不区分，但推荐按标准写法；
      • 避免过度使用&nbsp; ：段落缩进、文本间距建议用 CSS（如text-indent、margin）实现，&nbsp;仅用于少量特殊空格需求；
      • 特殊字符查询 ：若需使用其他特殊字符（如数学符号、希腊字母），可查询 HTML 实体字符表（如HTML 实体字符参考）；
      • 编码兼容性 ：确保网页编码为 UTF-8（<meta charset="UTF-8">），避免特殊字符显示乱码。

      总结

      HTML 是前端开发的基石，掌握这些进阶标签后，你已经具备了独立搭建复杂网页结构的能力。后续学习中，要注重 "HTML 管结构、CSS 管样式、JavaScript 管交互" 的开发原则，多动手实践，将所学知识运用到实际项目中，不断提升自己的前端技术水平！

      如果本文对你有帮助，欢迎点赞、收藏、转发，也欢迎在评论区留言交流你的学习心得或遇到的问题～

      相关推荐
      苦藤新鸡1 小时前
      27.合并有序链表，串葫芦
      前端·javascript·链表
      Alair‎2 小时前
      前端开发之环境配置
      前端·react.js
      谢尔登2 小时前
      Vue3底层原理——keep-alive
      javascript·vue.js·ecmascript
      Deca~2 小时前
      VueVirtualLazyTree-支持懒加载的虚拟树
      前端·javascript·vue.js
      2501_944526422 小时前
      Flutter for OpenHarmony 万能游戏库App实战 - 主题切换实现
      android·开发语言·javascript·python·flutter·游戏·django
      爱上妖精的尾巴2 小时前
      7-11 WPS JS宏 对象的属性值为函数的写法与用法
      前端·javascript·wps·js宏·jsa
      zuozewei2 小时前
      零基础 | 使用LangChain框架实现ReAct Agent
      前端·react.js·langchain
      坠入暮云间x2 小时前
      React Native for OpenHarmony开发环境搭建指南（一）
      前端·react native·开源
      爱上妖精的尾巴2 小时前
      7-12 WPS JS宏 this、return用构造函数自定义类-1：对象内部函数，外部调用的写法
      前端·javascript·wps·js宏·jsa
      热门推荐
      01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）04Claude Code Skills 实用使用手册05AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南06UV安装并设置国内源07Linux下V2Ray安装配置指南08BongoCat - 跨平台键盘猫动画工具09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）10Labelme从安装到标注：零基础完整指南