最近看了一下 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>)
未完待续...
来源: http://www.jianshu.com/p/2e736497edd4