CSS和JavaScript的常用引入方式的区别和优缺点
CSS的引用
在HTML里面导入CSS总共有四种方式:
- 内联方式
- 嵌入方式
- 链接方式
- 导入方式
//链接方式
<link rel="stylesheet" type="text/css" href="./03.css">
另外在vscode创建03.css文件,在同一个路径下,./是指同一路径下而. ./是指上一级路径
优点:
这种引入的方式是最常见的,也是我们最符合现代开发的要求。这样书写的优点不仅在于 与其它页面进行共享相同的css代码,节省后期的维护成本,而且当浏览器第二次访问到相同的资源,就可以直接从本地获取资源,减少带宽。提升用户体验。
但是,如果在开发过程中(注意:我的说是开发过程中)这样书写的话,就不利于我们后期的维护,当找寻其中一处代码进行修改的话,就相对比较麻烦。
JavaScript的引用
- 行内导入JS (慎用 不安全)
- 内嵌式
- 外联式
//外联方式
<script type="text/javascript" src="js/script.js"></script>
另外在vscode创建js文件夹下的script.js文件
优点:
写到外部文件中,可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制,
是推荐使用的方式
script标签一旦用于引入外部文件了,就不能再编写代码了,即使编写了浏览器也会忽略,
如果需要则可以再创建一个新的script便签用于编写内部代码