關於HTML文件、JS文件、CSS文件

時間 2019-11-29

標籤關於 html 文件 css 欄目 HTML 简体版

原文原文鏈接

把JS和CSS腳本寫在html裏和寫在獨立文件裏有什麼區別？

1. 都寫在html裏是性能最優的方案。

2. 都寫在html裏是可維護性最差的方案。

3. 分開寫在js、css、html是可維護性最有的方案。

4. 分開寫在js、css、html是性能最差的方案。

5. 折中一下，不可複用的js和css直接寫在html中。

6. 再優化下，把js都打包在一個文件裏，css也打包在一個文件，減小http請求。

7. 以上都過渡完了，那個時候會有一羣人叫你大神。javascript

js的三種使用方式（行內js、內部js、外部js）

一、行內js：js不單獨寫出css

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>js使用方式1：行內js</title>  
6. </head>  
7. <body>  
8. <input type="button" value="點擊有驚喜" onclick="javascript:alert('哈哈哈哈')">  
9. <!--onclick:點擊觸發一個事件，alert：彈出一個對話框-->  
10. </body>  
11. </html>

二、內部js：script裏的程序整個頁面均可以用html

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>js使用方式2：內部js</title>  
6.     <script type="text/javascript">  
7.         //聲明一個函數(整個文檔均可以使用)  
8.         function surprise() {  
9.             alert('恭喜你中了一百萬')         /*彈出框*/  
10.         }  
11.     </script>  
12. </head>  
13. <body>  
14. <input type="button" value="點擊有驚喜" onclick="surprise()"><!--調用函數-->  
15. <input type="button" value="點擊" onclick="surprise()">  
16. </body>  
17. </html>

三、外部js：不少html頁面均可以調用設定的js頁面java

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>js使用方式3：外部js</title>  
6.     <!--不少html頁面均可以調用js4.js頁面-->  
7.     <script src="../../js/js4.js" type="text/javascript" charset="utf-8">  
8.     </script>  
9. </head>  
10. <body>  
11. <input type="button" value="點擊" onclick="test()">12. </body>13. </html>