单独的文件（HTML5、CSS 和 JS）答案

【问题标题】：separate files (HTML5,CSS & JS)单独的文件（HTML5、CSS 和 JS）
【发布时间】：2012-08-22 12:21:59
【问题描述】：

我最近使用 HTML5、CSS3、JavaScript 和一些 jQuery 开发了我的第一个移动 Web 应用程序。在这个阶段，我想将 HTML、CSS 和 JS 的代码分离到 3 个不同的文件中，并使用 Web 服务器在这些文件之间建立连接。有什么解决办法吗？

【问题讨论】：

很难说出这里问的是什么。看起来问题是在问：“如何将我的 HTML、CSS 和 JS 放入 3 个单独的文件中？”答案是“通过将它们放入 3 个单独的文件中”。我们无法知道您卡在哪里。
尤其是您提到的网络服务器确实令人困惑，因为我想不出任何其他方式来提供 HTML、CSS 和 JS 文件。
Youre right.I know my questions might looks silly to a web developer.As this is my first experience working with markup languages as well as web application(so far I have worked with Java and C#).Also I dont 了解 Web 架构和 Web 服务。我的意思是，如果我将 HTML5、CSS3 和 JS 分隔在不同的文件中并将它们存储在一个文件夹中，那么它们应该如何根据一个文件夹来引用另一个？

标签： javascript html web-applications css mobile

【解决方案1】：

只需在 HTML 中声明对 CSS 和 JS 的引用。出于性能原因，最好将 CSS 引用放在文件头部，而将 JS 引用放在文件末尾，就在关闭标记之前。这样，您的页面将立即加载并且看起来正确，并且不会被阻止下载 JavaScript。 JS 将是最后加载的内容。这是 HTML 标记的示例：

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" />
</head>

<body>
...

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myscript.js"></script>

</body>
</html>

【讨论】：

【解决方案2】：

我会建议研究像这样的建设者

Apache Ant
HTML5 样板构建脚本
Grunt（基于 node.js）
Make 或 Rake 文件

这允许您分离所有文件，然后对文件进行 lint。这也允许您随后合并和缩小文件。至于不同的css、html和javascript。这些都应该保留在单独的文件中。但是缩小文件并将它们组合成单个文件肯定会减少页面加载时间。

HTML5 Boilerplate 是一个很好的阅读和通读方法。他们在性能和开发流程上花费了大量时间。

【讨论】：