H5快速学习-EW帮帮网

M1：HTML 基本结构与声明规范

一、标准 HTML5 文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标准HTML5页面</title>
</head>
<body>
  <!-- 页面内容写在这里 -->
</body>
</html>

二、部分详解

1. <!DOCTYPE html>

声明文档使用的是 HTML5。
必须放在文档最顶端，不能有任何内容（含空格）在前面。
不属于 HTML 标签，它是 SGML 遗留语法，为浏览器触发“标准模式”而设。

2. <html lang="zh-CN">

lang 属性：指明页面使用的语言，对语音阅读器、SEO、翻译工具友好。
W3C推荐以 IETF BCP 47（如 zh-CN、en-US）声明语言。

3. <head> 元信息头部

包含不会在页面中直接渲染的“文档元数据”。

标签	功能
`<meta charset="UTF-8">`	定义页面使用 UTF-8 编码，保证中英文字符正确显示
`<meta name="viewport"...>`	为响应式设计优化移动端显示（非 HTML 核心，但为 Web App 推荐）
`<title>`	网页标签栏显示的标题，W3C 强制必须存在

4. <body>

所有页面内容、结构、语义标签、脚本都应写在 <body> 中。
只允许有一个 <body> 元素。

三、补充参考

HTML Living Standard：https://html.spec.whatwg.org/
HTML Element Index（所有元素规范）：https://html.spec.whatwg.org/multipage/indices.html#elements-3
DOCTYPE 规范：https://html.spec.whatwg.org/#the-doctype

M2：HTML 元素分类与嵌套规则

一、HTML 元素五大分类

分类名	说明	常见标签示例
元素类型	内容模型定义	标签示例
元数据内容（Metadata content）	文档元信息，位于 `<head>` 中	`<title>` `<meta>` `<link>` `<style>` `<script>`
流内容（Flow content）	网页中可出现在 `<body>` 中的任何内容	几乎所有标签
段落内容（Sectioning content）	构建文档结构的内容区域	`<article>` `<section>` `<nav>` `<aside>`
嵌入内容（Embedded content）	插入媒体或外部资源	`<img>` `<video>` `<audio>` `<iframe>` `<canvas>` `<svg>`
交互内容（Interactive content）	用户可交互元素	`<a>` `<button>` `<details>` `<input>` `<label>` `<textarea>`

一个标签可以同时属于多个分类。

二、嵌套规则与嵌套合法性

HTML 不是随便嵌套的，遵循 父子关系 + 分类兼容 原则

<article>
  <h2>标题</h2>
  <p>段落文字</p>
  <section>
    <h3>子部分</h3>
    <p>子段落</p>
  </section>
</article>

交互元素不可嵌套

<a href="#">
  <button>错误嵌套</button> <!-- ❌ 错误：不能把交互内容嵌套在<a>里 -->
</a>

head 外使用 meta

<body>
  <meta charset="UTF-8"> <!-- ❌ 错误：meta只能在<head>中 -->
</body>

<p> 中不能包含块级标签如 div

<p>开始
  <div>不合法的嵌套</div> <!-- ❌ -->
</p>

M3：文本内容标签

一、标题标签：`<h1>` ~ `<h6>`

共6级，<h1> 表示最高层级标题，<h6> 最低。
用于文档结构分层，不是为了设置字体大小（那是 CSS 的事）。
每个页面建议只使用一个 <h1>，表示页面主标题。

<h1>网站主标题</h1>
<h2>新闻中心</h2>
<h3>行业动态</h3>

二、段落标签：`<p>`

表示一段文字，自动在前后添加空行。
是 HTML 中最基本的文本容器。
禁止在 <p> 中嵌入块级元素（如 <div>、<section>、<img> 等）。

三、换行标签：`<br>`

强制换行，用于诗句、地址、单行注释等非常规文本排布。
是空元素，不能包裹任何内容。

四、水平线标签：`<hr>`

表示内容主题的变化或分隔。
渲染为一条水平线。
也是空元素，不需要闭合。

五、引用标签：`<blockquote>`

表示长文本引用，通常是外部来源。
可以使用 cite 属性注明来源。
内容中可以包含多个 <p>、标题、列表等块级元素。

<blockquote cite="https://example.com/article">
  <p>这是引用的一段文字，可能来自其他网站。</p>
</blockquote>

六、预格式文本：`<pre>`

用于保留空格、换行、缩进等格式。
常用于代码展示或 ASCII 图表。
可配合 <code> 一起使用。

<pre>
function test() {
  console.log("Hello World");
}
</pre>

七、行内语义标签（了解）

<strong>：表示强调，通常渲染为加粗
<em>：表示语气强调，通常渲染为斜体
<code>：表示代码片段（行内）
<abbr title="HyperText Markup Language">HTML</abbr>：缩写解释
<mark>：高亮关键词（搜索结果等）

M4：语义结构标签

一、结构性语义标签汇总

标签	语义说明	可包含内容
`<header>`	页头、区块头部（可以有多个）	标题、导航、Logo 等
`<footer>`	页脚、区块结尾信息	版权、作者、导航等
`<nav>`	导航栏，内部应包含链接	菜单链接列表
`<main>`	页面主内容（仅限一个）	核心结构块
`<section>`	内容区块（有标题）	通常带有 `<h*>`
`<article>`	独立内容块	可单独分发（如博客、新闻）
`<aside>`	附属内容	侧边栏、提示、引用

二、用法与示例

`<header>`

可出现在 <body> 或 <section> 内部，表示某部分的头部区域。

<header>
  <h1>我的博客</h1>
  <nav>
    <a href="/">主页</a>
    <a href="/posts">文章</a>
  </nav>
</header>

`<footer>`

页面或区块底部信息，常用于版权、联系方式等。

<footer>
  <p>版权 © 2025 我的博客</p>
</footer>

`<nav>`

包含导航链接的区块，应只用于真正的主要导航集合。

<nav>
  <ul>
    <li><a href="/home">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

`<main>`

整个页面的核心内容区域，每个文档只能有一个 <main> 标签。

<main>
  <article>
    <h2>最新文章</h2>
    <p>这是博客文章的内容段落。</p>
  </article>
</main>

`<section>`

内容区块，建议有标题。用于逻辑分组内容（新闻、评论、FAQ等）。

<section>
  <h2>常见问题</h2>
  <p>你可以问的问题如下……</p>
</section>

`<article>`

独立可复用的内容单元，可单独抓取或再发布。常用于博客文章、新闻条目、论坛贴文。

<article>
  <h2>第1篇博客</h2>
  <p>这是博客正文……</p>
</article>

`<aside>`

用于当前页面的补充信息，不是主要内容。常见于侧边栏、广告、提示框等。

<aside>
  <h3>相关文章</h3>
  <ul>
    <li><a href="#">如何写语义化 HTML</a></li>
  </ul>
</aside>

三、结构化布局推荐

<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <article>...</article>
    <section>...</section>
    <aside>...</aside>
  </main>
  <footer>...</footer>
</body>

四、常见误区

❌ 错误做法	✅ 替代方法
所有结构都用 `<div>`	使用 `<section>`、`<article>` 表达语义
页面中多个 `<main>`	每页仅允许一个 `<main>`
用 `<nav>` 包所有链接	`<nav>` 只用于主导航区域，不含页面内容区跳转
忽略 `<header>`、`<footer>` 作用	每个 `<section>`/`<article>` 块可独立拥有自己的 `<header>`/`<footer>`

M5：链接与媒体资源

一、超链接标签 `<a>`

作用：创建指向页面内部、外部或锚点的链接。

<a href="https://example.com">跳转到站外</a>

常用属性：

属性	说明
`href`	指定跳转地址（必需）
`target="_blank"`	在新标签页打开链接
`download`	下载链接资源
`rel="noopener"`	新窗口打开时提高安全性（配合 `_blank` 使用）

<a href="https://www.w3.org" target="_blank" rel="noopener">访问W3C</a>

二、图像标签 `<img>`

作用：用于嵌入图片（内容图或装饰图）。

<img src="avatar.jpg" alt="用户头像">

常用属性：

属性	说明
`src`	图像路径（本地或远程）
`alt`	图片加载失败时显示的替代文本（必须写）
`width` / `height`	设置图像大小
`loading="lazy"`	懒加载图像（HTML5标准）

不能直接写在 <p> 中，应放在段落外或独立结构中

可配合 <figure> 使用，增强语义

<figure>
  <img src="sunrise.jpg" alt="日出">
  <figcaption>清晨的山间日出</figcaption>
</figure>

三、音频标签 `<audio>`

作用：嵌入音频播放功能（HTML5 新增）

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

常用属性：

属性	说明
`controls`	显示音频控制面板
`autoplay`	自动播放（慎用）
`loop`	播放完自动重新开始
`muted`	默认静音
`preload`	预加载策略：`none`、`metadata`、`auto`

四、视频标签 `<video>`

作用：嵌入视频播放器

<video controls width="400">
  <source src="demo.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

常用属性与 <audio> 基本一致

可增加 封面图：

<video controls poster="cover.jpg">

可增加多种格式支持：

<source src="video.webm" type="video/webm">

五、可访问性与性能建议

标签	最关键的可访问性措施
`<img>`	必写 `alt`，不应为空
`<a>`	链接内容要有可读性（避免仅用图标）
`<audio>` / `<video>`	提供字幕 / 文本说明；避免自动播放
媒体	加载大文件应使用 `loading="lazy"` 或响应式加载策略

M6：列表与表格结构

一、列表标签

`<ul>`：无序列表

适用于：导航栏、清单、选项

子项用 <li> 包裹，顺序不重要

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

`<ol>`：有序列表

适用于：步骤、流程、排名

默认数字编号，支持自定义类型

<ol type="1" start="3">
  <li>打开网页</li>
  <li>点击登录</li>
  <li>输入信息</li>
</ol>

常用 type 值：

1（默认数字）
a（小写字母）
A（大写字母）
i（小写罗马）
I（大写罗马）

`<dl>`：定义列表

适用于术语与解释、FAQ、键值结构

结构由 <dt>（定义项）与 <dd>（定义内容）组成

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

二、表格结构

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

常用子标签:

标签	说明
`<table>`	表格容器
`<thead>`	表格头部
`<tbody>`	表格主体
`<tfoot>`	表格尾部（如总计）
`<tr>`	表格行
`<th>`	表头单元格（加粗+居中）
`<td>`	普通单元格

合法结构建议:

<thead>、<tbody>、<tfoot> 都可选，但推荐结构化使用
<thead> 必须在 <tbody> 前
<th> 用于列名或行标题，具语义意义

合并列（横向）：

<td colspan="2">合并两列</td>

合并行（纵向）：

<td rowspan="3">合并三行</td>

表格语义增强：

<caption>：表格标题（必须在 <table> 内第一个位置）
<colgroup> + <col>：用于列样式控制
使用 <scope="col"> / <scope="row"> 增强可访问性

<table>
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">数学</th>
    </tr>
  </thead>
</table>

三、嵌套结构示意

<ul>
  <li>前端
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>后端</li>
</ul>

M7：表单结构与控件

一、表单结构 `<form>`

<form action="/submit" method="post">
  <!-- 表单控件 -->
</form>

属性	说明
`action`	表单提交地址（URL）
`method`	请求方式（`get` / `post`）
`autocomplete`	是否自动填充（on/off）
`novalidate`	禁用 HTML5 表单验证
`target`	提交后页面跳转目标

二、输入控件 `<input>`

<input type="text" name="username" placeholder="请输入用户名" required>

常见 type 类型

类型	说明
`text`	单行文本
`password`	密码输入
`email`	邮箱格式验证
`number`	数字（可用 ↑↓）
`checkbox`	多选框
`radio`	单选框
`submit` / `reset` / `button`	按钮控件
`date` / `time`	日期时间选择
`file`	上传文件
`range`	滑动条（0~100）

示例：文本 + 密码 + 提交按钮

<form>
  <label for="user">用户名：</label>
  <input type="text" id="user" name="user" required>

  <label for="pass">密码：</label>
  <input type="password" id="pass" name="pass" required>

  <input type="submit" value="登录">
</form>

三、下拉菜单 `<select>`

<label for="lang">选择语言：</label>
<select id="lang" name="language">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

可配合 multiple 实现多选菜单

四、多行文本框 `<textarea>`

<label for="msg">留言：</label>
<textarea id="msg" name="message" rows="5" cols="40"></textarea>

五、常用表单控件辅助标签

标签	说明
`<label for="id">`	与表单控件绑定，点击 label 聚焦控件
`<fieldset>`	分组多个控件，推荐用于复杂表单结构
`<legend>`	为 `<fieldset>` 提供标题说明
`<datalist>`	配合 `<input list>` 提供输入建议

**<datalist> 示例：**

<input list="fruits" name="fruit">
<datalist id="fruits">
  <option value="苹果">
  <option value="香蕉">
  <option value="西瓜">
</datalist>

六、HTML5 原生验证属性

属性	说明
`required`	必填
`pattern`	自定义正则验证
`min` / `max` / `step`	数值、日期范围控制
`maxlength`	最大输入长度
`placeholder`	占位提示
`readonly` / `disabled`	只读/禁用输入框

M7：表单结构与控件

一、表单结构 `<form>`

<form action="/submit" method="post">
  <!-- 表单控件 -->
</form>

属性	说明
`action`	表单提交地址（URL）
`method`	请求方式（`get` / `post`）
`autocomplete`	是否自动填充（on/off）
`novalidate`	禁用 HTML5 表单验证
`target`	提交后页面跳转目标

二、输入控件 `<input>`

<input type="text" name="username" placeholder="请输入用户名" required>

常见 type 类型

类型	说明
`text`	单行文本
`password`	密码输入
`email`	邮箱格式验证
`number`	数字（可用 ↑↓）
`checkbox`	多选框
`radio`	单选框
`submit` / `reset` / `button`	按钮控件
`date` / `time`	日期时间选择
`file`	上传文件
`range`	滑动条（0~100）

示例：文本 + 密码 + 提交按钮

<form>
  <label for="user">用户名：</label>
  <input type="text" id="user" name="user" required>

  <label for="pass">密码：</label>
  <input type="password" id="pass" name="pass" required>

  <input type="submit" value="登录">
</form>

三、下拉菜单 `<select>`

<label for="lang">选择语言：</label>
<select id="lang" name="language">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

可配合 multiple 实现多选菜单

四、多行文本框 `<textarea>`

<label for="msg">留言：</label>
<textarea id="msg" name="message" rows="5" cols="40"></textarea>

五、常用表单控件辅助标签

标签	说明
`<label for="id">`	与表单控件绑定，点击 label 聚焦控件
`<fieldset>`	分组多个控件，推荐用于复杂表单结构
`<legend>`	为 `<fieldset>` 提供标题说明
`<datalist>`	配合 `<input list>` 提供输入建议

**<datalist> 示例：**

<input list="fruits" name="fruit">
<datalist id="fruits">
  <option value="苹果">
  <option value="香蕉">
  <option value="西瓜">
</datalist>

六、HTML5 原生验证属性

属性	说明
`required`	必填
`pattern`	自定义正则验证
`min` / `max` / `step`	数值、日期范围控制
`maxlength`	最大输入长度
`placeholder`	占位提示
`readonly` / `disabled`	只读/禁用输入框

M8：元数据与脚本结构（HTML Head 部分）

一、`<head>` 的语义作用

定义页面元信息（metadata）
加载样式与脚本资源
不显示在浏览器主界面中
是 <html> 的直接子元素，必须存在

二、常用 Head 标签详解

`<meta>`：元数据标签

页面编码（必须放在最前）

<meta charset="UTF-8">

视口设置（移动端响应式页面）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

SEO / 社交分享（可选项）

<meta name="description" content="这是一个HTML学习页面">
<meta name="author" content="Your Name">
<meta property="og:title" content="页面标题">

禁止缓存（部分场景需要）

<meta http-equiv="Cache-Control" content="no-cache">

`<title>`：页面标题

<title>我的网页标题</title>

`<link>`：外部资源链接

引入外部 CSS 样式表

<link rel="stylesheet" href="style.css">

网站图标（Favicon）

<link rel="icon" href="/favicon.ico" type="image/x-icon">

字体、预加载资源（优化性能）

<link rel="preconnect" href="https://fonts.googleapis.com">

`<style>`：内联样式表

<style>
  body {
    background-color: #f2f2f2;
    font-family: Arial;
  }
</style>

`<script>`：引入 JS 脚本

行内 JS

<script>
  console.log('页面已加载');
</script>

外部 JS 文件

<script src="main.js"></script>

推荐放在页面底部或使用 defer

<script src="main.js" defer></script>

属性	说明
`defer`	等待文档解析完成后再执行（顺序执行）
`async`	异步加载并立即执行（执行顺序不保证）

`<base>`：基础链接路径

<base href="https://example.com/">

所有相对路径都基于此 base；必须在 <head> 中最前面出现一次。

三、完整示例 Head 结构

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="一个 HTML5 教学页面">
  <title>HTML5 教学</title>
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="style.css">
  <script src="main.js" defer></script>
</head>

四、推荐加载顺序

<meta>（编码、视口、描述）
<title>
<link>（样式）
<style>（如有）
<script>（加 defer）

M9：HTML5 API 标签

一、`<canvas>`：位图绘图区域

作用：提供一个可通过 JavaScript 进行 2D 或 3D 绘图的容器；自身不显示内容，仅作为“画布

<canvas id="chart" width="400" height="300">
  当前浏览器不支持 canvas。
</canvas>

属性	说明
`width` / `height`	设置画布尺寸（非 CSS 尺寸）
`id`	用于 JS 选取绘图上下文

结构合法性：不可嵌入可视内容，通常为空容器。

二、`<svg>`：矢量图容器

作用：嵌入可缩放矢量图（SVG），不失真，适用于图标、动画、数据可视化等

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

可内联或使用 <img src="xxx.svg"> 引入外部 SVG 文件。

三、`<template>`：模板内容块

作用：声明一段 HTML 模板，默认不会渲染在页面中，供 JavaScript 克隆插入

示例结构：

<template id="card-template">
  <div class="card">
    <h3>标题</h3>
    <p>描述内容</p>
  </div>
</template>

<template> 内容不会出现在 DOM 渲染树中

不能直接在模板内运行脚本、触发事件，需通过 JS 激活

四、`<slot>`：Web Component 插槽

作用：用于 Web Component 中定义插槽（内容占位符）

<my-card>
  <span slot="title">我是标题</span>
  <span slot="content">我是内容</span>
</my-card>

通常在组件定义中：

<template>
  <h3><slot name="title"></slot></h3>
  <p><slot name="content"></slot></p>
</template>

非组件开发中不会直接使用，但需了解其结构和嵌套关系。

五、`<dialog>`：原生对话框组件

作用：创建模态或非模态弹窗，HTML5 新增语义结构；内置显示/关闭控制方法（需 JS 触发）

<dialog id="popup">
  <p>这是一个对话框</p>
  <button onclick="popup.close()">关闭</button>
</dialog>

dialog.show() 和 dialog.close() 通过 JS 控制显示行为。

六、标签对比总结（结构层面）

标签	是否默认显示	是否配合 JS	是否可嵌套内容	典型用途
`<canvas>`	否	✅ 强依赖	❌（非可视）	绘图
`<svg>`	✅	可选	✅	图形、图标
`<template>`	否	✅	✅（但不渲染）	页面模板
`<slot>`	否	✅（组件）	✅	Web Components
`<dialog>`	否（需 JS 激活）	✅	✅	原生弹窗

M10：综合页面结构构建

一、项目说明：HTML5 语义化个人主页

页面模块结构：

区块	内容组成	对应标签
顶部区域	页面标题 + 导航菜单	`<header>` + `<nav>`
主体内容	一篇介绍文章 + 一张图片 + 联系表单	`<main>` + `<article>` + `<img>` + `<form>`
侧边栏	推荐文章（列表）	`<aside>` + `<ul>`
页面底部	版权信息	`<footer>`
元信息	页面元数据、样式、脚本	`<head>`（含 `<meta>`、`<title>`、`<link>`、`<script>`）

二、综合结构示例（结构图）

<!DOCTYPE html>
<html lang="zh-CN">
 ├── <head>
 └── <body>
       ├── <header>
       │     └── <nav>
       ├── <main>
       │     ├── <article>
       │     │     └── <img>
       │     ├── <form>
       │     └── <aside>
       └── <footer>

三、实战目标

合法的文档声明与编码设置
使用语义结构标签（header、main、section、article、footer 等）
插入一张图片，带有 alt 文本
编写一个联系表单，包含邮箱输入框、文本框、提交按钮
包含一个推荐列表（侧边栏）、一个版权区域
页面头部引入样式文件与 JS 脚本
全部标签闭合、结构层次合理、嵌套合法

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <mata name="description" content="基于HTML5语言结构主页" />
    <title>我的个人主页</title>
    <link rel="stylesheet" href="style.css" />
    <script src="main.js" defer></script>
  </head>
  <body>
    <header>
      <h1>主页</h1>
      <nav>
        <ul>
          <li><a href="#about">about</a></li>
          <li><a href="#contact">contact</a></li>
          <li><a href="#posts">posts</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article id="about">
        <h2>关于我</h2>
        <p>nothing</p>
        <figure>
          <img src="357.jpg" alt="测试图片" />
          <figcaption>没有照片的照片</figcaption>
        </figure>
      </article>

      <section id="contact">
        <h2>联系方式</h2>
        <form action="#">
          <label for="email">电子邮箱</label>
          <input type="email" id="email" name="email" required />

          <br /><br />

          <label for="message">留言：</label><br />
          <textarea
            id="message"
            name="message"
            rows="5"
            cols="40"
            required
          ></textarea>

          <br /><br />

          <input type="submit" value="发送" />
        </form>
      </section>

      <aside id="posts">
        <h2>阅读</h2>
        <ul>
          <li><a href="#">猎魔人</a></li>
          <li><a href="#">百年孤独</a></li>
          <li><a href="#">史蒂夫·乔布斯传</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>底部</p>
    </footer>
  </body>
</html>

H5快速学习

M1：HTML 基本结构与声明规范

一、标准 HTML5 文档结构

二、部分详解

三、补充参考

M2：HTML 元素分类与嵌套规则

一、HTML 元素五大分类

二、嵌套规则与嵌套合法性

M3：文本内容标签

一、标题标签：<h1> ~ <h6>

二、段落标签：<p>

三、换行标签：<br>

四、水平线标签：<hr>

五、引用标签：<blockquote>

六、预格式文本：<pre>

七、行内语义标签（了解）

M4：语义结构标签

一、结构性语义标签汇总

二、用法与示例

<header>

<footer>

<nav>

<main>

<section>

<article>

<aside>

三、结构化布局推荐

四、常见误区

M5：链接与媒体资源

一、超链接标签 <a>

二、图像标签 <img>

三、音频标签 <audio>

四、视频标签 <video>

五、可访问性与性能建议

M6：列表与表格结构

一、列表标签

<ul>：无序列表

<ol>：有序列表

<dl>：定义列表

二、表格结构

三、嵌套结构示意

M7：表单结构与控件

一、表单结构 <form>

二、输入控件 <input>

三、下拉菜单 <select>

四、多行文本框 <textarea>

五、常用表单控件辅助标签

六、HTML5 原生验证属性

M7：表单结构与控件

一、表单结构 <form>

二、输入控件 <input>

三、下拉菜单 <select>

四、多行文本框 <textarea>

五、常用表单控件辅助标签

六、HTML5 原生验证属性

M8：元数据与脚本结构（HTML Head 部分）

一、<head> 的语义作用

二、常用 Head 标签详解

<meta>：元数据标签

<title>：页面标题

<link>：外部资源链接

<style>：内联样式表

<script>：引入 JS 脚本

<base>：基础链接路径

三、完整示例 Head 结构

四、推荐加载顺序

M9：HTML5 API 标签

一、<canvas>：位图绘图区域

二、<svg>：矢量图容器

三、<template>：模板内容块

四、<slot>：Web Component 插槽

五、<dialog>：原生对话框组件

六、标签对比总结（结构层面）

M10：综合页面结构构建

一、项目说明：HTML5 语义化个人主页

页面模块结构：

二、综合结构示例（结构图）

三、实战目标

网站公告

今日签到

一、标题标签：`<h1>` ~ `<h6>`

二、段落标签：`<p>`

三、换行标签：`<br>`

四、水平线标签：`<hr>`

五、引用标签：`<blockquote>`

六、预格式文本：`<pre>`

`<header>`

`<footer>`

`<nav>`

`<main>`

`<section>`

`<article>`

`<aside>`

一、超链接标签 `<a>`

二、图像标签 `<img>`

三、音频标签 `<audio>`

四、视频标签 `<video>`

`<ul>`：无序列表

`<ol>`：有序列表

`<dl>`：定义列表

一、表单结构 `<form>`

二、输入控件 `<input>`

三、下拉菜单 `<select>`

四、多行文本框 `<textarea>`

一、表单结构 `<form>`

二、输入控件 `<input>`

三、下拉菜单 `<select>`

四、多行文本框 `<textarea>`

一、`<head>` 的语义作用

`<meta>`：元数据标签

`<title>`：页面标题

`<link>`：外部资源链接

`<style>`：内联样式表

`<script>`：引入 JS 脚本

`<base>`：基础链接路径

一、`<canvas>`：位图绘图区域

二、`<svg>`：矢量图容器

三、`<template>`：模板内容块

四、`<slot>`：Web Component 插槽

五、`<dialog>`：原生对话框组件