Heim > Artikel > Web-Frontend > HTML-Abschnitt-Tag
HTML-Abschnitt-Tag
- WBOYOriginal
- 2024-09-04 16:31:331066Durchsuche
Der folgende Artikel bietet eine Übersicht über den HTML-Abschnitt Tag. HTML
Wichtige Punkte, die für den Abschnitt Tag beachtet werden sollten
Für das Section-Tag in HTML5 sind sowohl Start- als auch End-Tags erforderlich, d. h.
Tag wird verwendet, um den Inhalt zu unterteilen, d. h. es verteilt den Abschnitt und den Unterabschnitt. - Der zulässige Inhaltstyp für das Abschnitts-Tag ist Flow-Inhalt, d. h.
Das Tag kann als übergeordnetes Tag keine verschachtelten -Tags haben. Element; dann ist die gleiche Der Inhalt darf keine haben. tag als übergeordnetes Element; Unterteilung von Inhalten und greifbaren Inhalten. Das Element darf kein Nachkomme eines -Elements sein. Element. - Jeder
sollte durch die Einführung eines Überschriften-Tags als untergeordnetes Element des visualisiert werden. Element. - Wenn wir den Inhalt eines
Element einzeln, dann können wir ein Tag stattdessen. Element sollte nicht als generischer Container verwendet werden; Das ist es, was Dies gilt insbesondere dann, wenn die Aufteilung nur zu Stylingzwecken erfolgt. Als Faustregel gilt, dass derDas Tag sollte logischerweise in der Gliederung des Dokuments erscheinen. Da es sich bei dem Element um ein semantisches Element handelt, liefert es sowohl für Menschen als auch für Benutzeragenten eine Bedeutung des eingeschlossenen Inhalts und konzentriert sich dabei auf einen Abschnitt des Dokuments. Da es sich um ein generisches semantisches Element handelt, sollten Sie es verwenden, wenn keine anderen semantischen Containerelemente (article, aside und nav) geeignet sind. Syntax:
Unten ist die Syntax erwähnt:
HTML/XHTML
<body> <section> ... </section> <body>
CSS
section{ --your css code— }Attribute des HTML-Abschnitts-Tags
Im Folgenden sind einige der genannten Attribute aufgeführt:
1. Tagspezifische Attribute
Es ist kein spezifisches Attribut vorhanden, das mit dem
verwendet werden kann. Tag. 2. Globale Attribute
Wie alle anderen HTML-Tags ist auch der
Tag unterstützt auch die globalen Attribute in HTML5. Die folgenden globalen Attribute sind:
- bei einem Abort
- onautocomplete
- onautocompleteerror
- onblur
- oncancel
- oncanplay
- oncanplaythrough
- onchange
- onclick
- onclose
- oncontextmenu
- oncuechange
- ondblclick
- ondrag
- hervorragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- einmal geleert
- onended
- Ein Fehler
- onfocus
- bei Eingabe
- ungültig
- onkeydown
- auf Tastendruck
- onkeyup
- aufladen
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmouseenter
- onmouseleave
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- auf dem Mausrad
- Onpause
- onplay
- Weiterspielen
- im Fortschritt
- onratechange
- onreset
- onresize
- onscroll
- onseek
- auf der Suche
- onselect
- onshow
- onsort
- installiert
- onsubmit
- onsuspend
- pünktliche Aktualisierung
- Ein/Aus
- onvolumechange
- Warten
3. Ereignisattribute
Es ist kein Ereignisattribut vorhanden, das mit dem
verwendet werden kann. Tag. CSS-Textformatierungseigenschaften in
Markieren Im Folgenden sind die CSS-Textformatierungseigenschaften aufgeführt:
- Textfarbe
- Textausrichtung
- Textdekoration
- Texttransformation
- Linienhöhe
- Textrichtung
- Textschatten
- Wortabstände
CSS-Schrifteigenschaften in
Markieren Im Folgenden sind die CSS-Schriftarteneigenschaften aufgeführt:
- font-style: normal|italic|oblique|initial|inherit
- font-variant: normal|small-caps|initial|inherit
- font-weight: normal|bold|bolder|lighter|number|initial|inherit
- font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit
- font-family: family-name|generic-family|initial|inherit
CSS Test Shadow Property for Tag
Given below is the CSS Test Shadow Property:
<style> address{ text-shadow: 1px 1px #FF0000; } </style>Examples of HTML section Tag
Given below are the examples of HTML section Tag:
Example #1
Code:
<!DOCTYPE html> <html> <head> <title>Section tag</title> </head> <body> <section> <h1>eduCBA: Article 1</h1> <p>Content of Article 1</p> </section> <section> <h1>eduCBA: Article 2</h1> <p>Content of Article 2</p> </section> <section> <h1>eduCBA: Article 3</h1> <p>Content of Article 3</p> </section> </body> </html>
Output:
Example #2
Nested Section Tag.
The
tag can be nested wherein the font size of the subsection is smaller than the section only if both have the same font properties. The subsection is used for organizing complex data. Code:
<!DOCTYPE html> <html> <head> <title>Section tag</title> </head> <body> <section> <h1>eduCBA: Article 1</h1> <p>Content of Article 1</p> <section> <h1>Subsection</h1> <h1>Subsection</h1> </section> </section> <section> <h1>eduCBA: Article 2</h1> <p>Content of Article 2</p> <section> <h1>Subsection</h1> <h1>Subsection</h1> </section> </section> <section> <h1>eduCBA: Article 3</h1> <p>Content of Article 3</p> <section> <h1>Subsection</h1> <h1>Subsection</h1> </section> </section> </body> </html>
Output:
Example #3
Code:
<!DOCTYPE html> <html> <head> . . . </head> <body> <header> <h1>HTML Section tag example</h1> </header> <main> <article> An article on HTML Section tag</article> </main> <aside> Body of an article </aside> <footer> <section>Copyright ©2020- EDUCBA.</section> <address> A- 406, Boomerang, Chandivali Farm Road, Yadav Nagar, Chandivali, Powai, Maharashtra, Mumbai - 400072. </address> </footer> </body> </html>
Output:
Example #4
Code:
<!DOCTYPE> <html> <head> <style> section{ border:1px solid pink; padding:15px; margin:10px; } </style> </head> <body> <h2> List of Articles</h2> <section> <h3>Article 1 heading</h3> <p> Body of article </p> </section> <section> <h3>Article 2 heading</h3> <p> Body of article </p> </section> <section> <h3>Article 3 heading</h3> <p> Body of article </p> </section> </body> </html>Output:
Example #5
While creating a
tag in HTML5, we can use either the class or id attributes wherein each id should be unique, and the class can be used multiple times when necessary. The section should always have a header element (H1 to H6). If a title cannot be given for the section, we can use the
element, which will probably be more appropriate, and always never use thetag just for putting styles. Code:
<!DOCTYPE> <html> <head> <style> section{ border:1px solid pink; padding:15px; margin:10px; } </style> </head> <body> <section id="sectiontag" class="sectionclass"> <h2>HTML Section tag</h2> <p>Random text Random text Random text...</p> </section> <section id="articletag"> <h2>HTML Article tag</h2> <p>Random text Random text Random text...</p> </section> <section id="footertag"> <h2>HTML Footer tag</h2> <p>Random text Random text Random text...</p> </section> </body> </html>Output:
Conclusion
The
element is a structural HTML element that groups all the related elements. Each usually includes one or more heading elements and additional elements presenting related content. is a new HTML5 element used to define an important document section. It is better to use it within articles, to define navigation, or in the header or footer. If a section of the content deserves its heading, which would be listed in a theoretical or actual table of contents, it should be placed as a . Das obige ist der detaillierte Inhalt vonHTML-Abschnitt-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
html5 css html xhtml define if for while using class Length Attribute Property Event Generic number this table wordStellungnahme：Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cnVorheriger Artikel：HTML-Strike-TagNächster Artikel：HTML-Strike-Tag