您现在的位置是：网站首页 > HTML 全局属性文章详情
HTML 全局属性
陈川
【
HTML
】
27244人已围观
5119字
HTML 全局属性
HTML 全局属性是所有 HTML 元素共有的属性，它们可以应用于任何 HTML 元素。这些属性提供了对元素行为和样式的通用控制，无论元素的具体类型如何。
class 属性
class 属性用于为元素指定一个或多个类名，类名通常用于 CSS 样式或 JavaScript 选择器。多个类名之间用空格分隔。
html
<div class="container main-content">
<!-- 内容 -->
</div>类名可以重复使用于多个元素，这使得样式和行为的复用变得非常方便。在 CSS 中，类选择器以点号（.）开头：
css
.container {
width: 80%;
margin: 0 auto;
}
.main-content {
background-color: #f5f5f5;
}id 属性
id 属性为元素指定唯一的标识符。与 class 不同，id 在整个文档中必须是唯一的。
html
<section id="main-section">
<!-- 内容 -->
</section>id 常用于 JavaScript 中通过 document.getElementById() 获取元素：
javascript
const mainSection = document.getElementById('main-section');在 CSS 中，ID 选择器以井号（#）开头：
css
#main-section {
padding: 20px;
}style 属性
style 属性允许直接在元素上定义内联样式。这种方式的优先级高于外部样式表和内部样式表。
html
<p style="color: blue; font-size: 16px;">这是一段蓝色文字</p>虽然内联样式方便，但过度使用会导致代码难以维护。最佳实践是将样式集中在 CSS 文件中。
title 属性
title 属性提供了关于元素的额外信息，通常在鼠标悬停时显示为工具提示。
html
<a href="#" title="点击查看更多信息">了解更多</a>title 属性对于提高可访问性很有帮助，特别是当链接文本本身不够描述性时。
lang 属性
lang 属性定义了元素内容的语言代码，有助于浏览器和搜索引擎正确解释内容。
html
<p lang="en">This is an English paragraph.</p>
<p lang="zh-CN">这是一段中文内容。</p>dir 属性
dir 属性指定文本方向，可以是 ltr（从左到右）或 rtl（从右到左）。
html
<p dir="rtl">هذا نص باللغة العربية</p>hidden 属性
hidden 属性是一个布尔属性，表示元素应该被隐藏。
html
<div hidden>这个内容不会显示</div>等同于 CSS 的 display: none，但 hidden 是 HTML 原生的解决方案。
tabindex 属性
tabindex 属性控制元素是否可以通过 Tab 键聚焦，以及聚焦的顺序。
html
<button tabindex="1">第一个可聚焦元素</button>
<input tabindex="2" type="text">
<a tabindex="3" href="#">链接</a>tabindex="0" 表示元素应该按照自然文档顺序可聚焦，tabindex="-1" 表示元素不可通过 Tab 键聚焦但可以通过 JavaScript 聚焦。
contenteditable 属性
contenteditable 属性使元素内容可编辑。
html
<div contenteditable="true">
你可以编辑这段文字
</div>这个属性常用于创建富文本编辑器或允许用户直接编辑页面内容。
draggable 属性
draggable 属性指定元素是否可拖动，通常与拖放 API 一起使用。
html
<div draggable="true" id="drag-item">拖动我</div>data-* 属性
data-* 属性允许存储自定义数据，这些数据可以通过 JavaScript 访问。
html
<div id="user" data-user-id="12345" data-role="admin">用户信息</div>JavaScript 可以通过 dataset 属性访问这些数据：
javascript
const user = document.getElementById('user');
console.log(user.dataset.userId); // 输出 "12345"
console.log(user.dataset.role); // 输出 "admin"aria-* 属性
aria-* 属性用于增强可访问性，为辅助技术提供额外信息。
html
<button aria-label="关闭" aria-hidden="true">X</button>这些属性不会影响视觉呈现，但对屏幕阅读器等辅助技术至关重要。
spellcheck 属性
spellcheck 属性启用或禁用元素的拼写检查。
html
<textarea spellcheck="true">这里会检查拼写</textarea>
<input type="text" spellcheck="false" value="这里不会检查拼写">translate 属性
translate 属性指示内容是否应该被翻译。
html
<p translate="no">品牌名称不应翻译</p>accesskey 属性
accesskey 属性定义激活元素的快捷键。
html
<button accesskey="s">保存(S)</button>不同操作系统下激活快捷键的方式不同，Windows 通常是 Alt + 键，Mac 是 Control + Option + 键。
contextmenu 属性
contextmenu 属性指定元素的上下文菜单，需要与 <menu> 元素配合使用。
html
<div contextmenu="my-menu">右键点击我</div>
<menu id="my-menu" type="context">
<menuitem label="选项1"></menuitem>
<menuitem label="选项2"></menuitem>
</menu>dropzone 属性
dropzone 属性定义元素是否是拖放目标，以及接受的数据类型。
html
<div dropzone="copy" id="drop-area">拖放文件到这里</div>itemscope 和 itemprop 属性
这些属性用于微数据（Microdata），为搜索引擎提供结构化数据。
html
<div itemscope>
<span itemprop="name">产品名称</span>
<span itemprop="price">$19.99</span>
</div>role 属性
role 属性定义元素的 ARIA 角色，增强可访问性。
html
<div role="navigation">
<!-- 导航内容 -->
</div>slot 属性
slot 属性用于 Web 组件，指定元素在影子 DOM 中的位置。
html
<template id="user-card">
<div>
<slot name="username"></slot>
</div>
</template>
<user-card>
<span slot="username">张三</span>
</user-card>is 属性
is 属性用于指定自定义元素类型。
html
<button is="fancy-button">自定义按钮</button>autocapitalize 属性
autocapitalize 属性控制移动设备上文本输入的自动大写行为。
html
<input type="text" autocapitalize="words">可选值包括 off、none、on、sentences、words 和 characters。
enterkeyhint 属性
enterkeyhint 属性改变移动设备键盘上回车键的标签和功能。
html
<input type="text" enterkeyhint="search">常见值包括 enter、done、go、next、previous、search 和 send。
inputmode 属性
inputmode 属性提示浏览器显示哪种虚拟键盘。
html
<input type="text" inputmode="numeric">常见值包括 none、text、decimal、numeric、tel、search、email 和 url。
nonce 属性
nonce 属性用于内容安全策略（CSP），允许特定内联脚本或样式执行。
html
<script nonce="2726c7f26c">console.log('安全脚本');</script>part 属性
part 属性用于 CSS Shadow Parts，允许从外部样式化 Web 组件的部分内容。
html
<custom-element>
#shadow-root
<div part="header">头部</div>
</custom-element>
<style>
custom-element::part(header) {
color: red;
}
</style>popover 属性
popover 属性用于创建弹出式内容，无需 JavaScript。
html
<button popovertarget="my-popover">显示弹出框</button>
<div id="my-popover" popover>这是弹出内容</div>inert 属性
inert 属性使元素及其子元素不可交互且对辅助技术不可见。
html
<div inert>
<!-- 这部分内容将被忽略 -->
</div>virtualkeyboardpolicy 属性
virtualkeyboardpolicy 属性控制虚拟键盘的行为。
html
<input type="text" virtualkeyboardpolicy="manual">设置为 manual 时，虚拟键盘不会自动显示，需要用户明确交互才会出现。
上一篇：HTML 基础结构
下一篇：常用 HTML 标签之文本标签
