HTML5-Attribute. HTML-Attribute. Struktur des HTML5-Seitenlayouts

Wir haben es bereits herausgefunden. Wir haben herausgefunden, dass sie Inhalte haben. Das ist jedoch noch nicht alles. Tags haben auch Attribute, die ihre Fähigkeiten erweitern, und Attribute wiederum haben Werte. Mit ihrer Hilfe können Sie Parameter für ein Element festlegen und den Designstil bestimmen. Zum Beispiel mit dem Tag

Du hast den Absatz markiert. Aber wie macht man es rechtsbündig? Dazu benötigen Sie ein bestimmtes Attribut mit dem entsprechenden Wert. So wie einige Tags kein Paar haben, können einige Attribute ohne Werte verwendet werden.

Attribute sind reservierte Wörter (wie Tags, nur ohne spitze Klammern), ihre Bedeutung kann jedoch unterschiedlich sein. Genau wie bei Tags wird empfohlen, Attribute mit Werten in Kleinbuchstaben zu schreiben, obwohl es Browsern im Allgemeinen egal ist – dies ist nur eine Regel der guten Manieren: Auf Russisch ist es AUCH NICHT ZULÄSSIG, MIT FESTSTELLTASTE ZU SCHREIBEN AKTIVIERT. Warum ist HTML schlechter?

Attributwerte werden im folgenden Format geschrieben:

Attribute=“value“ lang=“en“

Sie sollten Attribute immer in das öffnende Tag schreiben, nach dem reservierten Wort.

Absatz

Normalerweise sind für ein einzelnes Tag mehrere Attribute verfügbar. Es spielt keine Rolle, in welcher Reihenfolge sie aufgelistet sind.

Jedes HTML-Tag verfügt über einen eigenen Satz von Attributen. Einige Attribute sind möglicherweise für mehrere Tags verfügbar, während andere möglicherweise nur mit einem funktionieren. Es gibt auch eine Gruppe universeller (globaler) Attribute, die mit jedem Tag verwendet werden können. Schauen wir uns kurz die Attribute dieser Kategorie an.

• Mit accesskey können Sie eine Tastenkombination für den Zugriff festlegen bestimmtes Objekt Seiten. Sie können beispielsweise sicherstellen, dass der Benutzer die Tastenkombination Alt+1 verwendet, um einem bestimmten Link zu folgen. Entwickeln Sie daher ein wichtiges Navigationssystem.

Der Attributwert kann Zahlen von 0 bis 9 oder Buchstaben des lateinischen Alphabets sein:

Der Link wird durch Drücken der Tastenkombination mit einem geöffnet

• Mit der Klasse können Sie mithilfe von ein Tag einem vordefinierten Tag zuordnen CSS-Styling. Durch die Verwendung eines Attributs können Sie den Code erheblich reduzieren, da Sie anstelle der wiederholten Eingabe desselben CSS-Blocks einfach den Namen der entsprechenden Klasse eingeben können.
• Mit contenteditable können Sie dem Benutzer erlauben, jedes Element der HTML-Seite zu bearbeiten: löschen, einfügen, Text ändern. Das gleiche Attribut ermöglicht das Bearbeiten und Deaktivieren. Es gibt nur zwei Werte: true – Bearbeitung zulassen, false – deaktivieren.
• Mithilfe des contextmenu-Attributs können Sie jedes Dokumentelement nach eigenem Ermessen mit eindeutigen Kontextmenüelementen versehen. Das Menü selbst wird im Tag erstellt und dem contextmenu-Attribut wird seine Kennung zugewiesen.
• dir gibt die Richtung des Textes an: von links nach rechts (ltr) oder von rechts nach links (rtl).
• Mit Draggable können Sie dem Benutzer das Ziehen eines mit diesem Attribut ausgestatteten Seitenelements deaktivieren (false) oder erlauben (true).
• Dropzone teilt dem Browser mit, was mit dem abgelegten Element geschehen soll: kopieren (Wertkopie), verschieben (Verschieben) oder einen Link dazu erstellen (Link).
• versteckt – ein Attribut, mit dem Sie den Inhalt eines Elements ausblenden können, sodass es nicht im Browser angezeigt wird. Wenn das Attribut auf „false“ gesetzt ist, wird das Objekt angezeigt, auf „true“ wird es ausgeblendet.
• id gibt den Bezeichner des Elements an – eine Art Name, der benötigt wird, um einfach den Stil des Objekts zu ändern und damit Skripte darauf zugreifen können. Der Wert des Attributs ist sein Name. Es muss mit einem lateinischen Buchstaben beginnen und kann Zahlen, Buchstaben desselben lateinischen Alphabets (groß und klein) sowie Bindestriche (-) und Unterstriche (_) enthalten. Darf keine russischen Buchstaben enthalten.
• lang hilft dem Browser zu verstehen, in welcher Sprache der Inhalt geschrieben ist, und ihn entsprechend zu formatieren (z. B. können Sprachen unterschiedliche Anführungszeichen verwenden). Die Werte sind Sprachcodes (Russisch – ru, Englisch – en usw.).
• Die Rechtschreibprüfung aktiviert (true) oder deaktiviert (false) die Rechtschreibprüfung. Es ist besonders nützlich, das Attribut in Formularfeld-Tags zu verwenden, in denen der Benutzer Text eingibt.
• Mit style können Sie das Design eines Elements festlegen mit CSS-Code.
• Mit tabindex können Sie bestimmen, wie oft der Benutzer die Tab-Taste drücken muss, damit ein Objekt mit diesem Attribut den Fokus erhält. Die Anzahl der Klicks bestimmt den Attributwert – eine positive Ganzzahl.
• Titel – ein Tooltip, der angezeigt wird, wenn Sie die Maus über ein Element bewegen und es eine Weile still stehen lassen. Die Zeile in der Bedeutung wird ein Hinweis sein.

• Translate erlaubt (Ja) oder verweigert (Nein) die Übersetzung des Tag-Inhalts.
• align gibt die Ausrichtung des Elements an. Sie können damit beispielsweise Text linksbündig (links), rechtsbündig, zentriert oder im Blocksatz ausrichten. Für Bilder (tag ) ist es auch möglich, am oberen Rand des höchsten Elements der Linie (oben) und am unteren Rand (unten) auszurichten, und der Wert middle sorgt dafür, dass die mittlere Linie des Bildes mit der Grundlinie der Linie übereinstimmt.

Beachten Sie, dass die Verwendung des align-Attributs nicht empfohlen wird und es besser ist, den Text mithilfe von CSS auszurichten.

Betrachten Sie als Beispiel die HTML-Codezeile:

Dieser Text kann bearbeitet werden

Die gesamte Zeile erstellt einen Textabsatz, den der Benutzer im Browser bearbeiten kann.

Schauen wir uns jedes Element der Zeile an.

- das öffnende Tag des Containers, in dem der Absatz gespeichert ist.

Zwischen den Symbolen > und< расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable = „true“ – das ist das Attribut und sein Wert. Denken Sie daran, wie in der Schule: x=3. Dasselbe hier: contenteditable = „true“. Das Attribut contenteditable gibt an, ob der Benutzer den Inhalt des Elements bearbeiten kann; der Wert true , der in Anführungszeichen geschrieben und durch ein Gleichheitszeichen getrennt wird, ermöglicht die Bearbeitung:

Attribut = „Wert“ contenteditable = „true“

Damals, in den Tagen von XHTML/HTML4, standen Entwicklern nur wenige Optionen zur Verfügung, mit denen sie beliebige DOM-bezogene Daten speichern konnten. Sie könnten Ihre eigenen Attribute erfinden, aber das war riskant – Ihr Code wäre ungültig, Browser könnten Ihre Daten ignorieren und es könnte Probleme verursachen, wenn der Name mit Standard-HTML-Attributen übereinstimmte.

Daher blieben die meisten Entwickler bei den Attributen class oder rel, da sie die einzig sinnvolle Möglichkeit zum Speichern zusätzlicher Zeilen darstellten. Nehmen wir zum Beispiel an, wir erstellen ein Widget, um Nachrichten wie eine Twitter-Nachrichten-Timeline anzuzeigen. Im Idealfall sollte JavaScript konfigurierbar sein, ohne dass der Code neu geschrieben werden muss. Daher definieren wir die Benutzer-ID im Klassenattribut wie folgt:

Unser JavaScript-Code sucht nach einem Element mit der ID msglist . Mit dem Skript suchen wir nach Klassen, die mit user_ beginnen, und „bob“ ist in unserem Fall die Benutzer-ID, und wir zeigen alle Nachrichten dieses Benutzers an.

Nehmen wir an, wir möchten auch eine maximale Anzahl von Nachrichten festlegen und Nachrichten überspringen, die älter als sechs Monate (180 Tage) sind:

Unser Klassenattribut Es wird sehr schnell unübersichtlich – es ist einfacher, einen Fehler zu machen, und das Parsen von Zeichenfolgen in JavaScript wird immer schwieriger.

Glücklicherweise wurde mit HTML5 die Möglichkeit eingeführt, benutzerdefinierte Attribute zu verwenden. Sie können jeden kleingeschriebenen Namen mit dem Präfix data- verwenden, zum Beispiel:

Benutzerdefinierte Datenattribute:

• Dies sind Zeichenfolgen. Sie können darin beliebige Informationen speichern, die als Zeichenfolge dargestellt oder codiert werden können, z. B. JSON. Die Typumwandlung muss mit JavaScript erfolgen
• sollte in Fällen verwendet werden, in denen keine geeigneten HTML5-Elemente oder -Attribute vorhanden sind
• beziehen Sie sich nur auf die Seite. Im Gegensatz zu Mikroformaten sollten sie ignoriert werden externe Systeme, Typ Suchmaschinen und Suchroboter

In allen Browsern können Sie Datenattribute mithilfe der Methoden getAttribute und setAttribute abrufen und ändern:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);

Dies funktioniert, sollte aber nur verwendet werden, um die Kompatibilität mit älteren Browsern aufrechtzuerhalten.

Ab jQuery 1.4.3 verarbeitet die Methode data() HTML5-Datenattribute. Sie müssen das Datenpräfix nicht explizit angeben, daher funktioniert Code wie dieser:

Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);

Beachten Sie jedoch, dass jQuery versucht, die Werte solcher Attribute in geeignete Typen (Boolesche Werte, Zahlen, Objekte, Arrays oder Null) umzuwandeln, was sich auf das DOM auswirkt. Im Gegensatz zu setAttribute ersetzt die Methode data() das Attribut data-list-size nicht physisch. Wenn Sie seinen Wert außerhalb von jQuery überprüfen, beträgt er immer noch 5.

Schließlich haben wir eine API für die Arbeit mit HTML5-Datensätzen, die ein DOMStringMap-Objekt zurückgibt. Es ist wichtig zu bedenken, dass Datenattribute einem Objekt ohne Datenpräfixe zugeordnet werden, Bindestriche aus Namen entfernt werden und die Namen selbst in CamelCase umgewandelt werden, zum Beispiel:

Unser neuer Code:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

Diese API wird von allen modernen Browsern unterstützt, jedoch nicht von IE10 und niedriger. Für diese Browser gibt es eine Problemumgehung, aber es ist wahrscheinlich praktischer, jQuery zu verwenden, wenn Sie für ältere Browser schreiben.

Attribute bieten Weitere Informationenüber das Element, und sie werden immer im Start-Tag definiert, unabhängig davon, ob es sich um ein gepaartes Tag oder ein einzelnes Tag handelt.

Es gibt eine Reihe von Attributen in HTML, die universell sind und auf fast jedes Tag angewendet werden können. Daher werden die in dieser Gruppe enthaltenen Attribute als globale Attribute bezeichnet.

Globale Attribute werden in den Beispielen dieses Tutorials häufig vorkommen. Ich schlage vor, dass Sie sich schnell die Attribute ansehen, die wir bereits besprochen haben, und sich mit den globalen Attributen vertraut machen, die in den kommenden Artikeln besprochen werden:

Bevor Sie mit dem nächsten Thema fortfahren, erledigen Sie die Übungsaufgabe:

Tipp: Vergessen Sie nicht, bei Bedarf die Sprache des Seiteninhalts und der Elemente zu definieren. Nachdem Sie die Übung abgeschlossen haben, überprüfen Sie den Seitencode, indem Sie das Beispiel in einem separaten Fenster öffnen, um sicherzustellen, dass Sie es richtig ausgefüllt haben.

Auf HTML5, obwohl alle modernen Browser dies bereits unterstützen dieser Norm. Stand Dezember 2011, der Standard befindet sich noch in der Entwicklung.

HTML5 fügt viele neue syntaktische Funktionen hinzu – , , und . Diese Elemente sollen das Einbetten und Verwalten von Grafiken und Medien im Web erleichtern, ohne auf native Plugins und APIs zurückgreifen zu müssen. Weitere neue Elemente wie , und sollen den semantischen Inhalt des Dokuments (der Seite) bereichern.

• 1. Abschnitts-Tags (Artikel, Seite, Fußzeile, Kopfzeile, Hgroup, Navigation, Abschnitt)
• 2. Inhaltsgruppierungs-Tags (figure, figcaption)
• 3. Tags zur semantischen Texthervorhebung (bdo, mark, time, ruby, rt, rp, wbr)
• 4. Tags zum Einfügen von Inhalten (Audio, Video, Canvas, Einbettung, Quelle)
• 5. Tags für Formularelemente (Datenliste, Keygen, Ausgabe, Fortschritt, Zähler)
• 6. Interaktive Elemente (Details, Zusammenfassung, Befehl, Menü)

Wenn Sie die übliche Seitenstruktur einer Website verwenden, können Sie mehrere typische Blöcke identifizieren, die durch ein div-Tag mit der entsprechenden Klasse (, , , usw.) beschrieben werden.

Bei Verwendung mit HTML5 werden diese Blöcke durch strukturelle Tags , , , usw. beschrieben, was Entwicklern das Leben sehr erleichtert. Diese Tags sind strukturelle Äquivalente und machen das Markup visueller und verständlicher. Außerdem sind sie standardmäßig inline und müssen daher mithilfe von display:block blockiert werden.

Es ist wichtig, diese Tags richtig zu verwenden. Damit Sie nicht verwirrt werden, wann Sie welches verwenden sollten, gibt es im Internet eine wunderbare Ressource, und Sie können auch den folgenden Algorithmus verwenden:

Alle modernen Browser (Opera, Safari, Chrome, Mozilla, IE9+) unterstützen bereits HTML5. Für Browser IE8 und niedriger sollten Sie Javascript einbinden, das ihnen „beibringt“, die neuen Tags zu verstehen. Der Code zum Verbinden ist unten:

Bei der Layouterstellung haben wir auf den neuen HTML5-Standard umgestellt. Wenn Sie eine Website oder separat bestellen möchten, können Sie eine Anfrage hinterlassen, indem Sie an eine der auf der Seite angegebenen Adressen oder über das Formular schreiben Rückmeldung. Wir freuen uns auf die Zusammenarbeit!

Neben Attributen, die für bestimmte Tags spezifisch sind, gibt es in HTML5 eine Reihe von Attributen, die zu beliebigen Tags hinzugefügt werden können. Daher werden die in dieser Gruppe enthaltenen Attribute als global oder universell bezeichnet. Sie sind unten aufgeführt mit kurze Beschreibung. Verfügbar per Link detaillierte Beschreibung Attribut.

Mit dem accesskey-Attribut können Sie einen Link über eine bestimmte Tastenkombination mit einem im Linkcode angegebenen Buchstaben oder einer Zahl aktivieren. Browser verwenden unterschiedliche Tastenkombinationen. Für accesskey="s" funktionieren beispielsweise die folgenden Kombinationen.

• Internet Explorer: Alt + S
• Chrome: Alt+S
• Oper: Umschalt + Esc, S
• Safari: Alt+S
• Firefox: Umschalt + Alt + S

Gibt eine Stilklasse an, die es Ihnen ermöglicht, einem Stylesheet ein bestimmtes Tag zuzuordnen. Es ist möglich, mehrere Klassen gleichzeitig in einem Wert anzugeben und diese durch ein Leerzeichen zu trennen.

Informiert darüber, dass das Element für die Bearbeitung durch den Benutzer verfügbar ist – es ist erlaubt, Text zu löschen und einen neuen einzugeben. Standardbefehle wie „Rückgängig machen“, „Text aus dem Puffer einfügen“ usw. funktionieren ebenfalls.

Legt das Kontextmenü für ein Element fest. Der Wert ist die Kennung des Menüs, das mithilfe des Tags erstellt wurde.

Legt die Richtung und Anzeige des Texts fest – von links nach rechts oder von rechts nach links. Browser unterscheiden normalerweise die Richtung von Text, wenn er in Unicode vorliegt. Sie können jedoch das dir-Attribut verwenden, um anzugeben, in welche Richtung Text angezeigt werden soll. Bei arabischen und hebräischen Zeichen hat die Unicode-Richtung Vorrang, sodass das dir-Attribut sie nicht beeinflusst.

Ermöglicht das Ziehen eines Elements zur weiteren Bearbeitung.

Gibt an, was mit dem gezogenen Element geschehen soll.

Verbirgt den Inhalt eines Elements vor der Ansicht. Ein solches Element wird nicht auf der Seite angezeigt, ist aber über Skripte zugänglich.

Legt einen Bezeichner fest – einen eindeutigen Namen eines Elements, der zum Ändern seines Stils und zum Zugriff darauf über Skripte verwendet wird. Die Kennung im Dokumentcode muss in einer einzigen Kopie vorliegen, d. h. nur einmal vorkommen.

Eine Gruppe von Attributen, die für die Arbeit mit Mikrodaten entwickelt wurden.

Der Text des Dokuments kann in einer Sprache eingegeben werden oder Einfügungen in anderen Sprachen enthalten, die sich in ihren Textformatierungsregeln unterscheiden können. Zum Beispiel für Russisch, Deutsch und auf Englisch Charakteristisch sind die unterschiedlichen Anführungszeichen, in denen das Zitat steht. Um die Sprache anzugeben, in der der Text im aktuellen Element geschrieben ist und das lang-Attribut angewendet wird. Der Browser nutzt seinen Wert, um bestimmte Zeichen korrekt anzuzeigen.

Weist den Browser an, zu prüfen, ob die Rechtschreibung und Grammatik im Text korrekt sind. Obwohl das Attribut für fast alle Elemente festgelegt werden kann, ist der Effekt nur bei Formularfeldern ( , ) und bearbeitbaren Elementen spürbar (für diese ist das Attribut contenteditable festgelegt).

Wird verwendet, um ein Element mithilfe von CSS-Regeln zu formatieren.

Das tabindex-Attribut legt die Reihenfolge fest, in der der Fokus empfangen wird, wenn mit der Tab-Taste zwischen Elementen navigiert wird. Der Übergang erfolgt von einem kleineren Wert zu einem größeren, beispielsweise von 1 auf 2, dann auf 3 und so weiter. In diesem Fall ist die strikte Reihenfolge nicht wichtig; es ist erlaubt, einige Zahlen zu überspringen und mit einer beliebigen Zahl zu beginnen. Wenn die Tabindex-Werte der Elemente gleich sind, wird deren Reihenfolge im Code berücksichtigt.

Erstellt einen Text-Tooltip, der angezeigt wird, wenn Sie mit der Maus über ein Element fahren. Die Art dieses Hinweises hängt vom Browser und den Einstellungen ab Betriebssystem und kann nicht mithilfe von HTML-Code oder -Stilen geändert werden.