HTML 层面可通过属性与策略减少安全风险。

核心概念

• sandbox 属性限制 iframe 权限。
• rel=noopener 防止窗口劫持。
• referrerpolicy 控制 Referer 泄露。

实战步骤

• 对第三方内容使用严格的 sandbox。
• 在链接上添加 rel="noopener noreferrer"。
• 通过 integrity 验证外部资源。

正确的语言标记和方向属性是全球化应用的基础。

核心概念

• lang 属性帮助阅读器与搜索引擎识别语言。
• dir 属性控制文本方向。
• hreflang 指示多语言页面互联。

实战步骤

• 在页面级和片段级设置 lang。
• 针对 RTL 语言调整布局与图标方向。
• 配置 Open Graph、Twitter Card 多语言描述。

SSR 需要模板系统、数据与缓存策略配合。

核心概念

• 模板引擎（Nunjucks、Handlebars）提供组件化能力。
• ESI/SSI 可在边缘节点组合页面。
• 缓存需考虑用户态差异，Vary Header 控制。

实战步骤

• 构建 HTML 片段缓存，避免重复渲染。
• 结合国际化在模板中处理本地化格式。
• 使用测试快照保障模板变更。

进阶建议

• 与 Edge Side Includes 集成实现动态拼装。
• 通过 HTML Streaming 减少首字节延迟。
• 记录模板渲染耗时，优化慢路径。

渐进增强强调在所有设备提供基础体验，再针对高端设备增强。

核心概念

• 基础层使用 HTML + CSS 满足核心诉求。
• 通过 <noscript> 与占位说明支持禁用脚本场景。
• 特性检测比 UA 检测更可靠。

实战步骤

• 使用 Modernizr 或自定义特性检测，按需加载增强功能。
• 为关键操作提供服务器回退。
• 配合媒体查询、容器查询适配布局。

进阶建议

现代浏览器提供多种存储方式，应根据数据类型选择。

核心概念

• localStorage 与 sessionStorage 适合小数据。
• IndexedDB 支持事务与索引。
• Cache Storage 配合 Service Worker 缓存请求。

实战步骤

• 封装统一的存储访问层，根据环境切换。
• 在 IndexedDB 中设计索引与游标遍历。
• 处理存储配额，响应 quota exceeded。

合理布局资源加载，能显著提升首屏性能。

核心概念

• preload、prefetch、dns-prefetch 控制资源优先级。
• defer 与 async 管理脚本执行时机。
• 关注 CLS、LCP 等核心指标。

实战步骤

• 为关键字体与样式表添加 preload。
• 将非关键脚本延迟加载或按需加载。
• 使用 <link rel=preconnect> 缩短 TLS 握手时间。

Web Components 提供原生组件模型，适合跨框架复用。

核心概念

• Custom Elements 定义生命周期钩子。
• Shadow DOM 隔离样式与结构。
• HTML Templates 与 Slots 支持内容分发。

实战步骤

• 实现自定义元素并使用 attributeChangedCallback 监听属性。
• 结合 CSS 自定义属性实现主题。
• 使用 Lit/Stencil 提升开发效率。

HTML5 表单控件提供丰富功能，结合 JS 能实现高级体验。

核心概念

• 原生验证属性如 required、pattern，可与自定义验证并存。
• <fieldset> 与 <legend> 帮助用户理解分组。
• 输入类型影响移动端键盘布局。

实战步骤

• 利用 constraintValidation API 自定义错误消息。
• 对日期、时间控件根据区域设置合理格式。
• 使用 <datalist> 提供可选建议。

合理利用原生元素和 ARIA，可以显著提升可访问性。

核心概念

• 优先使用原生交互元素，如 <button>、<a>。
• ARIA 只在必要时使用，避免与原生语义冲突。
• 焦点管理与键盘交互是核心指标。

实战步骤

• 在模态对话框中使用 role=dialog 与 aria-modal。
• 表单元素配对 <label> 与 id。
• 为复杂网格提供 aria-colcount、aria-rowcount。

语义化标签是可访问性、SEO 与工程协作的基础。

核心概念

• 使用 <header>、<main>、<section> 构建清晰的页面结构。
• 标题层级应严格递进，辅助技术依赖该结构理解内容。
• 列表、表格、描述列表分别表达不同类型的关系。

实战步骤

• 通过 HTML Outline 工具检查结构合理性。
• 为重复组件建立语义模板，减少 div 池。
• 结合 BEM 或 Design Token 确保语义与样式解耦。