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!

Erklärung dieser Website

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.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Wie kann ich KB5055612 in Windows 10 nicht installieren?

4 Wochen vor By DDD

<🎜>: Bubble Gum Simulator Infinity - So erhalten und verwenden Sie Royal Keys

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Wachsen Sie einen Garten - Komplette Mutationsführer

3 Wochen vor By DDD

Nordhold: Fusionssystem, erklärt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Flüstern des Hexenbaum

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial

1674

CakePHP-Tutorial

1429

Laravel-Tutorial

1333

PHP-Tutorial

1278

C#-Tutorial

1257

Related knowledge

Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet

HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles

HTML-Abschnitt-Tag

Wichtige Punkte, die für den Abschnitt Tag beachtet werden sollten

Attribute des HTML-Abschnitts-Tags

1. Tagspezifische Attribute

2. Globale Attribute

3. Ereignisattribute

CSS-Textformatierungseigenschaften in Markieren

CSS-Schrifteigenschaften in Markieren

CSS Test Shadow Property for Tag

Examples of HTML section Tag

Example #1

Example #2

Example #3

Example #4

Example #5

Conclusion

Heiße KI -Werkzeuge

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1

SublimeText3 chinesische Version

Senden Sie Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac-Version

Heiße Themen

CSS-Schrifteigenschaften in
Markieren

CSS Test Shadow Property for
Tag