HTML 编码和 PHP 或 JavaScript 代码的混合
[英]HTML coding and mixing of PHP or JavaScript code
问题描述
I am assigned a task to revise a website and at present, I am working on index.html page.
我被分配了修改网站的任务，目前，我正在处理index.html页面。 the previous coder has mixed a lot of JavaScript and CSS code in between and it is becoming difficult to read.以前的编码器在两者之间混合了大量 JavaScript 和 CSS 代码，并且变得难以阅读。
I want to know whether it is necessary to include <script> tags and CSS code in between?我想知道是否有必要在它们之间包含<script>标签和 CSS 代码？ What about PHP code? PHP代码呢？ Where each must reside?每个人必须住在哪里？
Edited:编辑：
If multiple JavaScript and CSS files are to be referenced, how to include in a single <script> or <link> tag?如果要引用多个 JavaScript 和 CSS 文件，如何包含在单个<script>或<link>标签中？
6 个解决方案
解决方案1
6 已采纳 2010-01-15 11:16:52
Keep your JavaScript inside a separate file, keep your CSS inside a separate file and have them both referenced from within your HTML.将您的 JavaScript 保存在一个单独的文件中，将您的 CSS 保存在一个单独的文件中，并在您的 HTML 中引用它们。 The order of these referenced files relative to the HTML does not matter.这些引用文件相对于 HTML 的顺序无关紧要。 As for the PHP, I wouldn't worry too much about it being mixed in with the HTML (just keep your functions, classes and other scripts in separate files and include them with PHP in the header).至于 PHP，我不会太担心它会与 HTML 混合（只需将您的函数、类和其他脚本保存在单独的文件中，并将它们与 PHP 一起包含在标题中）。
If is the same CSS on each page, having an external file that caches help to save bandwidth.如果每个页面上的 CSS 相同，则使用缓存的外部文件有助于节省带宽。 If there are different rules intermixed with the HTML for different element types you may have some conflicts, but if you rewrite it, it will end up being a lot cleaner and easier to maintain later.如果不同的元素类型的 HTML 中混杂了不同的规则，你可能会产生一些冲突，但是如果你重写它，它最终会更清晰，以后更容易维护。
I like to keep a file structure like so:我喜欢保持这样的文件结构：
index.php
/css
main.css
othercssfiles.css
/javascript
main.js
otherjsfiles.js
/template
header.php
footer.php
/scripts
functions.php
otherscripts.php
Then in my header file, I would place HTML code referencing the files in the CSS and JavaScript directories.然后在我的头文件中，我将引用 CSS 和 JavaScript 目录中的文件的 HTML 代码。 And in the root directory my index.php file would include() ;在根目录中，我的index.php文件将include() ； the header at the top and the footer at the bottom.顶部的页眉和底部的页脚。
otherjsfiles.js and othercssfiles.css can be used in cases where a single page may have a specific requirement, requiring a lot of CSS and JavaScript that most other pages don't need. otherjsfiles.js和othercssfiles.css可用于单个页面可能有特定要求的情况，需要大量其他大多数页面不需要的 CSS 和 JavaScript。 It means other pages do not need to fetch unnecessary data and it keeps page specific code separate from the entire site's code.这意味着其他页面不需要获取不必要的数据，并将页面特定代码与整个站点的代码分开。
I have found this an easy way to keep track of various aspects of the code that makes up an HTML page, but naturally, you will find ways to organize it that makes sense to you.我发现这是一种跟踪构成 HTML 页面的代码的各个方面的简单方法，但很自然地，您会找到对您有意义的组织方式。
Edited:
If multiple JavaScript and CSS files are to be referenced, how to include in a single or tag?
It would be better to combine them into a single file to conserve HTTP requests (which take time).最好将它们组合成一个文件以节省 HTTP 请求（这需要时间）。 Then you would just include those CSS and JavaScript files like normal.然后你就可以像往常一样包含那些 CSS 和 JavaScript 文件。
<script type="text/javascript" src="/javascript/main.js"></script>
<link rel="stylesheet" href="/css/main.css">
Additionally, it seems like you could use the services of a CSS beautifier for readability, a JavaScript beautifier for readability and a JavaScript minifier for when you are done reading it (keep the readable version) and want to save bandwidth.此外，似乎您可以使用CSS 美化器的服务来提高可读性，使用JavaScript 美化器来提高可读性，使用JavaScript 缩小器来完成阅读（保持可读版本）并希望节省带宽。 These tools are especially helpful when you are working on maintaining a website you did not create.当您维护一个不是您创建的网站时，这些工具特别有用。
解决方案2
1 2010-01-15 11:19:09
PHP coding allows you to have HTML/CSS interspersed with PHP code by using server tags like <? -php code here -?> PHP 编码允许您通过使用诸如<? -php code here -?> <? -php code here -?> . <? -php code here -?> 。
This is normal - it is very flexible and easy-to-get-started.这是正常的 - 它非常灵活且易于上手。
Your JavaScript should ideally be placed into a separate JS file and using the <script> HTML tag to reference it.理想情况下，您的 JavaScript 应该放在一个单独的 JS 文件中，并使用<script> HTML 标签来引用它。 See the docs.查看文档。
Your CSS should ideally be placed into a separate CSS file and use a <style> HTML tag to reference it.理想情况下，您的 CSS 应该放在一个单独的 CSS 文件中，并使用<style> HTML 标签来引用它。 Again, see the docs.再次，请参阅文档。
解决方案3
1 2010-01-15 11:21:20
Rarely is there a valid reason for CSS be mixed into the HTML - a separate file is generally best.很少有将 CSS 混合到 HTML 中的正当理由——单独的文件通常是最好的。
With JavaScript: there may or may not be a good reason for it being mixed into the code.使用 JavaScript：将其混入代码中可能有也可能没有充分的理由。 Eg if a piece of script is dependant on running after one element of HTML is loaded and before another.例如，如果一段脚本依赖于在加载一个 HTML 元素之后和另一个元素之前运行。 This isn't a particularly good coding practice, but if you're updating an existing site you may be stuck with it.这不是一个特别好的编码实践，但如果您要更新现有站点，您可能会被它卡住。
In the end the only way to really tell is to pull it out and make sure the page still works.最后，真正判断的唯一方法是将其拉出并确保该页面仍然有效。
解决方案4
1 2010-01-15 11:22:23
As Sam said, keep JavaScript and CSS external, and reference items in the JavaScript by id rather than onclick= etc. Follow Yahoo, and put the CSS in the <head> and the JavaScript before the closing <body> tag.正如 Sam 所说，将 JavaScript 和 CSS 保持在外部，并通过id而不是onclick=等引用 JavaScript 中的项目。遵循 Yahoo，并将 CSS 放在<head> ，并将 JavaScript 放在关闭<body>标记之前。
For multiple JavaScript or CSS, use multiple <script> or <link> tags.对于多个 JavaScript 或 CSS，请使用多个<script>或<link>标签。
As for PHP, it's good practice to keep as much of the functionality in a separate include file, and just call functions etc. in the main HTML.对于 PHP，最好将尽可能多的功能保留在单独的包含文件中，并且只在主 HTML 中调用函数等。 This will aid maintainability greatly.这将大大有助于可维护性。 Aim for simple loops, if / else s, and function calls, and nothing else.目标是简单的循环、 if / else和函数调用，仅此而已。
解决方案5
1 2010-01-15 11:23:20
If multiple javascript and CSS files are to be referenced, how to include in a single or tag?
You either reference each file using multiple tags or use a minifier like YUI compressor to create a single CSS and JS file from the originals.您要么使用多个标签引用每个文件，要么使用像YUI 压缩器这样的压缩器从原始文件创建单个 CSS 和 JS 文件。
解决方案6
1 2010-01-15 11:25:48
The order of CSS styles is relevant, but only relative to other CSS styles. CSS 样式的顺序是相关的，但仅与其他 CSS 样式相关。 So, start by moving all CSS styling together (in the head section) in the same order as originally.因此，首先按照与最初相同的顺序将所有 CSS 样式移动到一起（在 head 部分）。 That will make it somewhat less messy while defenitely not changing how the page works.这将使它稍微不那么混乱，同时绝对不会改变页面的工作方式。
Then you can start looking at whether you can rearrange scripts and PHP code.然后你就可以开始研究是否可以重新排列脚本和 PHP 代码。 What they output to the page directly is relevant, otherwise they can easily be rearranged.它们直接输出到页面的内容是相关的，否则它们很容易被重新排列。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.