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引用的更多相关文章

  1. webpack打包时排除其中一个css、js文件，或单独打包一个css、js文件

    在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...

  2. 上传css，js文件并引用

    今天在做单页面的简历,由于css样式跟js代码过多,所以就想着可不可以把css文件跟js文件上传到网上,然后引用. 一开始的想法是我上传到gitee上,但是从gitee服务器返回的Header上加了C ...

  3. grunt压缩多个js文件和css文件

    压缩前的工程目录: 1.安装js,css需要的插件 使用npm安装:npm install grunt-contrib-uglify --save-dev  -------->安装js压缩插件 ...

  4. 自定义 js 文件的集成引用

    这里的内容, 提前要知道  import comm from ‘...’  和 import {  comm }  from ‘...’ 的基础知识. 我举个案例, 当你有很多api文件的时候, 比如 ...

  5. 引用js文件

    在子模板里引用js文件的时候,需要把相应的.js文件放到static目录下,如引用static/jQuery/index.js文件: {% extends "base.html" ...

  6. 当vue.js与其他js文件同时引用导致页面不显示的问题

    作为一个萌新,昨天学习的过程中遇到了vuejs与其他js在共同页面时引用时冲突的问题 具体如下 虽然注意到了前后顺序,但是页面还是出不来东西 我知道现实开发中可能不是这么引用,但是学习中是这么引入的, ...

  7. yii引入js文件

    作者:zccst 四.在视图层(../views/..)添加CSS文件或JavaScript文件 Yii::app()->clientScript->registerScriptFile( ...

  8. jQuery-vsdoc.js文件是vs中的JavaScript intellisense,

    在VS 2008中启用jQuery Intellisense的步骤 要在VS中启用jQuery的intellisense完成,你要遵循三个步骤: 第一步: 安装VS 2008 SP1 VS 2008 ...

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

    ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content(" ...

随机推荐

  1. Android开发技巧——使用Dialog实现仿QQ的ActionSheet菜单

    最近看到有人用Dialog来实现QQ的仿ActionSheet的自定义菜单,对于自己没实现过的一些控件,看着也想实现一下.于是动手了一下,发现也不难,和大家分享一下. 本文原创,转载请注明出处:htt ...

  2. android bitmap的内存分配和优化

    首先Bitmap在Android虚拟机中的内存分配,在Google的网站上给出了下面的一段话 大致的意思也就是说,在Android3.0之前,Bitmap的内存分配分为两部分,一部分是分配在Dalvi ...

  3. EBS R12安装升级(FRESH)（二）

    3 Linux系统设置 这一节步骤基本都在终端root用户下进行. 自行熟悉vi或其他文本工具的用法. 3.1 host-only外网连接 如果用的NAT模式这一节略过. 右击当前主机连接外网的网卡, ...

  4. Cocoa练习01:一个简单的Todo list程序

    写一个简单的todo list程序,界面如下图: 在TextField区域输入文字,点击Add按钮会将文字显示在下面的TableView列表中.TableView列表有2列,第一列是文字的输入时间:第 ...

  5. SharePoint 调查添加图片支持

    前言:今天,碰到一个有趣的问题,就是SharePoint调查里面,添加对于图片的支持,众所周知,SharePoint的调查就支持那么几种字段类型的问题,当然,我们可以开发实现,不过,这个不是我们今天介 ...

  6. Implement int sqrt(int x).

    自己设计函数,实现求根号.x是非负整数. Input: 8 Output: 2 当开出根号后有小数,则省略小数部分.. 思路:只要找到一个数a,a*a<=x而且(a+1)*(a+1)>x, ...

  7. plsql developer 使用 oracle instantclient的安装和配置

    本文由ibyedo1贡献 1.下载 oracle instantclient basic package,在 oracle 官网下载就可以,地址如下: http://www.oracle.com/te ...

  8. 40款非常棒的 jQuery 插件和制作教程（系列一）

    jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象.jQuery以其插件众多.独特.轻量以及支持大规模的网站开发闻名 ...

  9. java设计模式--简单工厂

    java设计模式--简单工厂 简单工厂不是一个标准的设计模式,但是很常用需要掌握. 在java应用开发中,要"面向接口编程". 1.java中接口的概念: 在java中接口是一种特 ...

  10. 基于RecyclerView的瀑布流实现

    fragment的布局: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xm ...