今天理一下URL、SRC、HREF定义以及使用区别。

URL(Uniform Resource Locator)

  统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。

  互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
  结构
    基本URL包含【模式(或称协议)、服务器名称(或IP地址)、路径和文件名】,如“协议://授权/路径?查询”。

    完整的、带有授权部分的普通统一资源标志符语法看上去如下:协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志
  第一部分:
    模式/协议(scheme):它告诉浏览器如何处理将要打开的文件。

    最常用的模式是超文本传输协议(Hypertext Transfer Protocol,缩写为HTTP),这个协议可以用来访问网络。其他协议如下:

      http——超文本传输协议资源

      https——用安全套接字层传送的超文本传输协议

      ftp——文件传输协议

      mailto——电子邮件地址

      ldap——轻型目录访问协议搜索

      file——当地电脑或网上分享的文件

      news——Usenet新闻组

      gopher——Gopher协议

      telnet——Telnet协议
  第二部分:
    文件所在的服务器的名称或IP地址,后面是到达这个文件的路径和文件本身的名称。

    服务器的名称或IP地址后面有时还跟一个冒号和一个端口号。它也可以包含接触服务器必须的用户名称和密码。

    路径部分包含等级结构的路径定义,一般来说不同部分之间以斜线(/)分隔。询问部分一般用来传送对服务器上的数据库进行动态询问时所需要的参数。
分类

  1、绝对UR

    绝对URL(absolute URL)显示文件的完整路径,这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。

  2、相对URL

    相对URL(relative URL)以包含URL本身的文件夹的位置为参考点,描述目标文件夹的位置。

    如果目标文件与当前页面(也就是包含URL的页面)在同一个目录,那么这个文件的相对URL仅仅是文件名和扩展名,如果目标文件在当前目录的子目录中,那么它的相对URL是子目录名,后面是斜杠,然后是目标文件的文件名和扩展名。

    如果要引用文件层次结构中更高层目录中的文件,那么使用两个句点和一条斜杠。

    可以组合和重复使用两个句点和一条斜杠,从而引用当前文件所在的硬盘上的任何文件,一般来说,对于同一服务器上的文件,应该总是使用相对URL,它们更容易输入,而且在将页面从本地系统转移到服务器上时更方便,只要每个文件的相对位置保持不变,链接就仍然是有效地。

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

      .:代表目前所在的目录,相对路径。 如:<a href="./abc">文本</a>或<img src="./abc" />

      ..:代表上一层目录,相对路径。 如:<a href="../abc">文本</a>或<img src="../abc" />

      /:代表根目录,绝对路径。 如:<a href="/abc">文本</a>或<img src="/abc" />

      ../../:代表的是上一层目录的上一层目录,相对路径。 如:<img src="../../abc" />

      D:/abc/:代表根目录,绝对路径。

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

  重点:href 和 src 的定义与区别

    href和src是有区别的,而且是不能相互替换的。我们在可替换的元素上使用src,然而把href用于在涉及的文档和外部资源之间建立一个关系。

    href (Hypertext Reference)指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。当我们写下:

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

    浏览器明白当前资源是一个样式表,页面解析不会暂停(由于浏览器需要样式规则去画或者渲染页面,渲染过程可能会被被暂停)。

    这与把css文件内容写在<style>标签里不相同,因此建议使用link标签而不是@import来吧样式表导入到html文档里。

    src (Source)属性仅仅 嵌入当前资源到当前文档元素定义的位置。当浏览器找到<script src="script.js"></script>在浏览器下载,编译,执行这个文件之前页面的加载和处理会被暂停。

    这个过程与把js文件放到<script>标签里类似。

    这也是建议把JS文件放到底部加载的原因。当然,img标签页与此类似。浏览器暂停加载直到提取和加载图像。

    与img类似的有更多:replaced elements。

URL、SRC、HREF知识整理的更多相关文章

  1. 容易混淆的url src href

    新手刚学习的时候会分不清 url  src  href这些,不知道什么情况下应该用哪个.现在让我来理一理. url 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网 ...

  2. 前端基础之 url src href

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

  3. url、href、src 详解

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

  4. Javascript语言精粹之正则表达式知识整理

    Javascript语言精粹之正则表达式知识整理 1.正则表达式思维导图 2.正则表达式常用示例 2.1 移除所有标签,只留下innerText var html = "<p>& ...

  5. Kali Linux渗透基础知识整理(四):维持访问

    Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...

  6. Kali Linux渗透基础知识整理(二)漏洞扫描

    Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...

  7. wifi基础知识整理

    转自 :http://blog.chinaunix.net/uid-9525959-id-3326047.html WIFI基本知识整理 这里对wifi的802.11协议中比较常见的知识做一个基本的总 ...

  8. android网络交互之DNS优化知识整理

    android网络交互之DNS优化知识整理 之前的工作中,经常会遇到DNS解析出问题导致网络交互的操作无法正常进行. UnknownHostException 在很多的移动开发过程中,与服务端的交互的 ...

  9. 【转】WIFI基本知识整理

    WIFI基本知识整理 这里对wifi的802.11协议中比较常见的知识做一个基本的总结和整理,便于后续的学习.因为无线网络中涉及术语很多,并且许多协议都是用英文描述,所以有些地方翻译出来会有歧义,这种 ...

随机推荐

  1. socket java 实例

    简单的java socket 示例 一.搭建服务器端 a).创建ServerSocket对象绑定监听端口. b).通过accept()方法监听客户端的请求. c).建立连接后,通过输入输出流读取客户端 ...

  2. The space of such functions is known as a reproducing kernel Hilbert space.

    Reproducing kernel Hilbert space Mapping the points to a higher dimensional feature space http://www ...

  3. Linux根目录下重要文件夹

    bin存放系统命令的目录,普通用户和超级用户都可以执行,不过放在这里的命令在单用户模式下也可以执行 sbin保存和系统环境设置相关的命令,只有超级用户可以使用这些命令进行系统环境的设置,但有些命令可以 ...

  4. android 自定义progressbar 样式

    在res下创建drawable文件夹,新建文件drawable/progressbar_color.xml <layer-list xmlns:android="http://sche ...

  5. SAP 改表方法

    SAP中直接修改表.视图的Tcode有SE16N和SM30. 1. SE16N修改表需要先输入命令&SAP_EDIT,回车左下角显示激活SAP编辑功能后,就可以对相应的表进行新增.删除.修改的 ...

  6. Java注释Override、Deprecated、SuppressWarnings

    在J2SE5.0的java.lang包中预定义了三个注释:Override.Deprecated和SuppressWarnings Override 这个注释的作用是标识某一个方法是否覆盖了它的父类的 ...

  7. Javaweb基础--->过滤器filter(转发)

    一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...

  8. python基础17 ---继承补充知识

    一.继承的顺序 1.在python中的类可以集成多个类,既然是继承多个类就有类的寻找顺序这么一说.其寻找方法就有广度优先和深度优先两种. 2.当类是新式类,多继承的情况下会按照广度优先的顺序查找. 如 ...

  9. 帝国cms数据表中文说明

    本文介绍下,帝国cms中各数据表的用途,有需要的朋友,参考下吧. 帝国cms各数据表及用途说明. phome_ecms_infoclass_news 新闻采集规则记录表 phome_ecms_info ...

  10. Navicat Premium试用期破解方法(转)

    转载网址https://blog.csdn.net/Jason_Julie/article/details/82864187 1.按步骤安装Navicat Premium,如果没有可以去官网下载:ht ...