HTML-Abschnitt-Tag-HTML-Tutorial-php.cn

Der folgende Artikel bietet eine Übersicht über den HTML-Abschnitt Tag. HTML Tag definiert den Abschnitt von Dokumenten wie Kopfzeilen, Kapitel, Fußzeilen usw. Das

Tag unterteilt den Webseiteninhalt in Abschnitte und Unterabschnitte. Es wird normalerweise verwendet, wenn zwei Fußzeilen, Kopfzeilen oder ein anderer neuer Abschnitt erforderlich sind. Abschnitts-Tags gruppieren im Allgemeinen den generischen Block verwandter Inhalte. Der Hauptvorteil der Verwendung von

Tag ist, dass es sich um ein semantisches Element handelt, das seine Bedeutung sowohl für den Entwickler als auch für den Browser beschreibt.

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 der Das 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>

Nach dem Login kopieren

CSS

section{
--your css code—
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Output:

HTML-Abschnitt-Tag

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>

Nach dem Login kopieren

Output:

HTML-Abschnitt-Tag

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 &copy;2020- EDUCBA.</section>
<address> A- 406, Boomerang, Chandivali Farm Road,
Yadav Nagar, Chandivali, Powai,
Maharashtra, Mumbai - 400072. </address>
</footer>
</body>
</html>

Nach dem Login kopieren

Output:

HTML-Abschnitt-Tag

Example #4

Code:

<!DOCTYPE>
<html>
<head>
<style&gt
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>

Nach dem Login kopieren

Output:

HTML-Abschnitt-Tag

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 the

tag 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>

Nach dem Login kopieren

Output:

HTML-Abschnitt-Tag

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!