HTML属性
HTML 属性提供有关 HTML 元素的附加的一些信息。这些信息会影响元素的展现。
HTML 属性
- 所有 HTML 元素都可以有属性
- 属性提供有关元素的附加信息
- 属性总是在开始标签中指定
- 属性通常以名称/值对形式出现,例如:name="value"
href 属性
<a>标签定义了一个超链接。由href属性指定链接指向的页面的 URL:
示例
<a href="https://www.w3schools.com">Visit W3Schools</a>
src 属性
该<img>标签用于在 HTML 页面中嵌入图像。该src属性指定要显示的图像的路径:
示例
<img src="/favicon.ico">
有两种方法可以在src 属性中指定 URL:
- 绝对 URL - 指向托管在另一个网站上的外部图像的链接。示例:src="https://xiaobai.wang/favicon.ico"。
注意:外部图像可能受版权保护。如果您没有获得使用许可,您可能违反了版权法。此外,您无法控制外部图像;它可以突然被删除或更改。
- 相对 URL - 指向网站内托管的图像的链接。此处,URL 不包含域名。如果 URL 开头没有斜杠,则它将相对于当前页面。示例:src="favicon.ico" ,如果你浏览器里面显示的页面为 https://xiaobai.wang/path1/test.html 则刚才的图片加载的URL为 https://xiaobai.wang/path1/favicon.ico 。如果 URL 以斜杠开头,示例:src="/favicon.ico" 即使你访问的页面为https://xiaobai.wang/path1/test.html 图片加载的URL为 https://xiaobai.wang/favicon.ico
< blockquote> 提示:最好使用相对 URL。如果更改域名不用去修改之前写的src地址。
宽度和高度属性
<img> 标签还包含 width height 属性,用来指定图像的宽度和高度(以像素为单位):
示例
<img src="/favicon.ico" width="100" height="200">
alt 属性
如果由于某种原因无法显示图像,alt属性指定图像的替代文本。加载可能是由于连接速度慢、src属性错误或用户使用屏幕阅读器造成的。
示例
<img src="/favicon.icox" width="100" height="200" alt="图片加载失败的时候显示这个文本,说明这里是个什么图片">
style属性
该style属性用于向元素添加样式,例如颜色、字体、大小等。
示例
<p>这个段落文本为没有设置任何属性</p>
<p style="color:red;">这个段落文本为红色</p>
lang 属性
最好在<html>标签中加入lang属性,以声明网页的语言。这是为了帮助搜索引擎和浏览器,如果浏览器开启了自动翻译功能,可以更好的被识别。
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
国家代码也可以添加到lang 属性中的语言代码中。因此,前两个字符定义 HTML 页面的语言,后两个字符定义国家。
以下示例将英语指定为语言,将美国指定为国家:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
可以在这里查看语言代码 https://baike.baidu.com/item/ISO%20639-1/8292914
这里查看国家代码 https://baike.baidu.com/item/ISO%203166-1/5269555
title 属性
当将鼠标悬停在元素上时,title 属性的值将显示为工具提示, 这样可以方便用户更好的使用你的网站,了解功能。
示例
将鼠标移到GMV上面即可看见效果。
<p title="GMV(全称Gross Merchandise Volume),即商品交易总额 ,是成交总额(一定时间段内)的意思">GMV:10000万</p>
始终用引号添加属性值
如果不使用引号,不然在某些特殊场景下会导致XSS漏洞,或者导致解析出错。
示例
<p title=关于 小白 教程>关于</p>
<p title="关于 小白 教程">关于</p>