Kurzfassung der HTML5-Studiennotizen (2): Abschnitt „Neue Elemente', Artikel, Seite
黄舟
Freigeben： 2017-01-21 16:30:22
Original
1857 Leute haben es durchsucht
Abschnitt
Das Abschnittselement beschreibt einen allgemeinen Abschnitt in einem Dokument oder Programm. Im Allgemeinen enthält ein Abschnitt einen Kopf und einen Inhaltsblock. Ein Abschnitt kann als Abschnitt oder als Boxblock unter einer Registerkarte auf einer Registerkartenseite dargestellt werden. Eine Seite kann in mehrere Abschnitte unterteilt werden, die jeweils eine Einleitung, Neuigkeiten und Kontaktinformationen darstellen.
Wenn der Inhalt des Elements zusammen angezeigt werden kann, um die entsprechende Bedeutung auszudrücken, kann es als Artikelelement definiert werden und es besteht keine Notwendigkeit, das Abschnittselement zu verwenden.
Das Abschnittselement ist kein allgemeines Containerelement. Wenn ein Element daher einen entsprechenden Stil oder ein entsprechendes Skript definieren muss, wird empfohlen, das div-Element zu verwenden. Die Bedingung für die Verwendung von Abschnitt besteht darin, sicherzustellen, dass der Inhalt von Dieses Element kann im Dokument in der Gliederung deutlich dargestellt werden.
Der folgende Beispielcode stammt aus einem Teil der Apple-Website. Der Code enthält zwei kurze Abschnitte:
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article>
Nach dem Login kopieren
Wie Sie sehen, können Sie das h1-Element in dem Abschnitt beliebig verwenden , und Es besteht keine Notwendigkeit zu berücksichtigen, ob es sich bei diesem Abschnitt um ein Element der obersten, zweiten oder dritten Ebene handelt.
Der folgende Code ist eine Seite für die Abschlussfeier, die zwei Abschnitte enthält: Einer dient der Anzeige der Liste der Personen, die ihren Abschluss machen werden, und der andere dient der Anzeige der Form der Abschlussfeier.
<!DOCTYPE Html>
<html>
<head>
<title>Graduation Ceremony Summer 2022</title>
</head>
<body>
<h1>Graduation</h1>
<section>
<h1>Ceremony</h1>
<p>Opening Procession</p>
<p>Speech by Validactorian</p>
<p>Speech by Class President</p>
<p>Presentation of Diplomas</p>
<p>Closing Speech by Headmaster</p>
</section>
<section>
<h1>Graduates</h1>
<ul>
<li>Molly Carpenter</li>
<li>Anastasia Luccio</li>
<li>Ebenezar McCoy</li>
<li>Karrin Murphy</li>
<li>Thomas Raith</li>
<li>Susan Rodriguez</li>
</ul>
</section>
</body>
</html>
Nach dem Login kopieren
Artikel
Artikel stellt ein unabhängiges Fragment des Inhalts eines Dokuments dar, beispielsweise eines Blogeintrags oder eines Zeitungsartikels, und der Inhalt des -Tags ist unabhängig vom Rest des Dokuments.
Artikel ist ein spezielles Abschnitts-Tag, das eine klarere Semantik als Abschnitt hat. Es stellt einen unabhängigen und vollständigen Block verwandter Inhalte dar. Im Allgemeinen verfügt ein Artikel über einen Titelabschnitt (normalerweise in der Kopfzeile enthalten) und manchmal auch über eine Fußzeile. Obwohl es sich bei einem Abschnitt auch um einen thematischen Inhalt handelt, ist der Artikel selbst hinsichtlich seiner Struktur und seines Inhalts unabhängig und vollständig.
Wenn Artikel in Artikel eingebettet werden, bezieht sich der Inhalt des inneren Artikels grundsätzlich auf den Inhalt des äußeren Artikels. Beispielsweise sollte in einem Blog-Beitrag der Artikel, der vom Benutzer eingereichte Kommentare enthält, innerhalb des enthaltenden Blog-Beitrags-Artikels ausgeblendet werden.
<article>
<a href="http://www.apple.com">Safari 5 released</a><br />
7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,
Apple announced the release of Safari 5 for Windows and Mac......
</article>
Nach dem Login kopieren
aside
Das von HTML5 bereitgestellte
<body>
<header>
<h1>My Blog</h1>
</header>
<article>
<h1>My Blog Post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<aside>
<!-- Since this aside is contained within an article, a parser
should understand that the content of this aside is directly related
to the article itself. -->
<h1>Glossary</h1>
<dl>
<dt>Lorem</dt>
<dd>ipsum dolor sit amet</dd>
</dl>
</aside>
</article>
<aside>
<!-- This aside is outside of the article. Its content is related
to the page, but not as closely related to the above article -->
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">My Other Friend</a></li>
<li><a href="#">My Best Friend</a></li>
</ul>
</aside>
</body>
Nach dem Login kopieren
Das Obige ist die prägnante Version der HTML5-Studiennotizen (2): der Inhalt des Abschnitts „Neue Elemente“, des Artikels, Beiseite und mehr Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!
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
