Question

我被分配了修改网站的任务，目前我正在处理index.html页面。之前的编码器在其间混合了大量的javascript和CSS代码，并且变得难以阅读。

我想知道是否有必要在其间包含标签和CSS代码？ PHP代码怎么样？每个人必须住在哪里？

编辑：

如果要引用多个javascript和CSS文件，如何包含在单个或标记中？

Answer 1

将您的javascript保存在单独的文件中，将您的css保存在单独的文件中，并在HTML中引用它们。这些引用文件相对于HTML的顺序无关紧要。至于PHP，我不会太担心它与HTML混合（只是将你的函数，类和其他脚本保存在单独的文件中，并在标题中包含它们。）

如果每个页面上的CSS相同，则拥有缓存的外部文件有助于节省带宽。如果对于不同的元素类型存在与HTML混合的不同规则，则可能存在一些冲突，但如果您重写它，它将变得更加清晰，以后更容易维护。

我喜欢保留这样的文件结构：

index.php
/css
   main.css
   othercssfiles.css
/javascript
   main.js
   otherjsfiles.js
/template
   header.php
   footer.php
/scripts
   functions.php
   otherscripts.php

然后在我的头文件中，我将放置引用css和javascript目录中的文件的HTML代码。在根目录下，我的index.php文件将包含（）;顶部的标题和底部的页脚。

“otherjsfiles.js”和“othercssfiles.css”可用于单个页面可能具有特定要求的情况，需要大量其他页面不需要的css和javascript。这意味着其他页面不需要获取不必要的数据，并且它使特定于页面的代码与整个站点代码分开。

我发现这是一种简单的方法来跟踪构成HTML页面的代码的各个方面，但自然你会找到组织它的方法对你有用。

编辑：

如果有多个javascript和CSS文件   将被引用，如何包括   在单个或标签？

最好将它们组合到一个文件中以保存HTTP请求（这需要时间）。然后你就像普通的那样包含那些css和javascript文件。

<script type="text/javascript" src="/javascript/main.js"></script>
<link rel="stylesheet" href="/css/main.css">

此外，您似乎可以使用CSS beautifier的可读性服务，JavaScript beautifier的可读性和JavaScript minifier的阅读时（保持可读版本）并希望节省带宽。当您正在维护未创建的网站时，这些工具特别有用。

Answer 2

PHP编码允许您使用服务器标签（例如。

）将PHP / CSS散布在PHP代码中

这是正常的 - 它非常灵活且易于启动。

理想情况下，您的JavaScript应放在单独的JS文件中，并使用SCRIPT HTML标记来引用它。参见文档。

理想情况下，您的CSS应放在单独的CSS文件中，并使用STYLE HTML标记来引用它。再次，请参阅文档。

Answer 3

很少有将CSS混入HTML的正当理由 - 单独的文件通常是最好的。

使用JavaScript：可能有也可能没有充分理由将其混合到代码中。例如。如果一个脚本依赖于在加载HTML的一个元素之后和另一个元素之前的运行。这不是一个特别好的编码实践，但是如果你要更新现有的网站，你可能会坚持使用它。

最后，真正告诉的唯一方法是将其拉出并确保页面仍然有效。

Answer 4

正如Sam所说，将JavaScript和CSS保持在外部，并通过id而不是onclick=等来引用JavaScript中的项目。关注Yahoo，并将CSS放入<head>和关闭<body>代码之前的JavaScript。

对于多个JavaScript或CSS，请使用多个<script>或<link>标记。

对于PHP，最好将一些功能保存在单独的包含文件中，并在主HTML中调用函数等。这将极大地有助于可维护性。瞄准简单的循环，if / else和函数调用，没有别的。

Answer 5

如果有多个javascript和CSS文件将被引用，如何包括在单个或标签？

您可以使用多个标签引用每个文件，也可以使用像YUI compressor这样的缩小器从原始文件创建单个CSS和JS文件。

Answer 6

CSS样式的顺序是相关的，但仅与其他CSS样式有关。因此，首先将所有CSS样式移动到一起（在头部分中），其顺序与原始顺序相同。这样可以减少凌乱，而不会改变页面的工作方式。

然后，您可以开始查看是否可以重新排列脚本和PHP代码。它们直接输出到页面的内容是相关的，否则它们可以很容易地重新排列。

HTML编码和PHP或Javascript代码的混合

6 个答案: