45

我想再次开始创建网站，但我已经离开 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>
4

6 回答 6

46

试试www.htmlshell.com，你可以在那里得到一个基本的骨架，可选的包括 jQuery 或 favicons 等。

于 2011-12-23T02:14:07.700 回答
15

我一直从HTML5 Boilerplate开始...... 它有助于确保所有内容在各种浏览器中都是最一致的，并且已经考虑到我以后需要的大部分内容。

于 2010-11-09T13:17:00.913 回答
6

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="…&quot;>
</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">

  • 链接到网站图标：

      <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">

  • 指定文档的规范 URL：

      <link rel="canonical" href="http://example.com/">

  • 提供页面内容的描述：

      <meta name="description" content="…&quot;>

元素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>
于 2015-05-29T15:56:49.597 回答
3

<footer>在 XHTML 1.0 Transitional 中没有什么比得上元素了。你应该这样做：

<body>
    ...
    <div class="footer">
        ...
    </div>
</body>

我喜欢在我的项目中使用严格的文档类型，但你的也可以。

于 2010-11-09T13:17:00.620 回答
1 
<!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>
于 2010-11-09T13:41:30.747 回答
1

W3C DOM Level 1 Core是一个很好的起点：

<!DOCTYPE html>
<html>
<head>
  <title>My Document</title>
</head>
<body>
</body>
</html>

W3C DOM Level 1 允许您以任何您 想要的方式更改内容树。它足够强大，可以从头开始构建任何 HTML 文档。

从那里您可以根据您的需要和偏好添加任何选项（ 、 等）、元素（ 、 、 、 、 等）或库依赖项（<html lang="en">jQuery <meta charset="utf-8">、linkBootstrapmain等nav）div。footer

于 2018-03-18T14:29:40.013 回答