HTML 基础与语义化
1. 语义化标签 (Semantic Elements)
使用恰当的 HTML 标签来描述文档内容，而不是通篇使用 <div> 和 <span>。
1.1 常见语义化标签
| 标签 | 描述 | 适用场景 |
|---|---|---|
<header> | 头部 | 网站导航栏、Logo、搜索框 |
<nav> | 导航 | 主菜单、目录 |
<main> | 主体 | 页面核心内容 (每个页面只能有一个) |
<article> | 独立内容 | 博客文章、新闻报道、论坛帖子 |
<section> | 区块 | 章节、文档的分区 |
<aside> | 侧边栏 | 广告、推荐阅读、目录 |
<footer> | 底部 | 版权信息、联系方式、友情链接 |
1.2 为什么需要语义化？
- SEO 优化: 搜索引擎爬虫能更好地理解网页结构和权重。
- 无障碍访问 (A11y): 屏幕阅读器能准确朗读页面结构（盲人用户体验）。
- 代码可维护性: 结构清晰，便于团队协作。
2. HTML5 新特性
List 1 (基础)
HTML
CSS
JavaScript
List 2 (框架)
Vue
React
Event Logs
2.1 拖放 API (Drag and Drop)
允许用户抓取对象并拖放到另一个位置。
html
<div draggable="true" ondragstart="drag(event)">可拖拽元素</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)">放置区域</div>2.2 媒体标签
<audio>: 音频播放。<video>: 视频播放。<canvas>: 2D 绘图 (图表、游戏)。<svg>: 矢量图 (图标)。
2.3 存储 API
- localStorage: 永久存储，除非手动清除。
- sessionStorage: 会话存储，关闭标签页即失效。
3. Script 标签：defer vs async
控制脚本加载与执行的时机，避免阻塞 DOM 解析。
| 属性 | 加载方式 | 执行时机 | 适用场景 |
|---|---|---|---|
| (默认) | 同步加载 | 立即执行 (阻塞 DOM) | 必须优先执行的核心库 |
| async | 异步加载 | 下载完立即执行 (顺序不确定) | 独立脚本 (如统计代码) |
| defer | 异步加载 | DOM 解析完成后执行 (按顺序) | 依赖 DOM 的业务逻辑 |
4. DOCTYPE 的作用
<!DOCTYPE html> 告诉浏览器使用 HTML5 标准模式 来解析文档。
- 如果不写: 浏览器进入 怪异模式 (Quirks Mode)，模拟老式浏览器行为，导致盒模型、布局等渲染异常（如 IE 盒模型）。
5. Iframe 的优缺点
优点:
- 隔离环境 (沙箱)。
- 引入第三方内容 (地图、视频)。
缺点:
- 阻塞主页面
onload事件。 - 不利于 SEO。
- 复杂的跨域通信 (需使用
postMessage)。