练习的代码：
对以前听网课练习的项目重构：
新项目：
1. HTML 演进、标准与底层模型
1.1 HTML 发展史与标准化组织
1.1.1 从 HTML2.0 到 HTML5 的重大变革回顾
1.1.2 W3C (HTML5) 与 WHATWG (Living Standard) 的分合与现状
1.1.3 浏览器渲染引擎前缀历史及现代标准化现状
1.2 DOM 核心模型与节点类型
1.2.1 DOM 树构建原理
1.2.2 Element, Text, Comment, DocumentType 及其内存结构
1.2.3 HTML 中的"空白字符处理"与文本节点规范化
1.3 文档模式与渲染触发
1.3.1 <!DOCTYPE html> 的作用机制：触发标准模式 vs 怪异模式
1.3.2 文档模式对 CSS 盒模型和 JS 行为的历史遗留影响
2. 文档元数据、Head 策略与 SEO 架构
2.1 HTML 根元素与全局属性
2.1.1 <html lang="zh-CN">
2.1.2 data-* 自定义属性
2.1.3 关键全局属性详解：hidden, tabindex, title, translate
2.2 <head> 区域深度优化
2.2.1 字符集声明的必要性及编码安全（XSS 防御）
2.2.2 视口配置
2.2.3 SEO 元数据体系
2.2.3.1 基础 Meta：Description, Keywords, Robots, Author
2.2.3.2 社交媒体协议：Open Graph (Facebook/LinkedIn) vs Twitter Cards
2.2.3.3 结构化数据：JSON-LD 的应用场景
2.2.4 图标与资源清单
2.2.4.1 Favicon 演进：ICO vs PNG vs SVG (2024+ 最佳实践)
2.2.4.2 Apple Touch Icon 与 Android Adaptive Icons 配置
2.2.4.3 Web App Manifest 与 PWA 安装配置
3. 文本内容与语义化重构
3.1 HTML5 语义化核心原则
3.1.1 语义化的价值：SEO 权重、可访问性 (A11y) 与代码可维护性
3.1.2 HTML5 文档大纲算法：Sectioning Roots (<body>, <blockquote>, <td>) 的影响
3.2 文本级语义标签深度应用
3.2.1 标题体系：<h1> 至 <h6> 的层级规则与 SEO 聚焦策略
3.2.2 文本强调辨析：<strong> (重要性) vs <em> (强调) vs <b>/<i> (样式)
3.2.3 超链接进阶
3.2.3.1 download 属性的跨浏览器行为与安全限制
3.2.3.2 安全机制：rel="noopener noreferrer" 防止 window.opener 漏洞
3.2.4 高精度文本标签：<mark> (高亮), <time> (机器可读时间), <wbr> (换行机会), <ruby> (注音)
3.2.5 HTML 实体与特殊字符：不转义字符的 XSS 风险
3.3 内容分组结构化
3.3.1 段落与换行：<p> 自动闭合机制与 <br>, <hr> 的语义场景
3.3.2 列表体系进阶
3.3.2.1 无序 <ul> 与有序 <ol> 列表的嵌套技巧与 reversed 属性
3.3.2.2 定义列表 <dl>：键值对术语解释与 SEO 意义
3.3.2.3 菜单与工具栏：废弃 <menu> 的复活与 <command> 的现状
4. 现代页面布局与交互组件
4.1 页面级语义化布局
4.1.1 顶部与导航：<header>, <nav> 的层级关系与 ARIA Landmark 角色映射
4.1.2 内容区分辨析：<article> (独立内容) vs <section> (章节分组)
4.1.3 侧边与底部：<aside> (相关内容) vs <footer> (元数据/版权) 的嵌套规则
4.2 通用容器与组件封装
4.2.1 <div> 滥用防御：无语义容器的替代方案与 CSS Hooks
4.2.2 <figure> 与 <figcaption>：图表、代码块、插图的语义封装
4.2.3 详情与折叠：原生 <details> 与 <summary> 的交互实现与动画技巧
4.3 2023-2026 新增与强化语义特性
4.3.1 <search> 标签：标识搜索区域的 SEO 优势与 ARIA 集成
4.3.2 模态框革命：<dialog> 元素深度应用
4.3.2.1 .showModal() (模态) vs .show() (非模态) 的行为差异
4.3.2.2 ::backdrop 伪元素的样式定制与层级管理
4.3.2.3 表单回车提交的自动处理机制
4.3.3 Popover API：popover 属性、anchor 定位与轻量级弹窗
4.3.4 原生拖拽 API：draggable 属性、DataTransfer 对象与 HTML5 拖放事件流
5. 表单增强与数据交互工程
5.1 表单控件演进与类型
5.1.1 Input 类型全解：email, tel, url, number, date, color 等原生控件
5.1.2 HTML5 辅助控件：<datalist> (自动补全), <progress> (进度), <meter> (度量)
5.1.3 文件上传进阶：accept (MIME 类型), multiple, capture (摄像头调用) 与 webkitdirectory
5.2 表单验证与用户体验
5.2.1 原生验证约束：required, pattern, min/max/step, minlength/maxlength
5.2.2 交互反馈 API：setCustomValidity() 的错误消息定制与 ValidityState 对象
5.2.3 CSS 伪类增强：:valid, :invalid, :user-valid, :user-invalid, :placeholder-shown
5.2.4 输入模式优化：inputmode 属性在移动端唤起数字键盘/九宫格键盘的作用
5.3 提交机制与安全防御
5.3.1 表单重写属性：formaction, formenctype, formmethod, formnovalidate
5.3.2 CSRF 防御策略：SameSite Cookie 配置与隐藏 Token 字段
5.3.3 自动填充管理：autocomplete 属性值详解（on/off/name/shipping）及安全考量
6. 多媒体、图形与嵌入资源
6.1 图像优化与响应式策略
6.1.1 响应式图片技术：<picture> 元素、srcset 与 sizes 的像素比 (x) vs 宽度描述符 (w)
6.1.2 现代格式支持：WebP, AVIF, HEIC 的降级处理方案
6.1.3 性能优化：loading="lazy" (原生懒加载) 与 decoding="async" (异步解码)
6.1.4 布局稳定性：width 与 height 属性在防止 CLS (累积布局偏移) 中的作用
6.2 音视频媒体流
6.2.1 <video> 与 <audio> 核心 API：播放控制、全屏策略与媒体事件监听
6.2.2 字幕与多语言：<track> 标签、WebVTT 格式与无障碍访问
6.2.3 流媒体集成：HLS (.m3u8) 与 DASH 在 HTML5 中的播放方案 (MSE 技术)
6.3 矢量图形与内联 SVG
6.3.1 SVG 引入方式对比：Inline, <img>, Background Image, <object> 的优劣
6.3.2 SVG 无障碍访问：<title>, <desc> 与 aria-labelledby 属性
6.3.3 SVG 与 CSS/JS 交互：动画实现与 Sprite 雪碧图技术
7. 浏览器渲染原理与性能优化
7.1 资源加载与执行时序
7.1.1 <script> 标签执行机制详解
7.1.1.1 普通加载：阻塞 DOM 解析 (Parser Blocking)
7.1.1.2 defer：脚本在 DOMContentLoaded 前按顺序执行
7.1.1.3 async：脚本加载完成后立即执行，顺序不确定
7.1.1.4 type="module"：ES 模块的自动 defer 行为与依赖解析
7.1.2 资源提示
7.1.2.1 预连接优化：preconnect (TCP/TLS 握手) vs dns-prefetch (DNS 解析)
7.1.2.2 资源预加载：preload (当前页关键资源) vs prefetch (未来页可能资源)
7.1.2.3 渲染控制：blocking="render" (2024+ 特性) 控制关键资源加载前的渲染阻塞
7.2 关键渲染路径
7.2.1 DOM 树与 CSSOM 树的合并过程：Render Tree 的构建与忽略策略 (display: none)
7.2.2 布局 与 绘制 的触发条件
7.2.3 合成：GPU 加速与 HTML 结构对合成层的影响
7.3 核心 Web 指标 (Core Web Vitals) 优化
7.3.1 LCP (Largest Contentful Paint)：HTML 元素选择 (优先加载 img, video, 块级元素)
7.3.2 INP (Interaction to Next Paint)：减少主线程阻塞与长任务拆分
7.3.3 CLS (Cumulative Layout Shift)：预留空间与字体加载策略 (font-display: swap)
8. 安全策略、跨域与嵌入内容
8.1 <iframe> 深度应用与隔离
8.1.1 沙箱机制：sandbox 属性的安全配置值组合与权限控制
8.1.2 权限策略：allow 属性与 Permissions Policy (控制摄像头/麦克风/全屏)
8.1.3 跨窗口通信：window.postMessage() 的数据结构化安全校验
8.2 内容安全与混合内容
8.2.1 混合内容：HTTPS 页面中的 HTTP 资源请求风险
8.2.2 CSP (Content Security Policy)：Meta 标签配置、nonce 与 hash 源锁定
8.2.3 SRI (Subresource Integrity)：CDN 资源完整性校验与防篡改
8.2.4 Crossorigin 属性：anonymous vs use-credentials 对 CORS 请求的影响
9. 工程化实践、架构模式与未来
9.1 HTML 组件化与架构
9.1.1 Web Components 标准体系
9.1.1.1 <template> 标签与惰性加载机制
9.1.1.2 Shadow DOM 封装原理与样式隔离
9.1.1.3 Declarative Shadow DOM (2024+)：服务端渲染组件的优势与构建
9.1.2 组件化思维：基于 Web Components 的设计系统
9.1.3 Import Maps：浏览器原生模块解析控制 (无需 Webpack/Vite 映射)
9.2 服务端渲染 (SSR) 与静态生成
9.2.1 Hydration (注水) 标记：data-reactroot 等属性的作用
9.2.2 流式渲染：渐进式 HTML 注水与 defer 优化
9.2.3 Meta 标签的动态注入与爬虫策略
9.3 代码规范与开发工具
9.3.1 Linting 与格式化：ESLint HTML 插件、Prettier 配置与 .editorconfig
9.3.2 Emmet 语法高阶应用：复杂结构的快速生成
9.3.3 浏览器开发者工具：Elements 面板中的 DOM 断点与样式追踪
9.4 前沿技术探索
9.4.1 WebAssembly 与 HTML 的交互接口 (<script type="module"> 导入)
9.4.2 View Transitions API：单页应用 (SPA) 的原生页面过渡效果
9.4.3 下一代 Web App Manifest 标准与桌面应用集成
10.常见陷阱
