On this page

HTML 属性

category: HTML / CSS

HTML 属性提供有关 HTML 元素的附加信息。

HTML 属性

  • 所有 HTML 元素都可以有属性
  • 属性提供有关元素的附加信息
  • 属性始终在开始标记中指定
  • 属性通常以名称/值对的形式出现，例如：name="value"

href 属性

该<a>标签定义了一个超链接。该 href属性指定链接转到的页面的 URL：

例子

<a href="https://www.codewhy.net/">Visit codewhy.net</a>

src 属性

该<img>标签用于在 HTML 页面中嵌入图像。该src属性指定要显示的图像的路径：

例子

<img src="code.jpg">

有两种方法可以在属性中指定 URL src ： 1. 绝对 URL - 链接到另一个网站上托管的外部图像。示例：src="https://www.codewhy.net/images/img_girl.jpg"。 注意：外部图像可能受版权保护。如果您未获得使用许可，则可能会违反版权法。此外，您无法控制外部图像；它可能会突然被删除或更改。 2. 相对 URL - 链接到网站内托管的图像。这里，URL不包含域名。如果 URL 开头没有斜杠，则它将相对于当前页面。示例：src="img_girl.jpg"。如果 URL 以斜杠开头，则它将相对于域。示例：src="/images/img_girl.jpg"。 提示：使用相对 URL 几乎总是最好的。如果您更改域，它们不会中断。

宽度和高度属性

该<img>标签还应包含 width和&nbsp;height属性，它们指定图像的宽度和高度（以像素为单位）：

例子

<img src="img_girl.jpg" width="500" height="600">

alt 属性

如果由于某种原因无法显示图像，则标记的必需alt属性<img> 指定图像的替代文本。这可能是由于连接速度慢、属性错误src或者用户使用屏幕阅读器造成的。

例子

<img src="img_codewhy.jpg" alt="codewhy image">

例子

看看如果我们尝试显示不存在的图像会发生什么：

<img src="img_typo.jpg" alt="Girl with a jacket">

样式属性

该style属性用于向元素添加样式，例如颜色、字体、大小等。

例子

<p style="color:red;">This is a red paragraph.</p>

语言属性

您应该始终在标记lang内包含该属性<html>，以声明网页的语言。这是为了帮助搜索引擎和浏览器。 以下示例指定英语作为语言：

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

国家/地区代码也可以添加到lang 属性中的语言代码中。因此，前两个字符定义 HTML 页面的语言，最后两个字符定义国家/地区。 以下示例指定英语作为语言，美国作为国家/地区：

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

标题属性

该title属性定义了有关元素的一些额外信息。 当您将鼠标悬停在元素上时，标题属性的值将显示为工具提示：

例子

<p title="I'm a tooltip">This is a paragraph.</p>

我们建议：始终使用小写属性

HTML 标准不要求属性名称小写。 title 属性（以及所有其他属性）可以用大写或小写形式编写，如title或TITLE。 然而，W3C建议在 HTML 中使用小写属性，并要求 XHTML 等更严格的文档类型使用小写属性。

我们建议：始终引用属性值

HTML 标准不需要在属性值周围加上引号。 然而，W3C建议在 HTML 中引用，并要求对 XHTML 等更严格的文档类型进行引用。

好的：

<a href="https://www.codewhy.net/html/">Visit codewhy HTML tutorial</a>

坏的：

<a href=https://www.codewhy.net/html/>Visit codewhy HTML tutorial</a>

有时你必须使用引号。此示例将无法正确显示 title 属性，因为它包含空格：

例子

<p title=About codewhy.net>

单引号还是双引号？

属性值周围的双引号在 HTML 中最常见，但也可以使用单引号。 在某些情况下，当属性值本身包含双引号时，需要使用单引号：

<p title='John "ShotGun" Nelson'>

或相反亦然：

<p title="John 'ShotGun' Nelson">

章节总结

  • 所有 HTML 元素都可以有属性
  • href的属性指定<a>链接转到的页面的 URL
  • src的属性指定<img>要显示的图像的路径
  • 和属性提供图像的尺寸width信息height<img>
  • alt的属性为<img>图像提供替代文本
  • 该style属性用于向元素添加样式，例如颜色、字体、大小等
  • lang标签的属性声明<html>网页的语言
  • 该title属性定义了有关元素的一些额外信息