Wir stellen Beispiele für semantische HTML5-Elemente vor

Was ist ein semantisches Element?

Ein semantisches Element kann seine Bedeutung für Browser und Entwickler klar beschreiben.

Beispiele für semantische Elemente:

und – keine Berücksichtigung des Inhalts erforderlich.

Beispiele für semantische Elemente:

und ; - Definiert den Inhalt klar.

Browser-Unterstützung

Internet Explorer 9+, Firefox, Chrome, Safari und Opera unterstützen semantische Elemente.

Hinweis: Dieses Element wird in Internet Explorer 8 und früher nicht unterstützt. Am Ende des Artikels werden jedoch kompatible Problemumgehungen bereitgestellt.

Neue semantische Elemente in HTML5

Viele bestehende Websites enthalten den folgenden HTML-Code:

,

oder

, um Navigationslinks und Kopfzeilen anzuzeigen , Und der Schwanz.

HTML5 bietet neue semantische Elemente, um das

HTML5

-Tag zu definieren Inhalt. .

Beispiele für die Elementverwendung:

Forumsbeitrag

Blogbeitrag

Nachrichtenbeitrag

Kommentar

HTML5

-Element

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Das

-Element wird verwendet, um den Navigationslinkabschnitt der Seite zu definieren. Allerdings müssen nicht alle Links im

Beispiel<🎜 enthalten sein >

HTML5

-Element

-Tag definiert Inhalte außerhalb des Hauptbereichs der Seite (z. B. einer Seitenleiste). Der Inhalt des

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

aside-Tags sollte sich auf den Inhalt des

HTML5-Elements

beziehen beschreibt den Kopf des Dokumentbereichs

Beachten Sie, dass es zur Definition des einleitenden Anzeigebereichs des Inhalts verwendet wird.

<p>My family and I visited The Epcot center this summer.</p>
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

Sie können mehrere

-Elemente verwenden in der Seite.

Das folgende Beispiel definiert die Kopfzeile des Artikels:

Instanz

HTML5

-Element

< Das Element „footer>“ beschreibt den unteren Bereich des Dokuments.

Das Element

Verwendung, Kontaktinformationen usw.

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

Innerhalb des Dokuments können Sie mehrere

Instanzen

HTML5

Bilder, Diagramme, Fotos, Code usw.). Der Inhalt des

-Elements sollte mit dem Hauptinhalt in Zusammenhang stehen, aber bei Entfernung keine Auswirkungen auf den Dokumentenfluss haben.

Tag-Definition

元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

实例

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

我们可以开始使用这些语义元素吗?

以上的元素都是块元素(除了

).

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure
{ 
display: block; 
}

Internet Explorer 8 及更早IE版本中的问题

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用

,

,

,

,

,

,

, 或者其他的HTML5 elements.

解决办法:你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：code.google.com/p/html5shiv/

下载后，将以下代码放入的网页中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于 元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. php.cn原创html5视频教程

Das obige ist der detaillierte Inhalt vonWir stellen Beispiele für semantische HTML5-Elemente vor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

HTML5，语义元素，实例

Quelle：php.cn

Vorheriger Artikel：Beispiele für HTML5-Formularelemente erklärt Nächster Artikel：HTML5Canvas-Erklärung und Beispiel-Tutorials

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

Neueste Artikel des Autors

• Beispiel-Tutorial zur Übergabe von Parametern mithilfe der NameValuePair-Methode
  1970-01-01 08:00:00
• Verwenden Sie dom4j, um ein Beispiel für ein XML-Dokument zu analysieren
  1970-01-01 08:00:00
• Katalogdienst – Analyse des Beispielcodes für die Microsoft-Microservice-Architektur
  1970-01-01 08:00:00
• Ausführliche Erläuterung der ersten Schritte mit Beispielen für .net Elasticsearch
  1970-01-01 08:00:00
• Detaillierte Einführung in Spring Boot mit Konfigurationsbeispielen für die JSP-Unterstützung
  1970-01-01 08:00:00
• Wie erkennt JS, ob das von window.open geöffnete Fenster geschlossen ist?
  1970-01-01 08:00:00
• Teilen Sie ein verstümmeltes Problem in sqlyog beim Herstellen einer Verbindung zur Datenbank und dessen Lösung
  1970-01-01 08:00:00
• Beispiele für die Verwendung von Parametern variabler Länge in Java
  1970-01-01 08:00:00
• Das neueste Beispiel-Tutorial für die Amap API WEB-Entwicklung
  1970-01-01 08:00:00
• Vor- und Nachteile von AJAX
  1970-01-01 08:00:00

Aktuelle Ausgaben

Was sind die Best Practices für die Anzeige von Versionsinformationen in Webanwendungen? Ich entwickle eine Webanwendung. Was sind die Best Practices für die Anzeige von Versionsi...

Aus 2024-04-06 19:13:16

0

2

476

Wie kann ich das einzige „aktive' Element in der Liste aktualisieren? Angenommen, Sie haben 4 Elemente, von denen nur eines den Klassennamen aktiv haben kann. A...

Aus 2024-04-02 20:32:27

0

1

389

Wie kann die eingegebene Zahl erhöht werden? Ich versuche, das Schrittattribut zu implementieren, wenn ich das HTMLinput-Element verwen...

Aus 2024-04-01 19:13:50

0

2

267

Flex CSS – Element nach einer bestimmten Höhe abschneiden, anstatt es zu umbrechen Die Ränder stellen die statische Höhe und Breite dar. Ich möchte, dass Artikel 5 und 6 in ...

Aus 2024-04-01 14:02:02

0

1

396

Stellen Sie sicher, dass das von Nuxt JS/Vue Jest überprüfte Klassennamenelement auf der Seite vorhanden ist Ich bin neu in der Jest-Testsuite für VueJS und integriere sie in meine NuxtJS-Anwendung. ...

Aus 2024-03-31 19:10:41

0

1

347

verwandte Themen

Mehr>

• Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
• Der Unterschied zwischen HTML und HTML5
• So aktivieren Sie den sekundären Anmeldedienst
• Was bedeuten B-Seite und C-Seite?
• So überprüfen Sie den Serverstatus
• Was ist eine .Xauthority-Datei?
• Big-Data-Plattform
• Was ist die normale Temperatur eines Laptops?

Beliebte Empfehlungen

• was ist h5
• Wie erstelle ich eine H5-Seite, wenn man den Code nicht versteht? Empfohlene H5-Seitenproduktionsplattform
• Was sind die neuen Funktionen von HTML5?
• Was ist die Produktion von H5-Seiten?
• Was ist der Unterschied zwischen h5 und Miniprogramm?

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1415819
• 
  php入门教程之一周学会PHP

  4254954
• 
  JAVA 初级入门视频教程

  2465920
• 
  小甲鱼零基础入门学习Python视频教程

  502875
• 
  PHP 零基础入门教程

  843235

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1415819 Lernzeiten
• 
  JAVA 初级入门视频教程

  2465920 Lernzeiten
• 
  小甲鱼零基础入门学习Python视频教程

  502875 Lernzeiten
• 
  Web前端开发极速入门

  215196 Lernzeiten
• 
  零基础精通 PS 视频教程

  874544 Lernzeiten

• 
  【web前端】Node.js快速入门

  6215 Lernzeiten
• 
  国外Web开发全栈课程全集

  4846 Lernzeiten
• 
  Go语言实战之 GraphQL

  4072 Lernzeiten
• 
  550W粉丝大佬手把手从零学JavaScript

  605 Lernzeiten
• 
  python大神Mosh，零基础小白6小时完全入门

  20664 Lernzeiten

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

• [表单按钮] jQuery企业留言表单联系代码
• [播放器特效] HTML5 MP3音乐盒播放特效
• [菜单导航] HTML5炫酷粒子动画导航菜单特效
• [表单按钮] jQuery可视化表单拖拽编辑代码
• [播放器特效] VUE.JS仿酷狗音乐播放器代码
• [html5特效] 经典html5推箱子小游戏
• [图片特效] jQuery滚动添加或减少图片特效
• [相册特效] CSS3个人相册封面悬停放大特效

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Frontend-Vorlage] Website-Vorlage für Reinigungs- und Reparaturdienste für Inneneinrichtungen
• [Frontend-Vorlage] Persönliche Lebenslauf-Leitfaden-Seitenvorlage in frischen Farben
• [Frontend-Vorlage] Web-Vorlage für kreativen Job-Lebenslauf für Designer
• [Frontend-Vorlage] Website-Vorlage eines modernen Ingenieurbauunternehmens
• [Frontend-Vorlage] Responsive HTML5-Vorlage für Bildungseinrichtungen
• [Frontend-Vorlage] Vorlage für die Website eines Online-E-Book-Shops für Einkaufszentren
• [Frontend-Vorlage] IT-Technologie löst Website-Vorlage für Internetunternehmen
• [Frontend-Vorlage] Website-Vorlage für Devisenhandelsdienste im violetten Stil

Über uns Haftungsausschluss Sitemap

Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！