【html】【2】html引入外部文件js css

1》引入js

我们只是写了简单必须的html标签，从未给标签添加点击事件，这次页面添加事件.

》写入html页面，可以在<head>标签内也可以在<body>标签内

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <title>小娜娜</title>
 5     <script type="text/javascript">
 6  document.write("<h1>Hello World!</h1>")  7     </script> 
 8     </head>
 9 <body>
10     <script type="text/javascript">
11  document.write("<h1>Hello World!</h1>") 12     </script> 
13     <div>
14         这是main内容
15     </div>
16 </body>
17 </html>

》写在js文件内

你想啊，当js逻辑过多的时候 html中js代码过多，页面杂乱不说，维护修改起来特别不方便，于是聪明的人类把 js代码与html代码分离出来了，

把代码写入以.js文件结尾的文件内，html页面引入外部js文件即可

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <title>小娜娜</title>
 5     <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> //引入外部js文件
 6     </head>
 7 <body>
 8     <div>
 9         这是main内容
10     </div>
11 </body>
12 </html>

2》引入css样式【同上js】

不同之处在于，各自所用的标签不一样 css=》</style>标签 js=》<script>标签

 1 <html>
 2 <head>
 3     <style type="text/css">
 4  h1 {color: red}
 5  p {color: blue}
 6     </style>
 7 </head>
 8 
 9 <body>
10     <h1>header 1</h1>
11     <p>A paragraph.</p>
12 </body>
13 </html>

外部css文件，以.css结尾文件

1 <html>
2 <head>
3     <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
4 </head>
5 <body>
6     ......
7 </body>
8 </html>

秒客网

【html】【2】html引入外部文件js css

相关文章