HTML

HTML 语义化是指使用有意义的标签来描述内容结构，而不是全部用 <div>。

语义化标签：
<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>

好处：
1. SEO 友好 — 搜索引擎更容易理解页面结构
2. 无障碍 — 屏幕阅读器可正确解析
3. 可维护性 — 代码结构清晰
4. 开发体验 — 团队协作更容易理解代码

两者都是异步加载脚本，但执行时机不同：

async：
• 下载完成后立即执行，会阻塞 HTML 解析
• 多个 async 脚本执行顺序不确定
• 适合独立脚本（如统计代码）

defer：
• 在 HTML 解析完成后、DOMContentLoaded 前执行
• 多个 defer 脚本按顺序执行
• 适合需要操作 DOM 的脚本

推荐：需要操作 DOM 的脚本用 defer，独立第三方脚本用 async。

语义化标签：<header>、<footer>、<nav>、<article>、<section>

表单增强：date、email、url、range、number 等新 input 类型

多媒体：<video>、<audio>、<canvas>

存储：localStorage、sessionStorage

API：Geolocation、WebSocket、Web Worker、Drag and Drop、History API

技术层面：
1. 合理使用语义化 HTML 标签
2. <title> 和 <meta description> 准确描述页面
3. 合理使用 h1-h6 层级（每个页面只有一个 h1）
4. 图片添加 alt 属性
5. 使用结构化数据（JSON-LD）

性能层面：
1. 提升页面加载速度（SSR/SSG、CDN、懒加载）
2. 移动端适配（响应式设计）
3. 使用 HTTPS

内容层面：
1. 关键词合理分布在标题和正文中
2. URL 结构清晰、包含关键词
3. 内链和外链建设

渐进增强（Progressive Enhancement）：
先构建基础功能（保证所有浏览器可用），再逐步增强体验。
如：先写语义化 HTML → 添加 CSS 样式 → 添加 JS 交互

优雅降级（Graceful Degradation）：
先构建完整功能，再为不支持的环境提供降级方案。
如：CSS @supports、try/catch、noscript 标签

区别：
• 渐进增强：从简单到复杂，以内容为核心
• 优雅降级：从复杂到简单，以体验为核心

现代实践：优先渐进增强，通过 Babel/PostCSS 等工具兼容旧浏览器。

	Canvas	SVG
渲染方式	像素（位图）	矢量图形
DOM	无 DOM 节点	每个图形是 DOM 元素
事件绑定	需手动计算坐标	直接绑定到元素
缩放	会模糊（像素化）	无损缩放
性能	大量元素性能好	大量元素 DOM 开销大
动画	JS 逐帧绘制	CSS / SMIL 动画
可访问性	差	好（DOM 可被读屏器解析）

Canvas 适合：
• 游戏、实时图表、图像处理
• 大量粒子/粒子系统
• 视频处理、截图

SVG 适合：
• 图标、Logo、信息图
• 地图、流程图、组织架构图
• 需要交互的图形（hover、click）
• 响应式图表（少量元素）

Web Components：浏览器原生支持的组件化标准，由三个核心技术组成：

1. Custom Elements（自定义元素）：
class MyButton extends HTMLElement {
  constructor() { super(); ... }
  connectedCallback() { /* 挂载时 */ }
  disconnectedCallback() { /* 卸载时 */ }
}
customElements.define('my-button', MyButton);

2. Shadow DOM（影子 DOM）：
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = '<style>...</style><button>...</button>';
样式隔离，内部 CSS 不影响外部。

3. HTML Templates（模板）：
<template id="tpl">...</template>
<slot name="header"></slot>
不会被渲染，可通过 JS 克隆使用。

优点：原生标准、框架无关、样式隔离。
缺点：API 较底层，开发体验不如 React/Vue，需要 polyfill 兼容旧浏览器。