直接上代碼，相信大家是看得懂的，最好的辦法是把代碼粘過去，自己修改試試，看看效果！
上面是剛開始的執行效果，相應的html，js，css展示如下：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML引入JS/CSS的三種方式</title>
<!--引入外部的css文件-->
<link rel="stylesheet" href="css/index.css" />
<!--引入外部的js文件-->
<script type="text/javascript" src="js/index.js" ></script>
<!--在head中添加js控制-->
<script type="text/javascript">
function onClickB1() { document.getElementById("b1").innerHTML = "HEAD"; } </script>
<!--在head中添加css修飾-->
<style type="text/css"> #j2 { background-color: #808080;
}
</style>
</head>
<body bgcolor="#F5F5F5">
<div id="j1" class="divs">
<button id="b1" onclick="onClickB1()">在head中</button>
<p>方式一：將js代碼寫在head中，如本例所示，點擊按鈕改變按鈕的內容！</p>
<p> 同理，也可以將css樣式寫在head中，如上面的代碼所示，設置j2的背景色，這里需要注意的是，其實我在外部的css文件中也設置了j2的背景色， 所以這兩處設置是沖突的，但實驗證明，網頁中顯示的是在head中修飾的屬性值，這也許就是近水樓台先得月吧！ </p>
</div>
<div id="j2" class="divs"">
<button id="b2" onclick="onClickJ2()">在body中</button>
<p>方式二：將js代碼寫在body中，如本例所示，點擊按鈕改變div的背景色！</p>
<p>同理，在html的body中也可以設置css樣式，代碼如下面所示，設置b3的文字顏色為紅色。</p>
</div>
<div id="j3" class="divs">
<button id="b3" onclick="gaiBian()">在外部js中</button>
<p>方式三：將js代碼寫在外部js文件中，並在html文件的head中引入該js，在本例中，點擊按鈕改變按鈕的內容，並改變div的顏色！【推薦】</p>
<p>當然，將css通過外部文件的方式引入html是最好的，也是推薦的方式。【推薦】</p>
<p style="background: red;"><strong>這里需要注意的是，和js不同的是，css可以直接寫在組件的內部，例如在此，我將文字直接加粗,背景變紅！</strong></p>
</div>
<!--在body中添加js控制-->
<script type="text/javascript">
function onClickJ2 () { document.getElementById("j2").style.background = "red"; } </script>
<style type="text/css"> #b3 { color: red;
}
</style>
</body>
</html>
index.css
.divs { width: 100%; height: 250px; background-color: grey;
/*margin的屬性順序是上右下左*/ margin: 10px 10px 5px 1px;
} #j1 {
/*這里把上面divs中設置的背景顏色覆蓋了*/ background-color: white;
} #j2 {
/*這里把上面divs中設置的背景顏色覆蓋了*/ background-color: whitesmoke;
} #j3 {
/*這里把上面divs中設置的背景顏色覆蓋了*/ background-color: antiquewhite;
}
index.js
function gaiBian () { document.getElementById("b3").innerHTML = "外部成功"; document.getElementById("j3").style.background = "lemonchiffon"; }
三個按鈕都點一遍后的效果：
