HTML 程序设计 · 学习教程

学习指南：HTML 是什么、怎么学、学到什么

HTML 全称 HyperText Markup Language（超文本标记语言），是所有网页的骨架。CSS 负责样式，JavaScript 负责交互，三者共同组成现代网页。

0.1 三大 Web 技术的关系

💡 三层结构

HTML   →   网页结构（骨架、文档、标签）
CSS    →   网页样式（外观、颜色、布局）
JS     →   网页行为（交互、逻辑、数据）

0.2 HTML 的特点

声明式：用标签描述内容结构，而不是流程式编程
树形结构：标签可以嵌套，形成 DOM 树
松散：浏览器会容忍错误（但仍要写规范）
演化：HTML5 起添加了语义、媒体、表单、CANVAS、本地存储等大量特性

0.3 学习路径

基础语法：文档结构、文本标签、实体字符
内容组织：链接、图片、列表、表格
表单：输入控件、提交、验证
语义化：HTML5 区块标签，提升可访问性
媒体与图形：音视频、SVG、Canvas
最佳实践：SEO、无障碍、性能

衔接：学完 HTML + CSS + JavaScript 即可独立做小型 Web 项目，再过渡到 Vue / React 框架。

HTML 是什么：一个最简单的页面 ⭐⭐⭐

1.1 最小 HTML 文件

HTML

<!-- 最小 HTML5 页面 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一页</title>
</head>
<body>
    <h1>你好，HTML！</h1>
    <p>这是我的第一个网页。</p>
</body>
</html>

1.2 关键点

<!DOCTYPE html>：声明文档类型，告诉浏览器这是 HTML5
<html lang="zh-CN">：根标签，指定语言（影响拼写检查、读屏）
<head>：放元数据，不会显示在页面上
<body>：放实际内容
<meta charset="UTF-8">：声明字符集（必须放在 head 第一行）
<title>：浏览器标签页标题（必填，影响 SEO）

建议： 把以上 11 行保存为 index.html，用浏览器打开，看到「你好，HTML！」就成功迈出第一步。

基本文档结构 ⭐⭐⭐

2.1 head 内的常用元数据

HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="页面描述">
    <meta name="keywords"    content="html, css, js">
    <meta name="author"      content="MiniMax509358">
    <title>页面标题</title>

    <!-- 引入 CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- 引入 JS（推荐放 body 末尾，或加 defer） -->
    <script defer src="app.js"></script>
</head>

2.2 自闭合与成对标签

类型	例子	说明
成对标签	`<p>...</p>`	有内容、有结尾
自闭合（空元素）	`<br>` `<img>` `<input>` `<hr>`	没有内容，HTML5 中可省略 `/`

2.3 注释

HTML

<!-- 单行注释 -->

<!--
 多行注释
 多用于临时屏蔽一块代码
-->

文本与排版标签 ⭐⭐⭐

3.1 标题与段落

HTML

<h1>一级标题（每页只应该有一个）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>

<p>这是一个段落。浏览器会在段落前后自动加空行。</p>
<br><!-- 强制换行 -->
<hr><!-- 水平分隔线 -->

3.2 文本级标签

标签	作用	例子
`<strong>`	加粗（语义：重要）	`<strong>警告</strong>`
`<em>`	斜体（语义：强调）	`<em>必须</em>`
`<b>` / `<i>`	加粗 / 斜体（无语义）	老旧兼容
`<u>`	下划线	默认样式
`<span>`	行内容器	`<span class="hl">高亮</span>`
`<mark>`	高亮文本	像荧光笔
`<small>`	小字	法律注释
`<sub>` / `<sup>`	下标 / 上标	H<sub>2</sub>O
`<del>` / `<ins>`	删除 / 插入	显示为划线
`<code>`	行内代码	用 `console.log`

3.3 整块标签

HTML

<div>块级容器，常用于布局</div>
<span>行内容器，常用于加样式</span>

<pre>保留空格与换行，常与 code 配合</pre>

<blockquote cite="https://example.com">
    引用一段话，整段缩进。
</blockquote>

实体字符 ⭐⭐

HTML 保留字符（如 < > & "）不能直接写入文本，否则会破坏结构。需要实体引用。

4.1 常用实体

显示	实体名	实体码
<	`<`	`<`
>	`>`	`>`
&	`&`	`&`
"	`"`	`"`
'	`'`	`'`
空格	` `	` `
©	`©`	`©`
®	`®`	`®`
¥	`¥`	`¥`
← → ↑ ↓	`← → ↑ ↓`	—

HTML

<p>5 &lt; 10 &amp;&amp; 10 &gt; 5</p>
<p>Copyright &copy; 2026 MiniMax</p>
<p>价格：¥199&nbsp;（限时）</p>

技巧：在 VS Code 里装 HTML 插件，输入 & 后会自动弹出候选。

链接 ⭐⭐⭐

5.1 基本链接

HTML

<a href="https://www.runoob.com" target="_blank">菜鸟教程（新窗口）</a>

<a href="about.html">关于我们（站内）</a>

<a href="mailto:[email protected]">发邮件给我们</a>

<a href="tel:+8613800000000">拨打 138-0000-0000</a>

5.2 target 属性

值	行为
`_self`（默认）	当前窗口打开
`_blank`	新窗口/新标签
`_parent`	父框架打开
`_top`	顶层框架打开

5.3 锚点跳转

HTML

<!-- 同一页面 -->
<a href="#chapter2">跳到第 2 章</a>
<h2 id="chapter2">第二章</h2>

<!-- 跨页 + 锚点 -->
<a href="help.html#faq">跳到帮助的 FAQ 部分</a>

⚠️ 安全提示

当外链 target="_blank" 时，建议加 rel="noopener noreferrer"，防止新页通过 window.opener 修改来源页。

图片与多媒体 ⭐⭐⭐

6.1 img 标签

HTML

<img src="cat.jpg" alt="一只橘猫"
     width="300" height="200"
     loading="lazy">

<!-- 图 + 标题语义化 -->
<figure>
    <img src="mount.jpg" alt="雪山">
    <figcaption>玉龙雪山（2026 年 1 月摄）</figcaption>
</figure>

6.2 关键属性

属性	作用	必填
`src`	图片地址	✅
`alt`	替代文字（无障碍 / 图片加载失败）	✅
`width/height`	宽高（避免回流）	推荐
`loading="lazy"`	滚动到才加载	推荐
`decoding="async"`	异步解码	可选
`title`	鼠标悬停提示	可选

6.3 图片格式选择

格式	特点	场景
JPG	有损、体积小	照片
PNG	无损、支持透明	Logo、截图
WebP	比 JPG/PNG 更小	现代浏览器首选
SVG	矢量、任意放大	图标、Logo
GIF	支持动画	动图（尽量用视频代替）

列表 ⭐⭐

7.1 三种列表

HTML

<!-- 无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

<!-- 自定义列表：术语解释 -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，网页骨架。</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，控制网页外观。</dd>
</dl>

7.2 嵌套列表

HTML

<ul>
    <li>前端
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>后端
        <ul>
            <li>Node.js</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

表格 ⭐⭐⭐

8.1 基本结构

HTML

<table border="1" cellpadding="8">
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>95</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>88</td>
        </tr>
    </tbody>
</table>

8.2 合并单元格

HTML

<th colspan="2">跨两列合并</th>
<td rowspan="3">跨三行合并</td>

⚠️ 注意

HTML 表格只用于二维数据，别用它做页面布局（CSS Flex/Grid 才是布局方案）。

表单基础 ⭐⭐⭐

9.1 最简表单

HTML

<form action="/submit" method="POST">
    <label for="email">邮箱：</label>
    <input id="email" type="email" name="email" required>

    <label for="pwd">密码：</label>
    <input id="pwd" type="password" name="pwd" minlength="8">

    <button type="submit">登录</button>
</form>

9.2 form 的关键属性

属性	作用
`action`	提交的 URL 地址
`method`	`get`（默认）或 `post`
`enctype`	编码方式（文件上传要用 `multipart/form-data`）
`target`	提交后的目标窗口
`autocomplete`	`on` / `off`

9.3 input type 速查

类型	用途
`text`	单行文本
`password`	密码（掩码显示）
`email` / `tel` / `url`	邮箱 / 电话 / 网址（移动端弹对应键盘）
`number`	数字（带上下箭头）
`date` / `time` / `datetime-local`	日期 / 时间
`checkbox`	复选框
`radio`	单选
`file`	文件选择
`submit` / `reset` / `button`	按钮三件套
`hidden`	隐藏字段（携带 token 等）
`color` / `range`	拾色器 / 滑块
`search`	搜索框

表单控件详解 ⭐⭐⭐

10.1 select 下拉与 datalist

HTML

<!-- 普通下拉 -->
<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option>
    <option value="shenzhen">深圳</option>
</select>

<!-- 可输入的下拉（搜索框） -->
<input list="langs" name="lang">
<datalist id="langs">
    <option value="JavaScript">
    <option value="Python">
    <option value="Java">
</datalist>

10.2 多行与按钮

HTML

<textarea name="msg" rows="5" cols="40" maxlength="500"></textarea>

<!-- 用 button 更灵活 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert(1)">点我</button>

10.3 控件分组 fieldset

HTML

<fieldset>
    <legend>联系偏好</legend>
    <label><input type="radio" name="contact" value="email"> 邮件</label>
    <label><input type="radio" name="contact" value="sms"> 短信</label>
</fieldset>

表单验证 ⭐⭐

HTML5 内置验证属性，不必写 JS。

11.1 内置验证属性速查

属性	作用	适用类型
`required`	必填	除 hidden 外
`min` / `max`	数值/日期范围	number / date
`minlength` / `maxlength`	字符长度	text / textarea
`pattern`	正则验证	text / email 等
`step`	步进	number
`type="email"`	邮箱格式	—
`type="url"`	URL 格式	—

HTML

<form id="f">
    <label>用户名：
        <input name="user" required pattern="[a-zA-Z0-9]{4,12}"
               title="4-12 位字母数字">
    </label>

    <label>年龄：
        <input type="number" name="age" min="1" max="150">
    </label>

    <label>邮箱：
        <input type="email" name="mail" required>
    </label>

    <button>提交</button>
</form>

<!-- 监听提交，决定是否拦截 -->
<script>
    document.getElementById("f").addEventListener("submit", e => {
        if (!e.target.checkValidity()) {
            e.preventDefault();
            alert("请检查输入");
        }
    });
</script>

语义化标签（HTML5 Sectioning）⭐⭐⭐

为什么要语义化？① 浏览器/搜索引擎更好理解页面结构；② 屏幕阅读器（盲人辅助）能清晰朗读；③ 团队代码更易维护。

12.1 主要区块标签

12.2 标签语义表

标签	语义	典型用途
`<header>`	页头/区域头	Logo、导航条、搜索
`<nav>`	导航链接	主导航、面包屑、分页
`<main>`	主体（每页一个）	核心内容
`<article>`	独立可分发的内容	博客文章、卡片、新闻
`<section>`	主题分组	章节、tab 面板
`<aside>`	侧边栏/相关	目录、广告、推荐
`<footer>`	页脚	版权、备案、联系方式
`<hgroup>`	一组标题	主标题 + 副标题
`<figure>`	图（图+说明）	图表、配图
`<details>` + `<summary>`	可折叠	FAQ、说明

12.3 对比 div

HTML

<!-- ❌ 全 div 写法（功能没错但不专业） -->
<div class="header">...</div>
<div class="nav">...</div>

<!-- ✅ 语义化写法 -->
<header>...</header>
<nav>...</nav>
<main>
    <article>
        <header><h1>文章标题</h1></header>
        <p>文章正文...</p>
    </article>
    <aside>相关文章</aside>
</main>
<footer>版权信息</footer>

12.4 details / summary 折叠

HTML

<details>
    <summary>点我展开 FAQ</summary>
    <p>答案：要考试了，加油。</p>
</details>

<details open>
    <summary>默认展开</summary>
    <p>默认就是打开状态。</p>
</details>

音视频 ⭐⭐

13.1 audio 音频

HTML

<audio controls autoplay loop>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    您的浏览器不支持 audio 标签。
</audio>

13.2 video 视频

HTML

<video controls width="640" poster="cover.jpg">
    <source src="movie.mp4"  type="video/mp4">
    <source src="movie.webm" type="video/webm">
    抱歉，您的浏览器不支持 video。
</video>

13.3 内嵌页面 iframe

HTML

<iframe src="https://www.runoob.com"
        width="800" height="500"
        loading="lazy"
        sandbox="allow-scripts allow-same-origin"
        title="外部教程"></iframe>

⚠️ 安全

嵌入第三方页面务必使用 sandbox 属性限制权限。

SVG 内联矢量图 ⭐⭐

SVG 用 XML 描述二维图形，任意缩放不变形，适合 Logo、图标、数据可视化。

14.1 基础形状

SVG

<svg width="200" height="120" viewBox="0 0 200 120">
    <rect x="10" y="10" width="80" height="50"
          fill="#E44D26" stroke="#333" stroke-width="2"/>

    <circle cx="150" cy="40" r="30"
            fill="gold" opacity="0.8"/>

    <line x1="10" y1="100" x2="190" y2="100"
          stroke="#444" stroke-dasharray="4 2"/>

    <text x="100" y="70"
          text-anchor="middle" fill="white"
          font-size="18">SVG</text>
</svg>

14.2 path 路径

SVG

<path d="M 10 80 L 50 20 L 90 80 Z"
      fill="#F16529" stroke="#333"/>
<!--
   M = move to    L = line to    Z = close
   C = bezier     Q = quadratic  A = arc
-->

建议：复杂 SVG 用 Figma/Adobe Illustrator 导出的代码即可，不必死记路径。

Canvas 2D 基础 ⭐⭐

Canvas 是位图画布，需要 JS 绘制，适合图表、游戏、图像处理。

15.1 基本流程

HTML + JavaScript

<canvas id="c" width="400" height="200">请使用支持 Canvas 的浏览器。</canvas>

<script>
    const c   = document.getElementById("c");
    const ctx = c.getContext("2d");

    // 矩形
    ctx.fillStyle = "#E44D26";
    ctx.fillRect(10, 10, 120, 80);

    // 描边矩形
    ctx.strokeStyle = "#3a2e26";
    ctx.lineWidth = 2;
    ctx.strokeRect(150, 10, 120, 80);

    // 文字
    ctx.font = "20px sans-serif";
    ctx.fillText("Canvas", 10, 130);

    // 路径（三角形）
    ctx.beginPath();
    ctx.moveTo(150, 130);
    ctx.lineTo(210, 180);
    ctx.lineTo(270, 130);
    ctx.closePath();
    ctx.fill();
</script>

15.2 Canvas 与 SVG 之选

特性	Canvas	SVG
本质	位图（逐像素）	矢量（DOM 节点）
渲染	JS 命令式	声明式 XML
性能	适合大量绘制（>1000 元素）	适合少量元素 + 交互
无障碍	❌ 不友好	✅ 可被读屏器读取
典型场景	游戏、图表（Chart.js）	图标、Logo、地图

元数据与 SEO ⭐⭐

元数据不在页面显示，但被浏览器、搜索引擎、社交平台使用。

16.1 必加项

HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>完整的标题（影响 SEO）</title>
    <meta name="description" content="不超过 160 字符的页面摘要">
    <meta name="keywords" content="html, 教程">
    <meta name="robots"    content="index,follow">
</head>

16.2 社交分享（Open Graph）

HTML

<meta property="og:title"       content="HTML 学习教程">
<meta property="og:description" content="从入门到精通">
<meta property="og:image"       content="https://example.com/cover.jpg">
<meta property="og:url"         content="https://example.com">
<meta property="og:type"        content="website">

16.3 favicon

HTML

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" href="/favicon.ico">

可访问性（A11y）⭐⭐⭐

A11y = Accessibility（11 字母夹在 a 与 y 之间），让所有用户（包括盲人、色盲、键盘操作者）能正常使用你的页面。

17.1 三大原则

感知：以多种方式呈现（文本 + 颜色 + 图标）
可操作：所有功能可由键盘完成
可理解：内容清晰、行为可预测

17.2 关键实践

问题	解决方案
图片信息丢失	所有 `<img>` 必须有 `alt`
表单无法定位	每个 input 配 `<label>` 或 `aria-label`
仅靠颜色传达信息	同时加文字或图标
无法用键盘操作	避免 `div` 模拟按钮，改用 `<button>`
屏幕阅读器找不到角色	用 `role` 属性（如 `role="navigation"`）

HTML

<!-- ✅ 用真实按钮，键盘 Enter/Space 自动触发 -->
<button aria-label="关闭弹窗">×</button>

<!-- ❌ div 不行 -->
<div onclick="close()">×</div>

<!-- 跳转链接加上跳过导航 -->
<a href="#main" class="skip-link">跳到主内容</a>

<!-- 表单分组 + legend -->
<fieldset>
    <legend>登录方式</legend>
    <label><input type="radio" name="login" value="user"> 用户名</label>
    <label><input type="radio" name="login" value="phone"> 手机</label>
</fieldset>

性能与最佳实践 ⭐⭐

18.1 资源加载

HTML

<!-- 解析到即下载但不阻塞（推荐） -->
<script defer src="app.js"></script>

<!-- 异步（下载完立即执行，不保证顺序） -->
<script async src="analytics.js"></script>

<!-- 关键资源提示 -->
<link rel="preload"  href="/font.woff2" as="font" crossorigin>
<link rel="prefetch"  href="/next-page.html">

<!-- 图片懒加载 -->
<img src="big.jpg" loading="lazy" decoding="async" alt="">

18.2 现代图像格式

HTML

<picture>
    <source srcset="img.avif" type="image/avif">
    <source srcset="img.webp" type="image/webp">
    <img     src="img.jpg" alt="图">
</picture>

18.3 最佳实践清单

✅ HTML 最佳实践

始终加 <!DOCTYPE html>、<html lang>、<meta charset>
使用语义化标签，告别"全 div 大法"
每个 <img> 必填 alt
表单必配 <label>
样式/行为分离：CSS 放 head，JS 加 defer
外部资源用相对路径或 CDN，避免硬编码域名
代码缩进统一，标签小写，属性加引号

项目一：个人主页（纯 HTML）⭐⭐⭐

项目 1：个人 / 作品主页

难度：⭐⭐纯 HTML（可加 CSS 美化）核心：语义化 + 表单 + 多媒体

完整骨架

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>张三的主页</title>
    <meta name="description" content="张三 / 学生 / Web 入门">
</head>
<body>
    <header>
        <h1>张三</h1>
        <p>大一新生 · 计算机科学</p>
        <nav aria-label="主导航">
            <ul>
                <li><a href="#about">关于</a></li>
                <li><a href="#projects">项目</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>关于我</h2>
            <p>正在学 HTML / CSS / JavaScript。</p>
            <figure>
                <img src="avatar.jpg" alt="头像" width="150">
            </figure>
        </section>

        <section id="projects">
            <h2>项目</h2>
            <article>
                <h3>个人博客</h3>
                <p>用 HTML + CSS 写一个静态博客。</p>
                <a href="blog/index.html">查看</a>
            </article>
            <article>
                <h3>计算器</h3>
                <p>用 HTML + CSS + JavaScript 写一个网页计算器。</p>
            </article>
        </section>

        <section id="contact">
            <h2>联系我</h2>
            <form action="mailto:[email protected]"
                  method="post" enctype="text/plain">
                <p><label>姓名 <input name="name"  required></label></p>
                <p><label>邮箱 <input type="email" name="mail" required></label></p>
                <p><label>信息 <textarea name="msg"></textarea></label></p>
                <p><button type="submit">发送</button></p>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Zhang San · <a href="#">备案号</a></p>
    </footer>
</body>
</html>

项目二：在线调查问卷 ⭐⭐⭐

项目 2：在线调查问卷

难度：⭐⭐⭐核心：表单全集 + 内置验证 + label

HTML

<form id="survey">
    <fieldset>
        <legend>基本信息</legend>
        <p><label>姓名 <input name="name"  required minlength="2"></label></p>
        <p><label>邮箱 <input type="email" name="mail" required></label></p>
        <p><label>年龄 <input type="number" name="age"
                          min="16" max="99"></label></p>
        <p><label>专业
            <select name="major" required>
                <option value="">请选择</option>
                <option>计算机</option>
                <option>软件工程</option>
                <option>信息安全</option>
            </select>
        </label></p>
    </fieldset>

    <fieldset>
        <legend>编程经历（多选）</legend>
        <label><input type="checkbox" name="langs" value="html"> HTML</label>
        <label><input type="checkbox" name="langs" value="css"> CSS</label>
        <label><input type="checkbox" name="langs" value="js"> JavaScript</label>
        <label><input type="checkbox" name="langs" value="py"> Python</label>
    </fieldset>

    <fieldset>
        <legend>你对本课程的评价</legend>
        <label><input type="radio" name="rate" value="5"> 非常好</label>
        <label><input type="radio" name="rate" value="4"> 好</label>
        <label><input type="radio" name="rate" value="3"> 一般</label>
    </fieldset>

    <p><label>意见
        <textarea name="feedback" rows="5" cols="40" maxlength="500"></textarea>
    </label></p>

    <p>
        <label><input type="checkbox" required> 我已阅读并同意条款</label></p>
    <p>
        <button type="submit">提交问卷</button>
        <button type="reset">清空</button>
    </p>
</form>

<output id="msg"></output>

<script>
    document.getElementById("survey").addEventListener("submit", e => {
        e.preventDefault();
        const data = Object.fromEntries(
            new FormData(e.target).entries()
        );
        document.getElementById("msg").textContent =
            "提交成功！" + JSON.stringify(data);
    });
</script>

HTML 速查手册 + 课堂训练

21.1 HTML5 标签分类速查

文档结构

<!DOCTYPE>
<html>
<head>
<body>
<title>
<meta>
<link>

文本语义

<h1>~<h6>
<p> <span>
<strong> <em>
<code> <pre>
<br> <hr>
<mark> <sub>

区块语义

<div> <section>
<article>
<header> <footer>
<nav> <aside>
<main> <address>

链接与媒体

<a> <img>
<figure> <figcaption>
<audio> <video>
<source> <track>
<iframe> <picture>

列表与表格

<ul> <ol> <li>
<dl> <dt> <dd>
<table> <tr> <td>
<thead> <tbody> <tfoot>
<th> <caption>

表单

<form> <fieldset>
<input> <label>
<button> <select>
<option> <textarea>
<datalist> <output>

图形与脚本

<svg> <canvas>
<script> <noscript>
<template> <slot>

交互

<details> <summary>
<dialog>
<menu>

21.2 常用属性速查

类别	属性
通用	`id` `class` `style` `title` `lang` `tabindex`
资源	`src` `href` `alt` `type` `loading`
表单	`name` `value` `required` `disabled` `readonly` `placeholder` `pattern`
数据	`data-*` 自定义属性，JS 通过 `dataset` 读取
国际化	`dir`(方向 ltr/rtl)

21.3 课堂训练题（点击作答）

Q1. 下列哪个不是 HTML5 新增的语义化标签？

A. <section>
B. <frame>
C. <article>
D. <aside>

答案：B。<frame> 是 HTML4 的过时标签，已被 iframe 取代且不建议使用。

Q2. 关于 <img> 的 alt 属性，正确的是？

A. 可加可不加
B. 只在图片加载失败时显示
C. 无障碍必需，搜索引擎与读屏器都要读它
D. 用来显示图片说明，鼠标悬停时弹出

答案：C。alt 是必须的语义信息；悬停提示用 title 属性。

Q3. 表单提交时，哪种 enctype 适用于文件上传？

A. multipart/form-data
B. application/x-www-form-urlencoded
C. text/plain
D. multipart/text

答案：A。multipart/form-data 是文件上传的标准编码。

Q4. 想做响应式布局，让 viewport 跟随设备宽度。meta 标签应该是？

A. <meta name="viewport" content="width=1200">
B. <meta charset="UTF-8">
C. <meta name="description">
D. <meta name="viewport" content="width=device-width, initial-scale=1">

答案：D。这是响应式设计的核心 meta 标签。

Q5. 关于 SVG 与 Canvas，正确的是？

A. SVG 用 JS 绘制，Canvas 用 XML 描述
B. SVG 是矢量，可被读屏器读取；Canvas 是位图
C. 两者完全相同
D. Canvas 不需要 JS

答案：B。SVG 适合图标/Logo/小量交互，Canvas 适合大量像素绘制。

Q6. 想要一个"名字+电话"的表单，最好实践是？

A. 用 div 模拟输入框
B. 不用 label，让用户看 placeholder
C. 每个 input 配 <label> 或 aria-label
D. 全部套在 <span> 里

答案：C。label 是无障碍与可用性的最佳实践。

Q7. <script> 标签加 defer 属性的作用？

A. 异步下载但按顺序执行（在 DOM 解析完成后）
B. 完全同步执行
C. 让脚本立即阻塞页面渲染
D. 完全禁用脚本

答案：A。defer 是性能优化推荐写法。

Q8. 哪个不是 HTML5 表单新增类型？

A. email
B. date
C. color
D. selectbox

答案：D。selectbox 不是 input 类型；正确的是 select + option。

Q9. 想做页面内的"可折叠 FAQ"，最简洁的写法是？

A. 自己写 JS + display:none
B. <details> + <summary>
C. <iframe>
D. <table hidden>

答案：B。details/summary 是原生折叠组件，零 JS。

Q10. 把 HTML、CSS、JS 拆成独立文件，最大的好处是？

A. 文件变小
B. SEO 更好
C. 关注点分离（维护、缓存、协作）
D. 浏览器更兼容

答案：C。关注点分离是工程实践的核心；浏览器都能正确处理内联代码。

写在最后：HTML 是 Web 的基石

🎓 与本系列衔接

HTML     → 网页骨架（语义、文档、表单）
CSS      → 网页外观（颜色、布局、响应式）
JavaScript→ 网页交互（DOM、事件、异步）
Vue      → 前端框架（组件化、响应式）

学完 HTML 后，下面应当学 CSS（视觉）与 JavaScript（行为）。三者配合才能做出真正有用的网页。

本教程打通了语义结构与无障碍设计，建议结合本系列前面的 JavaScript 教程把所有示例活学活用。

提示：本教程涉及的所有 SVG 均为内联矢量，可直接复制；所有代码都可直接保存为 .html 离线运行。

显示	实体名	实体码
<	`<`	`<`
>	`>`	`>`
&	`&`	`&`
"	`"`	`"`
'	`'`	`'`
空格	` `	` `
©	`©`	`©`
®	`®`	`®`
¥	`¥`	`¥`
← → ↑ ↓	`← → ↑ ↓`	—

显示	实体名	实体码
<	`<`	`<`
>	`>`	`>`
&	`&`	`&`
"	`"`	`"`
'	`'`	`'`
空格	` `	` `
©	`©`	`©`
®	`®`	`®`
¥	`¥`	`¥`
← → ↑ ↓	`← → ↑ ↓`	—

显示	实体名	实体码
<	`<`	`<`
>	`>`	`>`
&	`&`	`&`
"	`"`	`"`
'	`'`	`'`
空格	` `	` `
©	`©`	`©`
®	`®`	`®`
¥	`¥`	`¥`
← → ↑ ↓	`← → ↑ ↓`	—