码农教程 - 一技在手,衣食无忧! tools

HTML 属性

❮ 上一节 下一节 ❯

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

HTML 属性

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

href 属性

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

示例

<a href="https://www.91xjr.com">Visit 91xjr</a>
亲自试一试 »

您将了解有关我们的链接的更多信息HTML 链接章节。

src 属性

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

示例

<img src="img_girl.jpg">
亲自试一试 »

有两种方法可以指定 URLsrc属性：

1. 绝对URL- 链接到另一个网站上托管的外部图片。例子：源="https://www.91xjr.com/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 属性

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

示例

<img src="img_girl.jpg" alt="Girl with a jacket">
亲自试一试 »

示例

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

<img src="img_typo.jpg" alt="Girl with a jacket">
亲自试一试 »

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

样式属性

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

示例

<p style="color:red;">This is a red paragraph.</p>
亲自试一试 »

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

语言属性

您应该始终包括lang里面的属性<html>标签，声明网页的语言。这是为了帮助搜索引擎和浏览器。

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

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

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

以下示例指定英语作为语言，美国作为国家/地区：

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

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

标题属性

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

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

示例

<p title="I'm a tooltip">This is a paragraph.</p>
亲自试一试 »

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

HTML 标准不要求属性名称小写。

标题属性（以及所有其他属性）可以用大写或小写编写，例如标题或者标题。

然而，W3C推荐HTML 中的小写属性，以及需要小写属性适用于 XHTML 等更严格的文档类型。

在 91xjr，我们始终使用小写属性名称。

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

HTML 标准不需要在属性值周围加上引号。

然而，W3C推荐HTML 中的引号，以及需要更严格的文档类型（如 XHTML）的引号。

好的：

<a href="https://www.91xjr.com/html/">Visit our HTML tutorial</a>

坏的：

<a href=https://www.91xjr.com/html/>Visit our HTML tutorial</a>

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

示例

<p title=About 91xjr>
亲自试一试 »

在 91xjr，我们总是在属性值周围使用引号。

单引号还是双引号？

属性值周围的双引号在 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属性定义有关元素的一些额外信息

HTML练习

通过练习测试一下

练习:

将 "tooltip" 添加到下面的段落中，并添加文本 "About 91xjr"。

<p ="About 91xjr">91xjr is a web developer's site.</p>

开始练习

HTML 属性参考

每个 HTML 元素的所有属性的完整列表列在我们的：HTML 属性参考。


❮ 上一节 下一节 ❯