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

最新推荐文章于 2024-06-06 12:13:29 发布

Hey_Coder

最新推荐文章于 2024-06-06 12:13:29 发布

阅读量1.7k

点赞数 8

分类专栏：【HTML】文章标签： src属性 href属性 src和href属性的区别 src的具体含义 href的具体含义

本文链接：https://blog.csdn.net/VickyTsai/article/details/89850448

版权

26 篇文章 10 订阅

订阅专栏

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

使用 src资源url 和 href引用url 属性的标签有哪些 ?
- ⑴ src
  - ① img 图片:
    - <img src="/img/1.png" alt="1" />
  - ② iframe 内联框架:
    - <iframe src="girl.gif"></iframe>
  - ③ frame 框架:
    - <frame src="frame_a.htm" />
  - ④ input-type=image 图片提交按钮标签:
    - <input type="image" src="submit.jpg" alt="Submit" align="right" />
  - ⑤ scirpt 脚本 :
    - <script type="text/javascript" src="org.js"></script>
  - ⑥ style 样式:
    - <style src="common.css"> </style>
- ⑵ href
  - ① a 超链接 :
    - <a href="http://www.baidu.com" target="_blank">百度</a>
  - ② link 链接 : 引用外部 css
    - <link type="text/css" href="iknow_base.css" rel="stylesheet" />
  - ③ input type=button 按钮输入标签中的onclick事件
    - <input type=button onclick="window.location.href('#')" />
  - ④ area 图片映射区域:
    - <area 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 属性 = 链接资源 = 不替换标签内容 = 不必需属性

遇到 src资源url 属性和 href引用url 属性,浏览器怎样处理 ?
- ⑴ href引用url 属性
  - 链接外部 css 样式表文件: <link href="reset.css" rel=”stylesheet“/>
  - href引用url 属性特性 = 下载文档 + 不停止当前文档处理
    - 浏览器会识别该文档为 css 文档，下载该文档，同时不会停止对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。
    - 文档的加载(下载),不影响(打断) 浏览器对页面内容的解析.
- ⑵ src引入资源url 属性
  - 引入脚本文件: <script src="script.js"></script>
  - 当浏览器解析到该元素时，会暂停浏览器的渲染，暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕,资源加载完毕。
    - 文档的加载和执行,都会打断浏览器对页面内容的解析.
  - 这也是将js 脚本放在底部而不是头部的原因。
  - src 引入资源 url = 暂停当前文档处理

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

在这里插入图片描述

关注