HTML中引入css和js的方法

html-css022

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

我们在HTML中经常需要引入CSS和JS文件，那么如何引入呢？下面我给大家演示一下。

工具/材料

Sublime Text

01

首先新建一个文件夹，在文件夹下面建立如下图所示的文件

02

接下来用Sublime Text打开HTML文件，写入HTML结构，如下图所示

03

然后我们在Head标签内用link标签引入CSS文件，如下图所示

04

最后用Script标签引入JS文件即可，如下图所示

在网上下载好字体包

在static下新建文件夹，名字自定义，用来存放字体包

在新建好的文件夹下新建一个css文件，同样名称自定义

在这里插入图片描述

检查自己的 webpack.base.conf.js 文件，是否有如下代码，没有需要自己写上

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

}

}

打开刚才新建的 css 文件

@font-face{

font-family: '思源黑体'

src: url('../siyuan/SourceHanSansCN-Normal-2.otf')

font-weight: normal

font-style: normal

}

接着在main.js文件中引入css文件

import '../static/siyuan/font.css'

在需要设置该字体的位置写font-family:'思源黑体' 就可以了

方法一，在调用文件的顶部加入下例代码：

document.write(”<script language=javascript src=’/js/import.js’></script>”)

(注：有时你引用的文件还可能需要引用其他的js,我们需要将需要的那个js文件也以同样的方法引用进来)

方法二,通过中间界面对js进行应用

就是我们可以在某个html中引用了你需要的js文件，我们可以通过拿到那个html文件的对象，然后在通过这个对象去引用js的方法。

（一般不常用）

方法三：在将下边代码放入Body中：

new_element=document.createElement(”script”)

new_element.setAttribute(”type”,”text/javascript”)

new_element.setAttribute(”src”,”import.js”)

document.body.appendChild(new_element)

我们来分析一下关键的几句代码：

首先，我们利用document.createElement(”script”)生成了一个script的标签，设置其 type属性为text/javascript，src为import.js(这里的1.js同2.js放在同一个目录，也可放在不同的目录)。最后将这个标签动态 地加入body中。如此一来，我们就可以调用到不同js文件中的方法了。

注意：<script language=”JAVASCRIPT” src=’1.js’></script>一定要放在body下面。

因为在2.js中用到了body（document.body.appendChild(new_element)）

如果将引如2.js的代码放在body上面，也就是说，

进入页面后，还没有生成body就已经执行b.js里的document.body.appendChild(new_element)了。

这时body不存在就会抛JavaScript错误。