HTML全局属性与自定义数据属性

全局属性适用于所有HTML元素，data-*属性支持自定义数据存储。

核心标识属性

id唯一标识

<div id="main-content">主要内容</div>
<header id="header">头部</header>

• 元素唯一标识
• CSS选择器#id
• JavaScript定位document.getElementById('id')
• 页面锚点链接href="#id"

id必须唯一，重复id会导致选择和锚点异常。

class类名

<div class="container">容器</div>
<div class="card active">多类名</div>
<div class="btn btn-primary btn-lg">组合类名</div>

• 可多个类名（空格分隔）
• CSS选择器.class
• JavaScript定位document.getElementsByClassName('class')

style内联样式

<div style="color: red; font-size: 16px;">内联样式</div>

• 最高优先级样式
• 覆盖外部CSS
• 不推荐大量使用

交互与行为属性

title提示文本

<a href="#" title="点击查看详情">详情链接</a>
<button title="保存并继续">保存</button>

• 鼠标悬停显示提示
• 提升可访问性

tabindex焦点顺序

<div tabindex="0">可聚焦元素</div>
<div tabindex="-1">JS可聚焦，Tab不可</div>
<div tabindex="1">优先聚焦</div>

tabindex让非表单元素可聚焦，便于键盘操作。

hidden隐藏元素

<div hidden>隐藏内容</div>
<section hidden>隐藏区块</section>

• 等同于display: none
• 不渲染不占用空间
• CSS可覆盖display: block

draggable拖拽

<div draggable="true">可拖拽元素</div>
<img draggable="false">禁止拖拽</div>

• true启用拖拽
• false禁用拖拽
• auto浏览器默认

data-*自定义数据属性

基本用法

<div data-user-id="123">用户信息</div>
<button data-action="delete" data-item="5">删除</button>
<article data-category="news" data-priority="high">新闻</article>

• 以data-开头
• 存储自定义数据
• 不影响页面展示

JavaScript访问dataset

const div = document.querySelector('div');

// 读取
div.dataset.userId;      // "123"
div.dataset.action;      // "delete"

// 设置
div.dataset.userId = '456';
div.dataset.newAttr = 'value';  // 添加data-new-attr

// 删除
div.dataset.removeItem = undefined;
delete div.dataset.removeItem;

dataset自动转换：data-user-id → userId（驼峰命名）。

实际应用示例

<ul>
  <li data-id="1" data-status="active">任务1</li>
  <li data-id="2" data-status="completed">任务2</li>
  <li data-id="3" data-status="pending">任务3</li>
</ul>

<script>
const items = document.querySelectorAll('li');
items.forEach(item => {
  const id = item.dataset.id;
  const status = item.dataset.status;
  console.log(`任务${id}: ${status}`);
});
</script>

CSS访问data属性

/* 属性选择器 */
[data-status="active"] { color: green; }
[data-status="completed"] { color: gray; }
[data-status="pending"] { color: orange; }

/* attr()函数 */
li::after {
  content: attr(data-id);
}

aria可访问性属性

aria-label标签

<button aria-label="关闭">×</button>
<nav aria-label="主导航">...</nav>

aria-labelledby引用标签

<h2 id="section-title">章节标题</h2>
<section aria-labelledby="section-title">内容</section>

aria-describedby描述

<input type="text" aria-describedby="hint">
<span id="hint">请输入您的邮箱地址</span>

aria-hidden隐藏

<span aria-hidden="true"> decorative icon</span>

aria-expanded展开状态

<button aria-expanded="false">展开菜单</button>

aria-role角色

<div role="button">模拟按钮</div>
<nav role="navigation">导航</nav>
<main role="main">主要内容</nav>

aria属性辅助屏幕阅读器理解页面，提升无障碍体验。

事件处理属性

常用事件属性

<button onclick="alert('点击')">点击</button>
<input onfocus="console.log('聚焦')" onblur="console.log('失焦')">
<form onsubmit="return validate()">提交</form>

事件属性简单但不推荐，建议用addEventListener分离代码。

其他全局属性

accesskey快捷键

<a href="#" accesskey="h">首页（Alt+H）</a>
<button accesskey="s">保存（Alt+S）</button>

dir文本方向

<p dir="ltr">从左向右</p>
<p dir="rtl">从右向左</p>
<p dir="auto">自动判断</p>

lang语言

<p lang="zh-CN">中文内容</p>
<p lang="en">English content</p>

contenteditable可编辑

<div contenteditable="true">可编辑内容</div>
<p contenteditable="plaintext-only">仅文本编辑</p>

spellcheck拼写检查

<input type="text" spellcheck="true">
<textarea spellcheck="false">不检查拼写</textarea>

全局属性速查表

要点总结

• id唯一标识元素，用于定位和锚点
• class支持多类名，用于样式和选择
• tabindex使非表单元素可聚焦
• data-*存储自定义数据，dataset访问
• aria属性提升页面可访问性
• 事件属性简化但不推荐使用
• contenteditable实现富文本编辑