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> 标签还应该包含  widthheight 属性,用于指定图像的宽度和高度(以像素为单位):

例子

<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)即可以用大写也可以用小写字母,如 titleTITLE。但是,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> 标签的 widthheight 属性指示图像显示时的宽度和高度
  • <img> 标签的 alt 属性为图像加载失败的时候提供替代文本
  • style 属性用于为元素添加样式,例如颜色、字体、大小等
  • <html> 标签的 lang 属性声明了网页的语言
  • title 属性定义了一些关于元素的额外信息,用以提示