前端基础 · 第 2 章 HTML5：给页面搭骨架

构

第 2 章　HTML5：给页面搭骨架

HTML5 — Semantic Markup

HTML 不是编程语言，是标签的语言。你不用"写逻辑"，只要把内容塞进正确的标签里。浏览器认得这些标签，知道哪是标题、哪是段落、哪是按钮。语义化就是别滥用 <div>——能用语义标签就用语义标签，让浏览器和搜索引擎都看懂你的结构。

文档骨架：每个 HTML 页都长这样

零件	干嘛的
`<!DOCTYPE html>`	文档类型声明，必须在第一行。写了就告诉浏览器"用标准模式渲染"，别用兼容老 IE 的怪模式。
`<html>`	根标签，所有内容都在它里面。
`<head>`	元信息：编码、标题、CSS、SEO 描述。用户一般看不见。
`<body>`	用户看得见的内容。所有标签都往这里面塞。
`<meta charset>`	字符编码，写 UTF-8，否则中文乱码。
`<meta viewport>`	移动端适配必备。不写，手机上字小得看不清。

语义化标签：别再全用 div 了

以前大家写页面就是一堆 <div> 套 <div>，浏览器根本不知道哪块是导航、哪块是正文。HTML5 给了一堆有名字的标签：

<body>
  <header>页头/logo/顶部导航放这里</header>
  <nav>     导航条</nav>

  <main>
    <article>
      <h1>文章标题</h1>
      <section>一节内容</section>
      <section>另一节</section>
    </article>
    <aside>侧边栏/广告/相关推荐</aside>
  </main>

  <footer>页脚/版权/备案</footer>
</body>

好处有三：① 读屏软件能读出来"这是导航"；② 搜索引擎能理解结构，SEO 更好；③ 自己三个月后回来读代码也不懵。

常用文本、列表、链接、图片

标签	用途
`<h1>~<h6>`	标题，h1 最大最重要，一页建议一个 h1。
`<p>`	段落。
`<strong> / <em>`	加粗 / 斜体。语义化的"强调"，不是为了纯样式。
`<ul><li>`	无序列表（圆点）。
`<ol><li>`	有序列表（1. 2. 3.）。
`<a href="...">`	链接。加 `target="_blank"` 在新标签打开；外链记得加 `rel="noopener"`。
`<img src alt>`	图片。`alt` 是图片加载失败时的替代文字，也是无障碍和 SEO 必备。
`loading="lazy"`	图片懒加载，滚到视口才下载，省流量。
`<figure>+<figcaption>`	图片/图表 + 图注的组合。

链接和图片的标准写法

<!-- 内链：跳到本站另一个页面 -->
<a href="about.html">关于我们</a>

<!-- 外链：新标签打开，加 rel 防安全问题 -->
<a href="https://developer.mozilla.org"
   target="_blank" rel="noopener noreferrer">MDN 文档</a>

<!-- 图片：alt 一定写，懒加载加上 -->
<img src="cat.jpg"
     alt="一只橘猫趴在键盘上"
     loading="lazy"
     width="800" height="600">  <!-- 写宽高避免布局跳动 -->

表格：thead / tbody / th / td

<table>
  <thead>
    <tr><th>姓名</th><th>分数</th></tr>
  </thead>
  <tbody>
    <tr><td>小明</td><td>95</td></tr>
    <tr><td colspan="2">合计 1 人</td></tr>  <!-- 跨两列 -->
  </tbody>
</table>

表单：input 的各种类型

表单是前端跟用户打交道的主要入口。<input> 的 type 决定它长什么样、浏览器怎么校验：

type	效果
`text / password`	单行文本 / 密码（圆点）。
`email / number / date`	邮箱 / 数字 / 日期。浏览器自带键盘和校验。
`checkbox / radio`	多选 / 单选。同组 radio 必须 `name` 相同。
`file`	文件选择。加 `multiple` 可选多个。
`textarea`	多行文本。
`<select><option>`	下拉框。
`required / placeholder`	必填 / 占位提示文字。

一个能提交的登录表单

<form action="/api/login" method="POST">
  <!-- label 包住 input，点文字也能聚焦 -->
  <label>邮箱
    <input type="email" name="email"
           required placeholder="you@example.com">
  </label><br>

  <label>密码
    <input type="password" name="pwd" minlength="6">
  </label><br>

  <button type="submit">登录</button>
</form>
<!-- required + type=email 让浏览器先做一道基础校验，不用写 JS -->

HTML5 新能力：浏览器直接给的 API

除了标签，HTML5 还顺手把一堆以前要靠 Flash / 第三方库才能干的事做成了浏览器原生 API：

localStorage / sessionStorage：浏览器本地存键值对，关页面不丢 / 关标签就没。
history API：pushState 改 URL 不刷新页面，SPA 路由的底层。
geolocation：拿用户经纬度（会弹权限框）。
WebSocket：全双工通信，聊天 / 实时推送靠它。
Service Worker：在浏览器后台跑的脚本，PWA 离线缓存的核心。
<canvas> / <svg>：画图。canvas 是像素位图，svg 是矢量。
<audio> / <video>：原生音视频播放器。

无障碍（a11y）与 SEO 基础

易别让网站对屏幕前的人和搜索引擎都不友好

无障碍：图片必须有 alt；图标按钮加 aria-label="关闭"；用真按钮别用 <div onclick>（键盘 Tab 键按不到）；颜色对比度要够（正文至少 4.5:1）。

SEO：<title> 写清楚这页讲啥；<meta name="description"> 写一段摘要；社交分享加 Open Graph 标签 <meta property="og:title">；用语义化标签让爬虫看懂结构。

HTML5 深化：语义化清单、表单、多媒体与 Web API

前面是入门，这里把 HTML5 真正干活的家伙什全部摊开。HTML 这层看着简单，细节决定可访问性、SEO 和表单体验。

语义化标签完整清单（含 a11y 说明）

标签	用法 + 可访问性说明
`<header>`	页面或区块的头部。读屏会播报"横幅"。一个 section/article 内部也可以有自己的 header。
`<nav>`	主导航链接组。读屏软件可一键跳到"导航区"。一页建议只留一个主要 nav。
`<main>`	页面唯一主内容，全页只能有一个。读屏可"跳到主内容"，对键盘用户极重要。
`<article>`	独立、可复用的一块内容（博客文章、卡片、帖子）。脱离上下文也能读懂。
`<section>`	主题分组，通常带一个 h2/h3 标题。没有标题的分组别硬用 section，用 div。
`<aside>`	与主内容略相关的侧边栏、广告、相关阅读。
`<footer>`	页脚或区块尾部：版权、联系方式、备案。
`<figure>+<figcaption>`	插图/代码块/图表 + 标题。figcaption 会被读屏和图像内容关联播报。
`<details>+<summary>`	原生折叠面板，summary 是可点标题。键盘可操作，不用 JS。
`<dialog>`	原生模态框。`showModal()` 自动焦点陷阱 + 遮罩，比自己写 div 弹层 a11y 好十倍。
`<time datetime>`	标注日期时间，datetime 给机器读（ISO 8601），如 `2026-09-16`。
`<mark>`	高亮相关文字（搜索命中），语义上是"标记"而非纯黄色背景。
`<address>`	联系人信息（不是随便放地址！）。读屏会识别为联系块。
`<blockquote>`	长段引用。短引用用 `<q>`，自动加引号。

dialog 原生模态框：焦点、遮罩、Esc 关闭全免费

<dialog id="dlg">
  <h2>确认删除？</h2>
  <p>这条数据删了就找不回来了。</p>
  <button onclick="dlg.close()">取消</button>
</dialog>
<button onclick="document.getElementById('dlg').showModal()">打开</button>
<!-- showModal() 后：自动有遮罩、焦点困在框内、按 Esc 关闭，全是浏览器自带 -->

表单高级：类型、属性、校验 API

表单是前端收数据的命门。<input> 的 type 决定键盘弹法和浏览器原生校验：

type	效果
`text / password`	单行文本 / 掩码密码。
`email / tel / url`	邮箱 / 电话（手机弹数字键盘）/ 网址。
`number / range`	数字输入框 / 滑块。range 配 min/max/step。
`date / time / datetime-local`	日期 / 时间 / 日期+时间选择器。不要用 datetime（已废弃）。
`month / week`	选月份 / 选第几周。
`color / search`	取色器 / 带清除按钮的搜索框。
`file`	文件选择，`multiple` 多选，`accept="image/*"` 限制类型。

常用属性	作用
`required / pattern`	必填 / 正则校验（`pattern="\d{6}"`）。
`min / max / step`	数字/日期的范围与步长。
`placeholder / autocomplete`	占位提示 / 自动填充（`autocomplete="email"` 帮密码管理器识别）。
`autofocus`	页面加载后自动聚焦到该框（一页最多一个）。
`disabled / readonly`	禁用（不提交、灰掉）/ 只读（可选中、会提交）。

完整表单：datalist 自动补全 + 分组 + 原生校验

<form id="f" novalidate>  <!-- novalidate：关掉浏览器默认气泡，自己用 JS 校验 -->
  <fieldset>
    <legend>联系方式</legend>
    <label>邮箱
      <input type="email" name="email" required placeholder="you@x.com">
    </label>
    <br>
    <label>城市
      <input list="cities" name="city">   <!-- 输入时自动补全下拉 -->
      <datalist id="cities">
        <option value="南京"><option value="上海"><option value="北京">
      </datalist>
    </label>
  </fieldset>
  <button type="submit">提交</button>
</form>

// JS 手动校验：validity 对象告诉你哪里不对
const form = document.querySelector("#f");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  if (!form.checkValidity()) {        // 只返回 true/false
    form.reportValidity();             // 触发浏览器气泡提示
    return;
  }
  const email = form.elements.email;
  if (email.validity.typeMismatch)          // 非法：valueMissing/tooShort/patternMismatch 等
    email.setCustomValidity("这邮箱格式不对");
  // 校验通过就 fetch 提交...
});

form 属性组合：action 提交到哪、method GET/POST、enctype 传文件时必须是 multipart/form-data（fetch 手动提交时不用管，浏览器自动加）。<output> 用来显示计算结果。

多媒体：video / audio / canvas

<!-- 视频：controls 出播放条，preload 控制预加载，poster 封面 -->
<video controls preload="metadata" poster="cover.jpg" width="640">
  <source src="movie.mp4"  type="video/mp4">      <!-- 优先 H.264，通吃 -->
  <source src="movie.webm" type="video/webm">   <!-- 不支持 mp4 的用 webm -->
  <!-- 字幕：track 给读屏和听障用户 -->
  <track kind="subtitles" src="zh.vtt" srclang="zh" default>
  你的浏览器太老了，不支持 video。
</video>
<!-- audio 同理，没有画面所以不需要 poster/width -->

canvas 2D 绘图：画个方块加动画

<canvas id="c" width="400" height="200"></canvas>
const ctx = document.querySelector("#c").getContext("2d");

ctx.fillStyle = "#2E4B3D";
ctx.fillRect(10, 10, 80, 50);          // 实心矩形

// 路径：画一个圆
ctx.beginPath();
ctx.arc(200, 100, 40, 0, Math.PI * 2);  // 圆心x y 半径 起始角 结束角
ctx.fillStyle = "#B98A2F";
ctx.fill();

// 变换：save/restore 保护现场，translate 平移原点
ctx.save();
ctx.translate(300, 100);
ctx.rotate(Math.PI / 4);
ctx.fillRect(-20, -20, 40, 40);
ctx.restore();

// 动画：requestAnimationFrame 跟屏幕刷新率对齐（一般 60fps）
let x = 0;
function tick() {
  ctx.clearRect(0, 0, 400, 200);
  ctx.fillRect(x, 80, 20, 20);
  x += 2;
  if (x < 400) requestAnimationFrame(tick);
}
tick();

Web API：浏览器自带的工具箱

// 1) Web Storage：键值对，容量约 5MB，同源共享
localStorage.setItem("theme", "dark");      // 永久，关浏览器还在
localStorage.getItem("theme");             // "dark"
localStorage.removeItem("theme");
// localStorage.clear();                       全部清空
sessionStorage.setItem("tmp", "1");           // 关标签页就没

// storage 事件：别的标签页改了 storage，当前页能收到
window.addEventListener("storage", (e) => console.log(e.key, e.newValue));

// 2) Geolocation：拿经纬度（会弹权限）
navigator.geolocation.getCurrentPosition(p => {
  console.log(p.coords.latitude, p.coords.longitude);
});

// 3) Notification：桌面通知
if (window.Notification.permission === "granted")
  new Notification("你好", { body: "消息来了" });

// 4) Web Worker：把耗时计算扔到后台线程，不卡 UI
// const worker = new Worker("calc.js");
// worker.postMessage(data); worker.onmessage = e => ...

// 5) IndexedDB：浏览器里的小型事务数据库，存结构化数据（存图片/大 JSON 用它）
// 6) Service Worker：后台脚本，PWA 离线缓存的核心，进阶篇讲

可访问性 a11y：让所有人都能用

易语义化优先于 ARIA

第一条铁律：能用原生标签就别用 ARIA。<button> 自带键盘焦点、空格/回车触发，你用 <div role="button"> 还得自己补键盘事件。ARIA 是"最后手段"，不是首选。

常用 ARIA：role="dialog"、aria-label="关闭"（图标按钮没文字时）、aria-labelledby="id"（用页面已有文字当标签）、aria-hidden="true"（装饰性元素对读屏隐藏）、aria-live="polite"（异步更新的区域，如搜索结果，读屏自动念出来）。

键盘导航：所有可交互元素必须能 Tab 到；焦点要有可见样式（:focus-visible）；别用 outline:none 又不给替代样式。对比度：正文文字至少 4.5:1，大标题 3:1。

SEO 基础：让搜索引擎看懂你

<head> 里的 SEO 全套标签

<meta name="description" content="一页讲清单文件前端入门：HTML/CSS/JS/TS/React 19">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Open Graph：分享到微信/脸书时的卡片 -->
<meta property="og:title" content="前端基础教程">
<meta property="og:image" content="/cover.png">
<meta name="twitter:card" content="summary_large_image">
<!-- canonical：这页的"正版"地址，防止镜像站抢权重 -->
<link rel="canonical" href="https://yoursite.com/page">
<!-- 结构化数据 JSON-LD：告诉 Google 这是什么文章/产品/课程 -->
<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "Course", "name": "前端基础" }
</script>

robots.txt：放网站根目录，告诉爬虫哪些目录别爬。
sitemap.xml：列出全站所有 URL，帮爬虫发现页面。
Core Web Vitals：Google 排名指标。LCP（最大内容渲染，要 <2.5s）、INP（交互到下次绘制，替代老的 FID，要 <200ms）、CLS（累积布局偏移，要 <0.1）。图片写 width/height、字体别闪、别动态插广告就能压住 CLS。

本章面试题（HTML5 / a11y / SEO）

1. 语义化标签和 ARIA 是什么关系？为什么说"优先语义化、ARIA 是最后手段"？

看答案

原生标签自带角色、键盘行为、读屏播报（button 可聚焦可回车触发）。用 div + role="button" 你得自己补焦点、keyboard 事件，还容易漏。ARIA 只补原生标签没有的语义（图标按钮的文字、实时区域）。原则：能用 button/a/nav 就别上 role。

2. localStorage 和 sessionStorage 区别？容量多大？storage 事件什么时候触发？

看答案

localStorage 永久保存（除非手动清），sessionStorage 关标签页即失效。两者同源、容量约 5MB、只能存字符串。storage 事件只在其他同源标签页修改 storage 时触发，当前页自己 setItem 不会触发。

3. <canvas> 和 <svg> 的区别？什么时候用哪个？

看答案

canvas 是位图，靠 JS 逐像素画，适合游戏、图表、滤镜这类高动态、不要求 DOM 节点的场景；svg 是矢量 XML 元素，每个图形是 DOM 节点，可缩放不失真、可绑事件，适合图标、简单矢量图。

4. 什么是 Core Web Vitals 的三个指标？CLS 怎么压？

看答案

LCP 最大内容绘制、INP 交互响应、CLS 累积布局偏移。压 CLS：图片写 width/height、广告位预留固定尺寸、字体用 font-display:swap 且预留空间、不要在已渲染内容上方突然插入新元素。

SVG：用 XML 画矢量图，放多大都不糊

前面 canvas 是"拿笔在画布上涂，画完就忘"；SVG 是"用 XML 把图形描述出来，浏览器替你算出来"。一句话区分：bitmap 像照片，放大发虚；SVG 像几何图纸，放到多大都锐利。图标、logo、简单插画、数据图表，首选 SVG。

内联 SVG：直接写在 HTML 里，能被 CSS 选中、能交互动画

<!-- viewBox 是"画纸的逻辑坐标系"，不写它图形会按你给的尺寸硬画 -->
<svg width="200" height="120" viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y=10 width=180 height=100 rx=8 fill="#B98A2F"/>   <!-- 圆角矩形 -->
  <circle cx=50 cy=60 r=20 fill="#fff"/>                       <!-- 圆心(cx,cy) 半径r -->
  <path d="M90 60 L150 60 M135 48 L150 60 L135 72" stroke="#fff" stroke-width=4/> <!-- 路径：M移到 L画线 -->
</svg>

元素	干啥用
`rect / circle / ellipse`	矩形（rx 圆角）、圆、椭圆。
`line / polyline / polygon`	直线、折线、闭合多边形。
`path`	万能路径：M 移动、L 画线、C 贝塞尔曲线、Z 闭合。图标几乎都用它。
`<svg> 根元素`	必带 `xmlns`；`viewBox="x y w h"` 定义逻辑坐标系，配合 `width:100%` 自动缩放。

SVG 怎么进页面，三种姿势：①内联（写在 HTML 里）：能被 fill 等 CSS 改色、能加 hover 动画、能 querySelector 交互——图标库首选；②<img src="a.svg">：简单但 CSS 改不到内部；③background-image：纯装饰。

SVG vs Canvas，别选错

SVG：DOM 节点，保留矢量信息，适合图标/图表/少量元素/要交互；Canvas：一块像素位图，画完即像素，适合几千个粒子/游戏/图像滤镜。元素一多（上千个），SVG 的 DOM 节点会拖慢渲染，这时换 Canvas。

← 上一节：第 1 章前端是什么，怎么学前端基础 · 总览下一节：第 3 章 CSS3：把页面穿得人模狗样 →