介绍
HTML元素上的属性，可以在元素中添加附加信息。
- 可以在元素中添加附加信息
- 一般描述于开始标签
- 总是以名称/值对的形式出现，比如：
name="value"
全局属性
本文只介绍全局属性，个个标签独有的属性，这边就不一一介绍了。
id
规定元素的唯一 id
例
通过 JavaScript 利用 id 属性来改变一段文本
<h1 id="myHeader">Hello World!</h1>
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice day!";
}
class
规定元素的一个或多个类名（引用样式表中的类）。
例
在head中定义style
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
使用
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
class 属性不能在以下 HTML 元素中使用：
base, head, html, meta, param, script, style以及title。
style
属性规定元素的行内样式
属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。
例
<p style="color: #27ad9a;">段落1</p>
<p style="color: #FFF; background: #27ad9a;">段落2</p>
效果：
style
lang
规定元素内容的语言。
例
<element lang="language_code">
lang 属性在以下标签中无效：
<base>, < br>, <frame>, <frameset>, <hr>, <iframe>, <param>以及<script>
accesskey
规定激活（使元素获得焦点）元素的便捷按键
例
通过Alt + F (或者 Shift + Alt + F)打开指定链接(mac：Control + option + F)
<a href="http://www.w3school.com.cn/css/" accesskey="f">CSS</a>
以下元素支持 accesskey 属性：
<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>
dir
规定元素内容的文本方向
- rtl：从右到左
- ltr：从左到右
例
<p dir="rtl">Write this text right-to-left!</p>
<p dir="ltr">Write this text left-to-right!</p>
dir 属性在以下标签中无效：<base>, < br>, <frame>, <frameset>, < hr>, <iframe>, <param> 以及 <script>
title
规定关于元素的额外信息
通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）
例
<a href="https://www.jianshu.com/u/769d3d3a9d4b" title="我的简书主页">链接</a>
效果：
title
title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。
tabindex
规定元素的 tab 键次序。
例
<a href="https://www.jianshu.com/u/769d3d3a9d4b" tabindex="1">链接1</a>
<a href="https://www.jianshu.com/u/769d3d3a9d4b" tabindex="3">链接3</a>
<a href="https://www.jianshu.com/u/769d3d3a9d4b" tabindex="2">链接2</a>
效果：
tabindex
以下元素支持
tabindex属性：<a>, <area>, <button>, <input>, <object>, <select>以及<textarea>
HTML5中添加的全局属性
contenteditable
规定元素内容是否可编辑，true、false
如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。
contextmenu
属性规定元素的上下文菜单。当用户右键点击元素时，会出现上下文菜单
例
<menu type="context" id="mymenu">
<menuitem label="Refresh"></menuitem>
<menuitem label="Twitter"></menuitem>
</menu>
data-*
用于存储页面或应用程序的私有自定义数据
例
<ul>
<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li>
<li data-animal-type="蜘蛛">蝇虎</li>
</ul>
draggable
规定元素是否可拖动
例
<p draggable="true">这是一个可拖动的段落。</p>
链接和图像默认是可拖动的
dropzone
规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。
例
<div dropzone="copy"></div>
hidden
元素隐藏
例
<p hidden>这个段落应该被隐藏。</p>
hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。然后，JavaScript 可以删除 hidden 属性，以使此元素可见。
spellcheck
规定是否对元素进行拼写和语法检查
例
<p contenteditable="true" spellcheck="true">这是一个段落。</p>
可以对以下内容进行拼写检查
- input 元素中的文本值（非密码）
-
<textarea>元素中的文本 - 可编辑元素中的文本
translate
规定是否应该翻译元素内容
例
<p translate="no">请勿翻译本段。</p>
<p>本段可被译为任意语言。</p>
Tips
1、在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，如：name='John "ShotGun" Nelson'
2、class 属性可以多用，中间用空格隔开，如：class="class1 class2 class3 "
3、id 属性只能单独设置，如：id="id1 "
参考
http://www.runoob.com/
http://www.w3school.com.cn/
有错误之处，感谢指出，接收批评
网友评论