我们在HTML中经常需要引入CSS和JS文件,那么如何引入呢?下面我给大家演示一下。
工具/材料Sublime Text
首先新建一个文件夹,在文件夹下面建立如下图所示的文件
接下来用Sublime Text打开HTML文件,写入HTML结构,如下图所示
然后我们在Head标签内用link标签引入CSS文件,如下图所示
最后用Script标签引入JS文件即可,如下图所示
jsp引用js和css文件,引用失败的原因大部分是由于路径问题导致,一般有相对路径和绝对路径两种引用方式:1、相对路径引用js和css的方法:
css:
<link href="css/front/ibd.css" rel="stylesheet" type="text/css" />
js:
<script type="text/javascript" src="js/front/poplayer.js"></script>
前提是js和css跟jsp在同一个目录下
2、绝对应用js和css的方法:
css:
<link href="http://域名:端口/工程名css/front/ibd.css" rel="stylesheet" type="text/css" />
js:
<script type="text/javascript" src="http://域名:端口/工程名/js/front/poplayer.js"></script>
检查以上两种方法是否引用正确。
在页面里引入bootstrap的css和js文件在方法有两种
第一种方去
用代理引用的方法,不用下载文件,直接在头部写引入代码。
<!doctype html><html>
<head>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta charset="utf-8">
<title>2B前端</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
......
第二种方法
就是下载本地引用的方法
1. 到http://v3.bootcss.com/getting-started/#download下载文件
2 把下载的文件进行引用
<!doctype html><html>
<head>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta charset="utf-8">
<title>2B前端</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="/jquery/3.0.0/jquery.min.js"></script>
<script src="/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
......