为什么我们要外部引入js,css
为什么我们要外部引入js和css文件？
还记得老师教我们开始学html的时候，是将css样式和js代码通过<style type=”text/css”></style>和<script></script>的方式直接写在html网页文件当中的，因为方便我们学习，利于我们看清楚这之中的代码结合。之后老师也告诉我们要外部引入，以后再写css样式和js的话要写到一个单独的文件即.css和.js文件当中，通过<link rel=”stylesheet” type=”text/css”?href=”css文件”/>和<script src=”js文件”??type=”text/javascript”></script>的方式引入进来，当时不理解，但是也没有过多的去想为什么，只因为她是老师，我是学生，老师永远是对的，至少那个时候是这样认为的。现在想想，其实还是很有道理的……
首先说一下css和js引入的方式：
css引入方式
css在页面里面一般有三种引入方式
1.在页面里面直接写
<style type=”text/css”>
body{
margin: 0;
padding: 0;
}
</style>
2.用link进行引用
<link rel=”stylesheet” type=”text/css” href=”my.css”>
3.用import进行引用
<style type=”text/css”>
@import url(my.css);
</style>
第一种是直接在html页面上进行css书写，而第二种和第三种是采用外部引用样式单独提取文件。
JS的引入方式
JavaScript 可以出现在 HTML 的任意地方；它的三种引入方式：
1. 位于 head 部分：
?? <head>
????? <script language=”javascript”>….</script>
????? //
??? <script type=”text/javascript”>….</script>
? </head>
2. 位于 body 部分：
?? <body>
?????? <script language=”javascript”>….</script>
????? //
???? <script type=”text/javascript”>…. </script>
?? </body>
3. 在 body 和 head 部分的脚本：
??? 你可以在文档中放置任何数量的脚本，因此你既可以把脚本放置到 body，又可以放置到 head 部分。
?? <html>
?? <head>
???????? <script type=”text/javascript”> …. </script>
?? </head>
?? <body>
??????? <script type=”text/javascript”> …. </script>
?? </body>
? </html>
4. 使用外部 JavaScript文件
?? 大多数时候我们在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。
?? 为了达到这个目的，可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。
?? 这种方式需要在html头部引入：
? <head>
????? <script src=”XX.js” type=”text/javascript”></script>
?</head>
那么我们为什么我们要外部引入js,css呢？外部引入js,css和直接写在网页中的区别？
大家其实都知道，当我们浏览网页的时候，在我们客户端这边都会有页面的缓存文件。在我们访问这一个页面的时候，客户端就会下载css和js文件到本地。其实区别就在这里，当我们访问完这一页面，再去访问网站其他页面，页面就会重新加载一次。如果我们将css样式和js脚本写到html网页当中，那么它将每次都得重新加载一次这些css样式和js脚本。但是，通过外部引入的方式导入css文件和js文件则不同，因为之前访问页面的时候客户端已经下载js文件和css文件到本地，所以再次访问页面的时候就会判断不会再次下载这个文件，也就是说访问页面的时候对于css,js静态文件如果未修改过页面在刷新或者其他页面引用的相同路径的文件的时候会直接用缓存,不需要再次从服务器下载。这样就减少了网页载入的速度，因为更利于网页的优化。所以，老师说的其实很有道理哦
