1. 折叠面板 details/summary
<details> 定义折叠容器，<summary> 定义折叠标题。
点击标题可以展开/收起内容，open 属性默认展开。
演示效果：
点击展开更多信息
这是隐藏的内容，点击标题可以展开或收起。
不需要任何 JavaScript 就能实现折叠效果！
默认展开的面板
这个面板打开时就是展开状态（open 属性）。
1<details>
2 <summary>点击展开更多信息</summary>
3 <p>这是隐藏的内容</p>
4</details>
5
6<details open>
7 <summary>默认展开的面板</summary>
8 <p>这个面板默认展开</p>
9</details>
2. 对话框（纯CSS实现）
使用 checkbox hack 实现纯 CSS 对话框，不需要 JavaScript。
点击按钮打开对话框，点击关闭按钮或遮罩层关闭。
演示效果：
1<input type="checkbox" id="dialog-toggle" class="dialog-checkbox">
2<label for="dialog-toggle" class="dialog-open-btn">打开对话框</label>
3
4<div class="dialog-overlay">
5 <div class="dialog-content">
6 <h3>提示</h3>
7 <p>这是一个纯 CSS 实现的对话框</p>
8 <label for="dialog-toggle" class="dialog-close">×</label>
9 </div>
10</div>
3. 进度条 progress
<progress> 表示任务进度。
value 当前值，max 最大值。不设置 value 则显示不确定进度。
演示效果：
下载进度：
70%未知进度（加载中）：
1<progress value="70" max="100"></progress> 70%
2
3<!-- 未知进度 -->
4<progress></progress>
4. 度量衡 meter
<meter> 表示某个范围内的标量值。
min/max 范围 | low/high 低/高阈值 | optimum 最优值
演示效果：
磁盘使用率：
考试成绩：
1<meter min="0" max="100" low="30" high="70" optimum="20" value="85">85%</meter>
2
3<meter min="0" max="100" low="60" high="90" optimum="100" value="92">92分</meter>
5. 高亮文本 mark
<mark> 标签用于高亮显示文本，默认黄色背景。
演示效果：
这是一段文字，其中这部分被高亮了。
1<p>这是一段文字，其中<mark>这部分被高亮</mark>了。</p>
6. 时间标签 time
<time> 标签表示时间/日期。
datetime 属性提供机器可读的时间格式。
演示效果：
发布于
会议时间
1<p>发布于 <time datetime="2026-06-05">今天</time></p>
2<p>会议时间 <time datetime="2026-06-05T14:00:00">下午2点</time></p>
7. 画布 canvas（必须用JavaScript）
<canvas> 标签用于 JS 绘制图形。
width/height 设置画布尺寸。必须用 JavaScript 才能绘图。
演示效果：
1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #ccc;"></canvas>
2
3<script>
4 var canvas = document.getElementById('myCanvas');
5 var ctx = canvas.getContext('2d');
6
7 // 画矩形
8 ctx.fillStyle = 'lightblue';
9 ctx.fillRect(20, 20, 150, 80);
10
11 // 画圆
12 ctx.beginPath();
13 ctx.arc(300, 60, 40, 0, Math.PI * 2);
14 ctx.fillStyle = 'lightcoral';
15 ctx.fill();
16
17 // 画文字
18 ctx.fillStyle = 'black';
19 ctx.font = '16px Arial';
20 ctx.fillText('Canvas 画布', 20, 140);
21</script>