写代码的时候就经常把这两个属性弄混淆,到底是href还是src,href标识超文本引用,用在linka等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系,src表示引用资源,表示替换当前元素,用在imgscriptiframe上,src是页面内容不可缺少的一部分。

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

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

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

补充:link和@import的区别

两者都是外部引用CSS的方式,但是存在一定的区别:

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

  

html中的src与href的区别的更多相关文章

  1. 浅析src与href的区别

    src与href的区别 SRC src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请 ...

  2. 浅谈src与href的区别

    src 和 href 都是用来引入外部资源的属性,例如:图片.视频.CSS 文件.JavaScript 文件等. 那么它们两者之间究竟有什么样的区别呢? <link href="sty ...

  3. src和href的区别

    <html><!--头部标签--><!--src和href的区别src:引用,该资源是页面不可缺少的一部分,如(img标签 video标签 radio标签);href:引 ...

  4. html中src与href的区别

    概述 src和href之间存在区别,能混淆使用.src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档 ...

  5. url 、src 、href 的区别

    url.href.src 详解 现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别. URL(Uniform Resource L ...

  6. src与href的区别

    href: 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接. src:是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请求src资源时会将其 ...

  7. [html] src与href的区别

    src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请求src资源时会将其指向的资源下 ...

  8. src 和 href 的区别

    因为理解不深,到写外部加载Javascript文件或者css文件的时候总是需要去找个例子,这样可不好.现在总结下 href 属性规定被链接文档的位置(URL). href是hyperrefresh的缩 ...

  9. 简述一下 src 与 href 的区别

    href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接. src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请求src资源时会将其指向 ...

随机推荐

  1. 【读书笔记】iOS-开发技巧-UILabel内容模糊的原因

    在非Retina的iPad mini的屏幕上,一个UILabel的frame的origin值如果有小数位数(例如,0.5),就会造成显示模糊.所以最好用整数值的origin坐标. 参考资料: < ...

  2. Spring(二)Bean入门

    一.BeanFactory介绍 1.1.Bean: 在Spring技术中是基于组件的 最基本了是最常用的单元 其实实例保存在Spring的容器当中 Bean通常被定义在配置文件当中,Bean实例化由S ...

  3. 以蓝牙开发的视觉解读微信Airsync协议

    微信硬件平台使用蓝牙作为近场控制的连接件,并拟定了<微信蓝牙外设协议>.这份协议更像一个标准,用于规范微信和蓝牙外设之间的数据交互场景和接口.但从开发者来看,要完全读懂这份协议,恐怕需要熟 ...

  4. Silverlight项目笔记3:Silverlight RIA Services缓存引发的问题

     问题描述:使用Silverlight的RIA Services进行数据库更新操作,重复提交时发现异常,SubmitOperation发生错误,提示实体类冲突,检查发现之前删除的数据竟然还存在(数据库 ...

  5. android binder 进程间通信机制6-Binder进程间通信机制的JAVA接口

    Binder间进程通信的JAVA层接口,主要是通过JNI方法来调用Binder库的C/C++接口 在JAVA层,将Service组件称为JAVA服务,Service组件的代理称为JAVA服务代理. 一 ...

  6. php进程的SIGBUS故障

    某个子站是php写的,访问的时候nginx时不时会冒出现502错误,高峰时更频繁,检查php-fpm的日志发现大量的 child exited on signal 7 (SIGBUS),并且和acce ...

  7. 软件测试Lab2

    1.本次上机实验任务:使用webDriver完后自动化测试 2.本次上机实验目的:掌握webDriver的用法和配置. 3.本次上机实验内容: 3.1Selenium的安装: 首先我们上Seleniu ...

  8. Spring自定义一个拦截器类SomeInterceptor,实现HandlerInterceptor接口及其方法的实例

    利用Spring的拦截器可以在处理器Controller方法执行前和后增加逻辑代码,了解拦截器中preHandle.postHandle和afterCompletion方法执行时机. 自定义一个拦截器 ...

  9. cordova 环境搭建

    安装环境前题是nodejs已安装,android环境搭建完成,android环境没有通过http://www.androiddevtools.cn/安装,安装使用 淘宝 NPM 镜像 方式 1.运行c ...

  10. pageX和pageY

    pageX() 属性是鼠标指针的位置,相对于文档的左边缘. pageY() 属性是鼠标指针的位置,相对于文档的上边缘. 例1 $(document).mousemove(function(e){ $( ...