HTML5：元素的属性

来源：互联网发布：武汉淘宝外包编辑：程序博客网时间：2024/06/04 18:51

HTML文档中包含了各种各样的元素，同时元素还可以用属性（attribute）进行配置，一个元素可以配置一个或者多个属性，例如：
I like <a class="link" href="/apples.html" id="firstlink">apples</a> and oranges.
class、href和id都是a元素的属性，属性包通常含属性名称和值两个部分，属性只能用在开始标签或单个标签上，不能用于结束标签。
有些属性可以省略值的部分，用于表示true和false，称为布尔属性。HTML也支持用户的自定义属性，也称为扩展属性。

元素的属性从属性的范围上可以分为全局属性和局部属性，全局属性可以用于所有HTML元素，局部属性则是某些元素所特有的。

布尔属性

布尔属性只需要将属性名称添加到元素中即可：

Enter your name: <input disabled>

disabled属性可以阻止用户输入数据。你也可以为布尔属性指定一个空字符串（""）或属性名称字符串作为其值也有同样的效果：

Enter your name: <input disabled="">Enter your name: <input disabled="disabled">

自定义属性

用户也可以自定义属性（或者扩展属性），自定义属性必须以data-开头。

Enter your name: <input disabled="true" data-creator="adam" data-purpose="collection">

HTML通常会忽略这些自定义属性，在属性名称之前添加前缀data-是为了避免与HTML的未来版本中可能增加的属性名冲突。自定义属性通常与CSS和JavaScript结合使用。

局部属性

局部属性通常和每个元素对应，每个局部属性都可以用来控制元素都有都有行为的某个方面。在介绍每个元素时再做介绍。

全局属性

全局属性用来配置所有元素的共有的行为，可以用在任何一个元素身上。

accesskey属性

设定一个或几个用来选择页面上的元素的快捷键。

<body><form>name: <input type="text" name="name" accesskey="n"/><p/>Password: <input type="password" name="password" accesskey="p"/><p/><input type="submit" value="Log In" accesskey="s"/></form></body>

上面的例子中设置了name输入框的快捷键：Alt+n；password输入框的快捷键：Alt+p；Log In按钮的快捷键：Alt+s。

class属性

class属性用来将元素归类，方便找出文档中某一类元素或为某一类元素应用CSS样式。

<body><a class="class1 class2" href="/apples.html">apples</a><p/><a class="class2 otherclass" href="http://w3d.org">W3C web site</a></body>

一个元素可以被归入多个类别，类名间用空格分隔。

contenteditable属性

这个是HTML5中新增的属性，作用是让用户能够修改页面上的内容。

<body><p contenteditable="true">It is raining right now</p></body>

该属性设置为true时用户可以编辑元素内容，用户单击那段文字后即可编辑其内容；设置为false时禁止编辑。

dir属性

该属性用来规定元素中文字的方向，有效值有：ltr（用于从左到右的文字）和rtl（用于从右到左的文字）。

<body><p dir="rtl">This is right-to-left</p><p dir="ltr">This is left-to-right</p></body>

draggable属性

是HTML5支持拖放操作的方式之一，用来表示元素是否可被拖放。

dropzone属性

也是HTML5支持拖放操作的方式之一，与draggable属性搭配使用。

hidden属性

布尔属性，表示相关元素当前毋需关注，浏览其通常是隐藏相关元素。

<body><table><tr><th>Name</th><th>City</th></tr><tr><td>Adam Freeman</td><td>London</td></tr><tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr><tr><td>Anne Jones</td><td>Paris</td></tr></table></body>

在上面的例子中，table的有一行数据设置了hidden属性，这行属性将不会显示。通常可以使用JavaScript添加或移除元素的hidden属性来显示或隐藏该元素。

id属性

用来给元素分配一个唯一的标识符，标识符通常被用于应用样式或者JavaScript逻辑到该元素。

<body><a id="w3clink" href="http://w3c.org">W3C web site</a></body>

lang属性

说明元素使用的语言。

<body><p lang="en">Hello - how are you?</p><p lang="fr">...</p><p lang="es">...</p></body>

lang属性值必须使用有效的ISO语言代码，可以参考网址：http://tools.ietf.org/html/bcp47。
使用lang的目的是让浏览器调整其表达元素内容的方式，比如：改变使用的引号，在使用了文字朗读器的情况下能正确发音，等。
lang属性还可以用来选择指定语言的内容，以便只显示用户所选语言的内容或对其应用样式。

spellcheck属性

用来表明浏览器是否应该对元素的内容进行拼写检查，该属性只有用在用户可以编辑的元素上才有意义。

<body><textarea spellcheck="true">This is some mispelled text</textarea></body>

该属性仅接受两个值：true（启用拼写检查）和false（禁用拼写检查），不过拼写检查的方式由浏览器决定。

style属性

用于直接在元素身上定义CSS样式。

<body><a id="w3clink" href="http://w3c.org" style="background:grey; color:white; padding:10px">W3C web site</a></body>

tabindex属性

HTML页面上的键盘焦点可以通过按Tab键在各个元素之间切换，用tabindex属性可以改变默认的切换顺序。

<body><form>name: <input type="text" name="name" tabindex="1"/><p/>Password: <input type="password" name="password" tabindex="-1"/><p/><input type="submit" value="Log In" tabindex="2"/></form></body>

tabindex值为-1的元素不会在用户按下Tab键后被选中，上面的实例中的tabindex设置后：按Tab键时，键盘焦点会直接从name输入框，跳到submit按钮。

title属性

title属性提供了元素的额外信息，浏览器通常用它显示工具提示。

<body><a title="W3C web site" href="http://w3c.org">W3C web site</a></body>

在Chrome中的效果如下：

3 0