HTML 全局属性
常用 HTML 全局属性的用法与场景
问题
介绍 HTML 全局属性 data-*、hidden、tabindex、title、id、class 的用法。
解答
全局属性是所有 HTML 元素都可以使用的属性。
id
元素的唯一标识符，页面内不可重复。
<div id="app">应用容器</div>
<script>
// 通过 id 获取元素
const app = document.getElementById('app');
// CSS 选择器
const app2 = document.querySelector('#app');
</script>
<style>
/* id 选择器，权重较高 */
#app {
padding: 20px;
}
</style>class
元素的类名，可以有多个，用空格分隔。
<button class="btn btn-primary btn-large">提交</button>
<script>
const btn = document.querySelector('.btn');
// 操作 classList
btn.classList.add('loading'); // 添加类
btn.classList.remove('loading'); // 移除类
btn.classList.toggle('active'); // 切换类
btn.classList.contains('btn'); // 检查是否包含，返回 true
</script>data-*
自定义数据属性，用于存储私有数据。
<ul>
<li data-id="1" data-user-name="张三" data-active="true">用户1</li>
<li data-id="2" data-user-name="李四" data-active="false">用户2</li>
</ul>
<script>
const item = document.querySelector('li');
// 通过 dataset 访问（自动转为驼峰命名）
console.log(item.dataset.id); // "1"
console.log(item.dataset.userName); // "张三"（data-user-name -> userName）
console.log(item.dataset.active); // "true"（注意：是字符串）
// 设置 data 属性
item.dataset.status = 'online'; // 添加 data-status="online"
// 通过 getAttribute 访问
console.log(item.getAttribute('data-id')); // "1"
</script>
<style>
/* CSS 中使用属性选择器 */
li[data-active="true"] {
color: green;
}
</style>hidden
布尔属性，隐藏元素（等同于 display: none）。
<!-- 元素被隐藏 -->
<div hidden>这段内容不可见</div>
<!-- 等同于 -->
<div style="display: none;">这段内容不可见</div>
<script>
const el = document.querySelector('div');
// 显示元素
el.hidden = false;
// 或
el.removeAttribute('zzinb');
// 隐藏元素
el.hidden = true;
</script>tabindex
控制元素是否可聚焦以及 Tab 键导航顺序。
<!-- tabindex="0"：可聚焦，按 DOM 顺序导航 -->
<div tabindex="0">可以用 Tab 聚焦的 div</div>
<!-- tabindex="-1"：可通过 JS 聚焦，但 Tab 键跳过 -->
<div tabindex="-1" id="modal">模态框（JS 控制聚焦）</div>
<!-- tabindex="正数"：按数值顺序导航（不推荐使用） -->
<input tabindex="2" placeholder="第二个聚焦">
<input tabindex="1" placeholder="第一个聚焦">
<script>
// 通过 JS 聚焦 tabindex="-1" 的元素
document.getElementById('modal').focus();
</script>title
鼠标悬停时显示的提示文本。
<button title="点击保存当前内容">保存</button>
<abbr title="Hypertext Markup Language">HTML</abbr>
<!-- 图片的 title 和 alt 区别 -->
<img
src="photo.jpg"
alt="风景照片"
title="拍摄于 2024 年"
>
<!-- alt: 图片无法显示时的替代文本，屏幕阅读器会读取 -->
<!-- title: 鼠标悬停提示，可选 -->完整示例
<!DOCTYPE html>
<html>
<head>
<style>
.card {
padding: 16px;
border: 1px solid #ddd;
margin: 10px 0;
}
.card[data-status="active"] {
border-color: green;
}
.card:focus {
outline: 2px solid blue;
}
</style>
</head>
<body>
<div
id="user-card"
class="card card-primary"
data-user-id="123"
data-status="active"
tabindex="0"
title="用户信息卡片"
>
<h3>用户名</h3>
<p hidden id="secret">隐藏的内容</p>
</div>
<script>
const card = document.getElementById('user-card');
// 读取各种属性
console.log(card.id); // "user-card"
console.log(card.className); // "card card-primary"
console.log(card.dataset.userId); // "123"
console.log(card.dataset.status); // "active"
console.log(card.title); // "用户信息卡片"
console.log(card.tabIndex); // 0
// 显示隐藏内容
document.getElementById('secret').hidden = false;
</script>
</body>
</html>关键点
id页面唯一，class可重复可多个data-*通过dataset访问，属性名自动转驼峰（data-user-name→userName）hidden是布尔属性，效果等同于display: nonetabindex="0"可 Tab 聚焦，tabindex="-1"仅 JS 可聚焦title是悬停提示，alt是图片替代文本，两者用途不同
目录