浅谈JS和CSS内联外联注意事项

在前端开发过程中，我们不仅需要写好HTML结构，还需要使用一些CSS和JS来美化和动态改变页面效果。而CSS和JS的引入方式比较多样化，最主要的形式就是内联和外联。本篇文章将详细介绍这两种引入方式的注意事项以及它们的优缺点。

外联方式

外联的方式就是将CSS和JS放在单独的文件中，通过<link>标签和<script>标签进行引入。这种方式的优点在于维护和更新方便，可以在多个页面中共用同一个CSS和JS文件。另外，由于HTML、CSS和JS代码分离，使得代码逻辑更加清晰，可读性更高。

外联CSS

外联CSS的代码如下：

<link rel="stylesheet" href="style.css">

其中，href属性的值指向一个CSS文件的路径。

外联CSS的注意事项：

外联CSS通常放在<head>标签中，以保证页面渲染前就加载CSS文件。
注意文件路径和文件名的大小写，多用相对路径。
如果有多个CSS文件，可以通过<link>标签的media属性设置不同的条件加载不同的CSS文件。

外联JS

外联JS的代码如下：

<script src="app.js"></script>

其中，src属性的值指向一个JS文件的路径。

外联JS的注意事项：

外联JS通常放在<body>标签的底部或<head>标签中的底部，以减少页面加载时间。
注意文件路径和文件名的大小写，多用相对路径。
对于需要在多个页面使用的JS文件，可以通过使用模块化编程方式，在一处编写代码，然后通过<script>标签引用。

内联方式

内联的方式就是将CSS和JS写在HTML文件的<style>标签和<script>标签中，放在HTML页面的结构中。这种方式的优点是减少HTTP请求，在性能上有一定的优势。但是缺点也很明显，代码重复率高，难以维护和使用。

内联CSS

内联CSS的代码如下：

<style>
  body {
    background-color: skyblue;
  }
</style>

可以看到，内联CSS的写法和外联CSS的写法差别不大，只不过把CSS代码放在了<style>标签里面。

内联CSS的注意事项：

不要在同一个HTML文件中重复写样式代码。
建议仅在少量样式或者是动态样式的情况下使用内联CSS样式。

内联JS

内联JS的代码如下：

<script>
  document.getElementById("myBtn").addEventListener("click", function() {
    alert("Hello World");
  });
</script>

可以看到，内联JS的写法和外联JS的写法也很相似，只不过把JS代码放在了<script>标签里面。

内联JS的注意事项：

不要在同一个HTML文件中重复写JS代码。
建议仅在少量的JS代码或者是页面交互较少的情况下使用内联JS。如果代码过多，会降低页面性能。

例子

下面给出两个代码示例：

外联CSS和外联JS

index.html

<!DOCTYPE html>
<html>
<head>
  <title>外联CSS和外联JS示例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="myHeading">Welcome to my website</h1>
  <button id="myBtn">Click me</button>

  <script src="app.js"></script>
</body>
</html>

style.css

body {
  background-color: skyblue;
}

#myHeading {
  color: white;
  font-size: 4em;
  text-align: center;
}

app.js

var myBtn = document.getElementById("myBtn");
var myHeading = document.getElementById("myHeading");

myBtn.addEventListener("click", function() {
  myHeading.textContent = "Hello World";
});

在这个例子中，我们将CSS和JS代码分别放在了独立的文件中，通过<link>和<script>标签引入到HTML页面中。

内联CSS和内联JS