HTML中引入css和js的方法

html-css032

HTML中引入css和js的方法,第1张

我们在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>

......