Ein Blockelement ist im Allgemeinen ein Containerelement für andere Elemente. Es kann Inline-Elemente und andere Blockelemente aufnehmen Außergewöhnlich, es kann nur zur Aufnahme anderer Blockelemente verwendet werden. Ohne die Hilfe von CSS werden Blockelemente zeilenweise angeordnet. Mit CSS können wir den Standardlayoutmodus dieses HTML ändern und die Blockelemente an der gewünschten Stelle platzieren. Anstatt jedes Mal dummerweise eine neue Zeile zu beginnen. Es sollte darauf hingewiesen werden, dass das Tabellen-Tag auch eine Art Blockelement ist. Betrachten Sie diese beiden Layouts aus der Perspektive normaler Benutzer (mit Ausnahme von sehbehinderten Personen, blinden Personen usw.). Abgesehen vom Unterschied gibt es keinen weiteren Unterschied. Wenn jedoch ein normaler Benutzer versehentlich auf die Schaltfläche zum Anzeigen des Quellcodes der Seite klickt, ist der Unterschied zwischen beiden sehr groß. Der auf guten Rekonstruktionskonzepten basierende CSS-Layout-Seitenquellcode kann es zumindest normalen Benutzern ohne Erfahrung in der Webentwicklung ermöglichen, den Inhalt schnell zu verstehen. Aus dieser Perspektive sollte der CSS-Layoutcode ein besseres ästhetisches Erlebnis haben. Sie können sich das Blockcontainerelement div als Kästchen vorstellen, oder wenn Sie mit dem Ausschneiden experimentiert haben, wird es einfacher zu verstehen sein. Wir haben zunächst die benötigten Artikel aus verschiedenen Zeitungen und Zeitschriften ausgeschnitten. Jeder ausgeschnittene Inhalt ist ein Block. Anschließend haben wir diese Papierstücke entsprechend unserer Layout-Intention auf ein neues Blatt leeres Papier geklebt. Dadurch entsteht Ihre eigene, einzigartige Zusammenfassung. Als Erweiterung der Technologie folgt das Weblayout-Design demselben Muster. Inline-Elemente basieren im Allgemeinen auf Basiselementen auf semantischer Ebene. Inline-Elemente können nur Text oder andere Inline-Elemente enthalten, und das gemeinsame Inline-Element „a“ ist dies. Es ist zu beachten, dass der chinesische Name für Inline-Elemente eine Vielzahl von Inline-Elementen, Inline-Elementen, Inline-Elementen und Inline-Elementen umfasst. Grundsätzlich gibt es keine einheitliche Übersetzung, nennen Sie sie einfach wie Sie möchten. Wenn wir über Inline-Elemente sprechen, denken wir außerdem an ein Anzeigeattribut namens display:inline; dieses Attribut kann das berühmte IE-Problem mit doppelten schwebenden Rändern beheben. Blockelement (Blockelement) und Inline-Element (Inline-Element) sind Konzepte in der HTML-Spezifikation. Der grundlegende Unterschied zwischen Blockelementen und Inline-Elementen besteht darin, dass Blockelemente im Allgemeinen in einer neuen Zeile beginnen. Wenn die CSS-Steuerung hinzugefügt wird, wird dieser Attributunterschied zwischen Blockelementen und Inline-Elementen nicht mehr zu einem Unterschied. Beispielsweise können wir dem Inline-Element cite ein Attribut wie display:block hinzufügen, sodass es auch das Attribut hat, jedes Mal in einer neuen Zeile zu beginnen. Variable Elemente basieren auf den beiden oben genannten und ändern sich mit der Umgebung. Ihr Grundkonzept besteht darin, anhand des Kontexts zu bestimmen, ob das Element ein Blockelement oder ein Inline-Element ist. Variable Elemente gehören immer noch zu den beiden oben genannten Elementkategorien. Sobald der Kontext ihre Kategorie bestimmt, müssen sie den Regeln von Blockelementen oder Inline-Elementen folgen. Block- und Inline-Klassifizierungsdetails von HTML-Tags: Blockelement div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode Inline-Element div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode veränderliche Elemente div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode
◎ Adresse – Adresse ◎ Blockquote – Blockzitat ◎ Zentrum – Ausrichtungsblock ◎ Dir – Verzeichnisliste ◎ Div – häufig verwendete Bequemlichkeit auf Blockebene, auch das Haupt-Tag des CSS-Layouts ◎ dl – Definitionsliste ◎ Fieldset – Formularkontrollgruppe ◎ Formular – Interaktion Form ◎ h1 – Haupttitel ◎ h2 – Untertitel ◎ h3 – Titel der Ebene 3 ◎ h4 - Überschrift der Ebene 4 ◎ h5 - Überschrift der Ebene 5 ◎ h6 - Überschrift der Ebene 6 ◎ hr - Horizontale Trennlinie ◎ isindex - Eingabeaufforderung
◎ Menü – Menüliste ◎ Noframes – Frames optionaler Inhalt (zeigt diesen Blockinhalt für Browser an, die keine Frames unterstützen) ◎ Noscript – optionaler Skriptinhalt (zeigt diesen Inhalt für Browser an, die kein Skript unterstützen)
◎ ol – sortierte Form ◎ p – Absatz ◎ vorformatierter Text ◎ Tabelle – Tabelle ◎ ul – unsortierte Liste
◎ a – Ankerpunkt ◎ abbr – Abkürzung ◎ Akronym – Anfangsbuchstabe ◎ b – fett (nicht empfohlen)
◎ bdo – Bidi-Überschreibung
◎ big – große Schriftart ◎ br – Zeilenumbruch ◎ cite – Zitat ◎ code – Computercode (erforderlich beim Zitieren von Quellcode)
◎ dfn – Felder definieren ◎ em – hervorheben ◎ Schriftart – Schriftarteinstellungen (nicht empfohlen)
◎ i – kursiv ◎ img – Bild ◎ input – Eingabefeld ◎ kbd – Tastaturtext definieren ◎ label – Tabellenbezeichnung ◎ q – kurzes Anführungszeichen ◎ s – Unterstreichung (nicht empfohlen)
◎ samp – Beispiel-Computercode definieren ◎ select – Elementauswahl ◎ small – kleiner Schrifttext ◎ span – häufig verwendeter Inline-Container, Blöcke im Text definieren ◎ Strike – Unterstreichung ◎ Strong – Fetthervorhebung ◎ Sub – Subscript ◎ Sup – Superscript ◎ Textarea – Eingabefeld für mehrzeiligen Text ◎ tt – Telextext ◎ u – Unterstreichung ◎ var – Variablen definieren
Ein veränderliches Element ist je nach Kontext ein Blockelement oder ein Inline-Element.
◎ Applet-Java-Applet
◎ Button – Button ◎ Entf – Text löschen ◎ Iframe – Inline-Frame
◎ ins – eingefügter Text ◎ map – Bildblock (Karte)
◎ Objekt – Objektobjekt ◎ Skript – Client-Skript