网页元素的属性

网道（WangDoc.com），互联网文档计划

简介 #

网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。元素属性的写法是 HTML 标签内部的“键值对”。

<html lang="en">

上面代码中，<html>标签内部的键值对lang="en"，就称为html元素的属性。属性名为lang，属性值为en。

属性名与标签名一样，不区分大小写，lang和LANG是同一个属性。

属性名与属性值之间，通过等号=连接。属性值可以放在单引号或双引号之中，建议统一使用双引号。某些属性值可以不使用引号，但是建议不要这样写。

有些属性是布尔属性，即属性值是一个布尔值，只有“打开”和“关闭”两种情况。这时属性值可以省略，只要添加了属性名，就表示打开该属性。

<input type="text" required>

上面代码中，required就是<input>标签的布尔属性。如果加上这个属性，就表示打开，没有就是关闭。

全局属性 #

全局属性（global attributes）是所有元素都可以使用的属性。也就是说，你可以把下面的属性，加在任意一个网页元素上面，不过有些属性对某些元素可能不产生意义。

下面是一些常见的全局属性。

id #

id属性是元素在网页内的唯一标识符。比如，网页可能包含多个<p>标签，id属性可以指定每个<p>标签的唯一标识符。

<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

上面代码中，三个<p>标签具有不同的id属性，因此可以区分。

id属性的值必须是全局唯一的，同一个页面不能有两个相同的id属性。另外，id属性的值不得包含空格。

id属性的值还可以在最前面加上#，放到 URL 中作为锚点，定位到该元素在网页内部的位置。比如，用户访问网址https://foo.com/index.html#bar的时候，浏览器会自动将页面滚动到bar的位置，让用户第一眼就看到这部分内容。

class #

class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。

<p class="para"></p>
<p></p>
<p class="para"></p>

上面代码中，第一个<p>和第三个<p>是一类，因为它们的class属性相同。

元素可以同时具有多个 class，它们之间使用空格分隔。

<p class="p1 p2 p3"></p>

上面的p元素同时具有p1、p2、p3三个 class。

title #

title属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。

<div title="版权说明">
  <p>本站内容使用创意共享许可证，可以自由使用。</p>
</div>

上面代码中，title属性解释了这一块内容的目的。鼠标悬停在上面时，浏览器会显示一个浮动提示。一旦鼠标移开，提示就会消失。

tabindex #

网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停按下 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。

这里就有一个问题，按下 Tab 键的时候，浏览器怎么知道跳到哪一个元素。HTML 提供了tabindex属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。

tabindex属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。

  • 负整数：该元素可以获得焦点（比如使用 JavaScript 的focus()方法），但不参与 Tab 键对网页元素的遍历。这个值通常是-1。
  • 0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。
  • 正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。如果多个元素的tabindex属性相同，则按照在网页源码里面出现的顺序遍历。
<p tabindex="0">这段文字可以获得焦点。</p>

上面代码中，<p>标签的tabindex为0，意味着该元素可以获得焦点，并且也可以被 Tab 键遍历，顺序由其在源码里面的位置决定。

一般来说，tabindex属性最好都设成0，按照自然顺序进行遍历，这样比较符合用户的预期，除非网页有特殊布局。如果网页所有元素都没有设置tabindex，那么只有那些默认可以遍历的元素（比如链接、输入框等）才能参与 Tab 键的遍历，顺序由其在源码的位置决定。因此实际上，只有那些无法获得焦点的元素（比如<span>、<div>）需要参与遍历，才有必要设置tabindex属性。

accesskey #

accesskey属性指定网页元素获得焦点的快捷键，该属性的值必须是单个的可打印字符。只要按下快捷键，该元素就会得到焦点。

<button accesskey="s">提交</button>

上面代码中，<button>的快捷键是s，按下快捷键，该元素就得到了焦点。

accesskey属性的字符键，必须配合功能键，一起按下才会生效。也就是说，快捷键是“功能键 + 字符键”的组合。不同的浏览器与不同的操作系统，功能键都不一样。比如，Chrome 浏览器在 Windows 系统和 Linux 系统的快捷键是Alt + 字符键，在 Mac 系统的快捷键是Ctrl + Alt + 字符键。

注意，accesskey如果跟操作系统或浏览器级别的快捷键有冲突，这时不会生效。

style #

style属性用来指定当前元素的 CSS 样式。具体的设置，请看 CSS 教程。

<p style="color: red;">hello</p>

上面代码指定文字颜色为红色。

hidden #

hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。

<p hidden>本句不会显示在页面上。</p>

上面代码中，这个p元素不会出现在网页上。

注意，CSS 的可见性设置，高于hidden属性。如果 CSS 设为该元素可见，hidden属性将无效。

lang，dir #

lang属性指定网页元素使用的语言。

<p lang="en">hello</p>
<p lang="zh">你好</p>

上面代码中，第一个<p>的lang属性，表示使用英语，第二个<p>的lang属性，表示使用中文。

lang属性的值，必须符合 BCP47 的标准。下面是一些常见的语言代码。

  • zh：中文
  • zh-Hans：简体中文
  • zh-Hant：繁体中文
  • en：英语
  • en-US：美国英语
  • en-GB：英国英语
  • es：西班牙语
  • fr：法语

dir属性表示文字的阅读方向，有三个可能的值。

  • ltr：从左到右阅读，比如英语。
  • rtl：从右到左阅读，阿拉伯语、波斯语、希伯来语都属于这一类。
  • auto：浏览器根据内容的解析结果，自行决定。

contenteditable #

HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。它有两个可能的值。

  • true或空字符串：内容可以编辑
  • false：不可以编辑
<p contenteditable="true">
鼠标点击，本句内容可修改。
</p>

上面代码中，鼠标单击句子，就可以进入编辑状态，用户可以改变句子的内容。当然，除非提交到服务器，否则刷新页面还是显示原来的内容。

该属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。

spellcheck #

浏览器一般会自带拼写检查功能，编辑内容时，拼错的单词下面会显示红色的波浪线。spellcheck属性就表示，是否打开拼写检查。

它有两个可能的值。

  • true：打开拼写检查
  • false：关闭拼写检查
<p contenteditable="true" spellcheck="true">
英语单词 separate 容易写错成 seperate。
</p>

上面代码中，seperate下面会有提示，表示拼错了。

注意，由于该属性只在编辑时生效，所以这个例子必须加上contenteditable属性，表示本段内容可编辑。鼠标单击就可以进入编辑状态，这时才会看到拼写提示。不可编辑的状态下，拼写错误是不提示显示的。对于那些不可编辑的元素，该属性无效。

这个属性看上去像布尔属性，但是其实是枚举属性，所以最好不要省略它的值。如果没有指定这个属性，浏览器将自行决定是否打开拼写检查。

data-属性 #

data-属性用于放置自定义数据。如果没有其他属性或元素合适放置数据，就可以放在data-属性。

<a href="#" class="tooltip" data-tip="this is the tip!">链接</a>

上面代码中，data-tip用于放置链接的提示文字。

由于data-属性只能通过 CSS 或 JavaScript 利用，所以这里不做详细介绍了。下面是 CSS 的例子。

/* HTML 代码如下
<div data-role="mobile">
Mobile only content
</div>
*/
div[data-role="mobile"] {
  display:none;
}

/* HTML 代码如下
<div class="test" data-content="This is the div content">test</div>​
*/
.test {
  display: inline-block;
}
.test:after {
  content: attr(data-content);
}

事件处理属性 #

除了上面这些属性，全局属性还包括事件处理属性（event handler），用来响应用户的动作。这些属性的值都是 JavaScript 代码，请参考 JavaScript 教程，这里只列出这些属性的名单。

onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

本教程采用知识共享 署名-相同方式共享 3.0协议。

分享本文