今天理一下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. Netty 源码(ChannelHandler 死磕)

    精进篇:netty源码死磕5  - 揭开 ChannelHandler 的神秘面纱 目录 1. 前言 2. Handler在经典Reactor中的角色 3. Handler在Netty中的坐标位置 4 ...

  2. 【python】-- RabbitMQ RPC模型

    RabbitMQ RPC模型 RPC(remote procedure call)模型说通俗一点就是客户端发一个请求给远程服务端,让它去执行,然后服务端端再把执行的结果再返回给客户端. 1.服务端 i ...

  3. Python菜鸟之路:sqlalchemy/paramiko进阶

    前言:ORM中的两种创建方式 数据库优先:指的是先创建数据库,包括表和字段的建立,然后根据数据库生成ORM的代码,它是先创建数据库,再创建相关程序代码 代码优先:就是先写代码,然后根据代码去生成数据库 ...

  4. python中TCP和UDP区别

    TCP(Transmission Control Protocol)可靠的.面向连接的协议(eg:打电话).传输效率低全双工通信(发送缓存&接收缓存).面向字节流.使用TCP的应用:Web浏览 ...

  5. 获取android模拟器的IP地址

    http://blog.csdn.net/yjkwf/article/details/7244632 1.输入adb devices查看加载的设备 2.使用 adb -s [设备] [命令]执行命令 ...

  6. [转]Homebrew 卸载时出现:Failed to locate Homebrew! 错误

    今天在 MacBook 上安装 Homebrew,结果中间断了网,想重新卸载重装,结果一直卸载失败.问题现象如下: 问题现象 卸载时错误如下: ruby -e "$(curl -fsSL h ...

  7. c++之默认参数的函数

    默认参数,看个例子就明白了 int add(int a=5,int b=6,z=3): int main(){ add():// 全部默认 add(1,5)://第三个参数默认 add(1,2,3): ...

  8. nodejs模块之fs&&stream

    nodejs的文件系统fs模块,可以实现对文件.目录等的操作,stream模块实现对文件数据的断续读写操作 一.文件操作 fs.readFile(file[,options],callback) 异步 ...

  9. Delphi 函数的重载和作用域

    1.在delphi 中,我们可以使用相同的函数名来调用不同的函数,我们称这个函数为重载,函数的参数类型和参数的个数可以不同,用到的关键字overload:格式如下: function addInt(x ...

  10. MHA高可用集群安装配置

    4台服务器 192.168.136.128 主 192.168.136.129 从 192.168.136.130 从 192.168.136.131 管理服务器 一主2从,一管理,安装mysql并配 ...