当前位置： 文江博客话题详情

一个好的 HTML 骨架

发布于 2024-10-01 12:22:42 字数 1383 浏览 4 评论 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>

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

扫码二维码加入Web技术交流群

发布评论

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

评论（6）

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

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

Try www.htmlshell.com, you can get a basic skeleton there, with optional includes for things like jQuery or favicons, etc.

回复 原文
计㈡愣 2024-10-08 12:22:42

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

I've been starting with HTML5 Boilerplate... it helps make sure that everything is the most consistent across the various browsers and already takes into account the majority of the stuff I'll need later.

回复 原文
指尖凝香 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 元素

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>
回复 原文
日裸衫吸 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.

回复 原文
山川志 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>
回复 原文
心不设防 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 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文