Présentation d'exemples d'éléments sémantiques HTML5

Qu'est-ce qu'un élément sémantique ?

Un élément sémantique peut décrire clairement sa signification pour les navigateurs et les développeurs.

Exemples d'éléments sémantiques : dc6dce4a544fdca2df29d5ac0ea9906b et 45a2772a6b6107b401db3c9b82c049c2 - pas besoin de prendre en compte le contenu.

Exemples d'éléments sémantiques : ff9c23ada1bcecdd1a0fb5d5a0f18437, f5d188ed2c074f8b944552db028f98a1 et 617268cfcfa0728495aa96de4c8d7412, 924ff17625d603f964501dd897c96cc6 ou 171c8477c82d74a9b2eea84eaab93167, pour indiquer les liens de navigation, les en-têtes, Et la queue

HTML5 fournit de nouveaux éléments sémantiques pour clarifier l'élément

HTML5 23c3de37f2f9ebcb477c4a90aac6fffd d'une page Web. . .

23c3de37f2f9ebcb477c4a90aac6fffd Exemples d'utilisation d'éléments :

Article du forum

Article de blog

Actualités

Commentaire

HTML5 c787b9a589a3ece771e842a6176cf8e9

<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 définit la partie du lien de navigation. L'élément

c787b9a589a3ece771e842a6176cf8e9 est utilisé pour définir la section des liens de navigation de la page. Cependant, tous les liens ne doivent pas nécessairement être inclus dans l'élément

Exemple

L'élément HTML5 15221ee8cba27fc1d7a26c47a001eb9b

15221ee8cba27fc1d7a26c47a001eb9b définit le contenu en dehors de la zone principale de la page (comme une barre latérale). Le contenu de la balise

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

aside doit être lié au contenu de la zone principale

Élément HTML5 1aa9e5d373740b65a0cc8f0a02150c53 décrit l'en-tête du document Zone

Élément 1aa9e5d373740b65a0cc8f0a02150c53 Notez qu'il est utilisé pour définir la zone d'affichage d'introduction du contenu.

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

Vous pouvez utiliser plusieurs éléments 1aa9e5d373740b65a0cc8f0a02150c53 dans la page.

L'exemple suivant Définit l'en-tête de l'article :

Instance

Élément HTML5 c37f8231a37e88427e62669260f0074d

eac44c891520cc25d03985360df37c00 décrit la zone inférieure du document.

L'élément

c37f8231a37e88427e62669260f0074d doit contenir ses éléments contenant

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

Un pied de page contient généralement l'auteur du document, les informations de copyright, les termes liés à utilisation, informations de contact, etc.

Dans le document, vous pouvez utiliser plusieurs éléments c37f8231a37e88427e62669260f0074d.

Instances

HTML5 24203f2f45e6606542ba09fd2181843a images, graphiques, photos, code, etc.). Le contenu de l'élément

24203f2f45e6606542ba09fd2181843a doit être lié au contenu principal, mais ne doit avoir aucun impact sur le flux des documents s'il est supprimé.

614eb9dc63b3fb809437a716aa228d24 définition de la balise 24203f2f45e6606542ba09fd2181843a Le titre de l'élément.

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

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视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!