零基础学前端:精彩继续——HTML属性

244 阅读2分钟

HTML 属性

  • 所有 HTML 元素都可以具有属性
  • 属性提供有关元素的其他信息
  • 属性始终在 start 标记中指定
  • 属性通常以名称/值对的形式出现,例如:name=“value”

href属性

该属性一般在<a> 中使用,它指定了页面的URL的链接指向

<a href="https://www.w3schools.com">Visit W3Schools</a>

亲自试一试 »

src属性

<img>标签用于嵌入图像。src属性其指定要显示的图像的路径。

<img src="img_girl.jpg">

亲自试一试 »

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

1.绝对 URL - 指向托管的外部图像的链接 在另一个网站上。示例:src=“www.w3schools.com/images/img_… 但这有可能会侵犯外部图像的版权,同时你也无法控制外部图像,它可能突然被删除或改变。

2.相对 URL - 指向托管在 网站。此处,URL 不包含域名。如果 URL 以 如果没有斜杠,它将是相对于当前页面的。示例:src=“img_girl.jpg”。 如果 URL 以斜杠开头,它将相对于域。示例:src=“/images/img_girl.jpg”。

提示: 使用相对 URL 几乎总是最好的。他们 不会中断。

width 和 height 属性

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

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

亲自试一试 »

alt属性

用于<img>标签中指定src图像的替换文本(如果由于某种原因无法显示图像)。可能是由于连接速度慢,或者属性错误,或者用户使用读屏

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

亲自试一试 »

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

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

亲自试一试 »

style属性

该属性用于将样式添加到元素中,例如 color,font-size等

<p style="color:red;">This is a red paragraph.</p>

亲自试一试 »

lang属性

<html>标签中应始终包含lang属性,用来声明web网页的语言,帮助搜索引擎和浏览器。

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

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

title属性

该属性定义了一些额外的相关元素,将鼠标悬停在元素上title属性的值将作为工具提示显示

<p title="I'm a tooltip">This is a paragraph.</p>

亲自试一试 »

本章小结

  • 所有 HTML 元素都可以具有属性
  • <a>href属性指定链接指向的页面的 URL 
  •  <img>src属性指定要显示的图像的路径
  • <img>heightandwidth 属性提供图像的大小信息`
  •  <img>alt属性为图像提供替代文本
  • style该属性用于添加样式添加到元素中,例如颜色、字体、大小等
  • <html>lang属性指定了网页的语言
  • title该属性定义了一些额外的有关元素的信息

微信图片_20241119164850.jpg

又学到了!