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 :
-
绝对 URL - 链接到托管在另一个网站上的外部图像。示例:
src="https://www.gobeta.net/images/img_girl.jpg"
。 -
相对 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
属性定义了一些关于元素的额外信息,用以提示