如何构建我的 HTML 以实现良好的代码重用和维护？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21252294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I structure my HTML for good code reuse and maintenance?
提问by MrKatSwordfish
I have a limited background in coding native apps using languages like C++, C, and Java, but now I'm trying to get into web development. While most of it is pretty simple and clean, I'm having a few problems understanding how I can create websites and webapps that do a good job reusing existing code where applicable. As I understand it, when using things like JavaScript, CSS, and PHP, you can simply import scripts from other files for use in any html file, which is very useful. But I'm having a hard time figuring out how this can be done with HTML, is it possible?
我在使用 C++、C 和 Java 等语言编写本机应用程序方面的背景有限，但现在我正在尝试进入 Web 开发。虽然其中大部分内容非常简单和干净，但我在理解如何创建网站和 web 应用程序时遇到了一些问题，这些网站和 web 应用程序在适用的情况下可以很好地重用现有代码。据我了解，在使用 JavaScript、CSS 和 PHP 之类的东西时，您可以简单地从其他文件中导入脚本以用于任何 html 文件，这非常有用。但是我很难弄清楚如何用 HTML 来做到这一点，这可能吗？
For example, say I have a single-page website with a 'header bar' and a bunch of unique content below (for example, the stackoverflow logo, the buttons, and the menus at the top of this page). But now, I want to expand my website and add 3 new pages that share a similar layout and have the exact same 'header bar' at the top. One way to achieve this might be to simply copy the that contains that part of the code and paste it into page2.html, page3.html, and page4.html; the unique code for each page would be separate, and it would work fine. The problem I have with this approach is that it makes it a really pain to alter the content of the 'header bar' without going through multiple pages of HTML, and the odds of creating weird inconsistencies in design/content becomes high. I'm guessing that "stackoverflow.com/questions/ask" and "stackoverflow.com/tags" don't contain duplicate, copy-and-pastes code for the elements at the top of the page, but I'm not sure how to achieve this due to my limited HTML experience..
例如，假设我有一个带有“标题栏”的单页网站，下面有一堆独特的内容（例如，此页面顶部的 stackoverflow 徽标、按钮和菜单）。但是现在，我想扩展我的网站并添加 3 个新页面，这些页面共享类似的布局并且顶部具有完全相同的“标题栏”。实现此目的的一种方法可能是简单地复制包含该部分代码的 并将其粘贴到 page2.html、page3.html 和 page4.html 中；每个页面的唯一代码将是单独的，并且可以正常工作。我使用这种方法的问题是，在不浏览多个 HTML 页面的情况下更改“标题栏”的内容非常痛苦，并且在设计/内容中产生奇怪不一致的可能性变得很高。我猜是“stackoverflow。
So, is there some way of "including" or "importing" HTML code for the sake of clean code reuse across multiple pages? Is this functionality built into HTML or do I need to look deeper into things like JavaScript and PHP to create well-structured websites? I've searched for the answer to this, and a few people have suggested iframes, but then almost immediately suggested against their use in modern web design.. What might be a good approach?
那么，是否有某种方法可以“包含”或“导入”HTML 代码，以便在多个页面之间实现干净的代码重用？这个功能是内置在 HTML 中还是我需要更深入地研究 JavaScript 和 PHP 之类的东西来创建结构良好的网站？我已经搜索了这个问题的答案，一些人建议使用 iframe，但几乎立即建议不要在现代网页设计中使用它们。什么可能是一个好方法？
采纳答案by skip405
The possibility to include pieces of code is available now, but it lacks a proper browser support. It is called html-templates. In future this will allow you to create you own html-templates to avoid duplication of code. But for now.. not native HTML, only other technologies (PHP-based, Javascript-based, Ruby-based and what-not-based).
现在可以包含代码片段，但它缺乏适当的浏览器支持。它被称为html-templates。将来这将允许您创建自己的 html 模板以避免代码重复。但是现在……不是原生 HTML，只有其他技术（基于 PHP、基于 Javascript、基于 Ruby 和什么不是基于）。
回答by Madmenyo
What i usually do for HTML is making a base site layout and like you want load in most content automatically. First I would create all the div's that hold the content then fill this with the content you want, like your header, add a logo some welcome text a navigation bar etc. I would then cut out everything inside the header div and paste it in header.html.
我通常为 HTML 做的是制作基本站点布局，就像您希望自动加载大多数内容一样。首先，我会创建所有包含内容的 div，然后用你想要的内容填充它，比如你的标题，添加一个标志，一些欢迎文本，导航栏等。然后我会剪掉标题 div 中的所有内容并将其粘贴到标题中.html。
Now i would use JQuery, a javascript plugin to load all the HTML data from header.html into the header div. The JQuery code for for it would look something like this, sorry it has been a while and don't have access to tools right now.
现在我将使用 JQuery，一个 javascript 插件将 header.html 中的所有 HTML 数据加载到标题 div 中。它的 JQuery 代码看起来像这样，抱歉已经有一段时间了，现在无法访问工具。
$(document).ready(function(){
$('#header').load("header.html");
});
For PHP you could write a functions file and:
include "functions.php";PHP supports OOP as well and you could make reusable classes and methods inside it.
对于 PHP，您可以编写一个函数文件，并且：
include "functions.php";PHP 也支持 OOP，您可以在其中创建可重用的类和方法。
回答by flauntster
If you happen to use Dreamweaver, then it has a templating system for HTML without the need of specific server side languages.
如果您碰巧使用 Dreamweaver，那么它有一个 HTML 模板系统，不需要特定的服务器端语言。
Otherwise it sounds like (and to keep it simple without using a CMS or full templating system such as Smarty), you are wanting to use PHP to include fixed blocks into your code, such as a site wide header & footer.
否则听起来（并且为了保持简单而不使用 CMS 或完整的模板系统，例如 Smarty），您希望使用 PHP 将固定块包含到您的代码中，例如站点范围的页眉和页脚。
For example at the top of every file in your site you could have the following PHP code to insert the file header.php at that position:
例如，在您站点中每个文件的顶部，您可以使用以下 PHP 代码在该位置插入文件 header.php：
<?php include "header.php"; ?>
Hope this helps as a starting point :)
希望这有助于作为起点:)
回答by Ricard
In order to reuse code you'd have to use PHP or a JavaScript framework.
为了重用代码，您必须使用 PHP 或 JavaScript 框架。
I'd recommend the later, specifically http://angularjs.org/which is awesome. It's ment to build web applications, using views (and other components) you can re-use your code.
我推荐后者，特别是http://angularjs.org/，它很棒。构建 Web 应用程序，使用视图（和其他组件）可以重用您的代码。
It's worth checking out and with your background you shouldn't have any problems.
值得一试，根据您的背景，您应该没有任何问题。
Cheers.
干杯。
回答by Ramesh
I would recommend to 'google' for 'HTML Best practices' and to try some results like: http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/
我会推荐“谷歌”以获得“HTML最佳实践”并尝试一些结果，例如：http: //net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/
回答by DA.
there are a lot of ways to do this. Put CSS and Java-Script code into central files, which you reference in your HTML files is a good start.
有很多方法可以做到这一点。将 CSS 和 Java-Script 代码放入中心文件中，您在 HTML 文件中引用这些文件是一个好的开始。
In the past I used PHP to include common things, like the header, navigation, footer etc.
过去我使用 PHP 来包含常见的东西，比如页眉、导航、页脚等。
Recently I started to use Jekyll (http://jekyllrb.com/), basically you create the templates for pages, with header, navigation and design in central files.
最近我开始使用 Jekyll ( http://jekyllrb.com/)，基本上你创建页面模板，在中央文件中包含标题、导航和设计。
The pages itself only contain the content and Jekyll generates the homepage out of it.
页面本身只包含内容，Jekyll 从中生成主页。
Andy
安迪
