关于HTML文件、JS文件、CSS文件
把JS和CSS脚本写在html里和写在独立文件里有什么区别？
1. 都写在html里是性能最优的方案。
2. 都写在html里是可维护性最差的方案。
3. 分开写在js、css、html是可维护性最有的方案。
4. 分开写在js、css、html是性能最差的方案。
5. 折中一下，不可复用的js和css直接写在html中。
6. 再优化下，把js都打包在一个文件里，css也打包在一个文件，减少http请求。
7. 以上都过渡完了，那个时候会有一群人叫你大神。
js的三种使用方式（行内js、内部js、外部js）
1、行内js：js不单独写出
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>
2、内部js：script里的程序整个页面都可以用
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>
3、外部js：很多html页面都可以调用设定的js页面
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>
关于HTML文件、JS文件、CSS文件的更多相关文章
- js或css文件后面的参数是什么意思？
经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type=& ...
- MVC学习随笔----如何在页面中添加JS和CSS文件
http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...
- grunt 单独压缩多个js和css文件【转】
原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...
- gulp-rev同时将js和css文件写在一个rev-manifest.json文件里面的方式探讨
参考: https://segmentfault.com/q/1010000002876613 https://github.com/sindresorhus/gulp-rev 测试发现,在官网上最主 ...
- 使用Maven构建Java Web项目时，关于jsp中引入js、css文件路径问题。
今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...
- [转][前端优化]使用Combres合并对js、css文件的请求
本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.ht ...
- 常用js，css文件统一加载方法，并在加载之后调用回调函数
原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...
- 为js和css文件自动添加版本号
web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...
- jquery，js引入css文件，js引入头尾
jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...
- 【半原创】将js和css文件装入localStorage加速程序执行
首先感谢某某作者写的文章:http://www.jb51.net/article/12793.htm 直接上代码,注意文件名为env.js 原理如下: 一次批量加要加载的文件存入数组,采用Ajax方式 ...
随机推荐
- Sublime折腾记录
本文可以理解为FAQ,主要是为了大家GET一些技能,具体内容包括LICENSE.重置.Package Control的安装,其他内容以后可能补充... 最后说明一下自己的版本:Build 3114 L ...
- BST AVL RBT B- B+ 的一些理解
BST(二叉查找树,排序二叉树),如果数据有序的话,组成的二叉树会形成单列的形式,导致查询效率低AVL(平衡二叉树) 使树的左右高度差的绝对值不超过2,保证了查询效率.但是插入和删除会带来多次旋转,导 ...
- qt5.5.1+vs2010发送邮件
最近用到了这个功能,用于验证登陆~为此在网上找了好久,发现这方面的问答并不多!唯独这篇的解答实在.原文传送 1.首先选定自己的发送方的邮箱,无论是163还是qq邮箱等,首先都得开通SMTP服务:以16 ...
- transform、transition 和 animation区别
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- Codeforces Round #539 (Div. 2) C. Sasha and a Bit of Relax(前缀异或和)
转载自:https://blog.csdn.net/Charles_Zaqdt/article/details/87522917 题目链接:https://codeforces.com/contest ...
- Logisim的使用
准备 通过Logisim的官网下载适合你机器的Logisim的软件,启动Logisim应用程序(Logisim可能有点bug,如果程序运行诡异,可能内部已经奔溃,最好的解决方法是重新启动它). Log ...
- Java垃圾回收之新生代垃圾收集器
问题:什么是Stop-the-World? 1.JVM由于要执行GC而停止了应用程序的执行 2.任何一种GC算法中都会发生 3.多数GC优化通过减少Stop-the-world发生的时间来提高程序的性 ...
- ios之数据持久化
9.1 数据持久化概述 iOS中可以有四种持久化数据的方式: 属性列表.对象归档.SQLite3和Core Data 9.2 iOS应用程序目录结构 iOS应用程序运行在Mac os模拟器时候,有一下 ...
- 解决普遍pc端公共底部永远在下面框架
<div style="width: 90%;height: 3000px;margin: 0 auto; background: red;"></div> ...
- vue 页面过渡效果
App.vue 模板 <template> <div id="app"> <transition :name="transition&quo ...