单独的文件(HTML5、CSS和JS)

separate files (HTML5,CSS & JS)

本文关键字:CSS JS HTML5 文件 单独      更新时间:2023-09-26

我最近使用HTML5、CSS3、JavaScript和一些jQuery开发了我的第一个移动web应用程序。在这个阶段,我想将HTML、CSS&JS在3个不同的文件中,并使用web服务器在这些文件之间建立连接。有什么解决方案吗?

只需声明对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>

我建议研究像这样的构建器

  • Apache Ant
  • HTML5 Boilerplate构建脚本
  • Grunt(基于node.js)
  • Make或Rake文件

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

HTML5 Boilerplate是一个很好的阅读和浏览工具。他们在性能和开发过程上花费了大量时间。