Nic*_*ick 42 html boilerplate skeleton-code
我想再次开始创建网站,但我已经离开了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>
<!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>
一个HTML5骨架看起来是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CC</title>
</head>
<body>
</body>
</html>
(请注意,这不是最小的HTML5文档,因此许多部分都是可选的.)
如果您使用的是不同的编码不是UTF-8,改变的价值meta-charset相应.
如果您使用的是与英语不同的内容语言,请相应地更改属性的值lang.
如果要显式指定文本方向性,请在元素上使用该dir属性html,例如:<html dir="ltr" lang="en">
link/ meta元素head链接到样式表(text/css默认情况下假定):
<link rel="stylesheet" href="/default.css">
链接到favicon:
<link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">
指定文档的规范URL:
<link rel="canonical" href="http://example.com/">
提供页面内容的描述:
<meta name="description" content="…">
body由于每个页面都不同,一般无法回答,因此最好body留空.
但是,大多数网页可能是网站的一部分,大多数网站可能都有一个网站范围的标题(→ 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>