HTML

每个网页的结构

HTML 描述了每个网页的内容和结构。从你的第一个标签到无障碍表单和语义化 HTML，本课程为你在 Web 开发中的一切其他内容打下坚实的基础。

基础

入门 - 一步步打好基础

• 什么是 HTML？标签与属性了解 HTML 是什么，并学会识别标签和属性。
• 组织文本：标题、段落和列表学会用标题、段落和列表的层级结构来组织文本。
• 链接与图片用 a 和 img 标签创建指向其他页面的链接并显示图片。
• 简单表格用 table、tr、th 和 td 标签以行和列的形式呈现数据。
• HTML 页面的完整骨架用 doctype 以及 html、head、meta 和 body 标签组装一个完整的网页。

进阶

中级 - 构建真实项目

• 表单：input、label、select、textarea、button构建完整、无障碍、可用于生产环境的表单。
• 语义化 HTML：构建一个真实的页面结构用能赋予结构含义的标签替换你那些匿名的 div。
• 媒体：audio、video、figure 和 figcaption无需任何插件即可嵌入声音、视频和带说明的插图。
• 全局属性与 data-*善用那些随处可用的属性，并把你自己的数据存进 HTML 里。
• 让你的页面为上线做好准备打磨页面的 head：标题、描述、favicon 以及安全的外部链接。

精通

熟练 - 高级模式与性能优化

• 无障碍：alt、标题层级与 ARIA掌握替代文本、屏幕阅读器真正能够导航的标题层级，以及仅在原生 HTML 不足时才使用的 ARIA。
• 高级表单与原生校验利用 required、pattern、inputmode 和约束校验 API，无需任何外部库即可构建健壮的表单。
• 响应式图片：srcset、sizes 与 picture用 srcset 和 sizes 为合适的屏幕提供合适的图片，把 picture 留给艺术指导，并掌握懒加载。
• 技术 SEO：Open Graph 与结构化数据用 Open Graph 掌控你的页面在社交网络上的预览效果，并借助 JSON-LD 中的 schema.org 争取富媒体搜索结果。
• 加载性能：defer、async、preload 与 prefetch用 defer 和 async 安排脚本的执行顺序，再用 preload、preconnect 和 prefetch 引导网络。

大师

专家 - 架构、底层原理与边界情况

• 从 HTML 到 DOM：解析与错误恢复理解浏览器如何将任何 HTML 字节流（即便是格式错误的）转换成一棵确定的 DOM 树。
• 深入 Web Components：自定义元素、shadow DOM 与插槽掌握自定义元素的生命周期、shadow DOM 的封装，以及通过插槽（slot）进行的内容投影。
• 国际化：lang、dir、charset 与 Unicode 陷阱明智地使用 lang、dir 和编码声明，并击败 Unicode 规范化与方向性方面的陷阱。
• HTML 层面的安全：XSS、sandbox、noopener 与 CSP识别标记特有的 XSS 攻击向量，并部署 HTML 的原生防御手段：sandbox、noopener 和内容安全策略（CSP）。
• 现代交互式 HTML：dialog、details、popover、contenteditable用现代 HTML 的原生原语替换你的 UI 库：模态对话框、互斥的手风琴、popover 和可编辑区域。