📕HTML 中的href与src

简介: href 是一个链接,它可以带你去别的地方看看。src 是一个文件,它可以让你在网页里看到它。

HTML 中的hrefsrc

嗨,大家好!这里是道长王jj~ 🎩🧙‍♂️

前几天,我对实际使用 href 或 src 不明确非常疑惑。🤔

href 和 src 都是一种链接,可以让你从一个网页跳到另一个网页,或者看到一些图片、视频、音乐等等。

我在网络上分享了我的疑惑,以下是一些解答资料。

📕“href” 和 “src” 之间的区别

href 是一个链接,它可以带你去别的地方看看。

<a href="<http://www.baidu.com>">百度</a><link type="text/css" rel="stylesheet" href="common.css">

src 是一个文件,它可以让你在网页里看到它。

<img src="img/girl.jpg"></img><iframe src="top.html"><script src="show.js">

所以 href 的东西是你要点一下才能看到的, src 的东西是自己就出来了。

href 和 src 有时候会让人搞混,因为以前的网页规则没有很明白地分开它们。😅

📌作用结果

  1. href 是一种链接,它可以把当前文档和别的资源连起来
  2. src 是一种替换,它可以把当前内容换成别的资源

📌浏览器解析方式

  1. 当浏览器看到href,它会一边下载链接的资源,一边继续处理当前文档。(这就是为什么我们用 link 来加载 CSS,而不用 @import 的原因哦)
  2. 当浏览器看到src,它会停下来,先把这个资源加载或执行完,再去处理其他的资源。(这也是为什么我们把script标签放在最后,而不放在最前的原因呢)👍

🎉 你觉得怎么样?这篇文章可以给你带来帮助吗?当你处于这个阶段时,你发现什么对你帮助最大?如果你有任何疑问或者想进一步讨论相关话题,请随时发表评论分享您的想法,让其他人从中受益。🚀✨

目录
相关文章
|
前端开发 JavaScript
html中href和src的区别?CSS 中哪些属性可继承,哪些不可以?创建函数的几种方式?
href:href 是 Hypertext Reference 的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。
|
移动开发 JavaScript 前端开发
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
147 0
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
|
Web App开发 JavaScript 前端开发
html img Src base64 图片显示
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符。 比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA...
4697 0
HTML 修改img标签的src属性
$("#imgId").attr('src',path); 
1239 0
|
JavaScript 前端开发
html中的src与href的区别
  写代码的时候就经常把这两个属性弄混淆,到底是href还是src,href标识超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系,src表示引用资源,表示替换当前元素,用在img,script,iframe上,src是页面内容不可缺少的一部分。
1584 0
|
移动开发 C# .NET
C#正则表达式通过HTML提取网页中的图片src
原文:C#正则表达式通过HTML提取网页中的图片src 目前在做HoverTreeCMS项目中有处理图片的部分,参考了一下网上案例,自己写了一个获取内容中的图片地址的方法。可以先看看效果:http://tool.hovertree.com/a/zz/img/  一般来说一个 HTML 文档有很多标签,比如“”、“”、“”等,想把文档中的 img 标签提取出来并不是一件容易的事。
1665 0
|
Web App开发 测试技术 Android开发
Html<a>标签href的困惑记载
近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了A标签,Click响应之后走一段js代码逻辑-弹出一个分享微信弹框。Chrome和Android平台都没问题,测试阶段发现Ios平台出现了点问题~弹框闪现一下之后,页面被重新渲染了,自然弹框又被消隐掉了。
785 0
|
JavaScript 前端开发 容器
Html A标签中 href 和 onclick用法、区别、优先级别
原文:Html A标签中 href 和 onclick用法、区别、优先级别 如果不设置 href属性在IE6下面会不响应hover。双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题)。  代码如下 复制代码 假定我们有个fn方法,需要取到这个元素,第一个方法传入的this是空值。
1828 0