面试题---url、href、src区别

阅读更多

【前言】

    毕业季即将到来，简单总结写常问面试题，希望对大家有所帮助。

    本文主要讲解下url、href、src区别

 

【主体】

（1）url

    ①简介：统一资源定位符（或称统一资源定位器、URL地址等，英语：Uniform Resource Locator，常缩写为URL），有时也被俗称为网页地址网址。如同在网络上的门牌，是因特网上标准的资源的地址Address。

    ②URL的语法规则：比如网址 http://segmentfault.com/html/index.asp，必须遵守以下的语法规则：

scheme://host.domain:port/path/filename

（1）scheme - 定义因特网服务的类型。最常见的类型是 http 
（2）host - 定义域主机（http 的默认主机是 www） 
（3）domain - 定义因特网域名，比如 w3school.com.cn
（4）:port - 定义主机上的端口号（http 的默认端口号是 80） 
（5）path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中） 
（6）filename - 定义文档/资源的名称

 

 

（2）src

    source（缩写），指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。src 用于替换当前内容。href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系。

    src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

    src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。

    src 是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用。

 

（3）href

    href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。

 

 

（4）src与href区别

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

当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。

    当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

     ①请求资源类型不同

1、href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系
2、在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片

     ②作用结果不同

1、href 用于在当前文档和引用资源之间确立联系
2、src 用于替换当前内容

     ③浏览器解析方式不同

1、若在文档中添加 ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的
   处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
2、当浏览器解析到 ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框
   架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是
   头部的原因。

    

 

 （5）小结：

    简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。src通常用作“拿取”（引入），会暂停其他资源下载和处理，href 用作 "连结前往"（引用）。

1.src 是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用。
2.href 是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。
  在 link和a 等元素上使用

 

    

 

 

.