一个好的 HTML 骨架

发布于 2024-10-01 12:22:42 字数 1383 浏览 7 评论 0原文

我想重新开始创建网站，但我已经脱离 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>

原文

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?

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

顾忌 2024-10-08 12:22:42

尝试 www.htmlshell.com，您可以在那里获得基本框架，并可选包含 jQuery 或 favicons 等内容。

回复收藏 0 原文

计㈡愣 2024-10-08 12:22:42

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

回复收藏 0 原文

指尖凝香 2024-10-08 12:22:42

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 文档< /a>，所以很多部分都是可选的。）

如果您使用的编码与 UTF-8 不同，请更改 meta-charset 相应地。

如果您使用的内容语言不是英语，请更改相应的 lang 属性的值。

如果要显式指定文本方向性，请使用 html 元素上的dir 属性，例如：< /code>

添加到 `head` 的常用 `link`/`meta` 元素

链接到样式表（假设为text/css默认情况下）：
```
 
```
链接到网站图标：
```
 
```
< p>指定规范 URL文档：
```
 
```
提供描述< /a> 页面内容：
```
 
```

`body` 的元素

由于每个页面都不同，因此无法一概而论，因此最好将 body 留空。

然而，大多数页面可能是网站的一部分，并且大多数网站可能有一个站点范围的页眉（→ header），其中包含站点名称（→ h1）、页脚（→ 页脚）和导航菜单（→ 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>

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>

An HTML5 skeleton could look like this:

<!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.)

If you are using a different encoding than UTF-8, change the value of the meta-charset accordingly.

If you are using a different content language than English, change the value of the lang attribute accordingly.

If you want to explicitly specify the text directionality, use the dir attribute on the html element, e.g.: <html dir="ltr" lang="en">

Common `link`/`meta` elements to add to the `head`

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="…">
```

Elements for the `body`

As each page is different, this can‘t be answered generally, so it might be best to leave the body empty.

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 body sectioning root (i.e., have no other sectioning content element as parent). The nav may or may not be part of the header.
The main content (→ main) may or may not consist of a sectioning element (usually article or section, or multiple of them).

<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>

回复收藏 0 原文

日裸衫吸 2024-10-08 12:22:42

XHTML 1.0 Transitional 中没有像

元素这样的元素。你应该这样做：

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

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

There is nothing like a <footer> element in XHTML 1.0 Transitional. You should do it like this:

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

I like to use a strict doctype in my projects, but yours works, too.

回复收藏 0 原文

山川志 2024-10-08 12:22:42

<!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>

<!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>

回复收藏 0 原文

心不设防 2024-10-08 12:22:42

W3C DOM Level 1 Core 是一个好地方开始：

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

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

从那里您可以添加任何选项（、等），元素（link、main、nav、div、footer 等）或库依赖项（jQuery、Bootstrap 等），具体取决于您的需求和偏好。

The W3C DOM Level 1 Core is a good place to start:

<!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 you
want. It is powerful enough to build any HTML document from scratch.

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.

回复收藏 0 原文

~没有更多了~