HTML 属性

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

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

HTML 属性

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

href 属性

<a> 标签定义了一个超链接，href 属性指定链接指向的页面（或图像，或其他文件）的 URL：

例子

<a href="https://www.gobeta.net">Visit GoBeta.Net</a>

您可在我们的HTML 链接一章中了解有关链接的更多信息。

src 属性

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

例子

<img src="img_girl.jpg" />

有两种方法可以在 src  属性中指定 URL ：

  1. 绝对 URL - 链接到托管在另一个网站上的外部图像。示例：src="https://www.gobeta.net/images/img_girl.jpg"。

  2. 相对 URL - 指向网站内托管的图像的链接。此处，URL 不包含域名。如果 URL 开头没有斜线，则它将相对于当前页面，例如：src="img_girl.jpg"。如果 URL 以斜杠开头，则它将相对于整个网站的根目录，例如：src="/images/img_girl.jpg"。

! **提示：**一般情况下，使用相对 URL 是最好的选择。如果您更改了域名，它们不会受到影响。

宽度和高度属性

上述的 <img> 标签还应该包含  width 和 height 属性，用于指定图像的宽度和高度（以像素为单位）：

例子

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

alt 属性

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

例子

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

例子

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

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

您将在我们的HTML 图像一章中了解有关图像的更多信息。

style 属性

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

如下例子，定义了文本你的颜色是红色 red。

<p style="color:red;">这一段文字的颜色是红色的。</p>

您将在我们的HTML 样式一章中了解有关样式的更多信息。

lang 属性

为了声明网页的语言，您应该在 <html> 标签内使用 lang 属性。这是为了帮助搜索引擎和浏览器正确理解网页的语言和正确的显示。

以下示例将英语指定为语言：

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

国家/地区代码也可以添加到 lang 属性中的语言代码中，这种情况下，前两个字符定义 HTML 页面的语言，后两个字符定义国家/地区。

比如 zh-CN 中， zh 表示的是中文， CN 表示的中国大陆。 浏览器看到 zh-CN 会理解成简体中文。以下示例将中文指定为语言，将中国指定为国家/地区：

<!DOCTYPE html>
<html lang="zh-CN">
  <body>
    ...
  </body>
</html>

您可以在我们的 HTML 语言代码参考中查看所有语言代码  。

title 属性

title 属性定义了一些关于元素的额外信息。

当您将鼠标悬停在元素上时，title 属性的值将显示为提示：

例子

<p title="鼠标放在这段话上会显示我哦">这是一段话。</p>

始终使用小写属性

虽然 HTML 标准中属性名称不需要区分大小写，所有属性（比如 title）即可以用大写也可以用小写字母，如 title 或 TITLE。但是，W3C 建议在 HTML 中使用小写属性，在更严格的文档类型（如 XHTML）中强制使用小写属性。

始终用引号包裹属性值

HTML 标准不需要在属性值周围加引号，但是，W3C建议在 HTML 中使用引号，在更严格的文档类型（如 XHTML）中强制使用引号。

好的

<a href="https://www.gobeta.net/tutorials/html">HTML 教程</a>

不好的

<a href=https://www.gobeta.net/tutorials/html>HTML 教程</a>

下面的例子不使用引号导致不能正确的显示 title 值，因为中间有一个引号。

<p title="About" US></p>

单引号还是双引号？

在 HTML 中属性值最常使用的是双引号，但也可以使用单引号。

在某些情况下，当属性值本身包含双引号时，就需要使用单引号：

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

反之亦然：

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

总结

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