HTML5：元素的属性

最新推荐文章于 2024-06-13 23:03:45 发布

tomato__

最新推荐文章于 2024-06-13 23:03:45 发布

阅读量3.5k

点赞数 4

分类专栏： html 文章标签： html html5 web

本文链接：https://blog.csdn.net/tomato__/article/details/50419997

版权

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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中的效果如下：

tomato__

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
HTML5：元素的属性

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

扫一扫

专栏目录