alt、title、href、src 这些html标签属性你真的了解吗?

339 阅读1分钟

alt 属性

  • 用途:为图像定义可替代的文本。

  • 示例代码:

    <img src="image.jpg" alt="这是一张图片">
    

<img> 标签中使用,用于为图像定义可替代的文本。当图像无法加载或无法显示时,alt 属性的值将显示为替代文本。它对于视觉障碍者和搜索引擎优化(SEO)也非常重要,如果项目需要SEO优化,图片尽量添加alt描述。

title 属性

  • 用途:提供额外的信息或描述,增强用户体验。

  • 示例代码:

    <a href="#" title="点击查看详情">查看更多</a>
    

通常用于提供额外的信息或描述,以增强用户体验。它可以应用于多种 HTML 元素,如链接、图像、表格等。当鼠标悬停在带有 title 属性的元素上时,浏览器会显示 title 属性的值作为工具提示,一般的使用场景是一行显示不下使用ellipsis三点来代替,同时会加上title来辅助提示。

href 属性

  • 用途:指定链接的目标地址。

  • 示例代码:

    <a href="https://www.example.com">访问网站</a>
    

主要用于 <a>(锚点)标签,用于指定链接的目标地址。href 属性可以是一个 URL 地址或页面内的锚点(例如 #section)。

src 属性

  • 用途:指定要加载的资源的路径。

  • 示例代码:

    <img src="image.jpg">
    <script src="script.js"></script>
    

主要用于 <img>(图像)标签和 <script>(脚本)标签,用于指定要加载的资源的路径。在 img 标签中,src 属性指定要显示的图像的 URL 地址。在 script 标签中,src 属性指定要加载和执行的外部 JavaScript 文件的路径。

src相对于href来言,src偏向于资源链接href目标网站或描点类似的超链接