为什么我们需要外部 CSS 和 JS 文件
在本文中，我们将了解 CSS 和 JS 文件。我们将探讨它们的功能以及在 HTML 文档中使用它们的不同方式。了解所有这些内容后，我们将理解为什么我们需要外部 CSS 和 JS 文件。CSS
CSS 代表层叠样式表。CSS 用于将样式应用于您的网站和网页。它用于使网页看起来更易于理解、更美观且对用户更具吸引力。CSS 文件可以在任何文本编辑器中编写，但必须使用 .css 扩展名保存。
一个简单的 HTML 文档会为您提供一个包含无组织信息的网页。为了组织这些信息并以适当的方式显示它，我们使用 CSS 文件。 CSS 的一些用途包括背景颜色选择、字体大小选择、字体颜色、文档宽度等等。
在 HTML 文档中使用 CSS 有三种方式 -
内联 - 在内联 CSS 中，我们在 <body> 标签内使用 CSS 属性，每个元素的 CSS 属性都与元素本身相关联。
内部或嵌入 - 在内部 CSS 中，我们在 HTML 文档的头部部分内使用 CSS 属性。我们必须在头部部分内创建一个 <style> 标签，其中包含 HTML 文档的所有样式。
外部 - 在外部 CSS 中，我们在 HTML 文档外部定义一个单独的 CSS 文件，其中包含网页的所有样式。我们使用 <link> 标签将外部 css 文件与 HTML 文件链接起来，以获取应用于 HTML 标签的所有 css 属性。
示例
<!DOCTYPE html> <html> <head> <title>External CSS</title> <link rel="stylesheet" href="file.css"> </head> <body> <h1>Computer Science </h1> <p>It is the most evolving sector of the industry and there are lot of job opportunities in this field in upcoming years.</p> </body> </html>
JS
JS 代表 Java Script。它是一种用于为网页提供自定义"行为"的网络编程语言。通过使用 JS，我们可以为网站添加交互性，使其具有视觉吸引力、互动有趣，并添加许多功能，使用户体验更加精致。我们主要有两种方法可以在 HTML 文件中使用 JS -
内部 JS - 在此方法中，我们使用 <script> 标签将我们的 JS 代码嵌入 HTML 文件本身。它仅在我们在网页上实现的功能有限时才有用，例如添加动画、接受小表格。但随着代码的复杂性增加，使用外部 JS 文件对我们来说变得很重要。
外部 JS − 如果我们创建一个带有 .js 扩展名的文件，它将变成一个 java 脚本文件，并将包含我们网站所需的所有代码。要将其与 HTML 文件链接，我们需要使用 <script> 标签以及定义 JS 文件源的 src 属性。
示例
<!DOCTYPE html> <html> <head> <title>External JS</title> </head> <body> <p>Let’s understand why external JS is prioritized over internal JS.</p> <script src="external.js"></script> </body> </html>
为什么我们有外部 JS 和 CSS 文件
CSS- 使用外部 css 而不是内联或内部 css 的主要原因之一是外部 css 文件可重复使用，即它可以在多个 HTML 文档中使用。我们可以创建一个 CSS 文件，然后使用 <link> 标记将其附加到不同的 HTML 文件中，它将在每个网页上应用相同的属性。
另一个主要原因是它在样式代码(即 CSS)和信息代码(即 HTML)之间创建了分离。在内联或内部 css 中，我们将 HTML 标记和 CSS 一起编写或在 HTML 文件中编写，这在编辑时会造成混乱。
外部 CSS 解决了这个问题，因为 HTML 和 CSS 都保存为不同的文件，如果出现任何问题，我们就知道我们的 CSS 代码在哪里，我们的 HTML 代码在哪里。
此外，根据 Google 的一项实验，使用外部 CSS 的网站会首先被推荐给用户，因为它的代码更简洁，便于搜索引擎访问信息。
JS − 使用外部 JS 文件允许我们通过为每个功能使用单独的 JS 文件来减少将多个功能的代码放在一个地方可能产生的复杂性。
使用外部 JS 文件的另一个优点是能够更快地调试代码，而使用内部 JS 文件调试速度较慢。
假设我们有一个包含数千行代码和大量功能的内部 JS 文件。如果我们发现网页上有异常行为，我们将不得不检查整个代码，这将是一个漫长的调试过程。
但另一方面，如果我们根据它们提供的功能对代码进行分离，我们就可以很容易地找到错误，因为我们已经知道网站中的哪些功能是错误的，以及提供此功能的 JS 文件位于何处。
