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日

相关文章

  • 移动开发之自适应手机屏幕宽度

    移动开发之自适应手机屏幕宽度 在移动开发中,适配不同屏幕尺寸是一个常见的问题。其中,自适应布局是一种经典的解决方案,可以适配不同大小的设备,提高用户体验。下面是自适应手机屏幕宽度的完整攻略: 1. 使用viewport设置屏幕宽度 Viewport是指“视窗”,指的是​​用户实际看到的网页区域。在移动设备上,viewport的宽度与屏幕的宽度有关系。因此,我…

    css 2023年6月10日
    00
  • JavaScript实现表格表单的随机选择和简单的随机点名

    接下来我将为大家详细讲解“JavaScript实现表格表单的随机选择和简单的随机点名”的攻略。 一、JavaScript实现表格表单的随机选择 首先,在HTML文件中创建表格及表格中的选项,并为选项设置相同的class。 “`html 选项一 选项二 选项三 选项四 “` 在JavaScript中获取所有选项并存储。 javascript let opt…

    css 2023年6月10日
    00
  • css实现透明渐变特效的示例代码

    以下是详细的攻略: CSS实现透明渐变特效的示例代码 简介 透明渐变特效是CSS中常见的一种效果,它可以实现颜色从一种到另一种透明度慢慢变化的效果。在Web页面设计中,这种特效经常被用于美化按钮、导航栏、图片等等。 实现方法 CSS实现透明渐变特效的方法主要是使用CSS3中的线性渐变和透明度属性。具体做法如下: 指定渐变范围和透明度 我们首先需要指定渐变的范…

    css 2023年6月9日
    00
  • Vue实现监听某个元素滚动,亲测有效

    为了讲解方便,我将整个攻略分为以下几个部分: 安装Vue.js依赖 在开始使用Vue.js之前,我们需要先安装它的依赖。我们可以使用npm或yarn来安装,具体步骤如下: 使用npm安装 npm install vue –save 使用yarn安装 yarn add vue 创建Vue实例 在安装好Vue.js依赖后,我们可以开始创建Vue实例了。在实例化…

    css 2023年6月10日
    00
  • css3的focus-within选择器的使用

    CSS3的focus-within选择器用于选取一个元素的所有后代元素中,只要其中一个获得焦点,该元素就会被选中。它的语法如下: selector:focus-within { /* CSS样式 */ } 在使用该选择器时,首先需要有一个具有焦点行为的元素,例如<input>标签或<button>标签。然后,我们可以使用focus-w…

    css 2023年6月9日
    00
  • CSS3 中filter(滤镜)属性使用详解

    下面是详细的攻略: CSS3 中filter(滤镜)属性使用详解 CSS3 中的 filter 属性主要用于对元素进行视觉效果的处理,可以实现一些有趣的效果,比如模糊、变形、颜色调整等。 基本语法 filter 属性可以作用于任何 HTML 元素,但只有在现代浏览器中才能完全支持,语法如下: filter: function(param); 其中 funct…

    css 2023年6月10日
    00
  • IE9+已经不对document.createElement向下兼容的解决方法

    IE9+不再对document.createElement向下兼容,主要原因是因为IE9以下的版本存在一些安全隐患。因此,我们需要寻找一些解决方法来兼容IE9+。 解决方法 1. 使用createElementNS方法 createElementNS(namespaceURI, qualifiedName)方法是createElement方法的一个变体,它可…

    css 2023年6月10日
    00
  • HTML+CSS实现导航条下拉菜单的示例代码

    要实现导航条下拉菜单,我们需要使用HTML和CSS技术,具体步骤如下: 1. HTML基础结构 首先创建一个基础的HTML结构,包含导航栏和下拉菜单的容器。我们可以使用<ul>和<li>标签来创建导航栏,使用<div>标签为下拉菜单创建一个容器。示例HTML代码: <!DOCTYPE html> <htm…

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