HTML 全局属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 全局属性相关的知识，希望对你有一定的参考价值。
html5 除了支持原有的全局属性之外，还添加了8个新的全局属性。
1、 id 属性规定元素的唯一 id
id 属性规定 HTML 元素的唯一的 id。id 在 HTML 文档中必须是唯一的。id 属性可用作链接锚，通过 javascript（HTML DOM）或通过 CSS 可以为带有指定 id 的元素改变或添加样式。在 HTML5 中, id 属性可用于任何的 HTML 元素 ，它会验证任何HTML元素，但不一定是有用。在 HTML 4.01 中，id 属性不能用于：<base>, <head>, <html>, <meta>, <param>, <script>, <style> 和<title>。
语法：<element（元素） id="id">
属性值定义元素的唯一 id。命名规则：①：不能以数字开头，必须以字母 A-Z 或 a-z 开头。②：其后的字符可以为：字母(A-Za-z)、数字(0-9)、连字符("-")、下划线("_")、冒号(":") 以及点号(".")。③：值对大小写敏感。
2、class 属性规定元素的类名（className）
class 属性定义了元素的类名。class 属性通常用于指向样式表的类，但是，它也可以用于 JavaScript 通过 HTML DOM 来修改 HTML 元素的类名。在 HTML5 中，class 属性可用于任何的 HTML 元素 ，它会验证任何HTML元素，但不一定是有用。在 HTML 4.01 中，class 属性不能用于：<base>, <head>, <html>,<meta>, <param>, <script>, <style> 和 <title>。
语法：<element class="classname">
属性值定义元素的类的名称。如需为一个元素规定多个类，可用空格分隔类名。 <span class="A B C">，HTML 元素允许使用多个类。命名规则：①：必须以字母 A-Z 或 a-z 开头。②：可以是以下字符： (A-Za-z)，数字 (0-9)，连字符 ("-") 和 下划线 ("_")。③：在 HTML 中, 类名是区分大小写的。
3、style 属性规定元素的行内样式（inline style）
style 属性规定元素的行内样式。style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。在 HTML5 中，style 属性可用于任何的 HTML 元素，它会验证任何HTML元素，但不一定是有用。在 HTML 4.01 中，style 属性不能用于：<base>, <head>, <html>, <meta>, <param>, <script>, <style> 和 <title>。
语法：<element style="style:value;">
属性值定义一个或多个由分号分隔的 CSS 属性和值，例如： <p style="font-size:16px;color:blue;text-align:center;"></p>
4、title 属性规定元素的额外信息
描述信息可在工具提示中显示，这些信息通常会在鼠标移到元素上时显示一段工具提示文本。在 HTML5 中, title 属性可用于任何的 HTML 元素 ，它会验证任何HTML元素，但不一定是有用。在 HTML 4.01 中，title 属性不能用于：<base>, <head>, <html>, <meta>, <param>, <script>, <style> 和 <title>。
语法：<element title="text">
属性值定义元素的提示文本。
5、lang 属性设置元素中内容的语言代码
该属性规定元素内容的语言，在 HTML5 中, lang 属性可用于任何的 HTML 元素 ，它会验证任何HTML元素，但不一定是有用。在 HTML 4.01 中，lang 属性不能用于：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, 和 <script>。
语法：<element lang="language_code">
属性值为语言代码，用于规定元素内容的语言代码。
6、dir 属性设置元素中内容的文本方向
在 HTML5 中，dir 属性可用于任何的 HTML 元素，它会验证任何HTML元素，但不一定是有用。在 HTML 4.01 中，dir 元素不能用于：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 和 <script>。
语法：<element dir="ltr|rtl|auto">
值描述：①：ltr 为默认值，从左向右的文本方向，正常显示。②：rtl 定义从右向左的文本方向。③：auto 定义让浏览器根据内容来判断文本方向，仅在文本方向未知时推荐使用。
7、accesskey 属性设置访问元素的键盘快捷键
accesskey 属性规定激活（使元素获得焦点）元素的快捷键。注意：在不同操作系统中不同的浏览器中访问快捷键的方式不同。但是，在大多浏览器中快捷键可以设置为另外一组组合。
各种浏览器下 accesskey 快捷键的使用方法：
①：IE：按住 Alt 键，点击 accesskey 定义的快捷键(焦点将移动到链接)，再按回车。
②：Chrome：按住 Alt 键，点击 accesskey 定义的快捷键。
③：FireFox：按住 Alt+Shift 键，点击 accesskey 定义的快捷键。
④：Safari：按住 Alt 键，点击 accesskey 定义的快捷键。
⑤：Opera：按住 Shift 键，点击 esc，出现本页定义的 accesskey 快捷键列表可供选择。
在 HTML5 中, accesskey 属性可用于任何 HTML 元素，它会验证任何HTML元素。但不一定是有用。在 HTML 4.01 中，accesskey 属性可使用于：<a>, <area>, <button>, <input>, <label>, <legend> 和 <textarea>。
语法：<element accesskey="character">
属性值用于指定激活元素的快捷键。
8、tabindex 属性设置元素的 Tab 键控制次序
tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。在 HTML5 中，tabindex 属性可用于任何的 HTML 元素，它会验证任何HTML元素，但不一定是有用。在 HTML 4.01 中，tabindex 属性可用于：<a>, <area>, <button>, <input>, <object>, <select> 和 <textarea>。
语法：<element tabindex="number">。
属性值为数值，用于规定元素的 tab 键控制顺序，1 是第一，依此类推。
下面是 HTML5 新添加的属性：
9、data-* 属性用于存储页面的自定义数据
该属性用于存储私有页面后应用的自定义数据，可以在所有的 HTML 元素中嵌入数据。自定义的数据可以让页面拥有更好的交互体验，不需要使用 Ajax 或去服务端查询数据。
data-* 属性由以下两部分组成：①：属性名不要包含大写字母，在 data- 后必须至少有一个字符。②：该属性可以是任何字符串。注意：自定义属性前缀 "data-" 会被客户端忽略。
语法：<element data-*="somevalue">
属性值是以字符串形式规定属性的值。
10、contenteditable 属性规定是否可编辑元素的内容
contenteditable 属性指定元素内容是否可编辑。注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。
语法：<element contenteditable="true|false">
值描述：①：当值为 true 时候，元素是可编辑的。②：当值为 false 时，元素是不可编辑的。
11、contextmenu 属性指定一个元素的上下文菜单
contextmenu 属性规定了元素的上下文菜单，当用户右击元素时将显示上下文菜单。contextmenu 属性的值是需要打开的 <menu> 元素的 id。
语法：<element contextmenu="menu_id">
12、spellcheck 属性检测元素是否拼写错误
spellcheck 属性规定是否对元素内容进行拼写检查。
可对以下文本进行拼写检查：①：类型为 text 的 input 元素中的值，非密码。②：textarea 元素中的值。③：可编辑元素中的值。
语法：<element spellcheck="true|false">
值描述：①：当值为 true 时，规定应当对元素的文本进行拼写检查。②：当值为 false 时，规定不应对元素的文本进行拼写检查。
13、hidden 属性规定对元素进行隐藏
如果使用该属性，则会隐藏元素，隐藏的元素不会被显示，可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素，比如选中复选框，等等。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。
语法：<element hidden>
14、draggable 属性指定某个元素是否可以拖动
draggable 属性规定元素是否可拖动。注意：链接和图像默认是可拖动的。
语法：<element draggable="true|false|auto">
值描述：①：当值为 true 时，元素是可拖动的。②：当值为 false 时，元素是不可拖动的。③：当值为 auto 时，使用浏览器的默认特性。
15、dropzone 属性指定是否将数据复制，移动，或链接，或删除
dropzone 属性规定当被拖动的数据在拖放到元素上时，是否被复制、移动或链接。目前没有主流浏览器支持 dropzone 属性。
拖动数据会导致被拖数据产生副本：<div dropzone="copy"></div>
语法：<element dropzone="copy|move|link">
值描述：①：当值为 copy 时，拖动数据会导致被拖数据产生副本。②：当值为 move 时，拖动数据会导致被拖数据移动到新位置。③：当值为 link 时，拖动数据会生成指向原始数据的链接。
16、translate 属性指定是否一个元素的值在页面载入时是否需要翻译
translate 属性规定元素内容是否要翻译。可使用 class="notranslate" 替代。目前没有主流浏览器支持 translate 属性。
语法：<element translate="yes|no">
值描述：①：当值为 yes 时，规定元素内容需要翻译。②：当值为 no 时，规定元素内容不需要翻译。
以上是关于HTML 全局属性的主要内容，如果未能解决你的问题，请参考以下文章