关于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>