js文件引用的问题顺带复习css引用
js文件包含在<script>块中用scr引用,css在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不支持。
补充:@import最优写法
@import的写法一般有下列几种:
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道,@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。”
从上面可以看出,我们尽量要多使用link,符合标准而且有利于网页优化。
好下面进行到重点,在引用外部js时有两种大的方法,一个是绝对引用一个是相对引用,绝对引用,就是直接写死站内路径,相对引用可能要考虑父文件等等,当然还有直接用url,直接使用应该属于绝对引用的(存疑);
上代码:
<html>
<head>
<script src="http://localhost/test.js">alert("ok");</script>
</head>
<body>
<p>
haha.
</p>
</body>
</html>
/*test.js放在www的文件夹下,url引用*/
test.js放在www的文件夹下,url引用,这个很好懂,我们平时使用jquery库就是这么用的。附上运行成功的图片
<html>
<head>
<script src="//www/test.js"></script>
</head>
<body>
<p>
haha.
</p>
</body>
</html>
/*html 和test.js存放在www文件夹下,站内绝对路径*/
html 和test.js存放在www文件夹下,站内绝对路径,www是网站的根目录,这样访问是绝对路径访问。
<html>
<head>
<script src="../js/test.js"></script>
</head>
<body>
<p>
haha.
</p>
</body>
</html>
/*html放在html的文件夹下,test.js放在js 的文件夹下,使用了相对父路径*/
../这个表示的是访问上一层的文件夹,因为html在html文件夹里,所以它要先访问上一层的文件夹然后在访问其中的js文件夹,最后访问到test.js。注意此时前面并没有//是写作
src="../js/test.js"></script而不是
src="//../js/test.js"></script
<html>
<head>
<script src="js/test.js"></script>
</head>
<body>
<p>
haha.
</p>
</body>
</html>
/*test放在js文件下,html在www文件夹下,www文件夹是网站根目录*/
原理同上,但是变化在此时html并没有放在一个html文件夹中,只有js放在js文件夹里,所以不需使用../访问父文件。
js文件引用的问题顺带复习css引用的更多相关文章
- webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件
在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...
- 上传css,js文件并引用
今天在做单页面的简历,由于css样式跟js代码过多,所以就想着可不可以把css文件跟js文件上传到网上,然后引用. 一开始的想法是我上传到gitee上,但是从gitee服务器返回的Header上加了C ...
- grunt压缩多个js文件和css文件
压缩前的工程目录: 1.安装js,css需要的插件 使用npm安装:npm install grunt-contrib-uglify --save-dev -------->安装js压缩插件 ...
- 自定义 js 文件的集成引用
这里的内容, 提前要知道 import comm from ‘...’ 和 import { comm } from ‘...’ 的基础知识. 我举个案例, 当你有很多api文件的时候, 比如 ...
- 引用js文件
在子模板里引用js文件的时候,需要把相应的.js文件放到static目录下,如引用static/jQuery/index.js文件: {% extends "base.html" ...
- 当vue.js与其他js文件同时引用导致页面不显示的问题
作为一个萌新,昨天学习的过程中遇到了vuejs与其他js在共同页面时引用时冲突的问题 具体如下 虽然注意到了前后顺序,但是页面还是出不来东西 我知道现实开发中可能不是这么引用,但是学习中是这么引入的, ...
- yii引入js文件
作者:zccst 四.在视图层(../views/..)添加CSS文件或JavaScript文件 Yii::app()->clientScript->registerScriptFile( ...
- jQuery-vsdoc.js文件是vs中的JavaScript intellisense,
在VS 2008中启用jQuery Intellisense的步骤 要在VS中启用jQuery的intellisense完成,你要遵循三个步骤: 第一步: 安装VS 2008 SP1 VS 2008 ...
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content(" ...
随机推荐
- android SurfaceView绘制实现原理解析
在Android系统中,有一种特殊的视图,称为SurfaceView,它拥有独立的绘图表面,即它不与其宿主窗口共享同一个绘图表面.由于拥有独立的绘图表面,因此SurfaceView的UI就可以在一个独 ...
- OpenCV——照亮边缘
具体的算法原理可以参考: PS滤镜,照亮边缘 // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_ ...
- BT币(金融有风险,投资需谨慎)哥的失败投资
谁都知道bt币是一个旁氏骗局, 而进去的人,就必须保证自己不赔钱,所以只能随着大潮往前走,谁也不能让它跌 压垮骆驼的最后一根稻草, 还是幕后有个 推手, 在炒作 BT币, 事实上,作为新的投资项目,B ...
- 【Android 应用开发】对Android体系结构的理解--后续会补充
1.最底层_硬件 任何Android设备最底层的硬件包括 显示屏, wifi ,存储设备 等. Android最底层的硬件会根据需要进行裁剪,选择自己需要的硬件. 2.Linux内核层 该层主要对硬件 ...
- Zeroc Ice开发环境搭建
搭建Ice环境 1. Linux(推荐,更接近真实生产环境) 2. Windows(方便学习开发) 下载安装包:https://zeroc.com/downloads (百度网盘链接:http ...
- 添加极光推送以及在ios中的问题
项目为 ionic1 + angular1 1.添加极光推送插件 用cordova进行添加 cordova plugin add jpush-phonegap-plugin --variable AP ...
- 入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)
继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR). SSR,英文全称叫 Serv ...
- Javac的实现过程
主要介绍Javac的实现过程及原理. 首先弄明白什么是Javac? Javac是一种编译器,将一种语言转换为另一种语言规范.编译器的作用就是将符合java语言规范的源代码转化为JVM虚拟机能够识别的字 ...
- Linux下使用Kickstart自动化安装平台架构
PXE工作于Client/Server的网络模式.在启动过程中,终端要求服务器分配IP地址,再用TFTP协议下载一个自动启动软件包到内存中执行. 要使用kickstart安装平台,包括完整的架构为:K ...
- Android Studio 2.3 instant run与miui冲突问题的解决
Android Studio最近发布的2.3版本,由于这个版本改进后的Instant Run功能和很多国内ROM存在兼容问题,所以导致不得不做一些妥协策略,具体在小米Rom上,就是把小米rom的调试定 ...