Foundation

HTML 与 Web 平台

语义化标记、DOM API、无障碍、Web Components 和现代平台能力。HTML 不只是标签,它定义了内容的结构和意义。

Topics

无障碍基础

系统理解 Web 无障碍的核心原则(POUR)、WCAG 标准与工程实践,构建所有人都可使用的 Web 应用。

DOM API 与事件系统

深入理解 DOM 操作与事件系统的底层机制,掌握事件冒泡、捕获、委托等核心模式,构建高性能的交互层。

HTML 可访问性与 ARIA

深入理解 ARIA 的三大属性、ARIA 使用原则、live regions、常见 ARIA 模式,以及可访问性树与 DOM 树的关系。

BroadcastChannel API

深入理解 BroadcastChannel API:同源标签页间的消息广播、跨 iframe 通信、以及与 postMessage 的对比。

Canvas 2D API

深入理解 Canvas 2D API 的完整绘图功能:路径、形状、文本、图像处理、像素操作,以及高性能动画实现。

剪贴板与通知 API

深入理解 Clipboard API 和 Notification API 的完整功能、安全考虑、以及在现代 Web 应用中的实际应用。

Custom Elements 自定义元素

深入理解 Custom Elements:自主定制元素、定制内建元素的生命周期回调、作用域化自定义元素注册表。

数据属性与语义化 HTML

深入理解 data-* 属性的正确用法、dataset API、命名规范,以及语义化 HTML 的最佳实践。

Device Orientation 事件

深入理解 Device Orientation 和 Device Motion 事件:加速度、旋转角速度、设备方向检测与交互应用。

HTML 文档结构与渲染基础

深入理解 HTML 文档结构、DOCTYPE 历史、渲染阻塞机制,以及 script 标签的 defer/async/onload 行为差异,构建高性能页面。

拖放 API 与 Pointer Events

深入理解 HTML5 拖放 API、Pointer Events、Touch Events,以及实现现代化拖放交互的完整方案。

HTML 编码与实体

深入理解 HTML 实体编码、字符编码历史、charset 声明、XSS 和 HTML 编码的关系,以及 Unicode emoji 在 HTML 中的处理。

File API 与文件操作

深入理解 File API 的完整体系:File、Blob、FileReader、URL.createObjectURL,以及文件上传、拖放、缩略图生成等实际应用。

HTML 表单

系统掌握 HTML 表单的结构化设计、原生验证机制与 FormData API,构建语义化、可访问且安全的数据采集层。

HTML 表单深度理解

深入理解 HTML 表单的完整机制:form 属性、input 类型全集、表单验证、FormData API,以及如何构建可访问的表单。

地理位置 API

深入理解 Geolocation API 的完整功能、权限管理、位置精度选项,以及在地图应用和位置感知服务中的应用。

HTML head 元素详解

深入理解 head 内所有元素的语义和作用:title 对 SEO 的影响、favicon 多格式支持、Open Graph、canonical URL 和 JSON-LD 结构化数据。

History API 与 SPA 路由

深入理解 History API 的完整功能、SPA 路由实现原理、popstate 与 hashchange 事件的差异,以及 SPA 中实现优雅后退和书签支持的方案。

iframe 安全与沙箱

深入理解 iframe 沙箱机制、CSP 限制、安全配置,以及防止点击劫持和 iframe 滥用。

Intersection Observer API

深入理解 Intersection Observer API 的工作机制、性能优势、与传统 scroll 事件对比、以及在懒加载、无限滚动、广告可见性等场景的应用。

Link 预加载与性能优化

深入理解 link 标签的预加载机制:preload、prefetch、dns-prefetch、preconnect 等优化技术,提升页面加载性能和用户体验。

MathML 数学标记

深入理解 MathML(数学标记语言):核心元素、浏览器支持、MathJax 对比,以及在 Web 中的实际应用。

HTML 媒体元素

深入理解 HTML5 音视频元素的完整 API、兼容性处理、无障碍支持、以及流媒体集成方案。

消息通道与广播通信

深入理解 MessageChannel、BroadcastChannel、postMessage API,实现跨窗口、跨标签页、跨 iframe 的高效通信。

Mutation Observer API

深入理解 Mutation Observer API 如何监听 DOM 变化、其与已废弃 MutationEvent 的区别、以及在框架实现和自动化测试中的应用。

Network Information API

深入理解 Network Information API:navigator.connection、effectiveType 和 saveData、根据网络条件调整内容质量、以及 Navigator API。

Notification API

深入理解 Notification API 的完整功能:权限请求、通知显示、事件处理、以及 Service Worker 中的后台通知。

Object 与 Embed 元素

深入理解 object 和 embed 元素:外部资源嵌入、插件内容、PDF 嵌入、以及与 iframe/img 的对比。

Page Visibility API

深入理解 Page Visibility API:页面可见性检测、visibilitychange 事件、以及在后台标签页中优化应用行为。

Payment Request API

深入理解 Payment Request API:基本流程、PaymentRequest 构造参数、canMakePayment 和 show 的调用流程、Payment Handler API,以及浏览器支持现状。

HTML 性能优化

深入理解关键渲染路径、渲染阻塞资源、资源提示(Resource Hints)、懒加载原生支持,以及 HTML 文档的压缩与解析优化。

Permissions API

深入理解 Permissions API:查询和管理浏览器权限状态、navigator.permissions.query、以及各平台权限的实际应用。

Pointer Lock API

深入理解 Pointer Lock API:鼠标锁定、movementX/Y、3D 游戏交互、fullscreen 游戏场景。

Resize Observer API

深入理解 Resize Observer API 如何观察元素尺寸变化、与传统 window.resize 事件对比、以及在响应式组件和容器查询中的应用。

脚本加载机制

深入理解 script 标签的加载机制:defer、async、module、preload 等属性的作用,以及它们对页面解析、渲染和性能的影响。

HTML 语义元素深入理解

深入理解 HTML5 语义元素的精确使用场景:article 与 section 的区别、header 与 footer 的使用限制、figure/figcaption 的正确用法等。

HTML SEO 基础

深入理解搜索引擎工作原理、标题和描述标签的最佳实践、heading 结构、内部外部链接的作用,以及 Core Web Vitals 对 SEO 的影响。

Server-Sent Events

深入理解 Server-Sent Events(SSE)的完整机制:与 WebSocket 的对比、EventSource API、服务器端实现、以及实际应用场景。

Service Worker API

深入理解 Service Worker 的生命周期、Cache Storage API、离线优先策略、Background Sync、Push Notification,以及作用域和限制。

SharedWorker

深入理解 SharedWorker:与 Web Worker 的区别、端口通信、多标签页状态共享、以及实际应用场景。

Slot 内容分发

深入理解 Web Components 中的 Slot 机制:命名插槽、备用内容、slotchange 事件,以及 ::slotted 伪元素。

浏览器存储 API

深入理解浏览器存储体系:localStorage、sessionStorage、IndexedDB、Cookie 的特性、限制、API 使用、以及各自的适用场景。

内联 SVG

深入理解 HTML 中内联 SVG 的使用:svg 元素、SVG2 属性、DOM 操作、CSS 样式化,以及与 img/object 嵌入方式的对比。

HTML 表格进阶

深入理解 HTML 表格的语义结构、无障碍支持、布局算法,以及现代响应式表格实现方案。

Template 与 Shadow DOM

深入理解 HTML template 元素与 Shadow DOM:声明式 Shadow DOM、shadowroot 属性、Web Components 基础。

页面可见性与设备状态 API

深入理解 Page Visibility API、DeviceOrientation、Screen Orientation 等设备状态 API,实现智能的页面行为控制。

Web Components

深入理解 Web Components:Custom Elements 生命周期、Shadow DOM 封装、HTML Templates、slot 分发机制,以及与 React/Vue 的对比。

WebSocket

深入理解 WebSocket 协议原理、与 HTTP 的对比、API 详解、实际应用场景,以及 reconnect、重连策略等工程实践。

Web Workers API

深入理解 Web Workers:创建和消息传递、Dedicated vs Shared vs Service Worker、importScripts 和 ES Module Worker、Comlink、以及 OffscreenCanvas。

语义化 HTML

深入理解 HTML 语义化的底层原理、内容模型与实际工程应用,构建机器可读、人类可维护的文档结构。