HTML5的全局属性（如'class'、'id'、'data-*'等）

作者：陈川阅读数：42770人阅读分类： HTML

HTML5的全局属性是所有HTML元素共有的特性，它们可以应用于任何标签，为元素提供额外的信息或控制其行为。这些属性在开发中极为常用，能够增强页面的交互性、可访问性和样式控制。

class属性

class属性用于为元素指定一个或多个类名，通常与CSS结合使用来控制元素的样式。多个类名之间用空格分隔。

<div class="container main-theme">内容区域</div>

通过CSS可以针对这些类名设置样式：

.container {
  width: 80%;
  margin: 0 auto;
}
.main-theme {
  background-color: #f0f0f0;
}

类名也常用于JavaScript操作DOM元素：

const elements = document.querySelectorAll('.main-theme');
elements.forEach(el => {
  el.style.border = '1px solid #ccc';
});

id属性

id属性为元素提供唯一标识符，一个页面中每个id值应该是唯一的。常用于锚点链接或JavaScript精确选择元素。

<section id="user-profile">
  <h2>用户信息</h2>
</section>

CSS可以通过id选择器设置样式：

#user-profile {
  padding: 20px;
}

JavaScript获取特定id元素：

const profileSection = document.getElementById('user-profile');
profileSection.classList.add('active');

data-*属性

自定义数据属性允许开发者在HTML中存储额外信息，格式为data-后接自定义名称。这些数据可以通过JavaScript访问，但不会影响页面渲染。

<button data-user-id="12345" data-action="delete">删除用户</button>

JavaScript读取数据属性：

const button = document.querySelector('button');
console.log(button.dataset.userId); // "12345"
console.log(button.dataset.action); // "delete"

数据集属性也支持驼峰命名访问：

<div data-user-profile-id="A1001"></div>

const div = document.querySelector('div');
console.log(div.dataset.userProfileId); // "A1001"

style属性

style属性用于内联CSS样式，优先级高于外部样式表。适用于需要动态修改或特定元素覆盖样式的场景。

<p style="color: red; font-size: 16px;">警告信息</p>

JavaScript操作style属性：

const warning = document.querySelector('p');
warning.style.fontWeight = 'bold';

注意：CSS属性名需要使用驼峰命名：

element.style.backgroundColor = 'blue'; // 正确
element.style.background-color = 'blue'; // 错误

title属性

title属性提供元素的额外信息，通常在鼠标悬停时显示工具提示。

<abbr title="HyperText Markup Language">HTML</abbr>
<img src="logo.png" title="公司标志">

对于可访问性，屏幕阅读器可能会朗读title内容，因此不应仅依赖title提供关键信息。

lang属性

lang属性声明元素内容的语言代码，有助于搜索引擎和屏幕阅读器正确处理内容。

<html lang="zh-CN">
<p lang="en">This paragraph is in English.</p>

语言代码遵循ISO标准，如：

zh-CN：简体中文
zh-TW：繁体中文
en：英语
ja：日语

dir属性

dir属性指定文本方向，可能值为：

ltr：从左到右（默认）
rtl：从右到左
auto：由浏览器自动判断

<p dir="rtl">هذا نص باللغة العربية</p>

hidden属性

布尔属性，表示元素是否应该隐藏。相当于设置display: none。

<div hidden>这个内容不会显示</div>

JavaScript控制显示/隐藏：

document.getElementById('element').hidden = true; // 隐藏
document.getElementById('element').hidden = false; // 显示

tabindex属性

控制元素是否可聚焦及其在Tab键导航中的顺序：

tabindex="0"：元素可聚焦，按DOM顺序
tabindex="-1"：元素可编程聚焦，但不在Tab序列中
tabindex="1"或更大：优先聚焦（不推荐使用）

<div tabindex="0">可聚焦的div</div>
<button tabindex="-1">不在Tab序列的按钮</button>

contenteditable属性

使元素内容可编辑，值为布尔值或空字符串（视为true）。

<div contenteditable="true">
  点击这里可以编辑这段文字
</div>

JavaScript检测编辑状态：

const editableDiv = document.querySelector('div');
console.log(editableDiv.isContentEditable); // true

draggable属性

控制元素是否可拖动，配合Drag and Drop API使用：

true：可拖动
false：不可拖动
auto：浏览器默认行为

<img src="image.jpg" draggable="true" id="drag-image">

JavaScript拖拽事件示例：

const img = document.getElementById('drag-image');
img.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', img.id);
});

spellcheck属性

控制是否对元素内容进行拼写检查：

true：启用拼写检查
false：禁用拼写检查

<textarea spellcheck="true"></textarea>
<p contenteditable spellcheck="false">可编辑但不检查拼写</p>

accesskey属性

为元素指定快捷键，组合键因浏览器而异（通常Alt+key）。

<button accesskey="s">保存(S)</button>

Windows系统通常按Alt+S触发此按钮。

contextmenu属性

指定元素的上下文菜单（已废弃，建议使用JavaScript实现）。

<div contextmenu="popup-menu">右键点击这里</div>
<menu type="context" id="popup-menu">
  <menuitem label="刷新"></menuitem>
</menu>

dropzone属性

定义元素作为拖放目标时的行为（实验性功能）：

copy：数据将被复制
move：数据将被移动
link：数据将生成链接

<div dropzone="copy"></div>

translate属性

指示元素内容是否应该被翻译：

yes：应该翻译（默认）
no：不应翻译

<p translate="no">Brand Name</p>

inputmode属性

提示浏览器在虚拟键盘上显示哪种输入模式：

none：无虚拟键盘
text：文本输入键盘
decimal：数字键盘含小数点
numeric：纯数字键盘
tel：电话号码键盘
search：搜索优化键盘
email：电子邮件优化键盘
url：URL优化键盘

<input type="text" inputmode="numeric">

is属性

用于指定自定义元素的原型：

<button is="fancy-button">花式按钮</button>

需配合JavaScript定义：

class FancyButton extends HTMLButtonElement {
  constructor() {
    super();
    this.style.backgroundColor = 'pink';
  }
}
customElements.define('fancy-button', FancyButton, { extends: 'button' });

其他布尔属性

HTML5中有多个布尔属性，存在即表示true：

<video controls autoplay muted>
  <source src="movie.mp4" type="video/mp4">
</video>

<form novalidate>
  <input type="email" required>
</form>

<details open>
  <summary>详细信息</summary>
  <p>更多内容...</p>
</details>

常见布尔属性包括：

autofocus：页面加载时自动聚焦
disabled：禁用元素
readonly：只读（适用于输入控件）
multiple：允许多选（文件上传或select）
required：表单必填项
autoplay：媒体自动播放
controls：显示媒体控件
loop：媒体循环播放
muted：媒体静音
playsinline：内联播放（iOS）
default：track元素的默认轨道
checked：复选框或单选按钮选中
selected：option元素选中
novalidate：表单不验证
formnovalidate：提交按钮覆盖表单验证
open：details/menu/dialog元素初始展开

自定义全局属性

开发者可以创建自定义属性，但建议使用data-*格式以避免与未来HTML标准冲突。非标准属性可能无法通过验证。

<div custom-attribute="value"></div>

JavaScript访问：

const div = document.querySelector('div');
console.log(div.getAttribute('custom-attribute')); // "value"

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：HTML5的标签语法规则

下一篇：HTML5的字符编码设置