HTML 属性

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


HTML 属性

  • HTML 元素可以设置 属性
  • 属性可以在元素中添加 附加信息
  • 属性一般描述于 开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"

href 属性

<a> 标签用于定义HTML 链接。 链接的地址在 href 属性中指定:

实例

<a href="https://www.w3ccoo.com">访问 W3Schools</a>
尝试一下 »

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


src 属性

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

实例

<img src="img_girl.jpg">
尝试一下 »

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

1. 绝对URL - 链接到另一个网站上的一个图像。 比如: src="https://www.w3ccoo.com/images/img_girl.jpg".

注意: 外部图像可能受版权保护。如果你没有得到使用它的许可,你可能违反了版权法。此外,您无法控制外部图像;它可能会突然被删除或更改。

2. 相对URL - 链接到网站中托管的图像。在这里,URL不包括域名。如果URL开头没有斜杠,它将相对于当前页面。 比如: src="img_girl.jpg". 如果URL以斜杠开头,它将是相对于当前域名的。 Example: src="/images/img_girl.jpg".

注意: 使用相对URL几乎总是最好的。如果您更改域,它们将不会中断。


width和height属性

<img> 标签还应包含 width height 属性,该属性指定图像的宽度和高度(以像素为单位):

实例

<img src="img_girl.jpg" width="500" height="600">
尝试一下 »

alt 属性

如果由于某种原因无法显示图像,则<img> 标签的 alt 属性指定图像的备用文本。 这可能是由于连接速度慢,或者src属性中的错误,或者如果用户浏览器异常。

实例

<img src="img_girl.jpg" alt="穿夹克的女孩">
尝试一下 »

实例

看看如果试图显示一个不存在的图像会发生什么:

<img src="img_typo.jpg" alt="穿夹克的女孩">
尝试一下 »

您可以在 HTML Images chapter 一章中了解更多有关图像的信息。



style 属性

style 属性用于设置样式,如颜色、字体、大小等。

实例

<p style="color:red;">这是一个红色的段落。</p>
尝试一下 »

您可以在 a href="html_styles.html">HTML 样式章节 中了解更多有关样式的信息。


lang 属性

<html>标记中包含lang属性,以声明网页的语言。这是为了帮助搜索引擎和浏览器。

以下示例指定国家代码为英语:

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

国家代码也可以添加到lang 属性中。前两个字符定义HTML页面的语言,后两个字符定义国家。

以下示例指定英语为语言,国家为美国:

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

了解更多有关信息: HTML 语言代码参考


title 属性

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

当您将鼠标移到元素上时,title属性的值将显示提示:

实例

<p title="我是一个工具提示">这是一个段落。</p>
尝试一下 »

建议:始终使用小写属性

属性和属性值对大小写不敏。 title 等同 TITLE

不过,W3C建议在HTML中使用小写属性,对于更严格的文档类型(如XHTML)要求使用小写属性。

在 W3Schools 将使用小写的属性名。


建议: 属性要常用属性值

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

但是,W3C建议在HTML中使用引号,并对XHTML要求更严格的文档类型中使用引号。

正确:

<a href="https://www.w3ccoo.com/html/">访问我们的 HTML 教程</a>

错误:

<a href=https://www.w3ccoo.com/html/>访问我们的 HTML 教程</a>

以下实例必须使用引号。否则无法正确显示"title"属性,因为它包含空格:

实例

<p title=关于 W3Schools>
尝试一下 »

 在 W3Schools 将在属性值周围使用引号。


单引号还是双引号?

双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

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

反之亦然:

<p title="John 'ShotGun' Nelson">
尝试一下 »

章节摘要

  • 所有HTML元素都可以有属性
  • href 属性指定链接指向的页面的URL
  • src 属性指定要显示图像的路径
  • widthheight 属性提供图像宽高信息
  • alt 属性为图像提供备用文本
  • style 属性用于向元素添加样式,例如颜色、字体、大小等
  • lang 属性声明网页的语言
  • title 属性定义了有关元素的一些额外信息

HTML 实验

学习训练

习题:

在下面的段落中添加 "tooltip",文字为 "About W3Schools".

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

开始练习


HTML 属性参考手册

HTML 元素所有属性的完整列表:HTML 属性参考手册