105 Stimmen

Was sind die besten Methoden, um Elemente in <head> anzuordnen?

Alles in beliebiger Reihenfolge verwenden kann? ist die Platzierung von <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ist wichtig, bevor <title>

Diese Methode wird am häufigsten verwendet, ist sie die beste Methode?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title Goes Here</title>
    <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
    <link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

        $("#wmd-input").focus();
        $("#title").focus();
        $("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });

    });        
</script>

</head>

<body>
<p>This is my web page</p>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>

</html>

diese Seite http://stackoverflow.com hat keine Kodierung und <meta>

Ich verwende ein CMS mit einer SEO-Komponente, die jeden <meta> für SEO nach allen js und css. Dateien. kann beliebige Elemente in beliebiger Reihenfolge platzieren, die in <head> die Kompatibilität der Dokumente und die Kodierung beeinflussen?

0 Stimmen

Wo sind die ganzen Kommentare geblieben?

0 Stimmen

Diese Website (stackoverflow.com) hat ihre Kodierung (auf UTF-8) eingestellt, sie steht nur in den HTTP-Headern, wo sie hingehört. Das Definieren des Zeichensatzes in einem Meta-Tag ist eine Art von Hacking Workaround.

2 Stimmen

Das stimmt. Es ist vorzuziehen, den Zeichensatz in den HTTP-Headern zu definieren, aber in manchen Situationen können Sie diese nicht festlegen (z. B. beim Laden von Dateien von Ihrer lokalen Festplatte), so dass die <meta> Tag ist eine Abhilfe für diese Fälle, aber nicht unbedingt notwendig.

114voto

Brian Campbell Punkte 304982

In HTML wird die DOCTYPE muss an erster Stelle stehen, gefolgt von einer einzelnen <html> Element, das ein <head> Element, das ein <title> Element, gefolgt von einem <body> Element. Siehe die Beschreibung der globalen Struktur eines HTML-Dokuments in HTML 4.01 y der HTML5-Entwurf Die tatsächlichen Anforderungen sind größtenteils dieselben, abgesehen von der DOCTYPE aber sie werden unterschiedlich beschrieben.

Die eigentlichen Tags ( <html> , </html> , <head> usw.) sind optional; die Elemente werden automatisch erstellt, wenn die Tags nicht vorhanden sind. <title> ist der einzige erforderliche Tag in HTML. Das kürzeste gültige HTML 4.01-Dokument (zumindest das, das ich erzeugen konnte) ist (benötigt ein <p> denn es muss etwas in der <body> gültig zu sein):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>

Und das kürzeste gültige HTML5-Dokument:

<!DOCTYPE html><title></title>

Beachten Sie, dass in XHTML alle Tags explizit angegeben werden müssen; es werden keine Elemente implizit eingefügt.

Browser führen unter bestimmten Umständen Content Type Sniffing durch, um den Typ einer Ressource zu bestimmen, die nicht mit einem Content-Type HTTP-Header und auch die Zeichenkodierung ausspähen, wenn die Content-Type Kopfzeile nicht geliefert wurde oder keine charset (Sie sollten im Allgemeinen versuchen, diese Header einzuschließen und sicherstellen, dass sie korrekt sind, aber es gibt einige Umstände, unter denen dies nicht möglich ist, z. B. bei lokalen Dateien, die nicht über HTTP übertragen werden). Allerdings wird zu diesem Zweck nur eine begrenzte Anzahl von Bytes am Anfang des Dokuments gesnifft. Alles, was sich auf das Sniffing des Inhalts oder der Zeichenkodierung auswirken soll, sollte sich also am Anfang des Dokuments befinden.

Aus diesem Grund, HTML5 spezifiziert dass jeder meta Tag, das zur Angabe des Zeichensatzes verwendet wird (entweder <meta http-equiv="Content-type" content="text/html; charset=..."> oder einfach <meta charset=...> ) muss innerhalb der ersten 1024 Bytes der Datei liegen, um wirksam zu werden. Wenn Sie also Informationen über die Zeichenkodierung in Ihr Dokument aufnehmen wollen, sollten Sie das Tag früh in die Datei einfügen, möglicherweise sogar vor dem <title> Element. Aber denken Sie daran, dass dieses Tag nicht notwendig ist, wenn Sie ein Content-type Kopfzeile.

In CSS, spätere Stildeklarationen haben Vorrang vor früheren wenn alle anderen Voraussetzungen erfüllt sind. Daher sollten Sie im Allgemeinen die allgemeinsten Stilvorlagen, die überschrieben werden können, früher und die spezifischeren Stilvorlagen später einfügen.

Aus Leistungsgründen kann es sinnvoll sein, Skripte am Ende der Seite, direkt vor der </body> denn das Laden von Skripten blockiert das Rendering der Seite.

Offensichtlich, <script> Tags sollten so angeordnet werden, dass Skripte, die von der jeweiligen Reihenfolge abhängen, zuerst geladen werden.

Im Großen und Ganzen, abgesehen von den bereits erwähnten Einschränkungen, ist die Reihenfolge der Tags innerhalb der <head> sollte außer aus Gründen der Lesbarkeit keine allzu große Rolle spielen. Ich tendiere dazu, die <title> nach oben, und die andere <meta> Tags in einer Art logischer Reihenfolge.

In den meisten Fällen sollte die Reihenfolge, in der Sie Dinge in den Textkörper eines HTML-Dokuments einfügen, der Reihenfolge entsprechen, in der sie angezeigt werden sollen, oder der Reihenfolge, in der auf sie zugegriffen werden soll. Sie können CSS verwenden, um Dinge neu anzuordnen, aber Bildschirmlesegeräte lesen Dinge im Allgemeinen in der Reihenfolge des Quelltextes, Suchindizes extrahieren Dinge in der Reihenfolge des Quelltextes und so weiter.

6 Stimmen

Dass der TITEL obligatorisch ist, war mir neu und erscheint mir etwas seltsam. Aber wenn man sich die offizielle Spezifikation ansieht, hat man natürlich absolut recht. Lebe und lerne!

0 Stimmen

Was mich überrascht hat, ist, dass es der einzige obligatorische Tag ist... Ich habe eigentlich dafür plädiert, dass es in HTML5 auch optional gemacht werden sollte (da es für Dinge wie Gadgets, die immer in einer iframe und nie einen sichtbaren Titel haben), aber sie haben beschlossen, das dieses Mal nicht zu ändern.

0 Stimmen

@Brian - Danke Brian für diese schöne Erklärung. SO nie enttäuscht mich. diese Seite hat masterminds. und eine weitere Sache U versteht Frage sehr gut dann u geben Antwort sehr gut. tolle Arbeit.

35voto

Matej Janovčík Punkte 1242

Dies ist die Vorlage, die ich verwende. Löschen Sie einfach alles, was Sie für ein neues Projekt nicht benötigen.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <meta name="robots" content="index, follow">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="stylesheet" href="scss/style.css" />

    <!-- http://realfavicongenerator.net/ -->

    <meta property="fb:page_id" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="">
    <meta property="og:description" content="">
    <meta property="og:url" content="">
    <meta property="og:site_name" content="">
    <meta property="og:type" content="website">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:site" content="">

    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
  </body>
</html>

6 Stimmen

X s

3 Stimmen

@stom meinen Sie, warum es Klassenattribute gibt? Es erfordert zusätzlichen JavaScript-Code, um die Klasse zu entfernen, sobald die Seite geladen ist. Wenn Sie dies tun, wissen Sie, ob JavaScript im Browser aktiviert ist. Wenn dieses Attribut noch vorhanden ist, bedeutet dies, dass JavaScrips deaktiviert ist, so dass Sie dem Benutzer eine Nachricht mit CSS anzeigen können, wenn Sie dies benötigen

2 Stimmen

@Denis verwenden Sie <noscript></noscript>, um zu prüfen, ob Javascript aktiviert ist

9voto

mahemoff Punkte 41244

Um die Antwort von Brian zu ergänzen, sollten logischerweise Dinge, die heruntergeladen werden müssen, damit der Browser sie so schnell wie möglich herunterladen kann, und Dinge, die die Darstellung der Seite beeinflussen, höchste Priorität haben. Ich würde also vorschlagen:

  • Metas, die das Erscheinungsbild beeinflussen, wie z. B. Zeichensatz (auch in der Spezifikation frühzeitig gefordert), Viewport, apple-mobile-web-app-capable
  • Titel ganz oben, damit der Browser ihn so schnell wie möglich darstellen kann und der Benutzer ein Gefühl dafür bekommt, dass etwas passiert
  • Favicon und Touch-Symbole
  • CSS (zumindest CSS für "above-the-fold"; andere CSS können in die Fußzeile geladen werden, wenn Sie sich etwas einfallen lassen wollen). Dieser Schritt blockiert in der Regel alles andere, weshalb ich die vorherigen Punkte darüber gesetzt habe, da sie während der CSS-Verzögerung ein gewisses Feedback liefern.
  • Kritische Skripte (z. B. User-Agent-Sniffing, das das Layout beeinflussen kann), die nicht in die Fußzeile geladen werden können
  • Alles andere (z.B. notwendige Metadaten in Form von Links und Meta-Tags)

Sie könnten auch in Erwägung ziehen, CSS und JS im Head zu inlinen, vor allem, wenn es sich um ein kleines Skript handelt und das externe Skript/Sheet nach dem Profil Ihres typischen Besuchers wahrscheinlich nicht gecached wird. Und wenn Sie es inline, werden Sie idealerweise wollen, um es zu komprimieren.

Letzter Punkt: Der Benutzer muss auf die Kopfzeile - und alle blockierenden Ressourcen, die sie lädt - warten, daher ist es am besten, so viel wie möglich in den Body oder die Fußzeile zu packen.

9voto

Según W3 sein sollte:

  • Meta-Zeichensatz
  • Titel
  • Meta name="beschreibung"
  • Meta name="Schlüsselwörter"
  • Stylesheet
  • JavaScript-Dateien

1 Stimmen

Der verlinkte Artikel leitet weiter, und es scheint nichts über die Reihenfolge zu sagen.

0 Stimmen

Stylesheets blockieren den Rendering-Prozess, stattdessen werden Js asynchron vor CSS geladen.

7voto

jayrobinson Punkte 61

Die meisten Browser ist es egal, wie Sie Ihre Elemente anordnen, aber Sie sollten immer angeben charset Erstens.

Bewährte Praktiken für IE7+ erfordern dass die charset , X-UA-Compatible y base Deklarationen erscheinen vor allem anderen in der head Ansonsten beginnt der Browser von vorne und liest alles neu ein, was vorher war.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X