HTML 全局属性
2025-05-07
5️⃣ HTML5 新属性
⚠️ 大多数浏览器不支持
class
- 定义了元素的类名。
- 通常用于指向样式表的类。但是，它也可以用于 JavaScript 中（通过 HTML DOM）, 来修改 HTML 元素的类名。
- 规定元素的类的名称。如需为一个元素规定多个类，用空格分隔类名。
- 必须以字母 A-Z 或 a-z 开头
- 可以是以下字符： (A-Za-z), 数字 (0-9), 横杆 ("-"), 和 下划线 ("_")
- 在 HTML 中, 类名是区分大小写的
html
<h1 class="font-color bg-color ">标题</h1>css
.font-color
{
color: #fff;
text-align: center;
}
.bg-color
{
background-color:#3498db;
}id
- 在 HTML 文档中必须是唯一的。
- 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
html
<p id="font-color" >段落</p>css
#font-color {
color: red;
}style
- 元素的行内样式（inline style）。
- 覆盖任何全局的样式设定，例如在
<style>标签或在外部样式表中规定的样式。 - 一个或多个由分号分隔的 CSS 属性和值
html
<p style="color:green">这是一个段落。</p>hidden 5️⃣
- 对元素进行隐藏。
- 使用 JavaScript 来删除 hidden 属性，使该元素变得可见。
html
<p hidden>隐藏的段落</p>
<p>未隐藏的段落</p>title
- 规定关于元素的额外信息。
- 这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）
html
<abbr title="万维网">WWW</abbr>accesskey
- 规定激活（使元素获得焦点）元素的快捷键。
- 注意： 在不同操作系统中不同的浏览器中访问快捷键的方式不同：
| 浏览器 | 方法 |
|---|---|
| IE | Alt+accesskey |
| FireFox | Alt+Shift+accesskey |
| Chrome | Alt+accesskey |
| Opera | Shift+esc |
| Safari | Alt+accesskey |
html
<button type='button' onclick='alert("按键触发")' accesskey="h">快捷键'h'</button>contenteditable 5️⃣
- 指定元素内容是否可编辑。
- 注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。
- true: 指定元素是可编辑的
- false: 指定元素是不可编辑的
html
<p contenteditable="true">可编辑的段落</p>
<p>不可编辑的段落</p>data-* 5️⃣
- 用于存储私有页面后应用的自定义数据。
- 可以在所有的 HTML 元素中嵌入数据。
- 属性名不要包含大写字母，在 data- 后必须至少有一个字符。
- 该属性可以是任何字符串
html
<button id='btn' data-custom-data="this is a custom data">按键</button>javascript
$('#btn').on('click', function() {
alert($(this).data('custom-data'));
})dir
- 规定元素内容的文本方向。
- ltr: 从左向右的文本方向。
- rtl: 从右向左的文本方向。
- auto: 让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用。
html
<bdo dir="rtl">文本方向从右到左!</bdo>lang
- 规定元素内容的语言。
spellcheck 5️⃣
- 规定是否对元素内容进行拼写检查。
- 类型为 text 的 input 元素中的值（非密码）
- textarea 元素中的值
- 可编辑元素中的值
html
<p contenteditable="true" spellcheck="true">apple, ban1ana, orange</p>
First name: <input type="text" name="fname" spellcheck="true">tabindex
- 规定当使用 "tab" 键进行导航时元素的顺序。
- 规定元素的 tab 键控制顺序（1 是第一）
html
<a href="#" tabindex="1">第二个链接</a><br/>
<a href="#" tabindex="2">第一个链接</a><br/>
<a href="#" tabindex="3">第三个链接</a>draggable 5️⃣
- 规定元素是否可拖动。
- 链接和图像默认是可拖动的。
- true 规定元素是可拖动的。
- false 规定元素是不可拖动的。
- auto 使用浏览器的默认特性。
html
<p draggable="true">允许拖动的段落</p>
<p>禁止拖动的段落</p>dropzone 5️⃣ ⚠️
- 没有主流浏览器支持 dropzone 属性。
translate 5️⃣ ⚠️
- 目前没有主流浏览器支持 translate 属性。
contextmenu 5️⃣ ⚠️
- 目前只有 Firefox 浏览器支持 contextmenu 属性。