十、全局属性
10.1 常用全局属性
<!-- class - 类名（CSS/JS 选择） -->
<div class="container main-content">内容</div>
<!-- id - 唯一标识符 -->
<div id="unique-element">唯一元素</div>
<!-- style - 内联样式 -->
<div style="color: red; font-size: 16px;">红色文字</div>
<!-- title - 提示信息 -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- lang - 语言声明 -->
<html lang="zh-CN">
<p lang="en">Hello World</p>
<!-- data-* - 自定义数据属性 -->
<div data-user-id="12345" data-role="admin">用户信息</div>
<script>
const div = document.querySelector('div');
console.log(div.dataset.userId); // "12345"
console.log(div.dataset.role); // "admin"
</script>
<!-- hidden - 隐藏元素 -->
<div hidden>隐藏内容</div>
<!-- contenteditable - 可编辑内容 -->
<div contenteditable="true">双击编辑这段文字</div>
<!-- draggable - 可拖拽 -->
<div draggable="true">拖拽我</div>
<!-- spellcheck - 拼写检查 -->
<textarea spellcheck="true">检查拼写</textarea>
<!-- tabindex - Tab 键顺序 -->
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<button tabindex="3">按钮</button>
<!-- accesskey - 快捷键 -->
<a href="/" accesskey="h">首页 (Alt+H)</a>
<!-- dir - 文字方向 -->
<p dir="rtl">这段文字从右向左显示</p>
<!-- translate - 翻译控制 -->
<p translate="no">这段文字不翻译</p>
10.2 可访问性属性（ARIA）
<!-- 角色属性 -->
<nav role="navigation">导航</nav>
<main role="main">主要内容</main>
<!-- 标签属性 -->
<label for="username">用户名：</label>
<input type="text" id="username" aria-label="用户名输入框">
<!-- 描述属性 -->
<input type="text" aria-describedby="help-text">
<span id="help-text">请输入3-20个字符</span>
<!-- 状态属性 -->
<button aria-disabled="true">禁用按钮</button>
<div aria-hidden="true">屏幕阅读器忽略</div>
<!-- 实时区域 -->
<div aria-live="polite" aria-atomic="true">
<!-- 动态内容 -->
</div>
<!-- 展开/折叠 -->
<button aria-expanded="false" aria-controls="panel">展开</button>
<div id="panel" hidden>面板内容</div>
十一、高级特性
11.1 Web Components
<!-- 自定义元素 -->
<my-element name="World"></my-element>
<script>
class MyElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
div {
color: blue;
}
</style>
<div>Hello, ${this.getAttribute('name')}</div>
`;
}
}
customElements.define('my-element', MyElement);
</script>
<!-- 模板元素 -->
<template id="card-template">
<style>
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
}
</style>
<div class="card">
<slot name="title">默认标题</slot>
<slot name="content">默认内容</slot>
</div>
</template>
<div id="card-container"></div>
<script>
const template = document.getElementById('card-template');
const clone = template.content.cloneNode(true);
document.getElementById('card-container').appendChild(clone);
</script>
11.2 离线应用
<!-- 缓存清单 -->
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<title>离线应用</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
<!-- cache.manifest 文件 -->
CACHE MANIFEST
# 版本 1.0
CACHE:
index.html
style.css
script.js
logo.png
NETWORK:
*
/api/
FALLBACK:
/offline.html
11.3 微数据与结构化数据
<!-- 微数据（Schema.org） -->
<div itemscope itemtype="https://schema.org/Person">
<span itemprop="name">张三</span>
<span itemprop="jobTitle">软件工程师</span>
<a href="mailto:zhang@example.com" itemprop="email">zhang@example.com</a>
</div>
<!-- 商品信息 -->
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">笔记本电脑</span>
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="price">5999</span>
<span itemprop="priceCurrency">CNY</span>
</div>
</div>
<!-- 文章信息 -->
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">文章标题</h1>
<meta itemprop="datePublished" content="2024-01-01">
<div itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">作者名</span>
</div>
<div itemprop="articleBody">
文章内容...
</div>
</article>
11.4 推送通知
<!-- 请求通知权限 -->
<button onclick="requestNotification()">启用通知</button>
<script>
function requestNotification() {
if ('Notification' in window) {
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
new Notification('通知标题', {
body: '通知内容',
icon: 'icon.png'
});
}
});
}
}
</script>
<!-- Service Worker -->
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker 注册成功');
});
}
</script>
十二、HTML 最佳实践
12.1 性能优化
<!-- 1. 压缩 HTML -->
<!-- 删除注释、多余空格和换行 -->
<!-- 2. 资源预加载 -->
<link rel="preload" href="critical.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://api.example.com">
<!-- 3. 延迟加载 -->
<img src="image.jpg" loading="lazy" alt="懒加载图片">
<iframe src="video.html" loading="lazy"></iframe>
<!-- 4. 异步加载脚本 -->
<script src="analytics.js" async></script>
<script src="app.js" defer></script>
<!-- 5. 内联关键 CSS -->
<style>
/* 首屏关键样式 */
.hero { background: #000; }
.header { height: 60px; }
</style>
<!-- 6. 使用 WebP 格式图片 -->
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="图片">
</picture>
12.2 可访问性
<!-- 1. 语义化标签 -->
<nav>导航</nav>
<main>主要内容</main>
<article>文章</article>
<aside>侧边栏</aside>
<!-- 2. 替代文本 -->
<img src="chart.png" alt="2024年销售数据图表">
<!-- 3. 标题层级 -->
<h1>页面标题</h1>
<h2>章节标题</h2>
<h3>子章节</h3>
<!-- 4. 表单标签 -->
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<!-- 5. 键盘可访问 -->
<a href="/" accesskey="h">首页 (Alt+H)</a>
<button tabindex="0">可聚焦按钮</button>
<!-- 6. ARIA 增强 -->
<button aria-label="关闭" aria-expanded="false">✕</button>
<div role="alert" aria-live="assertive">错误消息</div>
<!-- 7. 跳过导航 -->
<a href="#main" class="skip-link">跳转到主要内容</a>
<main id="main">...</main>
<!-- 8. 颜色对比度 -->
<p style="color: #333; background: #fff;">高对比度文字</p>
12.3 SEO 优化
<!-- 1. 标题和描述 -->
<title>页面标题 - 网站名称</title>
<meta name="description" content="页面描述，包含关键词">
<!-- 2. 语义化结构 -->
<article>
<h1>文章标题</h1>
<p>文章内容...</p>
</article>
<!-- 3. 规范链接 -->
<link rel="canonical" href="https://example.com/page.html">
<!-- 4. 移动端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 5. 结构化数据 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "文章标题",
"author": "作者",
"datePublished": "2024-01-01"
}
</script>
<!-- 6. 面包屑导航 -->
<nav aria-label="breadcrumb">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/category">分类</a></li>
<li>当前页面</li>
</ol>
</nav>
<!-- 7. 图片优化 -->
<img src="image.jpg"
alt="图片描述"
width="800"
height="600"
loading="lazy">
<!-- 8. robots.txt 和 sitemap.xml -->
<!-- robots.txt -->
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml
十三、HTML 新特性
13.1 HTML5 新元素
<!-- 结构元素 -->
<header>头部</header>
<nav>导航</nav>
<main>主要内容</main>
<article>文章</article>
<section>区块</section>
<aside>侧边栏</aside>
<footer>页脚</footer>
<!-- 多媒体元素 -->
<video>视频</video>
<audio>音频</audio>
<canvas>画布</canvas>
<svg>矢量图</svg>
<!-- 表单新类型 -->
<input type="email">
<input type="tel">
<input type="url">
<input type="number">
<input type="range">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">
<input type="search">
<!-- 语义化元素 -->
<mark>高亮</mark>
<time>时间</time>
<progress>进度</progress>
<meter>度量</meter>
<details>详情</details>
<summary>摘要</summary>
<dialog>对话框</dialog>
13.2 HTML 最新特性
<!-- 懒加载 -->
<img loading="lazy" src="image.jpg" alt="图片">
<iframe loading="lazy" src="page.html"></iframe>
<!-- 原生延迟加载 -->
<script defer src="script.js"></script>
<!-- 图片响应式 -->
<img srcset="small.jpg 480w, large.jpg 1080w"
sizes="(max-width: 600px) 480px, 1080px"
src="fallback.jpg"
alt="响应式图片">
<!-- 表单属性 -->
<input type="text" autocomplete="off">
<input type="text" spellcheck="true">
<input type="text" inputmode="numeric">
<!-- 跨平台特性 -->
<picture>
<source srcset="dark-image.webp" media="(prefers-color-scheme: dark)">
<img src="light-image.webp" alt="图片">
</picture>
<!-- 交互元素 -->
<details>
<summary>点击展开</summary>
<p>隐藏内容</p>
</details>
HTML 作为 Web 的基石，从诞生至今不断演进，已经发展成为一套功能强大、语义丰富、可访问性高的标记语言。本文系统性地梳理了 HTML 的核心知识点，从基础结构到高级特性，从表单处理到多媒体嵌入，帮助开发者建立完整的知识体系。
来源：
https://app-acda5zfcddz5.appmiaoda.com
