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,直接使用应该属于绝对引用的(存疑);

上代码:

 1 <html>
 2     <head>
 3         <script src="http://localhost/test.js">alert("ok");</script>
 4     </head>
 5 <body>
 6     <p>
 7         haha.
 8     </p>
 9 </body>
10 </html>
11 /*test.js放在www的文件夹下,url引用*/

test.js放在www的文件夹下,url引用,这个很好懂,我们平时使用jquery库就是这么用的。附上运行成功的图片

 1 <html>
 2     <head>
 3         <script src="//www/test.js"></script>
 4     </head>
 5 <body>
 6     <p>
 7         haha.
 8     </p>
 9 </body>
10 </html>
11 /*html 和test.js存放在www文件夹下,站内绝对路径*/
html 和test.js存放在www文件夹下,站内绝对路径,www是网站的根目录,这样访问是绝对路径访问。
 1 <html>
 2     <head>
 3         <script src="../js/test.js"></script>
 4     </head>
 5 <body>
 6     <p>
 7         haha.
 8     </p>
 9 </body>
10 </html>
11 /*html放在html的文件夹下,test.js放在js 的文件夹下,使用了相对父路径*/

../这个表示的是访问上一层的文件夹,因为html在html文件夹里,所以它要先访问上一层的文件夹然后在访问其中的js文件夹,最后访问到test.js。注意此时前面并没有//是写作

src="../js/test.js"></script而不是
src="//../js/test.js"></script
 1 <html>
 2     <head>
 3         <script src="js/test.js"></script>
 4     </head>
 5 <body>
 6     <p>
 7         haha.
 8     </p>
 9 </body>
10 </html>
11 /*test放在js文件下,html在www文件夹下,www文件夹是网站根目录*/

原理同上,但是变化在此时html并没有放在一个html文件夹中,只有js放在js文件夹里,所以不需使用../访问父文件。

时间: 2024-09-30 11:11:45

js文件引用的问题顺带复习css引用的相关文章

MVC bundle(包扎)CSS或是JS文件

以前写asp.net网页时,会在<head>节点中引用很多样式文件或是javascript文件,如下图左大括号的引用语句. 现在在MVC应用程序中,可以使用使用Bundle来捆一起, 在Solution Explorer窗口应用程序下,找到App_Start目录.在此目录下创建一个类,命名为“BundleConfig.cs” 并修改namespace: Insus.NET 上图中的#11行的蓝下划线的名称,将就是以View应用的名称.接下来,我们打开Global.asax.cs文件,分三步,第

解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题

ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 将在运行的时候自动将虚拟(相对)路径转换为应用程序绝对路径.这是比较传统的引用方式,尽管他做了一次转换操作,对服务器的请求数量

引用外部.css或.js文件的路径问题

转载自:http://www.blogjava.net/Johnny-Ajun/archive/2011/06/16/352440.html jsp或html页面引用外部.css或.js文件时,注意路劲问题,如果设置不当,会引用不到这些外部的文件假设使用下面的目录结构: -webapp |-MyProject  目录  |--WebContent 目录  |---scripts 目录   ---dtree.js 文件  |---styles 目录   ---main.css 文件   |---p

ASP.NET动态引用样式表(css)和脚本(js)文件

// 引入js文件 HtmlGenericControl scriptControl = new HtmlGenericControl("script"); scriptControl.Attributes.Add("type", "text/javascript"); scriptControl.Attributes.Add("language", "JavaScript"); scriptControl

html、css、js文件加载顺序及执行情况

今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然未弄明白,就在这时我找到了让我恍然大悟的一段话,如下: HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件. 3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件. 4. 浏览器继续载入html中&

js 根据屏幕大小调用不同的css文件

原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在head标签里面先引用一个通用的CSS文件,如下: <link href="Styles/Style.css" id="css" rel="stylesheet" type="text/css" /> 这时候,你会发现,这个

引入CSS和JS文件时 到底应该在head标签中还是body中?

引入CSS在head中, JS建议在body的尾部引入; 这样有利于加载速度 <!DOCTYPE html> <html>   <head>      <!--网页页面字符集-->     <meta charset="utf-8">       <!--让IE使用最新的渲染模式-->     <meta http-equiv="X-UA-Compatible" content="

asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并且将大的CSS文件分割到小文件 中,当一个浏览器请求那些JS以及CSS文件,它却将为每一个文件产生一个请求.每一个HTTP请求将导致从你的浏览器到服务器上的一次"往返",从响应 服务器到客户端浏览器之间的等待时间称之为"延时".因此,如果你有四个JS文件以及三个CSS

实际项目中,为什么多个css、js文件要实现合并与压缩?(了解了这你才算入门)

Web性能优化最佳实践中最重要的一条是减少HTTP请求.而减少HTTP请求的最主要的方式就是,合并并压缩JavaScript和CSS文件. 关于编写css时,我们应注意通过一些细节来控制css文件的大小,比如:全局样式.继承样式.缩写样式,空格.注释等:同时你也可以通过在线工具对你的css文件进行压缩,来减少css文件的大小,但压缩后的css文件在可维护性.识别性方面变的特别弱.但更复杂的情况是,如果你的页面里面引用了多个css.多个js文件时就可能处理不好. 多个css.多个js文件进行自动合