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

font-size:14px;

>

font-size:14px;

font-size:14px;

>

**font-size:14px;

HTML中引入CSS**

font-size:14px;

>

font-size:14px;

font-size:14px;

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

font-size:14px;

>

**font-size:14px;

行内式:**font-size:14px;

brush:css; toolbar: true; auto-links: true;

font-size:14px;

<table width=

208

cellpadding=

0

border=

0

cellspacing=

0

>

font-size:14px;

>

font-size:14px;

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

font-size:14px;

>

**font-size:14px;

内嵌式: **

font-size:14px;

>

brush:html; toolbar: true; auto-links: true;

font-size:14px;

<html> <head> <title>内嵌式CSS演示</title> <!-- 这就是一个标准的内嵌式CSS--> <style type=

text/css

> p {font-style: italic; color:#ff0000;} i {font- style:italic;color:#0000ff;} </style>

</head>

<body> <p>段落演示:font-style: italic; color:#ff0000;</p> <i>斜体演示:font-style:italic;color:#0000ff;</i> <h1>h1级标题演示:none</h1> </body> </html>

font-size:14px;

>

font-size:14px;

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

font-size:14px;

>

**font-size:14px;

导入式: **

font-size:14px;

>

brush:css; toolbar: true; auto-links: true;

font-size:14px;

<html> <head> <title>导入式CSS演示</title> <!-- 这就是一个标准的导入式CSS--> <style type=

text/css

> @import

test.css

; </style> </head>

<body> <p>段落演示:font-style: italic; color:#ff0000;</p> <i>斜体演示:font-style:italic;color:#0000ff;</i> <h1>h1级标题演示:none</h1> </body> </html>

font-size:14px;

>

font-size:14px;

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

font-size:14px;

>

**font-size:14px;

链接式:**

font-size:14px;

>

font-size:14px;

>

brush:css; toolbar: true; auto-links: true;

font-size:14px;

<html> <head> <title>链接式CSS演示</title> <!-- 这就是一个标准的链接式CSS--> <link href=

test.css

rel=

stylesheet

type=

text/css

/> </head>

<body> <p>段落演示:font-style: italic; color:#ff0000;</p> <i>斜体演示:font-style:italic;color:#0000ff;</i> <h1>h1级标题演示:none</h1> </body> </html>

font-size:14px;

上面就是一个链接式的CSS演示,也是多了一条语句"<link href=

test.css

rel=

stylesheet

type=

text/css

/>",感觉上比导入式多了点,但是这种方式却没有导入式的问题,它会在页面文件主体加载前就加载样式文件,这样的话一开始就可以看到有样式的页面。

font-size:14px;

>

font-size:14px;

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

font-size:14px;

>

font-size:14px;

>

font-size:14px;

>

font-size:14px;

>

font-size:14px;

**font-size:14px;

HTML中引入JavaScript**

font-size:14px;

>

font-size:14px;

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

**font-size:14px;

行内式:**

brush:js; toolbar: true; auto-links: true;

font-size:14px;

<a href=

#

onclick=

alert('这是行内式的方式')

>点我试试</a>

**font-size:14px;

内嵌式font-size:14px;

:**

brush:html; toolbar: true; auto-links: true;

font-size:14px;

<html> <head> <title>JavaScript演示</title> </head> <body> <script language=

JavaScript

type=

text/javascript

> document.write(

这是一个简单的JS演示

); </script> </body> </html>

**font-size:14px;

链接式:**

brush:html; toolbar: true; auto-links: true;

font-size:14px;

<html> <head> <title>JavaScript演示</title> </head> <body> <script src=

test.js

></script> </body> </html>

font-size:14px;

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

font-size:14px;

>

font-size:14px;

>

font-size:14px;

>

font-size:14px;

>