HTML5的元素可以支持指定属性，不同元素支持的属性可能略有区别，不过有些属性所有的元素是支持的，比如说id、style、class等。HTML5保留了大量原有的通用属性，让我们来一起探索。
1.id、style、class属性
| id属性 | 用于为HTML元素指定唯一标识。当程序使用JavaScrip时即可通过该属性值来获取该HTML元素。 |
| style属性 | 用于为HTML元素指定css的样式 |
| class属性 | 用于匹配css样式的class选择器 |
下面我们通过示例来展示，在页面中指定id属性，这样就可以通过id来访问<div>元素。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> id属性 </title>
</head>
<body>
<div id="show" style="width:400px;height:120px;background-color:red;"></div>
<a href="#" onclick="change();">改变颜色</a>
<script type="text/javascript">
var change = function()
{
var div = document.getElementById("show");
div.style.backgroundColor = div.style.backgroundColor == 'red'?
'green' : (div.style.backgroundColor == 'green'? 'blue': 'red');
}
</script>
</body>
</html>有HTML和CSS基础的朋友可以跳过第一段，由于程序为页面<div>指定了id属性，就能通过id属性获取<div>元素，从而动态的修改元素的背景颜色，每次点击时，颜色在一次一次的改变。
class属性则用于HTML匹配CSS样式的class选择器，style是定义样式，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> class属性 </title>
<style type="text/css">
div.content {
width: 300px;
height: 120px;
border: 1px solid black;
float:left;
}
</style>
</head>
<body>
<div class="content">测试内容一</div>
<div class="content" style="float:right">测试内容二</div>
</body>
</html>2.dir属性
对于大部分HTML元素而言，dir属性用于设置元素中内容排列的方向。该属性支持ltr和rtl两个属性值。
| ltr | 用于设置内容从左到右排列 |
| rtl | 用于设置内容从右到左排列 |
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> dir属性 </title>
</head>
<body>
<div dir="ltr">测试内容dir设为ltr</div>
<div dir="rtl">测试内容dir设为rtl</div>
<table width="500" border="1">
<tr>
<td dir="ltr">表格内容dir设为ltr</td>
<td dir="rtl">表格内容dir设为rtl</td>
</tr>
<table>
</body>
</html>
3.title属性
title属性用于为HTML元素添加额外的一些信息。就是当我们鼠标移到该元素上时，会自动显示title属性所指定的信息。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> title属性 </title>
</head>
<body>
<a href="http://www.baidu.com" title="百度一下">点我点我</a>
<div title="测试标题">测试内容</div>
<table border="1" >
<tr>
<td title="单元格标题">单元格内容</td>
</tr>
</table>
<table>
</body>
</html>4.lang属性
通过lang属性来告诉浏览器和搜索引擎：页面中元素的内容所使用的语言。该属性值应该是符合标准代码，比如zh代表中文、en代表英文、fr代表法语、ja代表日文等。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> lang属性 </title>
</head>
<body>
<div lang="ja">テスト内容</div>
<div lang="en">Test Content</div>
</body>
</html>5.accesskey属性
当页面中有多个元素时，可以通过accesskey属性来指定激活该元素的快捷键，这样用户通过快捷键可以激活对应的HTML元素。从测试结果来说，目前就火狐浏览器不支持该属性。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> accesskey属性 </title>
</head>
<body>
用户名(n)：<input name="name" type="text" accesskey="n"/><br>
密码(p)：<input name="pass" type="text" accesskey="p"/>
<a href="http://www.baidu.com" accesskey="x">百度一些<a>
</body>
</html>指定accesskey属性之后，我们只要按一下 Alt+快捷键 就可以激活，Alt+P是跳到密码框，Alt+x，可以导航到超链接的页面。
6.tabindex属性
当我们浏览页面时，可以通过按键盘上的Tab键来不断的切换窗口或页面中HTML元素来获得焦点，tabindex属性则用于控制窗口、获取焦点的顺序。比如将tabindex设置为1,那么表示第一次按下Tab键获得焦点。
例如，在下面的3个超链接中指定了tabindex属性，这样就控制了获取焦点的顺序。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> tabindex属性 </title>
</head>
<body>
<a href="#" tabindex="2">Java联盟</a>
<a href="#" tabindex="1">HTML 5学习</a>
<a href="#" tabindex="3">Java学习</a>
</body>
</html>在默认情况下，tabindex属性主要是针对于，<a>、<area>、<button>、<input>、<select>、<textarea>等元素的作用比较明显，因为这些元素都可以被激活、与用户进行交互。
注意：如果为其他元素添加该属性，也可以获得焦点，但由于它们并不需要与用户进行交互，往往只要在js中调用focus（）方法让其获得焦点，因此建议把tabindex属性值设为-1，这样就避免我们按下Tab键时让这些元素获得焦点，但又可以在JavaScript脚本中让这些元素获得焦点。
--------------如果大家喜欢我的博客，可以点击左上角的关注哦。