HTML 属性

HTML 属性

HTML 属性是附加在 HTML 元素之上的特征,用来辅助说明标签的样式或者效果,例如图像的显示宽高。属性总是出现在元素起始标签的内部,通常由一组键值对构成,属性值应该始终用引号包裹起来。例如:

<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>

每个标签都可以包含多个不同属性,例如上面代码中的 img 元素,就包含四个属性值。属性值既可以用双引号,也可以用单引号,不过在 HTML 书写中,推荐使用双引号。

除了代码中常用的键值对属性外,还有一种布尔属性。这种布尔属性可以仅仅包含键:

<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>

默认包含这些属性都为 true,不包含为 false。

属性值通常也不区分大小写,不过有一些属性可能会和 javascript 交互(例如 id,class),这就可能涉及区分大小的问题,W3C 推荐大家都是用小写字母,避免不必要的麻烦。

全局属性

全局属性是所有 HTML 元素共有的属性,它们可以应用于所有元素,不过可能在某些元素上不会产生任何的影响。常见的全局属性包括 idtitleclassstyledata-*lang 等等。

除了上面最基本的全局属性之外,还存在下面的全局属性:

  • xml:langxml:base,这些是从 XHTML 规范继承而来的,已经弃用,但是处于兼容性考虑暂时保留。
  • ARIA(Accessible Rich Internet Applications)无障碍相关的属性,以 aria- 开头,主要是便于残障人士访问。
  • 事件处理属性,如:onabortonclickondrag 等等,主要是为了和 Javascript 结合,处理一些特殊的行为动作。

下面简单的介绍一下常用的全局属性:

id 属性

id 属性是文档中用来标记唯一元素的方式,一般用于某些独立组件的定位。在 CSS 中可以通过 id 值来修改元素样式,不过这里并不是很推荐,因为 id 属性在 CSS 里面优先级较高,绑定样式之后很难覆盖重用。

id 元素在 HTML 文档中应该是唯一的,当然如果在生产环境中出现多个 id 值,浏览器可能也不会报错,但是在使用 Javascript 进行交互的时候可能无法准确的定位元素的位置。

使用方法如下:

<input type="text" id="firstName">
<div id="container">Some content</div>
<p id="infoText">This is a paragraph.</p>

class 属性

class 属性和 id 属性基本类似,唯一的区别是 class 属性可以同时存在多个。可以使用 CSS 属性修改 class 的样式,所有包含同一种 class 属性的 HTML 元素,它们的样式会同时被修改。

使用方式如下:

<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>

title 属性

title 属性可以修饰元素的默认提示,当然最终的行为取决于具体的元素,不过大部分元素设置该属性之后,当光标移植该属性之上的时候,会有对应的提示效果:

<p title="hello">Hello World!<p>
标题属性

style 属性

style 属性允许你直接指定元素的 CSS 样式规则,该样式具有最高的优先级,可覆盖大多数的其它样式属性。具体使用方式如下:

<p style="color: blue;">This is a paragraph.</p>
<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">Some content</div>

data-* 属性

这是一种自定义属性,其中星号部分是可以开发人员自定义的,这些属性可以通过 HTMLElement.dataset 来访问,主要作用是为了方便的进行数据交互,你可以很容易的在 Javascript 中操作它们。

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

lang 属性

该属性主要是帮助浏览器理解元素的语言。该属性内部包含了具体的语言标签,其格式可以查看标准文档。这个属性的优先级高于文档设置的 xml:lang 属性。

<html lang="en"></html>

私有属性

私有属性不同的元素差异较大,并且不是所有元素都具有私有属性。接下来的章节中有必要的时候顺带介绍一下就好。

大佬,给点反馈?

平均评分 / 5. 投票数:

很抱歉,这篇文章不能帮助到你

请让我们改进这篇文章

告诉我们我们如何改善这篇文章?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top