src与href属性的区别

下面我会详细讲解“src与href属性的区别”。

一、src属性与href属性的定义

1. src属性

src 是 source 的缩写,表示引入外部资源对应的 source(源)地址。通常用于在 HTML 中引入图片、视频等媒体资源、以及 JavaScript 文件等。将资源引入到 HTML 中后,浏览器会根据 src 属性所指定的地址发送 HTTP 请求,获取到资源后渲染到页面上。

2. href属性

href 是 hypertext reference 的缩写,表示建立 HTML 页面与其他网页或资源之间的超链接。通常用于在 HTML 中设置链接,比如页面跳转、下载文件、引入 CSS 文件等。

二、src属性与href属性的区别

1. 用途不同

src 属性用于引入外部资源到当前页面,而 href 属性通常用于在 HTML 中设定链接。

2. 加载顺序不同

通过 src 属性引入的资源,需要在页面加载的时候进行加载;而 href 属性通常是在浏览器解析到对应标签时才进行加载。比如引入样式表或字体文件时,提前加载可以提高页面的渲染速度。

3. 对文档结构的影响不同

src 属性引入的外部资源,会影响整个文档结构的的解析和渲染。比如某个页面中插入了一张图片或视频,由于资源的加载需要时间,页面可能需要等待资源加载完成后才能完成渲染。而 href 属性中引入的外部资源通常只有样式表,不会在页面渲染时对文档结构产生影响。

4. 适用标签不同

通常情况下,src 属性适用于 <img><audio><video><script> 标签,href 属性适用于 <link><a> 标签。

5. 两者属性值的类型不同

src 属性值通常是指向外部资源的 URL,而 href 属性值通常是 URL 或文件路径。因此,在使用这两个属性时需要注意其属性值的类型。

下面提供两个实例,来帮助更好地理解 srchref 的区别。

三、示例说明

1. 图片的加载

使用 img 标签在 HTML 页面上引入一个图片资源,比如下面的代码:

<img src="https://picsum.photos/id/432/300/200" alt="example image">

其中 src 属性值为图片的 URL,浏览器解析到该标签时会发送 HTTP 请求获取该图片,请求成功后将其渲染到图片标签上。

2. 样式表的引入

使用 link 标签引入一个 CSS 样式表,比如下面的代码:

<link href="style.css" rel="stylesheet">

其中,href 属性指向该 CSS 文件的相对路径,当浏览器解析该标签时,将会异步加载并解析该文件,使页面中的样式表生效。

综上所述,srchref 两个属性虽然有许多相似的地方,但用途、加载顺序、对文档结构的影响、适用标签和属性值的类型等方面却有着明显的不同,需要根据实际情况选择合适的属性使用。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:src与href属性的区别 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

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

    下面我会为您详细讲解“href和src、link和@import的区别详解”的完整攻略。 一、href和src的区别 1.1 href href 表示超文本引用,主要用于在 HTML 页面中在当前文档和外部资源之间建立关系,例如链接到 CSS、JavaScript、图像、样式表等。 下面是一个链接到外部样式表的例子: <link rel="s…

    css 2023年6月9日
    00
  • CSS中link和@import的区别说明

    CSS中link和@import都是用于导入css文件的语法,但它们之间有很多不同之处。 区别一 link是HTML标签,需要写在head标签中,而@import是CSS语法,需要写在CSS文件中,不能写在HTML文件中。 区别二 link可以通过rel属性指定关系属性,如stylesheet、icon等,而@import没有这个属性,只能导入样式文件。 区…

    css 2023年6月10日
    00
  • IE8 滤镜效果filter:alpha(opacity=20);IE下失效出现黑色

    下面是关于“IE8 滤镜效果filter:alpha(opacity=20);IE下失效出现黑色”的完整攻略。 背景说明 在IE8及以下的浏览器中,为了实现透明效果,我们需要使用filter:alpha(opacity=20)这个CSS样式。但是,有时候在IE下面实现透明效果时会出现黑色的背景,这是由于IE8滤镜效果的特性引起的。 解决方法 1. 加back…

    css 2023年6月11日
    00
  • javascript 封装的一个实用的焦点图切换效果

    一、介绍 焦点图切换效果是网站开发中常见的插件之一,也是JS封装的常见应用之一。本文将介绍如何通过JS封装一个实用的焦点图切换效果。 二、实现步骤 写HTML和CSS代码。 在HTML中,我们需要写一个包含图片的容器,和几个放置小圆点的容器。在CSS中,我们可以写出容器的样式,并使用定位等属性实现图片和小圆点的位置。 写JS代码。 在JS中,我们首先要获取到…

    css 2023年6月11日
    00
  • 容易混淆使用位置的XHTML标签

    让我详细讲一下“容易混淆使用位置的XHTML标签”的攻略。 什么是“容易混淆使用位置的XHTML标签”? 在开发网页的过程中,我们经常需要使用XHTML标签来描述网页的结构与内容。但是有一些标签可能会被使用位置所影响,导致使用不当或者混淆,使用位置不对的标签可能会影响网页的语义性和可读性。 容易混淆使用位置的XHTML标签攻略 在使用XHTML标签的时候,需…

    css 2023年6月11日
    00
  • jquery实现点击页面回到顶部

    1.首先,需要引入jquery库文件,可以使用cdn或者下载本地文件进行引入。在html文档中增加以下代码: <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> 2.增加回到顶部的按钮。在html文档中放置一个…

    css 2023年6月10日
    00
  • 如何解决前端笔记本屏幕显示缩放比例125%,150%对页面布局的影响

    解决前端笔记本屏幕显示缩放比例125%、150%对页面布局的影响,可以采用如下方法: 方法一:使用Viewport适配 Viewport是移动端常用的适配方案,可以将网页按照设备的物理像素来渲染。使用Viewport适配,可以避免屏幕缩放对页面布局的影响。 在页面头部引入以下代码: <meta name="viewport" con…

    css 2023年6月10日
    00
  • CSS 一行代码实现头像与国旗的融合

    下面是“CSS 一行代码实现头像与国旗的融合”的完整攻略: 一、实现原理 要实现头像与国旗的融合,首先需要有一张包含头像和国旗的图片,然后利用CSS属性实现头像与国旗的组合。具体步骤如下: 将包含头像和国旗的图片作为背景图片设置到元素上。 设置 background-position 属性调整头像和国旗的位置。 使用 :before 伪元素实现国旗的叠加。 …

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部