属性

达摩流浪者

元素也可以具有属性。属性看起来像这样：

我的猫非常脾气暴躁＆amp; amp; amp; amp; amp; lt; / p>" src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-attribute-small.png" width="1287" height="156" loading="lazy" style="box-sizing: border-box; max-width: 100%; display: block; height: auto; margin-right: auto; margin-left: auto; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;">

属性包含有关元素的额外信息，这些信息不会出现在内容中。在此示例中，class属性是用于使用样式信息将元素作为目标的标识名称。

属性应具有：

• 它和元素名称之间的空格。（对于具有多个属性的元素，属性也应使用空格分隔。）
• 属性名称，后跟等号。
• 属性值，用左引号和右引号引起来。
  

主动学习：向元素添加属性

元素的另一个示例是<a>。这代表锚点。锚点可以使包含在其中的文本成为超链接。锚点可以采用多种属性，但其中一些如下：

• href：此属性的值指定链接的网址。例如：href="https://www.mozilla.org/"。
• title：该title属性指定有关链接的其他信息，例如，要链接到的页面的描述。例如，title="The Mozilla homepage"。当光标悬停在元素上时，这将显示为工具提示。
• target：该target属性指定用于显示链接的浏览上下文。例如，target="_blank"将在新选项卡中显示链接。如果要在当前选项卡中显示链接的内容，只需忽略此属性。
  

在“输入”区域中编辑下面的行，以将其转换为指向您喜欢的网站的链接。

• 添加<a>元素。
• 添加href属性和title属性。
• 指定target属性以在新选项卡中打开链接。
  

您将能够在“输出”区域中实时查看所做的更改更新。您应该看到一个链接（将鼠标悬停在该链接上）将显示title属性的值，并在单击该链接时 导航到该href属性中的网址。请记住，您需要在元素名称之间以及每个属性之间包含一个空格。

如果输入有误，可以随时使用“重置”按钮将其重置。如果您确实遇到问题，请按“显示解决方案”按钮以查看答案。

布尔属性

有时，您会看到没有值的属性。这是完全可以接受的。这些称为布尔属性。布尔属性只能有一个值，该值通常与属性名称相同。例如，考虑disabled可以分配给表单输入元素的属性。（您可以使用它来禁用表单输入元素，以便用户无法输入。被禁用的元素通常具有灰色外观。）例如：

<input type="text" disabled="disabled">

作为简写，可以这样编写：

<!-- using the disabled attribute prevents the end user from entering text into the input box --><input type="text" disabled><!-- text input is allowed, as it doesn't contain the disabled attribute --><input type="text">

作为参考，上面的示例还包含一个非禁用的表单输入元素。上面示例的HTML产生以下结果：

省略属性值周围的引号

如果您查看许多其他站点的代码，则可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在某些情况下允许这样做，但在其他情况下也可能破坏您的标记。例如，如果我们从前面回顾链接示例，则可以编写仅包含href属性的基本版本，如下所示：

<a href=https://www.mozilla.org/>favorite website</a>

但是，一旦我们title以这种方式添加属性，就会出现问题：

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

如上所述，浏览器曲解写入的标记，误将title属性为三个属性：与所述值的标题属性的，和两个布尔属性，Mozilla和homepage。显然，这不是故意的！如下面的实时示例所示，这将导致错误或意外行为。尝试将鼠标悬停在链接上以查看标题文本！

始终包含属性引号。它避免了此类问题，并导致了更具可读性的代码。

单引号还是双引号？

在本文中，您还将注意到属性用双引号引起来。但是，您可能会在某些HTML代码中看到单引号。这是一个风格问题。您可以随意选择自己喜欢的一种。这两条线是等效的：

<a href="http://www.example.com">A link to my example.</a><a href='http://www.example.com'>A link to my example.</a>

确保不要混用单引号和双引号。此示例（如下）显示了一种混合引号，该引号将出错：

<a href="http://www.example.com'>A link to my example.</a>

但是，如果使用一种引号，则可以在属性值中包括另一种引号：

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

要在相同类型的其他引号（单引号或双引号）中使用引号，请使用HTML实体。例如，这将中断：

<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>

相反，您需要执行以下操作：

<a href='http://www.example.com' title='Isn&apos;t this fun?'>A link to my example.</a>