HTML 元素提供的附加信息--属性 ——WEB开发系列03

HTML 属性是指用于描述 HTML 元素的额外信息，它们提供了元素的特定配置或行为，属性通常包含在 HTML 元素的开始标签中。

---

元素也可以拥有属性，属性看起来像这样：

属性是元素的附加信息，它们不会显示在实际内容中。在前述例子中，class 属性是用于标识元素的名称，便于在以后应用样式信息时识别和操作该元素。

属性必须包含：

• 必须有一个空格，位于属性名称和元素名称之间。如果元素有多个属性，每个属性之间必须用空格分隔。
• 属性名称后必须紧跟一个等号。
• 属性值必须被一对双引号（""）括起来。

一、为元素添加属性

要为元素添加属性时，可以使用以下例子：

1. 添加链接的 href 属性：

登录后复制

<a href="https://example.com">这是一个链接</a>

• 1.

在这个例子中，<a> 元素使用了 href 属性，指定了链接的目标地址为 https://example.com。

2. 添加图片的 src 和 alt 属性：

登录后复制

<img src="image.jpg" alt="描述性文本">

• 1.

这个例子中的 <img> 元素有两个属性：src 属性指定了要显示的图像文件路径为 image.jpg，alt 属性提供了图像的描述性文本。

---

二、属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

编辑下面的文本框中的内容，使之变成指向任一个你喜欢的 web 地址的链接。

1. 添加 <a> 元素。
2. 添加 href 属性和 title 属性。
3. 指定 target 属性，使得点击链接时在新标签页打开。

实例

登录后复制

<a href="https://blog.51cto.com/">这是一个链接</a>

• 1.

---

三、布尔属性

有时你会遇到没有设置值的属性，这种情况是完全合法的。这些属性被称为布尔属性，因为它们要么存在（即属性名本身就是属性值），要么不存在。

例如，考虑 disabled 属性，你可以将其应用于表单输入元素。通过设置 disabled 属性，可以禁用表单输入元素，从而阻止用户进行输入。被禁用的元素通常显示为灰色外观。

下面是一个示例：

登录后复制

<input type="text" disabled>

• 1.

在这个例子中，disabled 属性被应用于文本输入框，使其不可用状态，用户无法在其中输入内容。

作为参考，上面的例子还包括一个非禁用的表单输入元素。上面两段 HTML 代码产生的效果如下：

登录后复制

<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled />

<!-- 下面这个输入框不包含 disabled 属性，所以用户可以向其中输入 -->
<input type="text" />

• 1.
• 2.
• 3.
• 4.
• 5.

---

四、省略包围属性值的引号

或许你浏览了许多其他网站的代码，遇到一些奇怪的标记风格，比如没有使用引号包裹属性值的情况。尽管在某些情况下这是允许的，但在其他情况下可能会破坏你的标记。举例来说，对于之前提到的链接示例，可以这样写一个只有 href 属性的版本：

登录后复制

<a href=https://www.baidu.com/>favorite website</a>

• 1.

然而，再添加一个 title 属性时，就会出现问题：

登录后复制

<a href=https://www.baidu.com/ title=The unique passage>favorite website</a>

• 1.

在这种情况下，浏览器会误解你的标记。它可能会将 title 属性误解为三个属性的组合——title 的属性值为 "The"，以及两个布尔属性 unique 和 passage。显然，这不是期望的结果，这样的编码会导致错误或者异常行为。如果你将鼠标移到链接上，尝试看一下会显示什么样的 title 文字！

建议始终添加引号，可以避免很多问题，并且使代码更易读。

---

五、使用单引号还是双引号？

在目前为止，所有的属性都是由双引号引用。也许在一些 HTML 中也有单引号。这只是风格的问题，你可以从中选择一个你喜欢的。以下两种情况都可以：

登录后复制

<a href='https://www.baidu.com'>示例站点链接</a>

<a href="https://www.baidu.com">示例站点链接</a>

• 1.
• 2.
• 3.

但应该注意单引号和双引号不能在一个属性值里面混用。下面的语法是错误的：

登录后复制

<a href="https://www.baidu.com'>示例站点链接</a>

• 1.

---

六、HTML 属性参考

适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名
id	定义元素的唯一id
style	规定元素的行内样式
title	描述了元素的额外信息

---

注意：

属性和属性值，尽量小写，本来这样做也方便些。

class 属性可以多用 class=" " （引号里面可以填入多个class属性）

id 属性只能单独设置 id=" "（只能填写一个，多个无效）

---

如有表述错误及欠缺之处敬请批评指正。

原创作者: wamtar 转载于: https://blog.51cto.com/wamtar/11688977