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

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

---

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

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

属性必须包含：

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

一、为元素添加属性

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

​

1. 添加链接的 href 属性：

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

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

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

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

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

---

二、属性实例

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

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

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

实例

<a href="https://www.csdn.net/">这是一个链接</a>

---

三、布尔属性

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

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

下面是一个示例：

<input type="text" disabled>

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

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

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

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

---

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

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

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

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

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

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

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

---

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

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

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

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

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

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

---

六、HTML 属性参考

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

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

---

注意：

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

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

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

---

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