概述

我们在编写 HTML 页面的时候，经常都需要使用 css 来美化外观，使用 JavaScript 来增加交互性。那么，我们该如何将 css 和 javascript 加入到 HTML 页面中呢？这里我列举了几种方式供大家选择，希望对大家能有所帮助。

HTML 中引入 CSS

在 HTML 中引入 CSS 主要有 4 种方式，分别是行内式、内嵌式、链接式和导入式，下面就分别对每种方式进行举例说明

行内式

  1. [root@liqiang.io]# cat test.html
  2. <table width="208" cellpadding="0" border="0" cellspacing="0">

这是一个典型的行内式 CSS 代码，这里我们可以看到，它将对 HTML 元素的控制直接作为 HTML 元素的属性给出。虽然这样是可行的，但是这对于我们维护来说是很不方便的，同时，如果我们有好多个 table 都需要同样的样式，那么我们就需要进行编写多次了，这也带来了编码的重复性，因此，不推荐使用这种方式。

内嵌式

  1. [root@liqiang.io]# cat test.html
  2. <head>
  3.     <title>内嵌式CSS演示<title>
  4.     <!--这就是一个标准的内嵌式CSS-->
  5.     <style type="text/css">
  6.         p {
  7.             font-style: italic;
  8.             color:#ff0000;
  9.         }
  10.         i {
  11.             font-style:italic;
  12.             color:#0000ff;
  13.         }
  14.     </style>
  15. </head>

上面是一个内嵌式的CSS，相对于行内式来说有了点改进，改正了我们说的不方便修改，当我们需要修改的时候我们可以在文件前面查找要修改的部分，然后进行修改，同时，在同个页面中的 table 也可以一起使用同一段 CSS 了，但是，问题又来了，如果我们好几个页面都需要使用同样样式的话，那么我们还是需要重复编码的，所以这种方式还是不推荐。

导入式

  1. [root@liqiang.io]# cat test.html
  2. <html>
  3.     <head>
  4.         <title>导入式CSS演示</title>
  5.         <!--这就是一个标准的导入式CSS-->     
  6.         <style type="text/css"> @import test.css; </style> 
  7.     </head>
  9.     <body>
  10.         <p>段落演示：font-style: italic; color:#ff0000;</p>
  11.         <i>斜体演示：font-style:italic;color:#0000ff;</i>
  12.         <h1>h1级标题演示：none</h1> 
  13.     </body>
  14. </html>

上面是一个导入式 CSS 的例子，可以看到我们这里看不到 css 的具体内容了，替代的是一个语句 “@import”test.css””，感觉上是方便了不少，但是这种导入式的方式还是有缺点的，它的缺点就是它会等整个 HTML 页面装载完毕之后才装载 CSS 文件，这样的话就导致了一个问题，那就是如果 HTML 页面太大的话，它先加载一个没有样式的页面，然后闪烁一下，才会出现有样式的页面，我就遇到过这样的情况，这样给用户的体验就很差了。但是，它已经克服了之前提到的那些缺点，还是不错的，下面介绍最后一种更不错的方式。

链接式

  1. [root@liqiang.io]# cat test.html
  2. <html>
  3.     <head>
  4.         <title>链接式CSS演示</title>
  5.         <!--这就是一个标准的链接式CSS-->
  6.         <link href="test.css" rel="stylesheet" type="text/css" />
  7.     </head>
  8.     <body>
  9.         <p>段落演示：font-style: italic; color:#ff0000;</p>
  10.         <i>斜体演示：font-style:italic;color:#0000ff;</i>
  11.         <h1>h1级标题演示：none</h1>
  12.     </body>
  13. </html>

上面就是一个链接式的CSS演示，也是多了一条语句 <link href="test.css" rel="stylesheet" type="text/css" /> , 感觉上比导入式多了点，但是这种方式却没有导入式的问题，它会在页面文件主体加载前就加载样式文件，这样的话一开始就可以看到有样式的页面。

总结

一般来说，做网页时把样式写在多个样式文件上，因此，我们先用链接式引入一个总的 CSS 文件，然后在这个 CSS 文件中使用导入式来引入其他 CSS 文件。

HTML 中引入 JavaScript

其实在页面中引入 JavaScript 和引入 CSS 基本上差不多，下面还是按照刚才 CSS 的导入方式类似的方式进行介绍。

行内式

  1. [root@liqiang.io]# cat test.html
  2. <a href="#" onclick="alert('这是行内式的方式')">点我试试</a>

内嵌式

  1. [root@liqiang.io]# cat test.html
  2. <html>
  3.     <head>
  4.         <title>JavaScript演示</title>
  5.     </head>
  6.     <body>
  7.         <script language="javaScript" type="text/javascript"> 
  8.             document.write("这是一个简单的JS演示"); 
  9.         </script>
  10.     </body>
  11. </html>

链接式

  1. [root@liqiang.io]# cat test.html
  2. <html>
  3.     <head>
  4.         <title>JavaScript演示</title>
  5.     </head>
  6.     <body>
  7.         <script src="test.js"></script>
  8.     </body>
  9. </html>

相对于 CSS 来说，JavaScript 没有所谓的导入式一说，这里直接使用链接式的方式了，以上就是 JavaScript 的演示了，大家可以根据需要进行自行选择喜欢的方式，但是，别忘记了无论哪种方式，都要兼顾方便维护以及方便重用的原则。