发表新帖
发表新帖

A good HTML skeleton

前端 未结
关注
6 1849
独厮守ぢ
独厮守ぢ 2021-01-31 08:15

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 sh

相关标签:
6条回答
  • 误落风尘
    2021-01-31 08:19

    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)
  • 误落风尘
    2021-01-31 08:21

    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.

    0 讨论(0)
  • -上瘾入骨i
    2021-01-31 08:21

    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 讨论(0)
  • 眼角桃花
    2021-01-31 08:22 
    <!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 讨论(0)
  • 忘了有多久
    2021-01-31 08:27

    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 讨论(0)
  • 你的背包
    2021-01-31 08:39

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

    0 讨论(0)
 看不清?
提交回复
热议问题