【HTML 中 src 和 href 属性的区别】

---

1. 使用 src 和 href 属性的 标签

• 使用 src资源url 和 href引用url 属性 的标签有哪些 ?

  • ⑴ src

    • ① img 图片:
      • 
    • ② iframe 内联框架:
    • ③ frame 框架:
    • ④ input-type=image 图片 提交按钮 标签:
    • ⑤ scirpt 脚本 :
    • ⑥ style 样式:

  • ⑵ href

    • ① a 超链接 :
      • 百度
    • ② link 链接 : 引用外部 css
    • ③ input type=button 按钮输入标签 中的onclick事件
    • ④ area 图片映射 区域:

---

2. src 和 href 的含义

• src和href是什么意思 ?
  • ⑴ src 是什么意思 ?
    • 资源地址: 是 source [sɔrs] 的简写，表示“资源”
    • 替换 标签的内容: 引入一个资源 将元素的内容 整体替换。
    • 不设置 src属性，标签本身会 没有内容,src 不能缺少,必需的.
      • script 脚本, 不存在脚本代码
      • img 图片,不显示图片 会显示x
      • iframe 内联框架 会显示空白页
    • 总结: src属性 = 引入资源 = 替换 标签内容 = 必需属性

  ---

  • ⑵ href是什么意思 ?
    • href, 是 Hypertext Reference 超文本引用 的缩写，表示“超链接”
    • 不会替换 标签内容: 不是 引入资源，而是建立 一个“通道”
      • 让当前标签 能够 链接到某资源，不会替代 标签本身的内容
    • a 超链接 标签: href 引用url 不会替换 标签自己的内容,而是 点击后的跳转.
    • link 链接 标签: 是空标签,没有内容
      • 用rel正向关系 属性 表示被 引用的文档是做什么的.
      • 链接外部样式表,一般用 link- href引用url 属性 这样,比较符合 外部链接资源的特征，表示 不是内嵌的内容。
    • 总结: href引用url 属性 = 链接资源 = 不替换 标签内容 = 不必需属性

---

3. 浏览器 对使用 src 和 href 标签的 处理方式

• 遇到 src资源url 属性 和 href引用url 属性,浏览器怎样处理 ?

  • ⑴ href引用url 属性

    • 链接外部 css 样式表文件:
    • href引用url 属性 特性 = 下载文档 + 不停止 当前文档处理
      • 浏览器会识别 该文档为 css 文档，下载 该文档，同时不会停止 对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。
      • 文档的加载(下载),不影响(打断) 浏览器 对页面内容的解析.

  • ⑵ src引入资源url 属性

    • 引入 脚本文件:
    • 当浏览器解析到 该元素时，会暂停 浏览器的渲染，暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕,资源加载完毕。
      • 文档的 加载和执行,都会 打断 浏览器对页面内容的解析.
    • 这也是将js 脚本放在底部 而不是头部的原因。
    • src 引入资源 url = 暂停 当前文档处理

---

♣ 结束语 和 友情链接

• 参考文档
  • src 和 href 使用总结
  • HTML 中 href、src 区别
• 友情链接
  • ① 【HTML 标签的 参考列表 (按字母排列)】
  • ② 【HTML 标签的 参考列表 (按 功能分类 排列)】

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/…
  • 版权声明：本文为博主原创文章，转载请附上博文链接！