HTML5全局属性

发表于 | 更新于 | 分类于

全局属性（global attribute）。赋予元素意义或属性。可应用于任何一个元素。

HTML全局属性

accesskey属性

设置用来选择元素的快捷键。在Windows系统上，同时按下Alt与 accesskey 属性对应的值来触发相应操作。

1
2
3
4
5
6
7
<body>
    <form>
        <p>账户：<input type="text" name="name" accesskey="n"></p> 
		<p>密码：<input type="password" name="password" accesskey="p"></p>
        <input type="submit" value="提交" accesskey="s">
    </form>
</body>

当用户按下Alt+n会将焦点转移到第一个 input 元素，按下Alt+p会将焦点转移到第二个 input 元素，按下Alt+s则会提交表单。

class属性

规定元素的一个或多个类名。

dir属性

规定元素中文字的方向。有两个值：ltr（文字从左到右）、rtl（文字从右到左）。

1
2
3
4
<body>
    <p dir="ltr">文字从左到右</p>
    <p dir="rtl">文字从右到左</p>
</body>

id属性

规定元素的唯一 id。

lang属性

说明元素内容使用的语言。值必须使用有效的ISO语言代码。lang 属性可以使浏览器在使用屏幕朗读器时保证正确的发音。或根据用户所选语言来显示相应内容。

1
2
3
4
5
<body>
    <p lang="zh">这是中文</p>
    <p lang="en">This is English</p>
    <p lang="ja">これは日本語です</p>
</body>

style属性

设置元素的行内 CSS 样式

tabindex属性

改变元素的Tab键顺序。支持<a>、<area>、<button>、<input>、<object>、<select>以及<textarea>。

1
2
3
4
5
6
7
<body>
    <form>
        <p>姓名：<input type="text" name="name" tabindex="1"></p>
		<p>年龄：<input type="text" name="age" tabindex="3"></p>
		<p>地址：<input type="text" name="address" tabindex="2"></p>
    </form>
</body>

当用户按下Tab键时 tabindex 为1的元素会被首先选中。再次按下Tab键时，则 tabindex 为2的元素会被选中。

title属性

添加元素的额外信息。

1
2
3
<body>
    <p title="zane.corner@gmail.com">CONTACT US|联系我们</p>
</body>

HTML5新增全局属性

contenteditable属性

规定是否让用户修改页面上的内容。有两个值：true（用户可编辑元素内容）、false（用户不可编辑元素内容）。

1
2
3
<body>
    <p contenteditable="true">我来自</p><p>我已年满18岁。</p>
</body>

contextmenu属性

为元素设置快捷菜单，当右键点击元素时会弹出菜单。值为要打开的 menu 元素的 id。

draggable属性

规定元素是否可以拖动。有三个值：true（元素可拖动）、false（元素不可拖动）、auto（使用浏览器默认行为）。

dropzone属性

规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。有三个值：copy（拖动数据产生拷贝）、move（拖动数据到新位置）、link（拖动数据会产生指向原数据的链接）。

hidden属性

hidden 是布尔属性，表示当前元素毋须关注。浏览器会隐藏相关元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <input type="button" value="显示/隐藏" onclick="HiddenOrNot()">
    <div id="hon" hidden>这是一个hidden元素</div>
</body>
<script>
    function HiddenOrNot() {
        var element = document.getElementById("hon");
        if (element.hasAttribute("hidden")) {
            element.removeAttribute("hidden");
        } else {
            element.setAttribute("hidden", "hidden");
        }
    }
</script>

spellcheck属性

规定是否对用户编辑的元素内容进行拼写检查。有两个值：true（启用拼写检查）、false（禁用拼写检查）。

translate属性

规定是否翻译元素内容。有两个值：yes（翻译元素内容）、no（不翻译元素内容）。