当我们创建一个 HTML 页面时，通常会用到 CSS 和 JavaScript 来制作页面的样式和交互。但是，我们应该把 CSS 和 JavaScript 代码直接放在 HTML 文件中吗？这个问题有很多不同的答案，取决于你的具体情况和需求。
把 CSS 和 JavaScript 直接放在 HTML 中的好处
快速启动
把 CSS 和 JavaScript 直接放在 HTML 文件中可以很快地启动项目，因为它们不需要通过网络请求加载。当用户访问网站时，HTML 文件直接下载到用户的浏览器中，并且所有的代码都在一个文件中，所以用户可以很快地看到网站的内容。这对于一些小型项目或者快速原型开发非常有用。
简单易懂
如果你只有一个 HTML 文件，并且需要添加一些 CSS 或 JavaScript 代码，那么在 HTML 文件中直接插入相关代码可能更加简单易懂。这种方式适用于小型项目或者个人项目，而且可以节省时间和精力。
不要把 CSS 和 JavaScript 直接放在 HTML 中的缺点
可维护性差
把 CSS 和 JavaScript 直接放在 HTML 文件中使得代码变得混乱不堪，难以维护。如果你的网站或者项目越来越大，那么在 HTML 文件中维护 CSS 和 JavaScript 代码将变得越来越困难。这也使得其他开发人员很难理解和修改你的代码。
加载时间较长
将所有的代码放在一个文件中会增加文件的大小，导致网页加载时间变长。对于大型项目而言，这个问题特别严重。一般来说，我们应该尽量减少 HTML、CSS 和 JavaScript 文件的大小，以便提高网页的加载速度。
最佳实践
所以，什么是最佳实践呢？一般来说，我们应该尽可能把 CSS 和 JavaScript 的代码分离出来，并使用外部文件引入到 HTML 页面中。这种方式可以保持代码的清晰简洁，易于维护，并且可以减少网页加载时间。
以下是一个示例 HTML 文件，它引用了一个外部 CSS 文件和一个外部 JavaScript 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- --------------- ----- ---------------- ----------------- ------- ------ ---------- ----------- ---------- -- -- ------------ ------- ---------------------- ------- -------
在这个示例中，我们使用 link 标签引入了一个名为 style.css 的外部 CSS 文件，同时使用 script 标签引入了一个名为 app.js 的外部 JavaScript 文件。
总结
虽然在 HTML 文件中直接放置 CSS 和 JavaScript 代码可能会快速启动并且简单易懂，但是这种方式通常不是最佳实践。我们应该尽量把 CSS 和 JavaScript 代码分离出来，并使用外部文件引入到 HTML 页面中，以提高代码的维护性和网页的加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15355