容易混淆的url src href

时间:2022-11-02 22:33:28

新手刚学习的时候会分不清 url  src  href这些,不知道什么情况下应该用哪个。现在让我来理一理。

url

统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

 *绝对 URL - 指向其他站点(比如 src="http://www.example.com/")

 *相对 URL - 指向站点内的文件(比如 src="/i/image.gif")

以下为建立路径所使用的几个特殊符号,及其所代表的意义。

  • .:代表目前所在的目录,相对路径。 如:<a href="./abc">文本</a><img src="./abc" />
  • ..:代表上一层目录,相对路径。 如:<a href="../abc">文本</a><img src="../abc" />
  • ../../:代表的是上一层目录的上一层目录,相对路径。 如:<img src="../../abc" />
  • /:代表根目录,绝对路径。 如:<a href="/abc">文本</a><img src="/abc" />
  • D:/abc/:代表根目录,绝对路径。

在使用相对路径时,我们用符号“.”来表示当前目录,用符号“..”来表示当前目录的父目录。

src    href

href和src是有区别的,而且是不能相互替换的。

src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。

换种方法来说就是 src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。

① src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

<script src ="js.js"></script>

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

② href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。

容易混淆的url src href的更多相关文章

  1. 前端基础之 url src href

    在实际使用中有时候会犯糊涂,因此来认真了解下这三者的具体用法. url 是资源定位器,是一种数据类型,和长度,颜色等属性并列.在写img的路径的时,如<img src="http:// ...

  2. url、href、src 详解

    发现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别.顺便试下在segmentfault来一发. URL(Uniform Reso ...

  3. link &commat;import区别 src href的区别

    先说页面引入css的四种方式吧 1 在头部写在style里面 2 行内样式 tyle= 3 外部引入 link和@import的区别 link属于XHTML的标签,而@import只是css提供的一种 ...

  4. 你知道src、url、href的全称吗?

    url:Uniform Resource Locator统一资源定位符 src:Source资源 href:Hypertext Reference超文本引用

  5. 「HTML5」url、href、src区别

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  6. 前端中url、href、src的详细含义

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  7. url、href、src

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  8. 前端面试题-url、href、src

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  9. url,href和src的区别,defer和async的区别

    URL(Uniform Resource Locator):统一资源定位符,互联网上的每个文件都有一个唯一的URL,基本URL包含协议,IP地址,路径和文件名. 重点:herf和src的区别 href ...

随机推荐

  1. JQUERY 知识点的自我总结

    一.名词释义 1 .js的入口函数:要等待文档树的加载完成,并且等待所有图片.文件都加载完成之后才开始执行. 2  .jquery入口函数会等待文档树的加载完成,并不会等待图片还有文件的加载 3 .j ...

  2. 【faster-rcnn】训练自己的数据——修改图片格式、类别

    修改图片格式 matlab代码 其实内部一些代码是用了rbg的fast-rcnn代码的. \datasets\VOCdevkit2007\VOCcode\VOCinit.m里面,查找'jpg',改成' ...

  3. windows server 2008服务器IIS绑定阿里云域名

    一.打开Internet 信息服务(IIS)管理器   二.将你的网站放到服务器目录下,比如D盘下的WWW文件夹.   三.在IIS中,添加网站,网站的物理路径指向第二部中创建的网站.   五.在绑定 ...

  4. 杭州电 1052 Tian Ji -- The Horse Racing(贪婪)

    http://acm.hdu.edu.cn/showproblem.php? pid=1052 Tian Ji -- The Horse Racing Time Limit: 2000/1000 MS ...

  5. 20190312&lowbar;浅谈go&amp&semi;java差异&lpar;一&rpar;

    多线程 java java中对于大量的比较耗时的任务多采用多线程对方式对任务进行处理,同时由于进程和线程 本身是通过宿主机OS进行管理的,当在cpu核数较少或线程分配不当 会导致多线程的效果不佳的事常 ...

  6. 删除64位ODBC数据源DNS

    1.按照打开管理工具-打开数据源(ODBC),进入如下界面,选择用户DSN删除,发现报错一直删除不了. 2.成功删除:进入如下图路径,打开ODBC数据源管理工具,选择要删除的DSN就可以成功删除啦.

  7. JAVAEmail工具错误java&period;lang&period;ClassNotFoundException&colon; javax&period;activation&period;DataSource

    JDK9以上或JDK6以下使用mail.jar包不加JAF的activation.jar包会抛出该错误!JDK6以上不需要加该jar包: 参考原文 https://*.com/ ...

  8. Ajax和JSON完成二级菜单联动的功能

    首先需要找好JSON的包哦: 链接:http://pan.baidu.com/s/1jH6gN46 密码:lbh1 1:首先创建一个前台页面,比如secondMenu.jsp,源码如下所示: < ...

  9. zepto引用touch模块后,click失效

    近日,有个拼图小活动,引用了zepto,以及zepto的touch模块. 在拼图结束之后,进行抽奖的活动,该抽奖结果是以弹框展示. 这里的关闭按钮需要添加点击事件: $(document.body). ...

  10. Tomcat连接参数的优化,主要是针对吞吐量做优化

    Tomcat连接参数的优化,主要是针对吞吐量做优化: 修改conf/server.xml文件,把原来 <Connector port="8080" protocol=&quo ...