1. 视频标签 video
<video> 标签用于嵌入视频，controls 属性显示播放控件。
常用属性：autoplay 自动播放 | loop 循环 | muted 静音 | poster 封面图
演示效果：
1<video src="video.mp4" controls width="400"></video>
2
3<!-- 完整写法 -->
4<video src="video.mp4"
5 controls
6 autoplay
7 loop
8 muted
9 poster="cover.jpg"
10 width="400">
11 您的浏览器不支持视频播放
12</video>
video 属性说明：
| 属性 | 说明 |
|---|---|
| controls | 显示播放控件 |
| autoplay | 自动播放（需配合 muted） |
| loop | 循环播放 |
| muted | 静音 |
| poster | 封面图 URL |
| width/height | 尺寸 |
2. 音频标签 audio
<audio> 标签用于嵌入音频，用法与 video 类似。
演示效果：
1<audio src="audio.mp3" controls></audio>
2
3<!-- 多格式兼容 -->
4<audio controls>
5 <source src="audio.mp3" type="audio/mpeg">
6 <source src="audio.ogg" type="audio/ogg">
7 您的浏览器不支持音频播放
8</audio>
3. 嵌入外部内容 iframe
<iframe> 标签用于在网页中嵌入另一个网页或外部内容。
常用场景：嵌入地图、视频、第三方内容等。
演示效果：
1<iframe src="https://www.example.com"
2 width="400"
3 height="300"
4 frameborder="0">
5</iframe>
6
7<!-- 常用属性 -->
8<iframe src="map.html"
9 width="100%"
10 height="400"
11 frameborder="0"
12 allowfullscreen>
13</iframe>
4. 代码展示 pre/code
<pre> 标签保留文本中的空格和换行，<code> 标签表示代码。
两者常结合使用，用于展示代码片段。
演示效果：
<!-- HTML 代码示例 -->
<div class="container">
<h1>标题</h1>
<p>段落文本</p>
</div>1<pre><code><!-- HTML 代码示例 -->
2<div class="container">
3 <h1>标题</h1>
4 <p>段落文本</p>
5</div></code></pre>
5. 图像热区 map/area
<map> 和 <area> 标签用于创建图像热区，点击图片不同区域跳转不同链接。
shape 属性：rect（矩形）、circle（圆形）、poly（多边形）。
演示效果：
1<img src="image.jpg" alt="示例图片" usemap="#workmap" width="400">
2
3<map name="workmap">
4 <area shape="rect" coords="0,0,100,100" href="link1.html" alt="区域1">
5 <area shape="circle" coords="200,200,50" href="link2.html" alt="区域2">
6</map>
6. meta 标签
<meta> 标签定义文档的元数据，如字符集、视口、SEO 信息等。
常用属性：charset、name、content、http-equiv。
常用 meta 标签：
<!-- 字符集 -->
<meta charset="UTF-8">
<!-- 视口（移动端适配） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO 描述 -->
<meta name="description" content="网页描述，150字以内">
<!-- SEO 关键词 -->
<meta name="keywords" content="HTML, CSS, JavaScript">
<!-- 作者 -->
<meta name="author" content="作者名">
<!-- 自动刷新 -->
<meta http-equiv="refresh" content="30">
<!-- 跳转 -->
<meta http-equiv="refresh" content="5;url=https://www.example.com">1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">
3<meta name="description" content="网页描述，150字以内">
4<meta name="keywords" content="HTML, CSS, JavaScript">
5<meta name="author" content="作者名">
6<meta http-equiv="refresh" content="30">
7. script 的 async/defer
<script> 标签用于引入 JavaScript，async 和 defer 控制加载方式。
async：异步加载，加载完立即执行（不保证顺序）。
defer：延迟执行，等 HTML 解析完再执行（保证顺序）。
三种加载方式对比：
| 方式 | 加载 | 执行 | 适用场景 |
|---|---|---|---|
| 无属性 | 同步阻塞 | 立即执行 | 需要立即执行的脚本 |
| async | 异步加载 | 加载完立即执行 | 独立脚本（如统计） |
| defer | 异步加载 | HTML解析完后执行 | 需要保证顺序的脚本 |
1<!-- 同步加载（阻塞） -->
2<script src="app.js"></script>
3
4<!-- 异步加载（不保证顺序） -->
5<script src="analytics.js" async></script>
6
7<!-- 延迟执行（保证顺序） -->
8<script src="app.js" defer></script>
9
10<!-- 内联脚本 -->
11<script>
12 console.log('Hello!');
13</script>