HTML: HTML 全局属性参考
全局属性是可用于所有HTML标签的属性。它们定义了元素的标识、样式、行为、语言以及交互方式。
1. 什么是全局属性
全局属性是 HTML 规范中定义的通用属性，可以应用于任何 HTML 元素（包括 <html>、<head>、<body> 等根元素）。它们提供了跨所有标签一致的语义和行为控制能力。理解并熟练使用全局属性，是写出语义化、可访问、可维护 HTML 的关键。
2. 最常用的全局属性
以下四个全局属性在日常开发中使用频率最高：
id— 元素的唯一标识符，同一页面中不可重复。用于 CSS 选择器、JavaScriptgetElementById()、锚点链接。class— 类名列表（空格分隔），用于 CSS 或 JavaScript 选择器。一个元素可以有多个 class。style— 内联 CSS 样式，直接写在标签上。优先级高于外部样式表。title— 悬停提示文本，鼠标悬停时显示。对<abbr>、<iframe>等元素特别有用。
▶ 示例
HTML
<!-- id 唯一标识 -->
<div id="header">网站头部</div>
<!-- class 类名 -->
<p class="highlight important">这段文字同时应用 highlight 和 important 样式</p>
<!-- style 内联样式 -->
<span style="color: red; font-weight: bold;">红色加粗文字</span>
<!-- title 悬停提示 -->
<abbr title="HyperText Markup Language">HTML</abbr> 是网页标记语言。
3. 语言与方向
这两个属性关乎页面内容的语言声明和阅读方向，对 SEO 和可访问性非常重要：
lang— 声明元素内容的语言，如lang="zh-CN"（简体中文）、lang="en"（英文）dir— 文字方向，ltr（从左到右，默认）、rtl（从右到左，用于阿拉伯语/希伯来语）
▶ 示例
HTML
<!-- 声明页面主要语言为简体中文 -->
<html lang="zh-CN">
<!-- 正文使用英文 -->
<p lang="en">Welcome to our website!</p>
<!-- 从右到左的阿拉伯文字 -->
<p dir="rtl" lang="ar">مرحبا بالعالم</p>
ℹ️ 提示：
lang 属性对 SEO（搜索引擎能准确识别内容语言）和屏幕阅读器（选择正确的语音合成引擎）至关重要。养成在
<html> 标签上设置 lang 的好习惯。
4. 数据属性 data-*
data-* 属性允许你在 HTML 元素上存储自定义数据，JavaScript 通过 dataset API 读取。注意 * 必须是小写字母开头且不含大写字母：
HTML
<!-- 使用 data-* 存储商品信息 -->
<div class="product" data-id="1001" data-name="无线鼠标" data-price="99.00" data-stock="true">
<h3>无线鼠标</h3>
<p>价格：¥99.00</p>
<button onclick="addToCart(this)">加入购物车</button>
</div>
<script>
function addToCart(btn) {
const product = btn.closest('.product');
const id = product.dataset.id;
const name = product.dataset.name;
const price = product.dataset.price;
console.log('添加到购物车：', id, name, price);
alert(`已添加「${name}」到购物车，价格：¥${price}`);
}
</script>
5. 交互相关属性
这些属性控制元素的可视性、聚焦顺序和编辑行为：
hidden— 隐藏元素（相当于display: none），元素不占据空间tabindex— Tab 键导航顺序，tabindex="0"按文档顺序聚焦，-1不可聚焦contenteditable— 使元素内容可编辑，设为true即开启spellcheck— 是否启用拼写检查，true/false
▶ 示例
HTML
<!-- hidden 隐藏不可见信息 -->
<div hidden>这条消息用户看不到</div>
<!-- tabindex 控制聚焦顺序 -->
<input type="text" tabindex="2" placeholder="第二个聚焦">
<input type="text" tabindex="1" placeholder="第一个聚焦">
<!-- contenteditable 实现页面内编辑 -->
<div contenteditable="true" style="border:1px solid #ccc; padding:10px; border-radius:4px;">
这段文字可以直接在浏览器中编辑！
</div>
<!-- spellcheck 拼写检查 -->
<textarea spellcheck="true" placeholder="输入英文会检查拼写"></textarea>
6. 其他全局属性
以下是更多有用的全局属性：
| 属性 | 说明 | 示例 |
|---|---|---|
accesskey |
快捷键组合，激活或聚焦元素 | accesskey="s"（按 Alt+S 聚焦） |
draggable |
元素是否可拖拽，配合 Drag & Drop API | draggable="true" |
autofocus |
页面加载时自动聚焦（仅<input>、<textarea>、<button>等表单元素） |
autofocus |
translate |
控制元素内容是否可被翻译（yes / no） |
translate="no" |
slot |
与 Web Component 的 <slot> 配合使用 |
slot="header" |
is |
指定自定义内置元素（Customized Built-in Element） | is="x-foo" |
itemscope / itemprop / itemtype |
微数据（Microdata），用于结构化数据标记 | itemscope itemtype="https://schema.org/Product" |
❓ 常见问题
Q
id和class有什么区别？什么时候用哪个？A
id是"身份证号"，一个页面中只能有一个元素使用某个id值，具有唯一性；class是"班级名"，多个元素可以共享同一个class，具有复用性。实际开发中，90%的情况用class——因为样式复用是常态，而需要唯一标识的场景很少。id的优先级比class高（CSS选择器权重不同），但不要为了提高优先级而滥用id。Q
data-*属性有什么用？怎么读取？A
data-*用于在HTML元素上存储自定义数据。例如：<div data-user-id="123" data-role="admin">。读取方式：JavaScript通过element.dataset.userId获取（自动将连字符转为驼峰命名）。常见用途：存储用户ID、商品信息、配置参数等。注意：data-*只适合存储展示相关的数据，敏感信息不要放在这里（查看源代码就能看到）。Q
contenteditable是做什么的？A
contenteditable="true"让元素的内容可以被用户直接编辑——点击后就能输入文字，就像一个富文本编辑器。常见用途：在线笔记、可编辑表格、即时评论。配合document.execCommand()可以实现加粗、斜体等编辑功能。注意：这只是前端效果，编辑后的内容不会自动保存到服务器，需要JavaScript配合提交。Q
hidden属性和display:none有什么区别？A 两者都能隐藏元素，但有区别：1）
hidden是HTML5标准属性，语义更明确，表示"这个元素暂时不应该被看到"；2）display:none是CSS样式，只是视觉上隐藏；3）hidden的优先级比display:none高，即使设置了display:block，hidden元素仍然不可见。建议：用hidden控制元素的显隐状态，用display:none处理样式需求。📖 小节
- 全局属性可以用于所有 HTML 元素
id唯一标识、class样式分类、style内联样式、title悬停提示lang声明语言、dir控制文字方向data-*存储自定义数据，通过dataset读取hidden隐藏、tabindexTab 顺序、contenteditable内容编辑accesskey快捷键、draggable拖拽、autofocus自动聚焦
📝 作业
- 综合页面：创建一个产品展示卡片，使用
data-*存储产品的 id、名称、价格、库存状态。点击按钮时弹出产品信息。至少包含 3 个产品卡片。 - Todo 编辑器：使用
contenteditable="true"创建一个简单任务编辑区，并用hidden属性实现"显示/隐藏编辑面板"的效果。使用tabindex设置合理的 Tab 聚焦顺序。
