liste - html tags




Was sind gültige Werte für das ID-Attribut in HTML? (14)

HTML5

Beachten Sie, dass ID muss eindeutig sein, dh. Es darf nicht mehrere Elemente in einem Dokument geben, die denselben ID-Wert haben.

Die Regeln zum ID-Inhalt in HTML5 sind (abgesehen davon, dass sie einzigartig sind):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

Dies ist die W3 Spezifikation über ID (von MDN):

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

Mehr Info:

  • W3 - globale Attribute ( id )
  • MDN Attribut ( id )

Welche Regeln gibt es für den Wert beim Erstellen der id Attribute für HTML-Elemente?


HTML5:

beseitigt die zusätzlichen Einschränkungen für das ID-Attribut, siehe hier . Die einzigen noch verbleibenden Anforderungen (abgesehen davon, dass sie im Dokument einzigartig sind) sind:

  1. der Wert muss mindestens ein Zeichen enthalten (darf nicht leer sein)
  2. Es darf keine Leerzeichen enthalten.

Vor-HTML5:

ID sollte übereinstimmen:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Muss mit AZ- oder AZ-Zeichen beginnen
  2. Darf enthalten - (Bindestrich), _ (Unterstrich),: (Doppelpunkt) und . (Zeitraum)

aber man sollte vermeiden : und . beacause:

Zum Beispiel könnte eine ID mit "ab: c" bezeichnet werden und im Stylesheet als #ab: c referenziert werden, aber genauso wie die ID für das Element, könnte sie ID "a", Klasse "b", Pseudo- Wahlschalter "c". Am besten, um die Verwirrung zu vermeiden und von der Verwendung fern zu bleiben. und: insgesamt.


  1. IDs eignen sich am besten für die Benennung von Teilen Ihres Layouts. Daher sollten IDs und Klassen nicht denselben Namen erhalten
  2. ID erlaubt alphanumerische und Sonderzeichen
  3. aber vermeiden Sie die Verwendung von # : . * ! # : . * ! Symbole
  4. nicht erlaubte Leerzeichen
  5. nicht mit Zahlen oder einem Bindestrich gefolgt von einer Ziffer begonnen
  6. Groß- und Kleinschreibung
  7. die Verwendung von ID-Selektoren ist schneller als die Verwendung von Klassenselektoren
  8. Verwenden Sie Bindestrich "-" (Unterstreichung "_" kann auch verwenden, aber nicht gut für SEO) für lange CSS-Klasse oder ID-Regel-Namen
  9. Wenn eine Regel einen ID-Selektor als Schlüsselselektor hat, fügen Sie den Tag-Namen nicht zur Regel hinzu. Da IDs eindeutig sind, würde das Hinzufügen eines Tag-Namens unnötigerweise den Abgleichprozess verlangsamen.
  10. In HTML5 kann das ID-Attribut für jedes HTML-Element verwendet werden. In HTML 4.01 kann das ID-Attribut nicht verwendet werden mit: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Alphabete-> Kappen und klein
Ziffern-> 0-9
Sonderzeichen-> ':', '-', '_', '.'

Das Format sollte entweder von "." oder ein Alphabet, gefolgt von einem der Sonderzeichen mit mehr Buchstaben oder Zahlen. Der Wert des ID-Feldes darf nicht mit einem '_' enden.
Leerzeichen sind auch nicht erlaubt, wenn sie angegeben werden, werden sie als unterschiedliche Werte behandelt, was im Falle der ID-Attribute nicht gilt.


Aus der HTML 4-Spezifikation ...

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von beliebig vielen Buchstaben, Ziffern ([0-9]), Bindestrichen ("-"), Unterstrichen ("_") gefolgt werden , Doppelpunkte (":") und Punkte (".").

EDIT: Oh! Wieder auf den Knopf geschlagen!


Bindestriche, Unterstriche, Punkte, Doppelpunkte, Zahlen und Buchstaben sind für die Verwendung mit CSS und JQuery gültig. Folgendes sollte funktionieren, aber es muss auf der ganzen Seite eindeutig sein und muss auch mit einem Buchstaben beginnen [A-Za-z].

Die Arbeit mit Doppelpunkten und Punkten benötigt ein bisschen mehr Arbeit, aber Sie können es tun, wie das folgende Beispiel zeigt.

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

Es scheint, dass, obwohl Doppelpunkte (:) und Punkte (.) In der HTML-Spezifikation gültig sind, sie als ID-Selektoren in CSS ungültig sind, also wahrscheinlich am besten vermieden werden, wenn Sie beabsichtigen, sie für diesen Zweck zu verwenden.


Für HTML 4 lautet die Antwort technisch:

ID- und NAME-Token müssen mit einem Buchstaben ([A-Za-z]) beginnen und können von beliebig vielen Buchstaben, Ziffern ([0-9]), Bindestrichen ("-"), Unterstrichen ("_") gefolgt werden , Doppelpunkte (":") und Punkte (".").

HTML 5 ist noch permissiver und sagt nur, dass eine ID mindestens ein Zeichen enthalten muss und keine Leerzeichen enthalten darf.

Das ID-Attribut unterscheidet zwischen Groß- und Kleinschreibung in XHTML .

Aus rein praktischen Gründen sollten Sie bestimmte Zeichen vermeiden. Perioden, Doppelpunkte und '#' haben in CSS-Selektoren eine besondere Bedeutung, daher müssen Sie diese Zeichen mit einem umgekehrten Schrägstrich in CSS oder einem doppelten Backslash in einer Selektor-Zeichenkette, die an jQuery übergeben wird, verlassen . Denken Sie darüber nach, wie oft Sie einem Zeichen in Ihren Stylesheets oder Code entkommen müssen, bevor Sie mit Punkten und Doppelpunkten in IDs verrückt werden.

Zum Beispiel ist die HTML-Deklaration <div id="first.name"></div> gültig. Sie können dieses Element in CSS als #first\.name und in jQuery wie #first\.name auswählen: $('#first\\.name'). Aber wenn Sie den $('#first.name') Schrägstrich $('#first.name') vergessen, haben Sie einen vollkommen gültigen Selektor, der nach einem Element mit der ID first sucht und auch den Klassennamen hat. Dies ist ein Fehler, der leicht zu übersehen ist. Sie könnten auf lange Sicht glücklicher sein, wenn Sie stattdessen den ID first-name (einen Bindestrich anstelle eines Punkts) wählen.

Sie können Ihre Entwicklungsaufgaben vereinfachen, indem Sie sich strikt an eine Namenskonvention halten. Wenn Sie sich beispielsweise ausschließlich auf Kleinbuchstaben beschränken und Wörter immer mit Bindestrichen oder Unterstrichen trennen (aber nicht beide, wählen Sie einen aus und verwenden Sie nie den anderen), dann haben Sie ein leicht zu merkendes Muster. Du wirst dich nie fragen, "war es firstName oder FirstName ?" weil du immer weißt, dass du first_name . Camel Case bevorzugen? Beschränken Sie sich darauf, keine Bindestriche oder Unterstriche, und verwenden Sie für das erste Zeichen immer Groß- und Kleinbuchstaben, mischen Sie sie nicht.

Ein jetzt sehr obskures Problem war, dass mindestens ein Browser, Netscape 6, ID-Attributwerte fälschlicherweise als Groß- und Kleinschreibung behandelt . Das heißt, wenn Sie in Ihrem HTML ( id="firstName" 'f') und #FirstName { color: red } in Ihrem CSS (Großbuchstabe 'F') id="firstName" eingegeben hätten, wäre dieser Buggy-Browser gescheitert setze die Farbe des Elements auf rot. Zum Zeitpunkt dieser Bearbeitung, April 2015, hoffe ich, dass Sie nicht gebeten werden, Netscape 6 zu unterstützen. Betrachten Sie dies als eine historische Fußnote.


In der Praxis verwenden viele Websites id Attribute, die mit Zahlen beginnen, obwohl dies technisch kein gültiger HTML-Code ist.

Die Entwurfsspezifikation von HTML 5 lockert die Regeln für die Attribute id und name auf: Sie sind jetzt nur opake Zeichenfolgen, die keine Leerzeichen enthalten dürfen.


Jeder alphanumerische Wert und " - " und " _ " sind gültig. Aber Sie sollten den ID-Namen mit einem beliebigen Zeichen zwischen AZ oder AZ beginnen .


Sie können Doppelpunkte und Punkte in ID / Name-Attributen technisch verwenden, aber ich würde stark empfehlen, beides zu vermeiden.

In CSS (und mehreren JavaScript-Bibliotheken wie jQuery) haben sowohl der Punkt als auch der Doppelpunkt eine besondere Bedeutung und es kommt zu Problemen, wenn Sie nicht vorsichtig sind. Perioden sind Klassenselektoren und Doppelpunkte sind Pseudo-Selektoren (z. B. ": Hover" für ein Element, wenn sich die Maus darüber befindet).

Wenn Sie einem Element die ID "my.cool:thing" geben, sieht Ihr CSS-Selektor wie folgt aus:

#my.cool:thing { ... /* some rules */ ... }

Was wirklich sagt, "das Element mit einer ID von 'mein', eine Klasse von 'cool' und der 'Ding' Pseudo-Selektor" in CSS-Sprache.

Bleiben Sie bei AZ auf jeden Fall, Zahlen, Unterstriche und Bindestriche. Und wie oben erwähnt, stellen Sie sicher, dass Ihre IDs eindeutig sind.

Das sollte deine erste Sorge sein.


Streng sollte es zusammenpassen

[A-Za-z][-A-Za-z0-9_:.]*

Aber jQuery scheint Probleme mit Doppelpunkten zu haben, daher ist es besser, sie zu vermeiden.


Vergessen Sie auch nie, dass eine ID eindeutig ist. Einmal verwendet, wird der ID-Wert möglicherweise nicht mehr im Dokument angezeigt.

Sie können viele IDs haben, aber alle müssen einen eindeutigen Wert haben.

Auf der anderen Seite gibt es das Klassenelement. Genau wie ID, kann es oft vorkommen, aber der Wert kann immer wieder verwendet werden.


für HTML5

Der Wert muss unter allen IDs im Home-Teilbaum des Elements eindeutig sein und mindestens ein Zeichen enthalten. Der Wert darf keine Leerzeichen enthalten.

Mindestens ein Zeichen, keine Leerzeichen.

Dies öffnet die Tür für gültige Anwendungsfälle, wie zum Beispiel akzentuierte Zeichen. Es gibt uns auch viel mehr Munition, um uns in den Fuß zu schießen, da Sie jetzt ID-Werte verwenden können, die Probleme mit CSS und JavaScript verursachen, wenn Sie nicht wirklich vorsichtig sind.







html