•  30-09-2019
  •  | 
  •  

Frage

Ich mag Websites beginnen wieder zu schaffen, aber ich habe jetzt für eine Weile von der HTML-Szene aus. Ich habe mich nur gefragt, ob dies ein gutes Gerüst für eine Website ist. Und wenn nicht, was soll ich verändern, ergänzen und / oder zu entfernen? 

<!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>
War es hilfreich?

Lösung

Versuchen Sie www.htmlshell.com , können Sie ein Grundgerüst dort erhalten, mit optional für Dinge wie jQuery oder favicons enthält, usw.

Andere Tipps

Ich habe beginnend mit HTML5 Boilerplate .. . es hilft sicher, dass alles, was der beständigsten in den verschiedenen Browsern und berücksichtigt bereits die Mehrheit der Sachen, die ich später brauchen werden.

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>

Ein HTML5 Skelett könnte wie folgt aussehen: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CC</title>
</head>
<body>

</body>
</html>

(Beachten Sie, dass dies nicht das minimalsten HTML5 Dokument , so viele Teile sind optional.)

Wenn Sie eine andere Codierung als UTF-8 verwenden, ändern Sie den Wert der meta-charset entsprechend.

Wenn Sie einen anderen Inhalt Sprache als Englisch verwenden, ändern Sie die Wert des lang Attribut entsprechend

.

Wenn Sie ausdrücklich wollen, um den Text Direktionalität angeben, verwenden Sie die dir Attribut auf dem html Element, zB: <html dir="ltr" lang="en">

Gemeinsamer link / meta Elemente des head

hinzufügen

  • Die Verknüpfung zu einem Sheet (text/css wird standardmäßig angenommen): 

    <link rel="stylesheet" href="/default.css">

  • Anbindung an ein Favicon : 

    <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">

  • Die Angabe der kanonische URL des Dokuments: 

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

  • Die Bereitstellung eines Beschreibung der Inhalt der Seite: 

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

Elemente für die body

Wie jede Seite unterschiedlich ist, dies nicht generell beantwortet werden kann, so könnte es am besten sein, die body leer zu lassen.

Allerdings sind die meisten Seiten sind wahrscheinlich Teil einer Website, und die meisten Websites haben wahrscheinlich eine standortweite Header (? header) mit Site-Namen (? h1), Footer (? footer) und Navigationsmenü (? nav). Diese sollten an die body sectioning Wurzel gehören (das heißt, kein anderes Sektionierung Inhaltselement als Elternteil). Die nav kann oder auch nicht Teil des header sein.
Der Hauptinhalt (? main) kann oder auch nicht von einem sectioning Elemente bestehen (in der Regel article oder section oder mehrere von ihnen). 

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

Es gibt nichts, wie ein <footer> Element in XHTML 1.0. Sie sollten es tun, wie folgt: 

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

Ich mag eine strikte Doctype in meinen Projekten verwenden, aber bei Sie funktionieren auch. 

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

Die W3C DOM Level 1 Core- ein guter Anfang: 

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

Das W3C DOM Level 1 können Sie den Inhalt Baum ändern wie du    wollen . Es ist leistungsfähig genug, um alle HTML-Dokument von Grund auf neu zu bauen.

Von dort können Sie eine beliebige Option hinzufügen (<html lang="en">, <meta charset="utf-8">, etc.), Element (link, main, nav, div, footer, etc.) oder Bibliothek Abhängigkeit (jQuery, Bootstrap, etc.), basierend auf Ihre Bedürfnisse und Vorlieben.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top