Blockieren Sie das Layout von div-Tags HTML

Noch vor etwa zehn Jahren in Runet am meistenoft verwendet das sogenannte Tabellenlayout. Angesichts der Tatsache, dass die Standards einiger Browser sehr unterschiedlich waren, mussten wir nach einer Lösung suchen, die es ermöglicht, das Internetdokument in allen Anwendungen korrekt anzuzeigen. Aber die Zeit verging, Standards entwickelten sich, und eine starre und unflexible Tabelle wurde durch ein gut angepasstes und reaktionsfähiges Blocklayout ersetzt. Im Vordergrund dieser Technologie steht das Prinzip der Verwendung der <div> Elemente. HTML-Dokumente wurden meist auf der Basis separater Blöcke erstellt, die im Gegensatz zum Tabellenlayout voneinander unabhängig sein können.

Vorkommen

Webseiten komplizieren und einen Computer entwickelnTechnologie hat dazu geführt, dass das Webdokument in zwei Teile geteilt wurde - ein Skelett (HTML-Code) und ein Design (Stylesheets). Dadurch ist es uns gelungen, eine beispiellose Entwicklung des Internets zu erreichen, deren Ergebnisse wir heute auf den meisten modernen Websites sehen können. Neben der Verbesserung des Entwicklungsprozesses erlaubt <div> HTML die Definition von Designregeln für jedes einzelne Element. Dies half, die Lesbarkeit des Codes der Webseite zu verbessern und die Ladezeit des Dokuments zu reduzieren. Jetzt sind die Suchmaschinen viel schneller und besser verarbeiten die Informationen auf der Website verfügbar.

Standards und Überprüfung

Das <div> -Tag in HTML wird streng verwendetEinhaltung der W3C-Standards (World Wide Web Consortium). Der Seitencode wird von einem speziellen Tool überprüft - dem Validator, der jeden möglichen Fehler auf der Seite analysiert (scannt und sucht). Eine gültige Seite bedeutet, dass alle Tags korrekt verwendet wurden und die Anforderungen der Standards vollständig erfüllen.

Mit Tags <div> können Sie Blöcke erstellen oder wie dieseimmer noch genannt, Container. In diesem Fall können einzelne Elemente ineinander verschachtelt werden, wodurch Strukturen mit der notwendigen Konfiguration und Komplexität erzeugt werden. Die Verwendung eines <div> -Tags ohne Eskorte durch eine Klasse oder einen Bezeichner ist fast nie anzutreffen. Dies liegt an der "Gesichtslosigkeit" des Elements. Wenn er keine Klasse zuweist, dann haben am Ende alle Container die gleiche Konfiguration.

Um wirklich wahr zu machenDokument müssen Sie die folgende Struktur des Tags <div> class = "some_name" verwenden. Anhand des Klassennamens können Sie in den Stylesheets die Position, Größe, Ableitung und andere Parameter eines einzelnen Blocks im Dokument bestimmen.

Klassen und Bezeichner verwenden

Der HTML-Block <div> kann als definiert werdenID und Klasse. Der Unterschied zwischen dem ersten und dem zweiten besteht darin, dass die ID nur einmal auf der Dokumentseite verwendet wird. Das heißt, es werden eindeutige Elemente definiert, die an keiner anderen Stelle im Seitencode wiederholt werden. Mit dem Klassenattribut können Sie dieselben Stilregeln auf mehrere Elemente anwenden. Dieser Ansatz vereinfacht die Entwicklung und Unterstützung von Code erheblich. Außerdem kann ein Objekt mehrere Klassen gleichzeitig haben. Zur korrekten Erkennung werden sie einfach durch Leerzeichen getrennt.

Natürlich ist die Blockstruktur des Dokuments nichtimpliziert die Verwendung von nur einem <div> -Tag. In der Struktur jeder Internet-Seite wird es immer andere Elemente geben. Darüber hinaus kann das Element <div> selbst eine völlig andere Art von Mapping haben. Dies geschieht mithilfe der Eigenschaft display. Das Element kann eine Zeile oder sogar eine Tabellenanzeige haben, wodurch Sie die Flexibilität der Verwendung des Blocks erheblich erhöhen und eine Site mit beliebiger Konfiguration erstellen können.

Das <div> -Tag. HTML-Eigenschaften

Wie oben erwähnt, ändert sich dieses Tag nichtDesign eines Fragments der Seite, und wird verwendet, um eine semantische Struktur mit anschließender Gestaltung durch Stylesheets zu erstellen. Die Verwendung eines schließenden Tags für dieses Element ist obligatorisch.

Trotz der Tatsache, dass viele moderne Browser diesen Fehler erkennen können, kann in einigen Fällen ein nicht geschlossener Tag bewirken, dass die Dokumentstruktur auseinander fällt und nicht korrekt angezeigt wird.

Da dieses Element Block ist, dannDer darin enthaltene Inhalt beginnt mit einer neuen Zeile. Um dieses Verhalten zu ändern, müssen Sie die Anzeigeparameter des Blocks mit der Eigenschaft display ändern. Zusätzlich zum Gruppieren der verschachtelten Elemente können Sie mit dem <div> -Tag den Speicherort des darin enthaltenen Inhalts formatieren. Verwenden Sie dazu das Attribut align, mit dem Sie Text oder Bild links, rechts oder in der Mitte des übergeordneten Elements platzieren können.

Positionierblöcke

Mithilfe des Positionsattributs können Sie die Positionierungsmethode des ausgewählten Elements ändern. Also gibt es drei Arten der Positionierung:

• Statisch (statisch) - wird standardmäßig verwendet. In diesem Fall wird das Element entsprechend der Position im HTML-Code positioniert.
• Relativ. In diesem Fall wird die Position des Objekts auf die gleiche Weise wie bei der statischen Positionierung berechnet. Mit dieser Eigenschaft können Sie jedoch die Position für die untergeordneten Objekte ändern.
• Absolut (absolut). Seine Position wird relativ zu dem Element mit relativer Positionierung berechnet.

Andere Attribute

Um die Position relativ zum Startpunkt zu änderndie oberen und linken Attribute werden verwendet. Werte können entweder positiv oder negativ sein. Die Breite und Höhe des Blockelements wird durch die Attribute width bzw. height angegeben. Wenn sie in den Stylesheets nicht angegeben wurden, belegt der Block die gesamte Breite des übergeordneten Elements. Wenn der Blockinhalt nicht zur gesamten Breite des "Elternteils" passt, wird das Verhalten des Elements durch das Überlaufattribut bestimmt.

Wir hoffen, dass dieser Artikel dazu beigetragen hat, die Frage zu verstehen, was <div> in HTML ist.