Neue HTML5-Elemente

HTML5 ist ein neues Upgrade der HTML 4.01-Version, das viele neue Funktionen, erweiterte Funktionsmerkmale, bessere Seitenaufrufe und viele andere Verbesserungen bietet, um den wachsenden technologischen Anforderungen gerecht zu werden. Die am häufigsten verwendeten und gewünschten Elemente von HTML5 sind

,

,

,

,

,,

,

, < ;Abschnitt> und . Diese Tags/Elemente von HTML 5 ermöglichen weitaus benutzerfreundlichere Schnittstellen mit höheren Leistungsraten, effizienteren Ergebnissen und einfacherer Codierung und Implementierung und helfen bei der Improvisation des Layouts als Ganzes.

Top 10 der neuen HTML5-Elemente

HTML5 bietet neue Elemente zur Verbesserung des Layouts des Dokuments.

1.

Der Das Element gibt einen Teil einer Seite an, der eine separate Struktur in einem Dokument, Abschnitt oder einer Website enthält und für die weite Verbreitung oder Verwendung empfohlen wird. Dies kann ein Gruppenbeitrag, ein Journal- oder Tageszeitungsbericht, eine Übermittlung an einen Online-Newsletter, eine von einem Kunden gesendete Bemerkung oder ein anderes substanzfreies Objekt sein.

Beispiel:

<title>Article Element</title>


<article>
<h2 id="EDUCBA">EDUCBA</h2>
<p>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>

Ausgabe:

• Speichern Sie den obigen Code in einer Datei mit der Erweiterung .html.
• Führen Sie die HTML-Datei in einem Browser aus und Sie erhalten die im Bild unten gezeigte Ausgabe.

2.

Die Das Element weist auf einzelne Inhalte hin, z. B. Kategorisierungen, Karten, Bilder, Codeartikel usw.

Beispiel:

<title>Figure Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="Neue HTML5-Elemente" >
</figure>

Ausgabe:

Der obige Code erzeugt die Ausgabe wie im Bild unten gezeigt,

3.

Die

Das Element fügt eine Beschreibung für das Bild hinzu.

Beispiel:

<title>Figure Caption Element</title>


<p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.
</p>
<figure>
<img  src="/static/imghwm/default1.png" data-src="educba.png" class="lazy" alt="Neue HTML5-Elemente" >
<figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption>
</figure>

Ausgabe:

Der obige Code zeigt das Ergebnis wie im Bild unten gezeigt an,

4.

Der

Das Element gibt die Kopfzeile für ein Dokument oder einen Abschnitt auf der Seite an. Sie können mehr als eine Kopfzeile in einem einzelnen Dokument definieren.

Beispiel:

<title>Header Element</title>


<article>
<header>
<h1 id="Header-One">Header One</h1>
<h2 id="Header-Two">Header Two</h2>
<h3 id="Header-Three">Header Three</h3>
</header>
<p>The content of the document goes here...</p>
</article>

Ausgabe:

Der obige Code zeigt das Ergebnis wie im Bild unten gezeigt an,

5.

Die Das Element gibt Informationen wie Autoreninformationen, Copyright-Informationen, Kontakt, Links zu verwandten Dokumenten, Sitemap und vieles mehr an.

Beispiel:

<title>Footer Element</title>


<footer>
<p>Copyright © 2019 www.educba.com</p>
<p>Contact: <a href="mailto:%5Bemail%C2%A0protected%5D">[email protected]</a>
</p></footer>

Ausgabe:

Der obige Code zeigt das Ergebnis wie im Bild unten gezeigt an,

6.

Das Das Element wird zum Anzeigen der wichtigsten, d. h. wichtigen Informationen eines Dokuments verwendet.

Beispiel:

<title>Main Element</title>


<header>
<p>Header information>
</p></header>
<main>
<p>Main Information</p>
<article>
<h2 id="EDUCBA">EDUCBA</h2>
<p>EDUCBA is a leading global provider of skill based education...</p>
</article>
</main>
<footer>
<p>Footer Information>
</p></footer>

Ausgabe:

Der obige Code erzeugt die Ausgabe wie im Bild unten gezeigt,

7.

Das Das Element hebt den Text hervor oder markiert ihn mit der Hintergrundfarbe, die den Benutzer auf einen bestimmten Text im Dokument aufmerksam macht.

Beispiel:

<title>Mark Element</title>


<article>
<p><mark>EDUCBA</mark> is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p>
</article>

Ausgabe:

Der obige Code zeigt das Ergebnis wie im Bild unten gezeigt an,

8.

Das

Das Element wird verwendet, um die Navigationslinks auf der Seite anzugeben. Diese Links stellen Verbindungen zu anderen Seiten in einem Dokument her.

Beispiel:

<title>Nav Element</title>


<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JAVA</a> |
<a href="#">PHP</a> |
<a href="#">PYTHON</a>
</nav>
</header>

Ausgabe:

Der obige Code erzeugt die Ausgabe wie im Bild unten gezeigt,

9.

Der Das Element definiert den eigenständigen Abschnitt oder bestimmten Bereich des Dokuments.

Beispiel:

<title>Section Element</title>


<article>
<h2 id="Main-Article"> Main Article </h2>
<p>Content of the main header will be displayed here...</p>
<section>
<h2 id="Section-One">Section One</h2>
<p>Content of the first section will be displayed...</p>
</section>
<section>
<h2 id="Section-Two">Section Two</h2>
<p>Content of the second section will be displayed...</p>
</section>
</article>

Ausgabe:

Der obige Code zeigt das Ergebnis wie im Bild unten gezeigt an,

10.

The

tag is a subpart of the

tag which provides the text that can be displayed or hidden when the user clicks the heading.

Example:

<title>Summary Element</title>


<details>
<summary>
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
</summary>
<p>It is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</p>
</details>

Output:

When you run the above code, it will display the result as shown below,

As shown in the image, click on the heading, and it will display the hidden text shown below the image,

Conclusion

So far, we have seen how new HTML5 elements are useful for various website creation tasks. These new elements read the document in a more accurate & standard way and develop more complex and efficient web apps. The new HTML5 elements give some additional extra features to generate interactive websites.

Das obige ist der detaillierte Inhalt vonNeue HTML5-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!