<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML 新特性学习指南</title>
<style>
* {
margin: 0;
box-sizing: border-box;
}
:root {
--primary: #6366f1;
--primary-light: #818cf8;
--bg: #f8fafc;
--card-bg: #ffffff;
--text: #1e293b;
--text-muted: #64748b;
--border: #e2e8f0;
--success: #22c55e;
--warning: #f59e0b;
--danger: #ef4444;
}
html {
scroll-behavior: smooth; /* 新特性：平滑滚动 */
}
body {
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
padding: 0;
}
/* ========== 结构类标签样式 ========== */
header {
background: linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);
color: white;
padding: 3rem 2rem;
text-align: center;
}
header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
nav {
background: var(--card-bg);
padding: 1rem;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
nav a {
color: var(--primary);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 6px;
transition: all 0.2s;
}
nav a:hover {
background: var(--primary);
color: white;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
section {
background: var(--card-bg);
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
section h2 {
color: var(--primary);
border-bottom: 2px solid var(--primary);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
article {
background: var(--bg);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-left: 4px solid var(--primary);
}
article h3 {
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
aside {
background: #fef3c7;
border-left: 4px solid var(--warning);
padding: 1rem;
border-radius: 0 8px 8px 0;
margin: 1rem 0;
font-size: 0.9rem;
}
aside::before {
content: "⚠️ 兼容性提示：";
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
}
footer {
background: var(--text);
color: white;
text-align: center;
padding: 2rem;
margin-top: 2rem;
}
/* ========== 交互类标签样式 ========== */
/* details/summary 自定义样式 */
details {
border: 1px solid var(--border);
border-radius: 8px;
margin: 1rem 0;
overflow: hidden;
}
summary {
background: var(--bg);
padding: 1rem;
cursor: pointer;
font-weight: 600;
list-style: none; /* 移除默认箭头 */
display: flex;
align-items: center;
gap: 0.5rem;
transition: background 0.2s;
}
summary::-webkit-details-marker {
display: none; /* Chrome/Safari 移除默认箭头 */
}
summary::before {
content: "▶";
font-size: 0.8rem;
transition: transform 0.2s;
}
details[open] summary::before {
transform: rotate(90deg);
}
summary:hover {
background: var(--border);
}
details > div {
padding: 1rem;
border-top: 1px solid var(--border);
}
/* dialog 自定义样式 */
dialog {
border: none;
border-radius: 12px;
padding: 0;
max-width: 500px;
width: 90%;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.dialog-header {
background: var(--primary);
color: white;
padding: 1rem 1.5rem;
font-weight: 600;
font-size: 1.1rem;
}
.dialog-body {
padding: 1.5rem;
}
.dialog-footer {
padding: 1rem 1.5rem;
background: var(--bg);
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
/* ========== 表单增强样式 ========== */
/* progress 自定义样式 */
progress {
width: 100%;
height: 20px;
border-radius: 10px;
overflow: hidden;
appearance: none;
-webkit-appearance: none;
}
progress::-webkit-progress-bar {
background: var(--border);
border-radius: 10px;
}
progress::-webkit-progress-value {
background: linear-gradient(
90deg,
var(--primary),
var(--primary-light)
);
border-radius: 10px;
transition: width 0.3s;
}
progress::-moz-progress-bar {
background: linear-gradient(
90deg,
var(--primary),
var(--primary-light)
);
border-radius: 10px;
}
/* meter 自定义样式 */
meter {
width: 100%;
height: 20px;
border-radius: 10px;
overflow: hidden;
}
/* 注意：meter 的样式自定义能力有限 */
meter::-webkit-meter-bar {
background: var(--border);
border-radius: 10px;
border: none;
}
meter::-webkit-meter-optimum-value {
background: var(--success);
border-radius: 10px;
}
meter::-webkit-meter-suboptimum-value {
background: var(--warning);
border-radius: 10px;
}
meter::-webkit-meter-even-less-good-value {
background: var(--danger);
border-radius: 10px;
}
/* output 样式 */
output {
display: inline-block;
background: var(--primary);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-weight: 600;
min-width: 60px;
text-align: center;
}
/* datalist 配合的 input 样式 */
input[list] {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border);
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.2s;
}
input[list]:focus {
outline: none;
border-color: var(--primary);
}
/* fieldset 样式 */
fieldset {
border: 2px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}
legend {
background: var(--primary);
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 600;
}
/* ========== 其他标签样式 ========== */
/* mark 自定义样式 */
mark {
background: linear-gradient(120deg, #fef08a 0%, #fde047 100%);
padding: 0.1rem 0.3rem;
border-radius: 3px;
color: inherit;
}
/* 搜索高亮样式 */
.search-highlight {
background: #bbf7d0;
padding: 0.1rem 0.3rem;
border-radius: 3px;
animation: highlight-pulse 1s ease-in-out;
}
@keyframes highlight-pulse {
0%,
100% {
background: #bbf7d0;
}
50% {
background: #86efac;
}
}
/* figure/figcaption 样式 */
figure {
margin: 1rem 0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
figure img {
width: 100%;
display: block;
}
figcaption {
background: var(--bg);
padding: 0.75rem 1rem;
font-size: 0.9rem;
color: var(--text-muted);
font-style: italic;
text-align: center;
}
/* time 样式 */
time {
color: var(--text-muted);
font-size: 0.9rem;
}
/* ========== 通用按钮样式 ========== */
button,
.btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
background: var(--primary-light);
transform: translateY(-1px);
}
.btn-secondary {
background: var(--border);
color: var(--text);
}
.btn-secondary:hover {
background: #cbd5e1;
}
/* ========== 代码展示样式 ========== */
pre {
background: #1e293b;
color: #e2e8f0;
padding: 1rem;
border-radius: 8px;
overflow-x: auto;
font-family: "Fira Code", "Consolas", monospace;
font-size: 0.9rem;
margin: 1rem 0;
}
code {
background: var(--border);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-family: "Fira Code", "Consolas", monospace;
font-size: 0.9em;
}
pre code {
background: none;
padding: 0;
}
/* ========== 演示区域样式 ========== */
.demo-box {
background: white;
border: 2px dashed var(--border);
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}
.demo-label {
display: inline-block;
background: var(--success);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-size: 0.8rem;
margin-bottom: 1rem;
}
.feature-tag {
display: inline-block;
background: var(--primary-light);
color: white;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
margin-left: 0.5rem;
}
.compat-tag {
display: inline-block;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
margin-left: 0.5rem;
}
.compat-good {
background: #dcfce7;
color: #166534;
}
.compat-partial {
background: #fef3c7;
color: #92400e;
}
.compat-bad {
background: #fee2e2;
color: #991b1b;
}
/* ========== 响应式 ========== */
@media (max-width: 768px) {
header h1 {
font-size: 1.8rem;
}
main {
padding: 1rem;
}
section {
padding: 1rem;
}
}
/* ========== 新特性：popover ========== */
[popover] {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
max-width: 300px;
}
[popover]::backdrop {
background: rgba(0, 0, 0, 0.2);
}
/* ========== 新特性：:has() 选择器演示 ========== */
.has-demo:has(input:checked) {
background: #dcfce7;
border-color: var(--success);
}
/* ========== 新特性：accent-color ========== */
.accent-demo input {
accent-color: var(--primary);
}
/* ========== 新特性：color-scheme ========== */
.color-scheme-demo {
color-scheme: light dark;
}
</style>
</head>
<body>
<!-- ==================== 结构类标签演示 ==================== -->
<header>
<h1>🚀 HTML 新特性学习指南</h1>
<p>探索现代 HTML 的强大功能，提升开发效率</p>
</header>
<nav>
<a href="#structure">结构类</a>
<a href="#interactive">交互类</a>
<a href="#form">表单增强</a>
<a href="#media">多媒体</a>
<a href="#other">其他标签</a>
<a href="#new-attrs">新属性</a>
<a href="#css-new">CSS 新特性</a>
</nav>
<main>
<!-- ==================== 结构类标签 ==================== -->
<section id="structure">
<h2>📦 结构类标签</h2>
<article>
<h3>
<code><header></code> / <code><footer></code> /
<code><nav></code> / <code><main></code>
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p>
<strong>特点：</strong>语义化标签，让页面结构更清晰，有利于 SEO
和无障碍访问。
</p>
<p><strong>优点：</strong></p>
<ul>
<li>屏幕阅读器可以识别页面结构</li>
<li>搜索引擎更好理解内容</li>
<li>代码可读性更强</li>
</ul>
<div class="demo-box">
<span class="demo-label">当前页面就是示例</span>
<p>
本页面使用了
<code><header></code
>（顶部紫色区域）、<code><nav></code>（导航栏）、<code><main></code>（主内容区）、<code><section></code>（各个卡片）、<code><article></code>（每个知识点）、<code><footer></code>（底部）
</p>
</div>
</article>
<article>
<h3>
<code><aside></code> - 侧边栏/附注内容
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<aside>
这就是一个 aside
标签！用于展示与主内容相关但不是核心的内容，如提示、警告、广告等。
</aside>
</article>
</section>
<!-- ==================== 交互类标签 ==================== -->
<section id="interactive">
<h2>🎮 交互类标签</h2>
<article>
<h3>
<code><details></code> + <code><summary></code> -
可折叠内容
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>原生的折叠/展开功能，无需 JavaScript！</p>
<p>
<strong>优点：</strong>零 JS、自带无障碍支持、可通过 CSS
完全自定义样式
</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<details>
<summary>点击展开查看更多内容</summary>
<div>
<p>这是隐藏的内容！可以放任何 HTML 元素。</p>
<p>支持嵌套、图片、表格等任何内容。</p>
</div>
</details>
<details>
<summary>FAQ: 如何隐藏默认样式？</summary>
<div>
<pre><code>/* 移除默认三角箭头 */
summary {
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}</code></pre>
</div>
</details>
<details open>
<summary>默认展开（添加 open 属性）</summary>
<div>
<p>
使用 <code><details open></code> 可以让内容默认展开。
</p>
</div>
</details>
</div>
<!-- 新特性：手风琴效果 -->
<aside>
<strong>新特性 (2024)：</strong
><code>name</code> 属性可实现手风琴效果！同名的 details
只能展开一个。 <br />兼容性：Chrome 120+, Safari 17.2+, Firefox
暂不支持
</aside>
<div class="demo-box">
<span class="demo-label">手风琴效果（同 name 属性）</span>
<details name="accordion">
<summary>选项 1</summary>
<div>
<p>选项 1 的内容。展开这个会自动关闭其他同名的 details。</p>
</div>
</details>
<details name="accordion">
<summary>选项 2</summary>
<div><p>选项 2 的内容。</p></div>
</details>
<details name="accordion">
<summary>选项 3</summary>
<div><p>选项 3 的内容。</p></div>
</details>
</div>
</article>
<article>
<h3>
<code><dialog></code> - 原生对话框/模态框
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p>
<strong>特点：</strong>原生模态框，自带遮罩层、焦点管理、ESC 关闭！
</p>
<p><strong>优点：</strong></p>
<ul>
<li>自动处理焦点陷阱（Tab 键不会跳出对话框）</li>
<li>ESC 键自动关闭</li>
<li><code>::backdrop</code> 伪元素可自定义遮罩层</li>
<li>支持表单自动提交</li>
</ul>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<button
class="btn btn-primary"
onclick="document.getElementById('myDialog').showModal()"
>
打开模态框
</button>
<button
class="btn btn-secondary"
onclick="document.getElementById('myDialog2').show()"
>
打开非模态框
</button>
</div>
<dialog id="myDialog">
<div class="dialog-header">🎉 原生 Dialog 模态框</div>
<div class="dialog-body">
<p>这是一个原生的 dialog 元素！</p>
<p>特点：</p>
<ul>
<li>✅ 自动居中</li>
<li>✅ 自带遮罩层（可自定义）</li>
<li>✅ ESC 键关闭</li>
<li>✅ 焦点自动管理</li>
</ul>
</div>
<div class="dialog-footer">
<button
class="btn btn-secondary"
onclick="this.closest('dialog').close()"
>
取消
</button>
<button
class="btn btn-primary"
onclick="this.closest('dialog').close('confirmed')"
>
确认
</button>
</div>
</dialog>
<dialog id="myDialog2">
<div class="dialog-header">非模态对话框</div>
<div class="dialog-body">
<p>
使用 <code>.show()</code> 打开的是非模态框，不会阻止页面交互。
</p>
</div>
<div class="dialog-footer">
<button
class="btn btn-primary"
onclick="this.closest('dialog').close()"
>
关闭
</button>
</div>
</dialog>
<pre><code><dialog id="myDialog">
<p>对话框内容</p>
<button onclick="this.closest('dialog').close()">关闭</button>
</dialog>
<script>
// 模态框（有遮罩层）
document.getElementById('myDialog').showModal();
// 非模态框
document.getElementById('myDialog').show();
</script></code></pre>
</article>
<article>
<h3>
<code><popover></code> 属性 - 原生弹出层
<span class="compat-tag compat-partial"
>⚠️ Chrome 114+, Safari 17+</span
>
</h3>
<p>
<strong>特点：</strong>原生弹出层 API，无需 JavaScript
即可实现弹出效果！
</p>
<p><strong>优点：</strong></p>
<ul>
<li>点击外部自动关闭</li>
<li>ESC 键关闭</li>
<li>自动处理层级（置于最顶层）</li>
<li>支持 CSS 动画</li>
</ul>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<button class="btn btn-primary" popovertarget="mypopover">
点击显示 Popover
</button>
<div id="mypopover" popover>
<h4>🎈 这是一个 Popover！</h4>
<p>点击外部区域或按 ESC 可关闭。</p>
<p>完全原生，无需 JavaScript！</p>
</div>
</div>
<pre><code><button popovertarget="mypopover">打开</button>
<div id="mypopover" popover>
弹出层内容
</div></code></pre>
</article>
</section>
<!-- ==================== 表单增强 ==================== -->
<section id="form">
<h2>📝 表单增强</h2>
<article>
<h3>
<code><datalist></code> - 输入建议列表
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>为 input 提供预定义选项，支持模糊搜索！</p>
<p><strong>优点：</strong>用户可以选择建议，也可以输入自定义值</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<label for="browser">选择或输入你喜欢的浏览器：</label>
<input list="browsers" id="browser" placeholder="开始输入..." />
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Safari"></option>
<option value="Edge"></option>
<option value="Opera"></option>
<option value="Brave"></option>
</datalist>
</div>
<pre><code><input list="browsers" placeholder="选择浏览器">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist></code></pre>
</article>
<article>
<h3>
<code><output></code> - 计算结果输出
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p>
<strong>特点：</strong
>语义化的计算结果展示，屏幕阅读器会识别为"输出"
</p>
<p>
<strong>优点：</strong
><code>for</code> 属性关联输入源，提升无障碍体验
</p>
<div class="demo-box">
<span class="demo-label">效果演示 - 简单计算器</span>
<form
oninput="
result.value = parseInt(a.value || 0) + parseInt(b.value || 0)
"
>
<input
type="number"
id="a"
value="10"
style="width: 80px; padding: 0.5rem"
/>
<span style="font-size: 1.5rem; margin: 0 0.5rem">+</span>
<input
type="number"
id="b"
value="20"
style="width: 80px; padding: 0.5rem"
/>
<span style="font-size: 1.5rem; margin: 0 0.5rem">=</span>
<output name="result" for="a b">30</output>
</form>
</div>
</article>
<article>
<h3>
<code><progress></code> - 进度条
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>表示任务完成进度，有明确的开始和结束</p>
<p><strong>优点：</strong>可通过 CSS 完全自定义样式</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<p>下载进度：</p>
<progress id="downloadProgress" value="70" max="100"></progress>
<p style="margin-top: 0.5rem; color: var(--text-muted)">70%</p>
<p style="margin-top: 1rem">不确定进度（无 value 属性）：</p>
<progress></progress>
</div>
<pre><code>/* 自定义 progress 样式 */
progress {
appearance: none;
height: 20px;
}
progress::-webkit-progress-bar {
background: #e2e8f0;
border-radius: 10px;
}
progress::-webkit-progress-value {
background: linear-gradient(90deg, #6366f1, #818cf8);
border-radius: 10px;
}</code></pre>
</article>
<article>
<h3>
<code><meter></code> - 度量值显示
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p>
<strong>特点：</strong>表示已知范围内的标量值，会根据值自动变色！
</p>
<p><strong>与 progress 的区别：</strong></p>
<ul>
<li><code>progress</code>：表示任务进度（0% → 100%）</li>
<li>
<code>meter</code>：表示度量值（如磁盘使用率、电池电量、成绩等）
</li>
</ul>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<p>
磁盘使用率（低于 70% 为绿色，70-90% 为黄色，高于 90% 为红色）：
</p>
<meter
value="45"
min="0"
max="100"
low="70"
high="90"
optimum="0"
></meter>
<span>45% - 正常（绿色）</span>
<meter
value="75"
min="0"
max="100"
low="70"
high="90"
optimum="0"
style="margin-top: 0.5rem"
></meter>
<span>75% - 警告（黄色）</span>
<meter
value="95"
min="0"
max="100"
low="70"
high="90"
optimum="0"
style="margin-top: 0.5rem"
></meter>
<span>95% - 危险（红色）</span>
<hr
style="
margin: 1rem 0;
border: none;
border-top: 1px dashed var(--border);
"
/>
<p>电池电量（越高越好，optimum="100"）：</p>
<meter
value="85"
min="0"
max="100"
low="20"
high="60"
optimum="100"
></meter>
<span>85% - 良好</span>
<meter
value="35"
min="0"
max="100"
low="20"
high="60"
optimum="100"
style="margin-top: 0.5rem"
></meter>
<span>35% - 中等</span>
<meter
value="10"
min="0"
max="100"
low="20"
high="60"
optimum="100"
style="margin-top: 0.5rem"
></meter>
<span>10% - 低电量</span>
</div>
<pre><code><!-- optimum 决定"好"的方向 -->
<!-- optimum="0" 表示越低越好（如磁盘使用率）-->
<meter value="45" min="0" max="100"
low="70" high="90" optimum="0"></meter>
<!-- optimum="100" 表示越高越好（如电池电量）-->
<meter value="85" min="0" max="100"
low="20" high="60" optimum="100"></meter></code></pre>
</article>
<article>
<h3>
<code><fieldset></code> + <code><legend></code> -
表单分组
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<fieldset>
<legend>个人信息</legend>
<p>
<label
>姓名：<input type="text" placeholder="请输入姓名"
/></label>
</p>
<p>
<label
>邮箱：<input type="email" placeholder="请输入邮箱"
/></label>
</p>
</fieldset>
<fieldset disabled>
<legend>已禁用的表单组</legend>
<p>
<label
>字段1：<input type="text" value="整个 fieldset 都被禁用了"
/></label>
</p>
<p>
<label>字段2：<input type="text" /></label>
</p>
</fieldset>
</div>
</article>
</section>
<!-- ==================== 多媒体标签 ==================== -->
<section id="media">
<h2>🎬 多媒体标签</h2>
<article>
<h3>
<code><picture></code> - 响应式图片
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>根据屏幕尺寸/设备特性加载不同图片</p>
<p><strong>优点：</strong></p>
<ul>
<li>节省带宽（移动端加载小图）</li>
<li>支持 WebP/AVIF 等新格式降级</li>
<li>支持 Art Direction（不同尺寸显示不同裁剪）</li>
</ul>
<pre><code><picture>
<!-- AVIF 格式（最小）-->
<source srcset="image.avif" type="image/avif">
<!-- WebP 格式（较小）-->
<source srcset="image.webp" type="image/webp">
<!-- 响应式尺寸 -->
<source media="(max-width: 768px)" srcset="image-mobile.jpg">
<!-- 降级方案 -->
<img src="image.jpg" alt="描述">
</picture></code></pre>
</article>
<article>
<h3>
<code><figure></code> + <code><figcaption></code> -
图表及说明
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>语义化的图片/图表容器，不仅限于图片！</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<figure>
<div
style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 150px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
"
>
📊 图表区域
</div>
<figcaption>
图 1：这是一个使用 figure 和 figcaption 的示例
</figcaption>
</figure>
<figure>
<blockquote
style="font-size: 1.2rem; font-style: italic; padding: 1rem"
>
"The best way to predict the future is to invent it."
</blockquote>
<figcaption>—— Alan Kay</figcaption>
</figure>
<figure>
<pre><code>function hello() {
console.log("Hello, World!");
}</code></pre>
<figcaption>代码示例：一个简单的 JavaScript 函数</figcaption>
</figure>
</div>
</article>
<article>
<h3>
<code><video></code> / <code><audio></code> - 媒体播放
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<pre><code><video controls width="100%" poster="cover.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="subs.vtt" srclang="zh" label="中文">
您的浏览器不支持视频播放
</video>
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio></code></pre>
<p><strong>常用属性：</strong></p>
<ul>
<li><code>controls</code> - 显示控制条</li>
<li><code>autoplay</code> - 自动播放（需配合 muted）</li>
<li><code>muted</code> - 静音</li>
<li><code>loop</code> - 循环播放</li>
<li><code>poster</code> - 视频封面图</li>
<li><code>preload</code> - 预加载策略（none/metadata/auto）</li>
</ul>
</article>
</section>
<!-- ==================== 其他标签 ==================== -->
<section id="other">
<h2>✨ 其他实用标签</h2>
<article>
<h3>
<code><mark></code> - 高亮文本
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>语义化的文本高亮，屏幕阅读器会识别</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<p>
在这段文字中，<mark>这部分被高亮显示</mark>，用于强调重要内容。
</p>
<p>
搜索结果：找到了 <mark class="search-highlight">HTML</mark> 相关的
3 个结果。
</p>
</div>
<pre><code>/* 自定义 mark 样式 */
mark {
background: linear-gradient(120deg, #fef08a 0%, #fde047 100%);
padding: 0.1rem 0.3rem;
border-radius: 3px;
}</code></pre>
</article>
<article>
<h3>
<code><time></code> - 时间/日期
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p>
<strong>特点：</strong>机器可读的时间格式，有利于 SEO 和日历应用
</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<p>文章发布于 <time datetime="2025-01-28">2025年1月28日</time></p>
<p>
会议时间：<time datetime="2025-01-28T14:30:00+08:00"
>今天下午 2:30</time
>
</p>
<p>视频时长：<time datetime="PT2H30M">2小时30分钟</time></p>
</div>
<pre><code><!-- 日期 -->
<time datetime="2025-01-28">2025年1月28日</time>
<!-- 日期时间 -->
<time datetime="2025-01-28T14:30:00">下午2:30</time>
<!-- 时长（ISO 8601 格式）-->
<time datetime="PT2H30M">2小时30分钟</time></code></pre>
</article>
<article>
<h3>
<code><template></code> - 模板内容
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p>
<strong>特点：</strong>不会被渲染的 HTML 模板，用于 JavaScript
动态克隆
</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<div id="template-demo-container"></div>
<button class="btn btn-primary" onclick="addCard()">
添加卡片
</button>
</div>
<template id="card-template">
<div
style="
background: var(--bg);
padding: 1rem;
margin: 0.5rem 0;
border-radius: 8px;
border-left: 4px solid var(--primary);
"
>
<strong>卡片标题</strong>
<p>这是通过 template 克隆创建的卡片</p>
</div>
</template>
<script>
function addCard() {
const template = document.getElementById("card-template");
const clone = template.content.cloneNode(true);
document
.getElementById("template-demo-container")
.appendChild(clone);
}
</script>
</article>
<article>
<h3>
<code><wbr></code> - 可选换行点
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>告诉浏览器在此处可以换行（如果需要的话）</p>
<div class="demo-box">
<span class="demo-label">效果演示（缩小窗口查看效果）</span>
<p style="word-break: break-all">
超长URL：https://example.com/<wbr />very/<wbr />long/<wbr />path/<wbr />to/<wbr />some/<wbr />resource/<wbr />file.html
</p>
</div>
</article>
<article>
<h3>
<code><abbr></code> - 缩写
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<div class="demo-box">
<span class="demo-label">效果演示（鼠标悬停查看）</span>
<p>
<abbr
title="HyperText Markup Language"
style="text-decoration: underline dotted; cursor: help"
>HTML</abbr
>
是构建网页的标准标记语言。
</p>
</div>
</article>
<article>
<h3>
<code><ruby></code> + <code><rt></code> - 注音标注
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>为东亚文字添加注音（拼音、假名等）</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<p style="font-size: 1.5rem">
<ruby> 汉<rt>hàn</rt> 字<rt>zì</rt> </ruby>
注音示例
</p>
<p style="font-size: 1.5rem">
<ruby> 東京<rt>とうきょう</rt> </ruby>
</p>
</div>
</article>
<article>
<h3>
<code><bdi></code> / <code><bdo></code> - 双向文本
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>处理混合方向文本（如阿拉伯语、希伯来语）</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<p>用户 <bdi>إيان</bdi> 发表了评论</p>
<p>强制从右到左：<bdo dir="rtl">Hello World</bdo></p>
</div>
</article>
</section>
<!-- ==================== 新属性 ==================== -->
<section id="new-attrs">
<h2>🆕 新属性</h2>
<article>
<h3>
<code>loading="lazy"</code> - 懒加载
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p>
<strong>特点：</strong>图片/iframe 进入视口时才加载，提升首屏性能
</p>
<pre><code><img src="image.jpg" loading="lazy" alt="懒加载图片">
<iframe src="video.html" loading="lazy"></iframe></code></pre>
</article>
<article>
<h3>
<code>fetchpriority</code> - 加载优先级
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>控制资源加载优先级</p>
<pre><code><!-- 高优先级（首屏大图）-->
<img src="hero.jpg" fetchpriority="high">
<!-- 低优先级（非关键资源）-->
<img src="ad.jpg" fetchpriority="low"></code></pre>
</article>
<article>
<h3>
<code>decoding</code> - 图片解码策略
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<pre><code><!-- 异步解码，不阻塞渲染 -->
<img src="image.jpg" decoding="async">
<!-- 同步解码，确保立即显示 -->
<img src="image.jpg" decoding="sync"></code></pre>
</article>
<article>
<h3>
<code>inputmode</code> - 虚拟键盘类型
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>在移动端显示合适的键盘类型</p>
<div class="demo-box">
<span class="demo-label">效果演示（移动端查看）</span>
<p>
<label
>数字键盘：<input
type="text"
inputmode="numeric"
placeholder="只显示数字键盘"
/></label>
</p>
<p>
<label
>电话键盘：<input
type="text"
inputmode="tel"
placeholder="电话键盘"
/></label>
</p>
<p>
<label
>邮箱键盘：<input
type="text"
inputmode="email"
placeholder="带 @ 的键盘"
/></label>
</p>
<p>
<label
>URL键盘：<input
type="text"
inputmode="url"
placeholder="带 .com 的键盘"
/></label>
</p>
<p>
<label
>搜索键盘：<input
type="text"
inputmode="search"
placeholder="带搜索按钮"
/></label>
</p>
<p>
<label
>小数键盘：<input
type="text"
inputmode="decimal"
placeholder="带小数点"
/></label>
</p>
</div>
</article>
<article>
<h3>
<code>enterkeyhint</code> - 回车键提示
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>自定义移动端回车键的显示文字</p>
<div class="demo-box">
<span class="demo-label">效果演示（移动端查看）</span>
<p>
<label
>搜索：<input
type="text"
enterkeyhint="search"
placeholder="回车键显示'搜索'"
/></label>
</p>
<p>
<label
>发送：<input
type="text"
enterkeyhint="send"
placeholder="回车键显示'发送'"
/></label>
</p>
<p>
<label
>下一项：<input
type="text"
enterkeyhint="next"
placeholder="回车键显示'下一项'"
/></label>
</p>
<p>
<label
>完成：<input
type="text"
enterkeyhint="done"
placeholder="回车键显示'完成'"
/></label>
</p>
<p>
<label
>前往：<input
type="text"
enterkeyhint="go"
placeholder="回车键显示'前往'"
/></label>
</p>
</div>
</article>
<article>
<h3>
<code>capture</code> - 媒体捕获
<span class="compat-tag compat-partial">⚠️ 仅移动端</span>
</h3>
<p><strong>特点：</strong>直接调用摄像头/麦克风</p>
<div class="demo-box">
<span class="demo-label">效果演示（移动端）</span>
<p>
<label
>前置摄像头：
<input type="file" accept="image/*" capture="user" />
</label>
</p>
<p>
<label
>后置摄像头：
<input type="file" accept="image/*" capture="environment" />
</label>
</p>
<p>
<label
>录制视频：
<input type="file" accept="video/*" capture="environment" />
</label>
</p>
<p>
<label
>录制音频：
<input type="file" accept="audio/*" capture />
</label>
</p>
</div>
</article>
<article>
<h3>
<code>autocomplete</code> 新值
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>更精确的自动填充提示</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<p>
<label
>姓名：<input
type="text"
autocomplete="name"
placeholder="浏览器会建议保存的姓名"
/></label>
</p>
<p>
<label>邮箱：<input type="email" autocomplete="email" /></label>
</p>
<p>
<label>电话：<input type="tel" autocomplete="tel" /></label>
</p>
<p>
<label
>一次性验证码：<input
type="text"
autocomplete="one-time-code"
placeholder="自动读取短信验证码"
/></label>
</p>
<p>
<label
>新密码：<input
type="password"
autocomplete="new-password"
placeholder="浏览器会建议强密码"
/></label>
</p>
<p>
<label
>当前密码：<input
type="password"
autocomplete="current-password"
/></label>
</p>
</div>
</article>
<article>
<h3>
<code>inert</code> - 惰性区域
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p>
<strong>特点：</strong>使元素及其子元素不可交互、不可聚焦、不可选中
</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<div>
<p>正常区域：<button class="btn btn-primary">可点击</button></p>
</div>
<div inert style="opacity: 0.5; margin-top: 1rem">
<p>惰性区域（添加了 inert 属性）：</p>
<button class="btn btn-primary">不可点击</button>
<input type="text" placeholder="不可聚焦" />
<p>文字也不可选中</p>
</div>
</div>
</article>
<article>
<h3>
<code>contenteditable="plaintext-only"</code>
<span class="compat-tag compat-partial"
>⚠️ Chrome 89+, Safari 16.4+</span
>
</h3>
<p><strong>特点：</strong>可编辑区域只允许纯文本，禁止粘贴富文本</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<div
contenteditable="plaintext-only"
style="
border: 2px solid var(--border);
padding: 1rem;
border-radius: 8px;
min-height: 60px;
"
>
尝试粘贴富文本（如从 Word 复制），只会保留纯文本！
</div>
</div>
</article>
<article>
<h3>
<code>blocking="render"</code>
<span class="compat-tag compat-partial">⚠️ Chrome 105+</span>
</h3>
<p><strong>特点：</strong>阻止渲染直到资源加载完成</p>
<pre><code><!-- 关键 CSS，阻止渲染直到加载完成 -->
<link rel="stylesheet" href="critical.css" blocking="render">
<!-- 关键脚本 -->
<script src="critical.js" blocking="render"></script></code></pre>
</article>
</section>
<!-- ==================== CSS 新特性配合 ==================== -->
<section id="css-new">
<h2>🎨 CSS 新特性配合</h2>
<article>
<h3>
<code>accent-color</code> - 表单控件主题色
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>一行 CSS 改变所有表单控件的主题色！</p>
<div class="demo-box accent-demo">
<span class="demo-label">效果演示</span>
<p>
<label><input type="checkbox" checked /> 复选框</label>
</p>
<p>
<label><input type="radio" name="demo" checked /> 单选框 1</label>
</p>
<p>
<label><input type="radio" name="demo" /> 单选框 2</label>
</p>
<p>
<label>范围滑块：<input type="range" value="60" /></label>
</p>
<p>
<label>进度条：<progress value="70" max="100"></progress></label>
</p>
</div>
<pre><code>/* 一行代码改变所有表单控件颜色 */
input, progress {
accent-color: #6366f1;
}</code></pre>
</article>
<article>
<h3>
<code>:has()</code> 选择器 - 父选择器
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>终于可以根据子元素状态选择父元素了！</p>
<div class="demo-box">
<span class="demo-label">效果演示（勾选复选框看效果）</span>
<div
class="has-demo"
style="
padding: 1rem;
border: 2px solid var(--border);
border-radius: 8px;
transition: all 0.3s;
"
>
<label> <input type="checkbox" /> 勾选我，父容器会变绿！ </label>
</div>
</div>
<pre><code>/* 当容器内有选中的 checkbox 时改变样式 */
.container:has(input:checked) {
background: #dcfce7;
border-color: #22c55e;
}</code></pre>
</article>
<article>
<h3>
<code>scroll-behavior: smooth</code> - 平滑滚动
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>一行 CSS 实现平滑滚动，无需 JavaScript！</p>
<div class="demo-box">
<span class="demo-label">效果演示</span>
<p>点击顶部导航栏的链接，体验平滑滚动效果！</p>
<a href="#structure" style="color: var(--primary)"
>跳转到"结构类标签"</a
>
</div>
<pre><code>html {
scroll-behavior: smooth;
}</code></pre>
</article>
<article>
<h3>
<code>::backdrop</code> - 遮罩层伪元素
<span class="compat-tag compat-good">✓ 全兼容</span>
</h3>
<p><strong>特点：</strong>自定义 dialog、popover、全屏元素的遮罩层</p>
<pre><code>dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
[popover]::backdrop {
background: rgba(0, 0, 0, 0.2);
}</code></pre>
</article>
</section>
<!-- ==================== 兼容性总结 ==================== -->
<section>
<h2>📊 兼容性速查表</h2>
<table style="width: 100%; border-collapse: collapse; margin-top: 1rem">
<thead>
<tr style="background: var(--primary); color: white">
<th style="padding: 0.75rem; text-align: left">特性</th>
<th style="padding: 0.75rem; text-align: center">Chrome</th>
<th style="padding: 0.75rem; text-align: center">Firefox</th>
<th style="padding: 0.75rem; text-align: center">Safari</th>
<th style="padding: 0.75rem; text-align: center">Edge</th>
</tr>
</thead>
<tbody>
<tr style="background: var(--bg)">
<td style="padding: 0.75rem">dialog</td>
<td style="padding: 0.75rem; text-align: center">✅ 37+</td>
<td style="padding: 0.75rem; text-align: center">✅ 98+</td>
<td style="padding: 0.75rem; text-align: center">✅ 15.4+</td>
<td style="padding: 0.75rem; text-align: center">✅ 79+</td>
</tr>
<tr>
<td style="padding: 0.75rem">details/summary</td>
<td style="padding: 0.75rem; text-align: center">✅ 12+</td>
<td style="padding: 0.75rem; text-align: center">✅ 49+</td>
<td style="padding: 0.75rem; text-align: center">✅ 6+</td>
<td style="padding: 0.75rem; text-align: center">✅ 79+</td>
</tr>
<tr style="background: var(--bg)">
<td style="padding: 0.75rem">details[name] (手风琴)</td>
<td style="padding: 0.75rem; text-align: center">✅ 120+</td>
<td style="padding: 0.75rem; text-align: center">❌</td>
<td style="padding: 0.75rem; text-align: center">✅ 17.2+</td>
<td style="padding: 0.75rem; text-align: center">✅ 120+</td>
</tr>
<tr>
<td style="padding: 0.75rem">popover</td>
<td style="padding: 0.75rem; text-align: center">✅ 114+</td>
<td style="padding: 0.75rem; text-align: center">✅ 125+</td>
<td style="padding: 0.75rem; text-align: center">✅ 17+</td>
<td style="padding: 0.75rem; text-align: center">✅ 114+</td>
</tr>
<tr style="background: var(--bg)">
<td style="padding: 0.75rem">loading="lazy"</td>
<td style="padding: 0.75rem; text-align: center">✅ 77+</td>
<td style="padding: 0.75rem; text-align: center">✅ 75+</td>
<td style="padding: 0.75rem; text-align: center">✅ 15.4+</td>
<td style="padding: 0.75rem; text-align: center">✅ 79+</td>
</tr>
<tr>
<td style="padding: 0.75rem">inert</td>
<td style="padding: 0.75rem; text-align: center">✅ 102+</td>
<td style="padding: 0.75rem; text-align: center">✅ 112+</td>
<td style="padding: 0.75rem; text-align: center">✅ 15.5+</td>
<td style="padding: 0.75rem; text-align: center">✅ 102+</td>
</tr>
<tr style="background: var(--bg)">
<td style="padding: 0.75rem">:has() 选择器</td>
<td style="padding: 0.75rem; text-align: center">✅ 105+</td>
<td style="padding: 0.75rem; text-align: center">✅ 121+</td>
<td style="padding: 0.75rem; text-align: center">✅ 15.4+</td>
<td style="padding: 0.75rem; text-align: center">✅ 105+</td>
</tr>
<tr>
<td style="padding: 0.75rem">accent-color</td>
<td style="padding: 0.75rem; text-align: center">✅ 93+</td>
<td style="padding: 0.75rem; text-align: center">✅ 92+</td>
<td style="padding: 0.75rem; text-align: center">✅ 15.4+</td>
<td style="padding: 0.75rem; text-align: center">✅ 93+</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>📚 HTML 新特性学习指南 | 持续更新中</p>
<p style="margin-top: 0.5rem; opacity: 0.8">
<time datetime="2025-01-28">2025年1月28日</time> 更新
</p>
</footer>
</body>
</html>
浙公网安备 33010602011771号