HTML媒体

1. 视频标签 video

<video> 标签用于嵌入视频，controls 属性显示播放控件。

常用属性：autoplay 自动播放 | loop 循环 | muted 静音 | poster 封面图

演示效果：

video 属性说明：

属性	说明
controls	显示播放控件
autoplay	自动播放（需配合 muted）
loop	循环播放
muted	静音
poster	封面图 URL
width/height	尺寸

2. 音频标签 audio

<audio> 标签用于嵌入音频，用法与 video 类似。

演示效果：

3. 嵌入外部内容 iframe

<iframe> 标签用于在网页中嵌入另一个网页或外部内容。

常用场景：嵌入地图、视频、第三方内容等。

演示效果：

4. 代码展示 pre/code

<pre> 标签保留文本中的空格和换行，<code> 标签表示代码。

两者常结合使用，用于展示代码片段。

演示效果：

<!-- HTML 代码示例 -->
<div class="container">
    <h1>标题</h1>
    <p>段落文本</p>
</div>

5. 图像热区 map/area

<map> 和 <area> 标签用于创建图像热区，点击图片不同区域跳转不同链接。

shape 属性：rect（矩形）、circle（圆形）、poly（多边形）。

演示效果：

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">

7. script 的 async/defer

<script> 标签用于引入 JavaScript，async 和 defer 控制加载方式。

async：异步加载，加载完立即执行（不保证顺序）。

defer：延迟执行，等 HTML 解析完再执行（保证顺序）。

三种加载方式对比：

方式	加载	执行	适用场景
无属性	同步阻塞	立即执行	需要立即执行的脚本
async	异步加载	加载完立即执行	独立脚本（如统计）
defer	异步加载	HTML解析完后执行	需要保证顺序的脚本

1. 折叠面板 details/summary

<details> 定义折叠容器，<summary> 定义折叠标题。

点击标题可以展开/收起内容，open 属性默认展开。

演示效果：

点击展开更多信息

这是隐藏的内容，点击标题可以展开或收起。

不需要任何 JavaScript 就能实现折叠效果！

默认展开的面板

这个面板打开时就是展开状态（open 属性）。

2. 对话框（纯CSS实现）

使用 checkbox hack 实现纯 CSS 对话框，不需要 JavaScript。

点击按钮打开对话框，点击关闭按钮或遮罩层关闭。

演示效果：

3. 进度条 progress

<progress> 表示任务进度。

value 当前值，max 最大值。不设置 value 则显示不确定进度。

演示效果：

下载进度：

70%

未知进度（加载中）：

4. 度量衡 meter

<meter> 表示某个范围内的标量值。

min/max 范围 | low/high 低/高阈值 | optimum 最优值

演示效果：

磁盘使用率：

85%

考试成绩：

92分

5. 高亮文本 mark

<mark> 标签用于高亮显示文本，默认黄色背景。

演示效果：

这是一段文字，其中这部分被高亮了。

6. 时间标签 time

<time> 标签表示时间/日期。

datetime 属性提供机器可读的时间格式。

演示效果：

发布于今天

会议时间下午2点

7. 画布 canvas（必须用JavaScript）

<canvas> 标签用于 JS 绘制图形。

width/height 设置画布尺寸。必须用 JavaScript 才能绘图。

演示效果：