风雨后见彩虹
风雨后见彩虹

小tips：HTML元素属性分类以及不常用属性介绍

HTML元素属性分类

全局属性和局部属性

属性可以分为两类：全局属性和局部属性。 其中全部元素都能使用的通用属性称为全局属性。只能运用在某些特定元素的属性，称为局部属性，例如form的action属性、textarea的rows属性等。

全局属性可简单分为5种，如下：

  • HTML4原有的全局属性accesskey、class、dir、hidden、id、lang、style、tabindex和title
  • HTML5新增的全局属性有contenteditable、contextmenu、draggable、dropzone和spellcheck
  • ARIA属性，即无障碍网页应用属性，也是一种全局属性。
  • 事件属性（event attribute），都是以“on”为前缀，例如onclick、onmousedown等。
  • 自定义属性（custome attribute），通常以“data-” 为前缀。

不常用属性介绍

下面对不常用的属性简单介绍下

1.accesskey（带有指定快捷键的超链接）

accesskey 属性规定激活（使元素获得焦点）元素的快捷键。

accesskey几乎所有浏览器均 accesskey 属性，除了 Opera。

<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML 教程a>

注释：请使用Alt + accessKey (或者 Shift + Alt + accessKey) 来访问带有指定快捷键的元素。

详细可参考《HTML accesskey 属性》

2.dir属性（规定元素内容的文本方向）

语法：

<element dir="ltr|rtl">
  • ltr:默认。从左向右的文本方向。
  • rtl:从右向左的文本方向。

详细可以参考《HTML dir 属性》

3.tabindex 属性

规定元素的 tab 键控制次序（当 tab 键用于导航时）

语法：

<element tabindex="number">

示例,带有指定 tab 键顺序的链接：

<a href="http://www.w3school.com.cn/" tabindex="2">W3Schoola>
<a href="http://www.google.com/" tabindex="1">Googlea>
<a href="http://www.microsoft.com/" tabindex="3">Microsofta>

几乎所有浏览器均 tabindex 属性，除了 Safari

详细可参考《HTML tabindex 属性》

4.dropzone 属性

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

语法：

<element dropzone="copy|move|link">

目前所有主流浏览器都不支持 dropzone 属性。

5.spellcheck 属性

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

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

  • input 元素中的文本值（非密码）