🏗️ HTML 学习路线

101 个互动教程

HTML 文本格式化

学习 b/strong/i/em/small/mark/del/ins/sub/sup 标签

HTML 表格进阶 — 边框/合并/样式

table 的 border、colspan、rowspan、斑马纹、响应式处理

HTML 按钮 — <button> 标签

button 元素、type 属性、onclick 事件、VS input button

HTML 输入类型详解

学习 text/password/email/number/date/file 等所有input类型

HTML 表单元素大全

学习 select/textarea/datalist/fieldset/legend

HTML 输入属性

学习 value/placeholder/required/readonly/disabled 等

HTML 表单属性

学习 action/method/target/novalidate/enctype

HTML JavaScript — <script> 标签

在 HTML 中使用 JavaScript：内嵌脚本、外部文件、noscript

HTML head元素完全指南 — meta、title、link、style、script

深入学习HTML head元素及其所有子元素：meta、title、link、style、script的用法与最佳实践

HTML DOCTYPE 声明与文档模式

HTML文档类型声明详解：DOCTYPE的作用、HTML5简化的DOCTYPE、怪异模式Quirks Mode vs 标准模式、文档渲染模式的切换条件

HTML lang 与 dir 属性 — 语言与文本方向

HTML全局属性lang（语言声明）和dir（文本方向ltr/rtl）的使用、对SEO/翻译/无障碍的影响、中文网页最佳实践、bdo和bdi元素

HTML dialog 对话框元素

HTML dialog元素：原生模态对话框、showModal()方法、::backdrop伪元素自定义遮罩、form method=dialog自动关闭、与JavaScript配合、无障碍ARIA角色

HTML datalist 自动补全

HTML datalist元素：输入框自动补全建议、option子元素、与input list属性关联、自定义匹配过滤、select vs datalist选型

HTML meter 与 progress 度量元素

meter（标量测量值/高低阈值/low/high/optimum）和progress（进度条/max/value）的区别与使用、ARIA无障碍标签、CSS自定义样式

HTML details 折叠面板

details/summary元素：原生展开/折叠面板、open属性默认展开、toggle事件监听、与CSS动画配合、FAQ手风琴应用

HTML picture 响应式图片

picture元素：基于媒体查询加载不同图片、source srcset媒体条件、WebP/AVIF格式降级、DPR像素密度适配、与img srcset/sizes对比

HTML template 模板元素

template标签：文档片段DocumentFragment、惰性渲染cloneNode、Web Components基础、与Vue template区别、slot插槽

HTML 嵌入元素 object/embed/iframe

embed/object/iframe嵌入外部内容：PDF预览、SVG交互、跨域iframe安全sandbox属性、loading=lazy延迟加载、srcdoc内联HTML

HTML5 语义化标签完全指南 — header、nav、main、article、section、aside、footer

系统学习HTML5语义化标签，理解为什么语义化对SEO和无障碍访问至关重要，并通过实战对比新旧布局方式

HTML Drag and Drop API

HTML原生拖放：draggable属性、dragstart/dragover/drop事件、DataTransfer数据传递、拖放文件上传（drop+FileReader）、自定义拖拽预览图

HTML Web Storage localStorage/sessionStorage

Web Storage：localStorage持久存储/sessionStorage会话存储、存储事件storage event跨标签页通信、5MB限制、JSON序列化存储对象、与Cookie/IndexedDB对比

HTML ARIA 无障碍标签

WAI-ARIA无障碍：role角色、aria-label/aria-labelledby/aria-describedby、aria-live动态区域（polite/assertive）、aria-expanded/aria-hidden状态、屏幕阅读器测试

HTML SEO 搜索引擎优化基础

HTML SEO：title/meta description、语义化标签（header/main/footer/article/nav/aside）、Heading层级h1-h6、结构化数据JSON-LD、Open Graph/Twitter Card、Core Web Vitals

HTML Web Workers 多线程

Web Workers：Worker构造函数创建后台线程、postMessage/onmessage消息传递、Transferable Objects零拷贝转移所有权、SharedWorker多页面共享、内联Worker（Blob URL）

HTML 媒体源元素 source 详解

source元素：为video/audio/picture提供多源备选、type指定MIME类型+codec、media媒体查询选择不同源、srcset分辨率选择、浏览器自动选择第一个支持的格式

HTML 资源预加载策略

HTML资源预加载：link rel=preload确定预加载关键资源（as/type/crossorigin）、prefetch空闲预加载下一页面、preconnect提前建立连接、dns-prefetch DNS预解析、prerender预渲染整页

HTML Content Security Policy 内容安全策略

CSP内容安全策略：Content-Security-Policy HTTP头/default-src/script-src/style-src/img-src策略指令、nonce/hash随机数白名单、strict-dynamic、report-uri/report-to违规报告

HTML MathML 数学标记语言

MathML数学标记：<math>元素/mrow分组/msup上标/msub下标/mfrac分数/msqrt根号/mi标识符/mn数字/mo运算符、浏览器支持、MathJax/KaTeX替代方案

HTML viewport 视口深入

HTML viewport深入：meta viewport宽度width=device-width/初始缩放initial-scale/最大缩放maximum-scale/最小缩放minimum-scale/用户缩放user-scalable、视觉视口vs布局视口vs理想视口

HTML 表单完全指南 — 从基础输入到高级验证

全面掌握HTML表单：所有输入类型、表单属性、HTML5验证、最佳实践，构建用户友好的数据收集界面

HTML 原生化懒加载

HTML原生化懒加载：loading=lazy属性（img/iframe）、与Intersection Observer懒加载对比、loading=eager立即加载、decoding=async异步解码、fetchpriority=high/low资源优先级

HTML meta 标签大全

HTML meta标签深入：charset字符集、name属性（description/keywords/author/viewport/robots/theme-color/color-scheme）、http-equiv属性（refresh重定向/X-UA-Compatible/content-security-policy）

HTML SVG 内联与交互

HTML内联SVG：直接在HTML中嵌入<svg>标签、CSS样式控制SVG、JavaScript操作SVG DOM、SVG动画(SMIL animate/animateTransform/animateMotion)、与<img>/<object>引入SVG对比

Constraint Validation API(原生表单验证/无JS)：validity属性对象（valid/valueMissing/typeMismatch/patternMismatch/tooLong/tooShort/rangeOverflow/rangeUnderflow/stepMismatch/badInput/customError）、setCustomValidity自定义

HTML contenteditable 可编辑内容

contenteditable属性（富文本编辑器基础）：contenteditable=true/false/plaintext-only、execCommand已弃用、现代富文本编辑器方案（Quill/TipTap/ProseMirror/Slate.js/Lexical）

HTML iframe sandbox 安全沙箱

iframe sandbox属性深入：sandbox=''最严格(禁止一切/JavaScript/表单/弹窗/顶层导航)、allow-scripts/allow-same-origin/allow-forms/allow-popups/allow-top-navigation逐项放开、iframe安全最佳实践

HTML inert 属性

HTML inert属性(使元素及其子树不可交互/隐藏于无障碍树)：inert布尔属性、焦点跳过inert区域、等同于暂时标记为aria-hidden并禁用交互、Modal打开时让背景main内容inert

HTML abbr/bdo/cite/q/blockquote 语义标签

HTML文本语义标签深入：abbr缩写(全局title展开)、bdo双向文本覆盖(dir=ltr/rtl父子继承)、cite引用作品标题、q内联引用(自动加引号/cite属性)、blockquote块引用(cite)、与SEO和无障碍读屏器的关系

HTML 原生模态最佳实践

HTML原生模态实现（不使用UI库）：dialog元素+showModal自动管理焦点和aria-modal、ESC关闭/lock background scroll/ inert属性配合、与React Portal/Vue Teleport模态对比

HTML image map 图像映射

HTML图像映射map+area：<map name><area shape='rect/circle/poly' coords='x1,y1,x2,y2' href title alt>点击图片不同区域跳转不同链接、响应式图像映射(image-map-resizer JS库)、与CSS精灵图(CSS sprites)对比

HTML div 与 span — 网页布局基石

HTML div 与 span

HTML 表格从入门到精通

系统学习HTML表格：基本结构、合并单元格、表头表体表尾、列组、样式化表格、响应式表格技巧

HTML spellcheck 拼写检查

spellcheck属性控制浏览器拼写检查：spellcheck=true/false应用于input/textarea/contenteditable、lang属性影响拼写检查语言、与CSS ::spelling-error伪元素样式拼写错误

HTML track 字幕与章节元素

track元素：WebVTT格式字幕/章节/描述、kind属性(subtitles/captions/descriptions/chapters/metadata)、srclang标签语言、与video/audio配合实现多语言字幕

HTML 多媒体嵌入指南 — 音视频、iframe与外部内容

掌握HTML5多媒体元素：audio音频播放、video视频播放、iframe嵌入第三方内容、source多源适配、track字幕

HTML 微格式 Microformats

HTML微格式：h-card人物卡片、h-event事件、h-product产品、结构化数据与Schema.org互补、SEO和内容聚合价值、在博客/电商中的应用

HTML 语义化标签

学习 header/nav/main/article/footer 等语义标签

HTML 表单 — 收集用户输入

学习 form/input/button 等表单元素

HTML表单进阶：验证与样式

掌握表单内置验证、正则模式、自定义错误提示和CSS美化技巧。

HTML5新特性：语义化与多媒体

学习HTML5新增的语义标签、音频视频、Canvas绘图和本地存储。

HTML模板元素：<template> 与 <slot>

学习使用<template>定义可复用内容，结合<slot>实现灵活的Web组件。

HTML数据属性：data-* 的妙用

学习使用自定义数据属性存储额外信息，并通过JavaScript轻松获取。

🏗️ HTML 学习路线

HTML 简介 — 什么是网页？

HTML 编辑器 — 用什么写代码

HTML 图片 — img 标签详解

HTML 页面标题 — &lt;title&gt; 标签

HTML 元素详解

HTML 属性

HTML 段落与换行

HTML 文本格式化

HTML 注释

HTML 颜色

HTML 块级与行内元素

HTML class 类属性

HTML id 属性

HTML 文件路径

HTML 实体字符

HTML 符号与Emoji

HTML 音视频

HTML 代码规范

HTML 引用与缩略语

HTML 网站图标 Favicon

HTML 表格进阶 — 边框/合并/样式

HTML 列表进阶 — 无序/有序/描述列表

HTML 按钮 — &lt;button&gt; 标签

HTML iframe 内嵌框架

HTML head 与元信息

HTML 页面布局

HTML 输入类型详解

HTML 响应式图片

HTML 表单元素大全

HTML 输入属性

HTML Canvas 画布入门

HTML SVG 矢量图形

HTML 表单属性

HTML Meta SEO优化

HTML 无障碍访问

HTML 微数据 Schema.org

HTML Web Storage

HTML 拖放API

HTML 地理定位

HTML 通知API

HTML Service Worker

HTML 自定义元素

HTML Web Workers

HTML History API

HTML BOM对象

HTML 表单验证

HTML 多媒体元素