HTML 中 src 和 href 属性的区别
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>
- ① img 图片:
-
⑵ 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="">
- ① a 超链接 :
-
2. src 和 href 的含义
src
和href
是什么意思 ?- ⑴
src
是什么意思 ?- 资源地址: 是 source [sɔrs] 的简写,表示“资源”
- 替换 标签的内容: 引入一个资源 将元素的内容 整体替换。
- 不设置
src
属性,标签本身会 没有内容,src
不能缺少,必需的.script
脚本, 不存在脚本代码img
图片,不显示图片 会显示xiframe
内联框架 会显示空白页
- 总结:
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 样式表文件:
<link href="reset.css" rel=”stylesheet“/>
href
引用url 属性 特性 = 下载文档 + 不停止 当前文档处理- 浏览器会识别 该文档为
css
文档,下载 该文档,同时不会停止 对当前文档的处理。这也是建议使用link
,而不采用@import
加载 css 的原因。 - 文档的加载(下载),不影响(打断) 浏览器 对页面内容的解析.
- 浏览器会识别 该文档为
- 链接外部 css 样式表文件:
-
⑵
src
引入资源url 属性- 引入 脚本文件:
<script src="script.js"></script>
- 当浏览器解析到 该元素时,会暂停 浏览器的渲染,暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,资源加载完毕。
- 文档的 加载和执行,都会 打断 浏览器对页面内容的解析.
- 这也是将
js
脚本放在底部 而不是头部的原因。 src
引入资源 url = 暂停 当前文档处理
- 引入 脚本文件:
-
♣ 结束语 和 友情链接
- 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮( ̄▽ ̄)╭
- 转载 请注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn.net/VickyTsai/article/details/…
- 版权声明:本文为博主原创文章,转载请附上博文链接!