一个好的HTML骨架
https://stackoverflow.com/questions/4134019
-
30-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我想再次开始创建网站，但是我已经离开了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>
解决方案
尝试 www.htmlshell.com, ，您可以在那里获得基本骨架，其中包括JQuery或Favicons等的可选件。
其他提示
我一直从 HTML5样板... 。它有助于确保在各种浏览器中最一致的所有内容，并且已经考虑到以后需要的大多数东西。
tl; dr
<!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>
没有什么比 <footer> XHTML 1.0过渡中的元素。您应该这样做：
<body>
...
<div class="footer">
...
</div>
</body>
我喜欢在项目中使用严格的Doctype，但您的工作也可以使用。
<!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>
这 W3C DOM级别1核心 是一个很好的起点：
<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
</head>
<body>
</body>
</html>
W3C DOM级别1允许您更改内容树 任何方式 想. 。它足够强大，可以从头开始构建任何HTML文档。
从那里您可以添加任何选项（<html lang="en">, <meta charset="utf-8">, 等），元素（link,main, nav, div, footer, ，等等）或库依赖性（jQuery，bootstrap等），根据您的需求和偏好。
