HTML5 – 属性

在 HTML5 中，属性是一种用于添加附加信息、指定元素行为或修改元素外观的标记。属性的作用是为了定制化 HTML 元素的行为和表现。本文将会对 HTML5 中的常用属性进行详细介绍。

1. 属性的语法

任何 HTML 元素都可以具有属性。属性通常是一个名称和一个值之间的键值对结构，其中名称和值之间使用等号 = 连接。例如：

<a href="www.google.com">Visit Google</a>

上述代码中，<a href="www.google.com"> 中的 href 就是一个属性，它的值是 "www.google.com"。

值得注意的是，属性名是不区分大小写的。这意味着 class 和 CLASS 在使用时是等价的。

2. 常用属性

2.1 id

id 属性定义了元素的唯一标识。在一个 HTML 文档中，不能有两个具有相同 id 属性的元素。id 属性可用于 JavaScript 或 CSS 中，通过 getElementById 或者 #id 选择器访问该元素。

<div id="myDiv">This div has an id of myDiv</div>

在 JavaScript 中，可以使用以下方法访问该元素：

const myDiv = document.getElementById("myDiv");

2.2 class

class 属性允许给 HTML 元素定义一个或多个类名。类名可以在 CSS 中用于定义样式。一个元素可以同时拥有多个类名，并用空格来分隔它们。

<p class="highlight">This paragraph has a class of highlight</p>

在 CSS 中，可以使用以下方式访问该元素：

.highlight {
  background-color: yellow;
}

2.3 title

title 属性为元素提供了一个“提示”或“工具提示”，即鼠标悬停在元素上时出现的文本。通常，title 属性用于提供元素的额外信息。

<span title="This is a tooltip">This element has a tooltip</span>

2.4 href

href 属性指定链接目标的 URL，它通常用于 <a> 元素和 <link> 或 <base> 标签。对于 <a> 元素，href 属性将 URL 目标设置为当前文档的某个位置，而对于 <link> 和 <base> 标签，href 属性定义了要链接的外部资源的 URL。

<a href="https://www.baidu.com">Visit Baidu</a>

2.5 src

src 属性指定元素要嵌入的外部文件的 URL，例如图片、音频、视频等等。通常，src 属性用于 <img>, <audio> 和 <video> 等元素。

<img src="https://www.example.com/image.jpg" alt="A beautiful image">

2.6 alt

alt 属性定义了当图像不能被加载时要显示的替代文本。替代文本可以让搜索引擎更好地理解图片内容，同时也有助于辅助技术用户（如残障人士）理解页面的内容。此外，如果浏览器无法加载图片，alt 属性也可以用于显示一段文本代替图片。

<img src="https://www.example.com/image.jpg" alt="A beautiful image">

2.7 width / height

width 和 height 属性分别定义了图像、表格单元格、按钮和其他元素的宽度和高度。对于图像来说，这两个属性还支持百分比单位。

<img src="https://www.example.com/image.jpg" alt="A beautiful image" width="300" height="200">

2.8 style

style 属性用于为元素指定内联样式。内联样式可以直接在元素上指定，而不需要在样式表中定义。style 属性通常用于微调元素的视觉效果。

<div style="background-color: #ffc107; color: #fff;">This div has an inline style</div>

2.9 data-*

data-* 属性用于自定义 HTML 元素，以便于为 JavaScript 提供数据属性。任何自定义属性都必须以 data- 为前缀。

<div data-id="12345">This is a custom div</div>

在 JavaScript 中，可以使用以下方式访问该元素的 data-* 属性：

const customElement = document.querySelector("[data-id='12345']");

3. 全局属性

除了上述提到的 HTML 元素特定属性之外，HTML5 还提供了一组全局属性，适用于所有 HTML 元素。这些属性包括：

3.1 class

在全局属性中，class 属性可以用于任何 HTML 元素，并提供了定义一个或多个类名的方式。

3.2 id

id 属性也可以用于任何 HTML 元素，用于指定元素的唯一标识符。

3.3 tabindex

tabindex 属性指定了当前元素的 tab 键顺序。如果元素不是一个表单控件，此属性可以通过 JavaScript 使元素获得焦点。此外，元素的默认顺序是按照文档顺序排列。

<div tabindex="1">This div can be focused with the tab key</div>

3.4 accesskey

accesskey 属性可以用于任何 HTML 元素，用于定义一个可以触发元素的快捷键。按下键盘上的快捷键，即可焦点当前元素。

<button accesskey="B">Click</button>

3.5 contenteditable

contenteditable 属性在任何 HTML 元素上都可以使用。如果将其设置为 true，则该元素的内容可以被用户编辑。此属性一般不推荐使用，因为使元素的内容可编辑会降低其可访问性。

<p contenteditable="true">This paragraph is editable</p>

结论

本文对 HTML5 中的常用属性进行了详细介绍，这些属性使得元素可以通过属性来实现自定义表现和行为。熟练掌握这些属性可以使你更加高效地定制和优化你的 HTML 元素，同时还能够提升页面的交互性和可访问性。