一个好的 HTML 骨架
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4134019/
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
A good HTML skeleton
提问by Nick
I want to start creating websites again, but I've been out of the HTML scene for a while now. I was just wondering if this is a good skeleton for a website. And if not, what should I change, add and/or remove?
我想再次开始创建网站，但我已经离开 HTML 领域有一段时间了。我只是想知道这是否是一个好的网站骨架。如果没有，我应该更改、添加和/或删除什么？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<rel="stylesheet" type="text/css" href="css/main.css" />
<meta http-equiv="content-type" content="text/php; charset=utf-8" />
<title>Site Template - Welcome!</title>
</head>
<body>
<div class="Container">
<div class="Header">
</div>
<div class="Menu">
<ul id="nav">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
<div class="Body">
</div>
</div>
</body>
<footer>
<div class="Footer">
<b>Copyright - 2010</b>
</div>
</footer>
</html>
回答by Steve Niles
Try www.htmlshell.com, you can get a basic skeleton there, with optional includes for things like jQuery or favicons, etc.
试试www.htmlshell.com，你可以在那里得到一个基本的框架，还有可选的包含 jQuery 或 favicons 等的东西。
回答by FatherStorm
I've been starting with HTML5 Boilerplate... it helps make sure that everything is the most consistent across the various browsers and already takes into account the majority of the stuff I'll need later.
我已经开始使用HTML5样板..。它有助于确保所有内容在各种浏览器中都是最一致的，并且已经考虑到了我以后需要的大部分内容。
回答by unor
tl;dr
tl;博士
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="/default.css">
<link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">
<link rel="canonical" href="http://example.com/">
<meta name="description" content="…">
</head>
<body>
<header>
<!-- site-wide header -->
<h1>Example <!-- site name --></h1>
</header>
<main>
<!-- this page's main content -->
</main>
<nav>
<!-- site-wide navigation -->
</nav>
<footer>
<!-- site-wide footer -->
</footer>
</body>
</html>
An HTML5skeleton could look like this:
一个HTML5骨架看起来是这样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CC</title>
</head>
<body>
</body>
</html>
(Note that this is not the most minimal HTML5 document, so many parts are optional.)
（请注意，这不是最小的 HTML5 文档，因此许多部分是可选的。）
If you are using a different encoding than UTF-8, change the value of the meta-charsetaccordingly.
如果您使用的是不同的编码不是UTF-8，改变的价值meta-charset相应。
If you are using a different content language than English, change the value of the langattributeaccordingly.
如果您使用的内容语言与英语不同，请相应地更改属性值lang。
If you want to explicitly specify the text directionality, use the dirattributeon the htmlelement, e.g.: <html dir="ltr" lang="en">
如果要明确指定文本方向，请使用元素上的dir属性html，例如：<html dir="ltr" lang="en">
Common link/metaelements to add to the head
通用link/meta元素添加到head
Linking to a stylesheet(
text/cssis assumed by default):<link rel="stylesheet" href="/default.css">Linking to a favicon:
<link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">Specifying the canonical URLof the document:
<link rel="canonical" href="http://example.com/">Providing a descriptionof the page's content:
<meta name="description" content="…">
链接到样式表（
text/css默认情况下假定）：<link rel="stylesheet" href="/default.css">链接到网站图标：
<link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">指定文档的规范 URL：
<link rel="canonical" href="http://example.com/">提供页面内容的描述：
<meta name="description" content="…">
Elements for the body
元素 body
As each page is different, this can‘t be answered generally, so it might be best to leave the bodyempty.
由于每个页面都不同，因此不能一概而论，因此最好body留空。
However, most pages probably are part of a website, and most websites probably have a site-wide header (→ header) with site name (→ h1), footer (→ footer) and navigation menu (→ nav). These should belong to the bodysectioning root (i.e., have no other sectioning content element as parent). The navmay or may not be part of the header.
The main content (→ main) may or may not consist of a sectioning element (usually articleor section, or multiple of them).
但是，大多数页面可能是网站的一部分，并且大多数网站可能都有一个站点范围的标题 (→ header)，其中包含站点名称 (→ h1)、页脚 (→ footer) 和导航菜单 (→ nav)。这些应该属于分节body根（即，没有其他分节内容元素作为父元素）。在nav可以是或可以不是的部分header。
主要内容 (→ main) 可能包含也可能不包含分节元素（通常是article或section，或多个）。
<header>
<!-- site-wide header -->
<h1>Example <!-- site name --></h1>
</header>
<main>
<!-- this page's main content -->
</main>
<nav>
<!-- site-wide navigation -->
</nav>
<footer>
<!-- site-wide footer -->
</footer>
回答by jwueller
There is nothing like a <footer>element in XHTML 1.0 Transitional. You should do it like this:
<footer>XHTML 1.0 Transitional 中的元素是独一无二的。你应该这样做：
<body>
...
<div class="footer">
...
</div>
</body>
I like to use a strict doctype in my projects, but yours works, too.
我喜欢在我的项目中使用严格的文档类型，但你的也适用。
回答by 2371
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="main/css.css">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Site Template - Welcome!</title>
</head>
<body>
<div class="Container">
<div class="Header">
</div>
<div class="Menu">
<ul id="nav">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
<div class="Body">
</div>
<div class="Footer">
Copyright - 2010
</div>
</div>
</body>
</html>
回答by Elan
The W3C DOM Level 1 Coreis a good place to start:
在W3C DOM级别1核心是一个良好的开端：
<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
</head>
<body>
</body>
</html>
The W3C DOM Level 1 allows you to change the content tree any way youwant. It is powerful enough to build any HTML document from scratch.
W3C DOM Level 1 允许您以任何您想要的方式更改内容树。它足够强大，可以从头开始构建任何 HTML 文档。
From there you can add any option (<html lang="en">, <meta charset="utf-8">, etc.), element (link,main, nav, div, footer, etc.) or library dependency (jQuery, Bootstrap, etc.), based on your needs and preferences.
从那里您可以根据您的需要和偏好添加任何选项（<html lang="en">、<meta charset="utf-8">等）、元素（link、main、nav、div、footer、 等）或库依赖项（jQuery、Bootstrap 等）。
