src和href使用总结
src
- img 图片
<img src="/img/1.png" alt="1" />
- rame iframe 框架集
<iframe src="girl.gif"></iframe>
- input type 为image的提交按钮
<input type="image" src="submit.jpg" alt="Submit" align="right" />
- scirpt 脚本
<script type="text/javascript" src="org.js"></script>
- style 样式表(胎死腹中的XHTML2中就将src属性推广到了所有元素。比如可以:
<style src="common.css"> </style>
)
href
- a
<a href="http://www.baidu.com" target="_blank">百度</a>
- link 引用外部css
<link type="text/css" href="iknow_base.css" rel="stylesheet" />
- input type 中的onclick事件
<input type=button onclick="window.location.href('#')" />
以上是src和href会被用到的标签,下面来看看他们的区别。
src是source的简写,表示“源”,是引用一个资源将该元素的内容将整体替换。如果不写src,那么本身没有内容,script会不存在脚本代码,img会显示x,iframe会显示空白页。例如<script type="text/javascript" src="b.js">alert(1)</script>,b.js:alert(2); 标准的浏览器里会显示2,因为本身的内容已经被替代了。
href是Hypertext Reference的缩写,表示“超链接”, 目的不是为了引用一个资源,而是为了建立一个“通道”,让当前标签能够链接到目标地址上,并不是为了把目标拉进页面本身内来替换本身的内容,例如a标签的href不会被当做一个资源替换自身,link标签本身并不包含实际的元素意义来做内容,它需要rel明确的表示被【被连接的文档是做什么的】。至于说为什么当初就决定外部样式表用link href来链接,而不是用style src来载入,可能是因为先贤们认为样式表更符合外部链接资源的特征,它更接近附属的资源,而不是内嵌的内容。
以上主要内容引自为什么加载 JavaScript 使用 "src",CSS 使用 "href"?有其含义还是历史语法遗留?
链接:https://www.jianshu.com/p/797bceab922b
href 表示超文本引用(hypertext reference) 引用 建立联系
src 表示来源地址 source 引入
src和href之间存在区别,能混淆使用。src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。
<script src ="js.js"></script>
当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加
<link href="common.css" rel="stylesheet"/>
那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。
链接:https://www.zhihu.com/question/19708137/answer/13562191
src和href使用总结的更多相关文章
- src与href属性的区别
src和href之间存在区别,能混淆使用.src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在 ...
- html中的src与href的区别
写代码的时候就经常把这两个属性弄混淆,到底是href还是src,href标识超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系,src表示引用资源,表示 ...
- 【转】src与href属性的区别
ref:http://www.jb51.net/web/77258.html src和href之间存在区别,能混淆使用.src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src是 ...
- src和href的区别
<html><!--头部标签--><!--src和href的区别src:引用,该资源是页面不可缺少的一部分,如(img标签 video标签 radio标签);href:引 ...
- html中src与href的区别
概述 src和href之间存在区别,能混淆使用.src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档 ...
- url 、src 、href 的区别
url.href.src 详解 现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别. URL(Uniform Resource L ...
- src与href的异同
相同点: 在跨域中,src,href,这些发送的请求都是get请求: 不同点: 1, 概念:href (Hypertext Reference)指定网络资源的位置: 理解:href 用作 " ...
- 浅析src与href的区别
src与href的区别 SRC src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请 ...
- URL、SRC、HREF知识整理
今天理一下URL.SRC.HREF定义以及使用区别. URL(Uniform Resource Locator) 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上 ...
随机推荐
- hdu1269(有向图强连通分量)
hdu1269 题意 判断对于任意两点是否都可以互相到达(判断有向图强连通分量个数是否为 1 ). 分析 Tarjan 算法实现. code #include<bits/stdc++.h> ...
- noi题库 1.7 字符串 10到第15题
10:简单密码 描述 Julius Caesar曾经使用过一种很简单的密码.对于明文中的每个字符,将它用它字母表中后5位对应的字符来代替,这样就得到了密文.比如字符A用F来代替.如下是密文和明文中字符 ...
- Centos7 下安装mysql
#prepare for install yum install http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm ...
- PKUSC2018训练日程(4.18~5.30)
(总计:共66题) 4.18~4.25:19题 4.26~5.2:17题 5.3~5.9: 6题 5.10~5.16: 6题 5.17~5.23: 9题 5.24~5.30: 9题 4.18 [BZO ...
- [BZOJ 1805] Sail 船帆
Link: BZOJ 1805 传送门 Solution: 一道思路比较巧的线段树的题目 首先可以发现,答案和顺序是没有关系的,都是$\sum_{i=1}^n {H_i∗(H_i−1)/2}$. 那么 ...
- 【推导】Codeforces Round #402 (Div. 2) A. Pupils Redistribution
一次交换,会让Group A里面的某个数字的数量-1,另一个数字的数量+1:对Group B恰好相反. 于是答案就是xigma(i=1~5,numA[i]-numB[i]>0)(numA[i]- ...
- 【后缀数组】bzoj2217 Secretary
考虑简化问题:计算一个字符串中至少出现两次的最长子串.答案一定会在sa中相邻两个后缀的lcp中.因为后缀的位置在sa中相距越远,其lcp的长度就越短,这是由于字典序的性质决定的. 于是,在s1和s2中 ...
- 1.2(Mybatis学习笔记)Mybatis核心配置
一.Mybatis核心对象 1.1SqlSeesionFactory SqlSessionFactory主要作用是创建时SqlSession. SqlSessionFactory可通过SqlSessi ...
- 如何在debug模式下,使用正式的签名文件
有两种方式(在集成第三方库的使用 使用的非常多) 签名配置信息 一是直接按F4,在项目结构面板中进行设置,只要操作两个两个选项卡就好了,signing(生成配置信息)和build types(打包类 ...
- ctags 小记
转:http://www.cnblogs.com/napoleon_liu/archive/2011/01/23/1942738.html 简介 ctags − Generate tag files ...