logo标签列表

一个好的HTML骨架

htmlboilerplateskeleton-code
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>
设计模式似乎与问题无关... - rabidmachine9
我不确定你的意思。据我所知，它只是一个没有任何实际数据的框架/设计。 - Nick
如果你想使用Bootstrap，这里有一个初始模板可供使用：http://getbootstrap.com/getting-started/#template - Matthew Lock
6个回答
46

你可以尝试访问www.htmlshell.com，那里提供了一个基本的框架，并可选包含一些如jQuery或网站图标等内容。

很酷的网站。我不确定“自动运行JavaScript”是否跨浏览器。（如果你没注意到，这个问题已经两年了。） - Brigand
这个网站看起来不错，但不幸的是他们把“script”标签放在了<body>标签里。 - Yann Sagon
1
@YannSagon 脚本标签被故意放在正文中。这是通常推荐的做法，以加快页面渲染速度。请参阅此处获取更多信息。 - Steve Niles
15

我一直在使用HTML5 Boilerplate。它有助于确保各种浏览器之间的一致性，并已经考虑了我以后需要的大部分内容。

非常感谢，看起来很不错，我肯定会用它。不幸的是，我想从头开始创建自己的网站，所以我不能将其标记为答案。但无论如何，还是非常感谢您。 - Nick
2
哇，这个东西真的很大。在我看来有点过头了。不过听起来很有趣。 - jwueller
1
没错。页面上的代码让我眼睛疼。我只希望实际的代码看起来更好。 - Nick
6

太长不看

<!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属性的值。
如果您想明确指定文本方向，请在html元素上使用dir属性，例如：<html dir="ltr" lang="en">

常见的需要添加到中的link/meta元素

  • Linking to a stylesheet (text/css is 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 URL of the document:

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

  • Providing a description of the page’s content:

      <meta name="description" content="…">

body元素

由于每个页面都不同，因此无法一般性地回答这个问题，因此最好将body留空。

但是，大多数页面可能属于网站的一部分，而大多数网站可能具有包含网站名称（→ h1）、页脚（→ footer）和导航菜单（→ nav）的全站头部（→ header）。这些应该属于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>
3

XHTML 1.0 Transitional中并没有像<footer>元素这样的东西。你可以这样做：

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

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

等一下，你确定没有吗？对不起，我在谷歌上搜索时看到了，所以我认为有。(http://www.quackit.com/html_5/tags/html_footer_tag.cfm) - Nick
7
@Nick：显然，这个标签包含在HTML 5中，但你正在使用XHTML 1.0 Transitional。即使你可以使用它，也仍需将其放置在<body>中。所有可见元素都需要放在那里。 - jwueller
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>
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">，<meta charset="utf-8">等），元素（link，main，nav，div，footer等）或库依赖项（jQuery，Bootstrap等）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接