Heim >Web-Frontend >H5-Tutorial >Wir stellen Beispiele für semantische HTML5-Elemente vor

Wir stellen Beispiele für semantische HTML5-Elemente vor

零下一度
零下一度Original
2017-05-15 11:04:121465Durchsuche

Was ist ein semantisches Element?

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

Beispiele für semantische Elemente: dc6dce4a544fdca2df29d5ac0ea9906b und 45a2772a6b6107b401db3c9b82c049c2 – keine Berücksichtigung des Inhalts erforderlich.

Beispiele für semantische Elemente: ff9c23ada1bcecdd1a0fb5d5a0f18437 und a1f02c36ba31691bcfe87b2722de723b ; - 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: eb545d6e9e25f5c0174408f6286375ad, 924ff17625d603f964501dd897c96cc6 oder 171c8477c82d74a9b2eea84eaab93167, um Navigationslinks und Kopfzeilen anzuzeigen , Und der Schwanz.

HTML5 bietet neue semantische Elemente, um das

HTML5 23c3de37f2f9ebcb477c4a90aac6fffd-Tag zu definieren Inhalt. .

23c3de37f2f9ebcb477c4a90aac6fffd Beispiele für die Elementverwendung:

Forumsbeitrag

Blogbeitrag

Nachrichtenbeitrag

Kommentar

HTML5 c787b9a589a3ece771e842a6176cf8e9-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>
c787b9a589a3ece771e842a6176cf8e9 Das

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

Beispiel

HTML5 15221ee8cba27fc1d7a26c47a001eb9b-Element

15221ee8cba27fc1d7a26c47a001eb9b-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 1aa9e5d373740b65a0cc8f0a02150c53 beziehen beschreibt den Kopf des Dokumentbereichs

1aa9e5d373740b65a0cc8f0a02150c53 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 1aa9e5d373740b65a0cc8f0a02150c53-Elemente verwenden in der Seite.

Das folgende Beispiel definiert die Kopfzeile des Artikels:

Instanz

HTML5 c37f8231a37e88427e62669260f0074d-Element

26155e563eaf95c3f890aa5450f6c698“ beschreibt den unteren Bereich des Dokuments.

Das Element

c37f8231a37e88427e62669260f0074d 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 39b48414448dc637c7bf9d5bcf7b37c4 Bilder, Diagramme, Fotos, Code usw.). Der Inhalt des

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

614eb9dc63b3fb809437a716aa228d24 Tag-Definition 24203f2f45e6606542ba09fd2181843a

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

实例

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

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

以上的元素都是块元素(除了614eb9dc63b3fb809437a716aa228d24).

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

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

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

IE8 及更早IE版本无法在这些元素中渲染CSS效果,以至于你不能使用 1aa9e5d373740b65a0cc8f0a02150c53, 2f8332c8dcfd5c7dec030a070bf652c3, c37f8231a37e88427e62669260f0074d, 15221ee8cba27fc1d7a26c47a001eb9b, c787b9a589a3ece771e842a6176cf8e9, 23c3de37f2f9ebcb477c4a90aac6fffd, 24203f2f45e6606542ba09fd2181843a, 或者其他的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文件. 你必须将其放置于93f0f5c25f18dab9d176bd4f6de5d30e 元素中,因为 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!

Stellungnahme:
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