原创Hey_Coder 最后发布于2019-11-04 17:39:05
展开
1. 使用 src 和 href 属性的 标签
2. src 和 href 的含义
3. 浏览器 对使用 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>
⑵ 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="">
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 样式表文件: <link href="reset.css" rel=”stylesheet“/>
href引用url 属性 特性 = 下载文档 + 不停止 当前文档处理
浏览器会识别 该文档为 css 文档，下载 该文档，同时不会停止 对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。
文档的加载(下载),不影响(打断) 浏览器 对页面内容的解析.
⑵ src引入资源url 属性
引入 脚本文件: <script src="script.js"></script>
当浏览器解析到 该元素时，会暂停 浏览器的渲染，暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕,资源加载完毕。
文档的 加载和执行,都会 打断 浏览器对页面内容的解析.
这也是将js 脚本放在底部 而不是头部的原因。
src 引入资源 url = 暂停 当前文档处理
————————————————
版权声明：本文为CSDN博主「Hey_Coder」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/VickyTsai/article/details/89850448
联系客服
