HTML属性

上一节: HTML元素 下一节: HTML段落

HTML 属性提供有关 HTML 元素的附加的一些信息。这些信息会影响元素的展现。

HTML 属性

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

href 属性

<a>标签定义了一个超链接。由href属性指定链接指向的页面的 URL:

示例

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

可以前往HTML链接教程页面了解更多关于链接的知识。

src 属性

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

示例

<img src="/favicon.ico">

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

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

< 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>

Title 提示.png

始终用引号添加属性值

如果不使用引号,不然在某些特殊场景下会导致XSS漏洞,或者导致解析出错。

示例

<p title=关于 小白 教程>关于</p>
<p title="关于 小白 教程">关于</p>
上一节: HTML元素 下一节: HTML段落
此页面最后编辑于2022年8月3日 (星期三) 17:12。