介绍

HTML元素上的属性，可以在元素中添加附加信息。

• 可以在元素中添加附加信息
• 一般描述于开始标签
• 总是以名称/值对的形式出现，比如：name="value"

全局属性

本文只介绍全局属性，个个标签独有的属性，这边就不一一介绍了。

id

规定元素的唯一 id

例 通过 JavaScript 利用 id 属性来改变一段文本

Hello World!
复制代码

function change_header(){    document.getElementById("myHeader").innerHTML="Nice day!";}复制代码

class

规定元素的一个或多个类名（引用样式表中的类）。

例 在head中定义style

    复制代码

使用

    
Header 1
    
A paragraph.
    
Note that this is an important paragraph.
复制代码

class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。

style

属性规定元素的行内样式 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。

例

段落1
段落2
复制代码

效果：

lang

规定元素内容的语言。

例

    
     复制代码
    

lang 属性在以下标签中无效：<base>, < br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>

accesskey

规定激活（使元素获得焦点）元素的便捷按键

例 通过Alt + F (或者 Shift + Alt + F)打开指定链接(mac：Control + option + F)

CSS复制代码

以下元素支持 accesskey 属性：<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>

dir

规定元素内容的文本方向

• rtl：从右到左
• ltr：从左到右

例

Write this text right-to-left!
Write this text left-to-right!
复制代码

dir 属性在以下标签中无效：<base>, < br>, <frame>, <frameset>, < hr>, <iframe>, <param> 以及 <script>

title

规定关于元素的额外信息 通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）

例

链接复制代码

效果：

title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。

tabindex

规定元素的 tab 键次序。

例

链接1链接3链接2复制代码

效果：

以下元素支持 tabindex属性：<a>, <area>, <button>, <input>, <object>, <select> 以及<textarea>

HTML5中添加的全局属性

contenteditable

规定元素内容是否可编辑，true、false

如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。

contextmenu

属性规定元素的上下文菜单。当用户右键点击元素时，会出现上下文菜单

例

      
       
     
    复制代码

data-*

用于存储页面或应用程序的私有自定义数据

例

    
     
喜鹊
     
金枪鱼
 
     
蝇虎
 
    
复制代码

draggable

规定元素是否可拖动

例

这是一个可拖动的段落。
复制代码

链接和图像默认是可拖动的

dropzone

规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。

例

    
复制代码

hidden

元素隐藏

例

复制代码

hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。然后，JavaScript 可以删除 hidden 属性，以使此元素可见。

spellcheck

规定是否对元素进行拼写和语法检查

例

这是一个段落。
复制代码

可以对以下内容进行拼写检查

• input 元素中的文本值（非密码）
• <textarea> 元素中的文本
• 可编辑元素中的文本

translate

规定是否应该翻译元素内容

例

请勿翻译本段。
本段可被译为任意语言。
复制代码

Tips

1、在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，如：name='John "ShotGun" Nelson' 2、class 属性可以多用，中间用空格隔开，如：class="class1 class2 class3 " 3、id 属性只能单独设置，如：id="id1 "

参考

相关阅读

有错误之处，感谢指出，接收批评