最近看了一下html的属性，发现还是有很多新增的属性相对较陌生，下面根据W3Cschool整理一下。
HTML元素的意义与语境可以通过HTML属性来描述。
HTML中的全局属性对任何HTML元素有效。
HTML5新属性：
| 属性 | 描述 |
|---|---|
| accesskey | 访问元素的键盘快捷键。 |
| class | 规定元素的类名(classname) 。 |
| contenteditable(new) | 是否可编辑元素内容。 |
| contextmenu(new) | 指定一个元素的上下文菜单，当用户右击该元素，出现上下文菜单 |
| data-*(new) | 用于存储页面的自定义数据。 |
| dir | 设置元素中的内容文本方向。 |
| draggable(new) | 指定某个元素是否可以拖动。 |
| dropzone(new) | 指定某个元素是否可以拖动。 |
| hidden(new) | hidden属性规定元素进行隐藏。 |
| id | 规定元素的唯一id |
| lang | 设置元素内容的语言代码。 |
| spellcheck(new) | 检查元素是否拼写错误。 |
| style | 规定元素的行内样式(inline style) |
| tabindex | 设置元素的Tab键控制次序。 |
| title | 规定元素的额外信息(可在工具提示中显示) |
| translate(new) | 指定是否一个元素的值在页面载入时是否需要翻译。 |
实例：
accesskey（设置快捷键 语法:<element accesskey = "character">）
<a href = "http://www.baidu.com" accesskey = "h">众里寻她，千百度。</a>
</hr>
<a href = "https://www.jianshu.com/" accesskey = "a" title = "hello jianshu">你好啊，简书!</a>
注：在不同操作系统中不同的浏览器访问的快捷键方式不同
以windows的为例子:
| Internet Explorer | Chrome | Firefox | Safari | Opera | |
|---|---|---|---|---|---|
| Windows | Alt+accesskey | Alt+accesskey | Alt+Shift+accesskey | Alt+accesskey | versions<=12 or older:Alt+Shift+accesskey version>=15 or new Alt+accesskey |
提示：特殊操作
1.IE下，按住Alt键，点击accesskey定义的快捷键(焦点将移动到链接处)，再按回车。
2.Opera下， 按住Shifth,点击Esc,将会出现本页面定义的accesskey快捷键列表可供选择。
HTML 4.01与HTML5之间的差异
在HTML5中，accesskey属性可用于任何HTML元素（它会验证任何HTML元素。但不一定是有用的）。
在HTML 4.01中，accesskey属性可用于:<a>,<area>,<button>,<input>,<label>,<legend>和<textarea>。
class(定义元素的类名 语法<element class = "class| class1 calss2">)
<p class = "imporant">我：你是我最重要的人。</p>
<p calss = "normal">女神：谢谢啊，你是个好人（发好人卡！）</p>
<p class = "important">小花：你也是我最重要的人。</p>
calssname命名规则:
1.必须以字母A-Z或者a-z开头
2.可以是以下字符：字母(A-Za-z),数字(0-9),横杆("-"),下滑线("_")
3.在HTML中，类名是区分大小写的
HTML 4.01与HTML5之间的差异
HTML5：class可以用于html任何元素（它会验证任何html5。但不一定是有用的）
HTML 4.01: class不能用于:<base>,<head>,<html>,<meta>,<param>,<script>,<style>和<title>。
contenteditable(定义元素是否可编辑 语法:<element contenteditable = "true|false">)
<p contenteditable = "true">来啊，大爷快来点我啊，啪，爸爸的爸爸叫爷爷，爸爸的妈妈叫奶奶...</p>
注意：该属性可继承，即当元素中没有设置contenteditable属性时，元素将从父元素继承。
HTML 4.01与HTML5之间的差异
HTML5：ccontenteditable 属性是 HTML 新增的。
HTML 4.01: 无该属性。
contextmenu(右击元素显示上下文菜单 语法:<element contextmenu = "menu_id">)
<div contextmenu="mymenu">
<menuitem label="Refresh"></menuitem>
<menuitem label="Twitter"></menuitem>
</div>
注：目前主流浏览器都不支持该属性，menu_id是指需要打开的<menu>元素的id。
HTML 4.01与HTML5之间的差异
HTML5：contextmenu属性是 HTML 新增的。
HTML 4.01: 无该属性。
data-(嵌入自定义数据 语法：<element data-="somevalue">)
<ul>
<li data-animal-type="bird">我是鸟</li>
<li data-animal-type="fish">我是鱼</li>
<li data-animal-type="spider">我是蜘蛛</li>
</ul>
定义和用法
data-* 属性用于存储私有页面后应用的自定义数据。
data-* 属性可以在所有的 HTML 元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。
data-* 属性由以下两部分组成：
属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串
注意： 自定义属性前缀 "data-" 会被客户端忽略。
HTML 4.01 与 HTML5之间的差异
data-* 属性是 HTML5 新增的。
dir(决定文本方向 语法<element dir="ltr|rtl|auto">)
<p dir="rtl">文本方向从右到左！</p>
<p dir="ltr">文本方向从左到右！(默认)</p>
<p dir="auto">让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用。</p>
HTML 4.01 与 HTML5之间的差异
HTML5 ：任何的 HTML 元素 (它会验证任何HTML元素。但不一定是有用)。
HTML 4.01不能用于: <base>,'</br>', <frame>, <frameset>, '</hr>', <iframe>, <param>, 和 <script>。
draggable（是否可拖动 语法<element >）
未完待续。。。
网友评论