HTML5 除了支持原有的全局属性之外,还添加了8个新的全局属性。
1、 id 属性规定元素的唯一 id
id 属性规定 HTML 元素的唯一的 id。id 在 HTML 文档中必须是唯一的。id 属性可用作链接锚,通过 JavaScript(HTML DOM)或通过 CSS 可以为带有指定 id 的元素改变或添加样式。在 HTML5 中, id 属性可用于任何的 HTML 元素 ,它会验证任何HTML元素,但不一定是有用。在 HTML4 中,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元素,但不一定是有用。在 HTML4 中,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元素,但不一定是有用。在 HTML4 中,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元素,但不一定是有用。在 HTML4 中,title 属性不能用于:<base>, <head>, <html>, <meta>, <param>, <script>, <style> 和 <title>。
语法:<element title="text">
属性值定义元素的提示文本。
5、lang 属性设置元素中内容的语言代码
该属性规定元素内容的语言,在 HTML5 中, lang 属性可用于任何的 HTML 元素 ,它会验证任何HTML元素,但不一定是有用。在 HTML4 中,lang 属性不能用于:<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, 和 <script>。
语法:<element lang="language_code">
属性值为语言代码,用于规定元素内容的语言代码,如下:
zh-CN 中文(简体, 中国大陆)
zh-SG 中文(简体, 新加坡)
zh-HK 中文(繁体, 香港)
zh-MO 中文(繁体, 澳门)
zh-TW 中文(繁体, 台湾)
en 英语
en-US 英语(美国)
en-GB 英语(英国)
6、dir 属性设置元素中内容的文本方向
在 HTML5 中,dir 属性可用于任何的 HTML 元素,它会验证任何HTML元素,但不一定是有用。在 HTML4 中,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元素,但不一定是有用。在 HTML4 中,accesskey 属性可使用于:<a>, <area>, <button>, <input>, <label>, <legend> 和 <textarea>。
语法:<element accesskey="character">
属性值用于指定激活元素的快捷键。
8、tabindex 属性设置元素的 Tab 键控制次序
tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。在 HTML5 中,tabindex 属性可用于任何的 HTML 元素,它会验证任何HTML元素,但不一定是有用。在 HTML4 中,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 时,规定元素内容不需要翻译。
来源:https://www.cnblogs.com/Mtime/p/5181870.html