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(" ...
随机推荐
- 安卓笔记--intent传值不更新问题
今天在学习安卓的过程中,遇到一个问题,就是用intent进行多次传值的话, 他永远是第一次的值 后来发现,intent接收数据被写到了onCreat();方法中,这时候finish();到上一个Act ...
- hbase 集群管理脚本
#!/bin/bash # Show all running Java processes on region servers. Must run on master using HBase owne ...
- "AWT-EventQueue-0" java.lang.UnsatisfiedLinkError: no freetype in java.library.path
Exception in thread "AWT-EventQueue-0" java.lang.UnsatisfiedLinkError: no freetype in java ...
- 查询oracle数据库的数据库名、实例名、ORACLE_SID
数据库名.实例名.数据库域名.全局数据库名.服务名 , 这是几个令很多初学者容易混淆的概念.相信很多初学者都与我一样被标题上这些个概念搞得一头雾水.我们现在就来把它们弄个明白. 一.数据库名 什么是数 ...
- day08_Servlet学习笔记
============================================================ 一.什么是Servlet?(非常非常重要) servlet 是运行在 Web ...
- ionic1 下拉刷新 上拉加载 功能
html页面如下 <ion-content> <ion-refresher pulling-text="刷新" on-refresh="search() ...
- AMDP + XLSX Workbench 报表开发模式
本文介绍了我和同事通过使用AMDP + XLSX Workbench缩短报表开发周期.分离数据查询处理逻辑和前端展示工作的经验.欢迎讨论. 前言 最近接到了一套人力资源报表的开发需求,需要以EXCEL ...
- Ubuntu18.04教程
pre.ctl { font-family: "Liberation Mono", monospace } h1 { margin-bottom: 0.21cm } h1.west ...
- 解决XMind运行卡顿
问题 XMind是一款很好用的脑图工具,它是基于eclipse开发的,而且基础功能是免费的.最近我安装了XMind 8 Pro,但是发现在Mac上运行有卡顿. 解决方式 解决这个问题的思路也很简单,软 ...
- LINQ、Lambda与委托
首先定义个Person类: public class Person { public string Name{get;set;} //姓名 public int Age{get;set;} //年龄 ...