全局属性

全局属性是所有HTML元素都可使用的属性，用于标识、样式控制和行为设置。

核心全局属性

id属性

<!-- 唯一标识符，页面内不能重复 -->
<div id="header">头部</div>
<p id="intro">介绍段落</p>

id值在页面中必须唯一，常用于锚点跳转、JavaScript操作和CSS选择。

class属性

<!-- 类名，可重复使用 -->
<div class="container">容器</div>
<p class="text-primary highlight">多个类名用空格分隔</p>

style属性

<!-- 行内样式 -->
<p style="color: red; font-size: 16px;">红色文字</p>
<div style="margin: 10px; padding: 5px;">内边距</div>

title属性

<!-- 鼠标悬停提示 -->
<a href="#" title="点击查看详情">详情链接</a>
<span title="这是一段说明">悬停查看提示</span>

交互相关属性

hidden属性

<!-- 隐藏元素 -->
<div hidden>这个元素被隐藏</div>
<p hidden>不显示的内容</p>

tabindex属性

<!-- Tab键导航顺序 -->
<button tabindex="1">第一个</button>
<button tabindex="2">第二个</button>
<button tabindex="0">按文档顺序</button>
<button tabindex="-1">不可Tab聚焦</button>

accesskey属性

<!-- 快捷键访问 -->
<button accesskey="s">保存 (Alt+S)</button>
<a href="#" accesskey="h">首页 (Alt+H)</a>

数据属性

data-* 属性

<!-- 自定义数据存储 -->
<div data-id="123" data-name="张三" data-role="admin">
    用户信息
</div>

<!-- JavaScript访问 -->
<script>
    const el = document.querySelector('div');
    console.log(el.dataset.id);    // "123"
    console.log(el.dataset.name);  // "张三"
</script>

其他全局属性

contenteditable属性

<!-- 可编辑内容 -->
<div contenteditable="true">这段文字可编辑</div>
<p contenteditable="false">不可编辑</p>

draggable属性

<!-- 可拖拽元素 -->
<div draggable="true">可拖拽</div>
<img src="image.jpg" draggable="false">

dir属性

<!-- 文字方向 -->
<p dir="ltr">从左到右</p>
<p dir="rtl">从右到左</p>

lang属性

<!-- 元素语言 -->
<p lang="zh-CN">中文段落</p>
<p lang="en">English paragraph</p>

全局属性速查表

要点总结

1. id唯一：页面内id值不可重复
2. class灵活：一个元素可有多个class
3. style谨慎：优先使用CSS文件而非行内样式
4. *data-实用：存储自定义数据，便于JS操作