今天理一下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。

转载于:https://www.cnblogs.com/snoopylovefiona/p/4593722.html

URL、SRC、HREF知识整理相关推荐

  1. Dom的常用方法/单位/url src href:

    Dom的常用方法 获取方法:document.getElementById() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组).:getElementByTagName() 把新的子节 ...

  2. 2022前端知识整理:十、vue基础

    十.vue基础 2022前端知识整理:第十部分.vue基础,仅包含vue2.0相关知识,建议先完成html5.css3和JavaScript ES6之后再学习.部分图片未上传成功,稍后完善,请见谅. ...

  3. jQuery基础知识整理

    jQuery基础知识整理 jQuery简介 什么是jQuery(了解) jQuery简化JS代码 jQuery的核心思想:"写的更少,但做的更多"(write less,do mo ...

  4. TypeScript技术知识整理

    TypeScript技术知识整理 文章目录 TypeScript技术知识整理 一.环境搭建与编译执行 1.安装 `TypeScript` 编译器 2.编写代码 **代码编辑器 - vscode** 3 ...

  5. 清明自习-部分知识整理

    清明自习-部分知识整理 遍历 ​ 所谓遍历(Traversal),是指沿着某条搜索路线,依次对树(或图)中每个节点均做一次访问.访问结点所做的操作依赖于具体的应用问题, 具体的访问操作可能是检查节点的 ...

  6. *Java软件开发面试知识整理*

    Java软件开发面试知识整理 围绕以下几点回答问题:是什么.为什么.什么时候用.项目实现.解决什么问题.遇到的困难 谈谈你对Java和C的理解? Java: 面向对象.Unicode:可以跨平台(JV ...

  7. HTML5的基础知识整理

    HTML5 概述:HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. 文章目录 HTML5 前言 一.HTMl ...

  8. keil C对lib封装库反汇编成C语言,Keil软件“C语言”及“汇编”混编 —— 相关知识整理.doc...

    Keil软件"C语言"与"汇编"混编 相关知识整理 用Keil在C中嵌入汇编1 在Keil中嵌入汇编2 介绍直接嵌入汇编代码的方法4 采用汇编可能会有的好处5 ...

  9. Web前端基础知识整理

    1. 前端基础知识 文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区分大小写 标签要成对出现,形成容器,只能有一个 标签按正确 ...

最新文章

  1. python零基础怎么学-零基础如何学习Python?老男孩Python入门培训
  2. python3初学者注意事项
  3. matlab 学习之常用函数2
  4. bat脚本交互输入_测评 | 不使用powershell运行 PowerShell 脚本的工具汇总
  5. java基础之访问控制符
  6. 如何在 IIS 中设置 HTTPS 服务
  7. 加密算法概念简介--MD5、SHA、DES、3DES、AES、RSA、ECC
  8. python文件操作以及相对路径和绝对路径问题
  9. 使用数据模板自定义数据显示
  10. 2.1. sql增删查改
  11. jenkins2 pipeline高级
  12. spring5.3.x源码构建
  13. iOS开发工具,ios开发类库
  14. 批量管理微信社群,社群助手
  15. 2016-2017 ACM-ICPC, Egyptian Collegiate Programming Contest (ECPC 16) 题解
  16. jsp怎么做柱状图_js实现柱状图
  17. 关于七牛云上传图片的总结
  18. 数控技能大赛计算机程序员,广西选手获第九届全国数控技能大赛数控程序员赛项一等奖...
  19. 数字麦克风DMIC(上)
  20. win10玩武装突袭3一会就闪退的解决方法

热门文章

  1. python yield
  2. Java SpringMVC
  3. Python 函数定义
  4. 使用 Hyper-v 虚拟化域控制器
  5. 升级至 vCenter Server 6.5 的最佳实践 (2147686)
  6. Redis学习总结(10)——缓存雪崩、缓存穿透、缓存并发、缓存预热、缓存更新、缓存降级、缓存算法的概念及解决思路总结
  7. DataTable两列转换四列
  8. 使用ABAP Push Channel(APC)开发的乒乓球游戏,可双打 1
  9. redis常用监控命令
  10. Nginx、Haproxy、LVS负载均衡从原理到部署(一)