45

Web サイトの作成を再開したいのですが、しばらく HTML シーンから離れていました。これが Web サイトの適切なスケルトンであるかどうか疑問に思っていました。そうでない場合、何を変更、追加、および/または削除する必要がありますか?

<!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 やファビコンなどのオプションのインクルードが含まれています。

于 2011-12-23T02:14:07.700 に答える
15

私はHTML5 ボイラープレートから始めています.. これは、さまざまなブラウザー間ですべてが最も一貫していることを確認するのに役立ち、後で必要になるもののほとんどを既に考慮に入れています。

于 2010-11-09T13:17:00.913 に答える
6

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="…&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空欄のままでよろしいかと思います。

ただし、ほとんどのページはおそらく Web サイトの一部であり、ほとんどの Web サイトにはおそらくサイト全体のヘッダー (→ 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>

私は自分のプロジェクトで厳密な Doctype を使用するのが好きですが、あなたのプロジェクトでも機能します。

于 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 レベル 1 コアは、開始するのに適した場所です。

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

W3C DOM レベル 1 では、コンテンツ ツリーを自由に変更でき ます。あらゆる HTML ドキュメントをゼロから構築するのに十分強力です。

そこから、ニーズや好みに基づいて、任意のオプション ( 、 など)、要素 ( 、 、 、 など)、またはライブラリの依存関係 (jQuery、Bootstrap など<html lang="en">)<meta charset="utf-8">をlink追加mainできnavますdiv。footer

于 2018-03-18T14:29:40.013 に答える