HTML属性

简介

HTML属性是HTML元素中的特性，它们提供了额外的信息给浏览器或用户代理。属性总是包含在开始标签中，并且通常采用名称/值对的形式，比如<a href="https://www.example.com">，这里href是属性名，而https://www.example.com是属性值。

常见属性

class

class属性用于为HTML元素指定一个或多个类名。类名在CSS中用于为元素定义样式。

<div class="container">
  <p class="text-primary">Hello, world!</p>
</div>

id

id属性用于为HTML元素指定唯一的标识符。它通常被用作文档内部的跳转链接或JavaScript操作的目标。

<div id="header">
  <h1>My Website</h1>
</div>

src

src属性用于指定外部资源的URL，比如图片、音频、视频等。

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

href

href属性用于指定链接的URL。它可以指向另一个HTML文档、一个CSS文件、一个JavaScript文件，或者是一个外部站点上的页面。

<a href="https://www.example.com">Visit Example</a>

alt

alt属性用于为图片元素提供一段替代文本，如果图片无法加载，这段文本将会显示出来。

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

自定义属性

除了HTML规范中定义的属性外，开发者还可以自行定义属性。但是，为了避免与将来HTML规范中定义的属性冲突，自定义属性应该以data-开头。

<div data-id="123" data-author="John Doe">...</div>

在JavaScript中，可以使用dataset属性获取元素上的自定义属性。

const div = document.querySelector('div')
console.log(div.dataset.id) // 123
console.log(div.dataset.author) // John Doe

总结

HTML属性是HTML元素中的特性，它们提供了额外的信息给浏览器或用户代理。常见的属性有class、id、src、href和alt等。开发者还可以自行定义属性，但应该以data-开头，以避免与将来HTML规范中定义的属性冲突。