`

href和src 的定义与区别

    博客分类:
  • html
阅读更多
1. href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。src 表示来源地址,在 img、script、iframe 等元素上。
2. 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标签页与此类似。浏览器暂停加载直到提取和加载图像。
分享到:
评论
1 楼 bigShirly 2016-12-21  

相关推荐

    href和src、link和@import的区别详解

    href和src的区别: href(Hypertext Reference):超文本引用,常用的标签有link、a等,用来链接引用的外部资源。在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系,如: &lt;link ...

    Web应用安全:href属性与src属性的XSS.pptx

    href属性与src属性的XSS 4 src属性的XSS 3 src属性 2 href属性的XSS 1 href属性 目录 herf属性 href是Hypertext Reference的缩写。 意思是指定超链接目标的URL。 href 属性的值可以是任何有效文档的相对或绝对URL,...

    浅谈HTML中src和href之间的区别

    href 属性说明本地Web资源和定义的资源建立了链接。 如: &lt;link href=style.css rel=stylesheet/&gt; 浏览器知道这个资源是一个样式表,解析到这个元素时不会停止,但是渲染页面可能会停止,因为浏览器需要样式...

    收集前端面试题之url、href、src

    本文将对 URL、href 和 src 三个概念进行详细的解释,涵盖它们的定义、格式、语法规则、类型和区别。 一、URL 概念 URL(Uniform Resource Locator,统一资源定位符)是因特网上标准的资源地址。它类似于网络上的...

    关于img的href和src取变量及赋值的方法

    在页面加载和交互过程中,我们经常需要对这两个属性进行取变量及赋值操作,即通过变量获取图像的src属性或者超链接的href属性值,并将其赋给相应的元素。接下来,我们来详细介绍一下这些知识点。 ### img标签的src...

    定义光标热区

    这通常用于网页、应用程序或者游戏设计,通过将光标热区与特定的操作绑定,可以实现用户对界面的快速控制和导航。 光标热区的定义过程通常包括以下几个步骤: 1. **区域选择**:首先,开发者需要确定光标热区的...

    前端大厂最新面试题-html.docx

    4. href和src的区别 * href:href标识超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系。 * src:src表示引用资源,替换当前元素,用在img,script,iframe上,src是...

    IE6/7中getAttribute获取href/src 属性(相对路径0值与其它浏览器不同

    有元素a和img(标准文档模式),设置了相对路径。各浏览器效果如下 IE6/7:返回完整路径 IE8/9/10/Firefox/Safari/Chrome/Opera:返回相对路径 IE6/7中想要与其它浏览器保持一致的话,可以给getAttribute的第...

    简单的html页面定义

    在图像处理方面,`&lt;img&gt;`标签插入图片,需指定`src`(源地址)、`width`和`height`(尺寸),`alt`属性提供了替代文本,以备图片无法显示时使用。`border`属性可设置边框。 预格式化的文本通过`&lt;pre&gt;`标签保留原样...

    JSP框架类frameset和frame的区别和用法

    JSP框架类frameset和frame的区别和用法 JSP框架类frameset和frame是Web开发中常用的技术,用于构建复杂的网页布局。下面将详细介绍frameset和frame的区别和用法。 frameset frameset标签用于声明页面使用框架技术...

    Vue 自定义标签的src属性不能使用相对路径的解决

    这个问题主要与vue-loader的资源路径处理规则有关,本文将详细介绍如何解决Vue自定义标签src属性无法使用相对路径的问题,并提供相关的解决方案和配置说明。 首先,需要理解的是,Vue.js在构建过程中使用了vue-...

    常用HTML、CSS标签属性.pdf

    * `&lt;A&gt;`:定义超链接,属性 HREF 指定链接的地址 * `&lt;IMG&gt;`:定义图片,属性 SRC 指定图片的地址 * `&lt;BR&gt;`:定义换行符 * `&lt;P&gt;`:定义段落 * `&lt;B&gt;`:定义黑体字 * `&lt;I&gt;`:定义斜体字 * `&lt;HR&gt;`:定义水平画线 * `...

    HTML题库定义.pdf

    <a href="mailto:mirror@263.net">与我联系)。 9. 使用内联式样式表应该使用的引用标记是(C. )。 10. 放置在 `&lt;FORM&gt;` 和 `&lt;/FORM&gt;` 之间的用于定义一个用户可键入多行文本的标记是(B. )。 11-12. 增加...

    HTML结构定义标签祥解指令详解

    最后,插入图片通过`&lt;img&gt;`标签,`src`属性指向图像文件,`border`设置边框宽度,`width`和`height`定义图片尺寸。 总之,HTML结构定义标签是构建网页的基础,它们协同工作,为用户提供直观且富有表现力的网页内容...

    web前台考试题及答案定义.pdf

    - `&lt;a&gt;`标签用于创建超链接,`href`属性定义链接地址,`target`属性决定链接在何处打开,如`_blank`(新窗口)、`_self`(当前窗口)、`_top`(顶级框架)和`_parent`(父框架)。 2. 邮件链接: - 正确的电子...

    BlackBerry HTML参考手册

    - **块格式化**:例如 `&lt;div&gt;` 和 `&lt;p&gt;` 分别用于定义文档中的区块和段落。 ##### 2. 链接与框架 - **链接**:如 `&lt;a&gt;` 元素用于创建超链接。 - **框架**:如 `&lt;frame&gt;` 和 `&lt;iframe&gt;` 元素用于嵌入其他文档或页面...

    详解AngularJS中ng-src指令的使用

    通过深入理解ng-src指令,我们能够更好地掌握AngularJS框架中数据绑定与DOM更新之间的交互方式,这对于开发高效、性能良好的Web应用程序是至关重要的。在实际项目中,正确使用ng-src等指令能够显著提高页面的响应性...

    js改变Iframe中Src的方法

    在给出的示例代码中,定义了一个名为test的函数,它接受一个URL参数,然后将该URL设置为iframe的src: ```javascript function test(Url) { document.frames[0].location.href = Url; } ``` 这里使用了document....

    HTML语法 大全 HTML语法

    * `&lt;IMG SRC&gt;`元素用于定义图片的地址。 * `&lt;IMG ALT&gt;`元素用于定义图片的替代文字。 * `&lt;IMG HEIGHT WIDTH&gt;`元素用于定义图片的大小。 * `&lt;OBJECT&gt;`元素用于插入对象,例如Flash或Java小程序。 六、表格 * `...

Global site tag (gtag.js) - Google Analytics