Quels sont les éléments de mise en page HTML5 ?

Les éléments de mise en page HTML5 comprennent : 1. l'élément d'en-tête, qui définit le contenu de l'en-tête de la page Web ; 2. l'élément de pied de page ; 3. l'élément de navigation ; 4. l'élément de section ; 6. l'élément de côté ; élément ; 8 , élément de progression ; 9. élément de compteur, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

Plusieurs nouveaux éléments de structure de mise en page ajoutés au HTML5

1. Élément d'en-tête :

Généralement utilisé pour l'en-tête d'une page Web afin de définir le bloc de zone de l'en-tête. le contenu est un élément indépendant.

<header>
    <h1>中国最大的搜索引擎</h1>
    <a href="http://www.baidu.com">百度</a>
    <nav>
        <ul>
            <li><a href="#">谷歌</a></li>
            <li><a href="#">火狐</a></li>
            <li><a href="#">360</a></li>
        </ul>
    </nav>
</header>

2. Élément de pied de page :

est fondamentalement le même que l'élément d'en-tête, mais l'élément de pied de page définit généralement le contenu inférieur de la page Web

<footer>
    <ul>
        <li>关于我们</li>
        <li>联系客服</li>
        <li>合作招商</li>
        <li>隐私政策</li>
    </ul>
</footer>

3. pour définir des barres de navigation, des répertoires, des super liens, etc. ; il n'est pas nécessaire de mettre tous les groupes de connexion dans des éléments de navigation, seuls les groupes de connexion principaux et de base doivent être mis dans des éléments de navigation

4.

permet de définir un bloc de contenu indépendant ; il peut s'agir d'un blog, d'un article ou d'un plug-in indépendant ; il peut être imbriqué et peut également représenter des plug-ins ; Semblable à l'élément div

<article>
    <header>
        <h1>Article元素</h1>
        <p>欢迎学习Article元素</p>
    </header>
    <footer>
        <p>这是底部</p>
    </footer>
</article>
<article>
    <h1>这是一个内嵌页面</h1>
    <object data="#" type="" width="600px" height="600px"></object>
</article>

5. Élément Section :

est utilisé pour définir le contenu de la page à diviser en morceaux ; Généralement utilisé pour les pages avec un contenu manifestement indépendant

<article>
    <section>
        <h1>第一章：桃园三结义</h1>
        <p>桃园三结义最初是小说《三国演义》里记载的故事，述说当年刘备、关羽和张飞三位仁人志士，为了共同干一番大事业的目标，意气相投，
            言行相依，选在一个桃花盛开的季节、选在一个桃花绚烂的园林，举酒结义，对天盟誓，有苦同受，有难同当，有福同享，共同实现自己人生的美好理想。</p>
    </section>
    <section>
        <h1>第二章：</h1>
        <p>草船借箭是我国古典名著《三国演义》中赤壁之战的一个故事。借箭由周瑜故意提出(限十天造十万支箭)，机智的诸葛亮一眼识破是一条害人之计，
            却淡定表示“只需要三天”。后来，有大雾天帮忙，诸葛亮再利用曹操多疑的性格，调了几条草船诱敌，终于借足十万支箭，立下奇功。</p>
    </section>
</article>

6. les éléments de côté :

sont généralement utilisés pour définir des barres latérales.

• 
  Il peut également être utilisé imbriqué à l'intérieur de l'élément article comme informations auxiliaires par rapport au contenu principal, telles que des documents de référence, des explications de termes, etc.

• Vous pouvez également définir du contenu en dehors de l'élément article, à condition que ceux-ci le contenu est cohérent avec l'élément Article le contenu est associé à

• <article class="film_review">
      <header>
          <h2>侏罗纪公园</h2>
      </header>
      <section class="main_review">
          <p>Dinos were great!</p>
      </section>
      <section class="user_reviews">
          <article class="user_review">
              <p>Way too scary for me.</p>
              <footer>
                  <p>
                      Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
                  </p>
              </footer>
          </article>
          <article class="user_review">
              <p>I agree, dinos are my favorite.</p>
              <footer>
                  <p>
                      Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
                  </p>
              </footer>
          </article>
      </section>
      <footer>
          <p>
              Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
          </p>
      </footer>
  </article>

  7. Élément horaire :

représente une certaine heure ou date dans 24 heures, indiquant que l'heure peut avoir un décalage horaire

• La date dans l'attribut datetime est la même que L'heure doit être séparée par le texte "T" et "z" représente l'heure standard UTC

• L'attribut pubbdate est une balise facultative qui permet aux moteurs de recherche d'identifier facilement la date de l'article et la date de publication de l'actualité

• <section>
      <time datetime="2019-4-27">2019-4-27</time>
      <time datetime="2019-4-27T20:00">2019-4-27</time>
      <time datetime="2019-4-27T20:00Z">2019-4-27</time>
      <time datetime="2019-4-27+09:00">2019-4-27</time>
  </section>

  8. éléments de progression et de compteur :

élément de progression : est un nouvel élément en HTML5, utilisé pour créer une barre de progression généralement utilisée en conjonction avec JavaScript ; pour afficher la progression d'une tâche

• élémentmeter : oui Un nouvel élément en HTML5, utilisé pour créer une barre de mesure pour représenter l'évaluation des poids et mesures habituellement utilisée en combinaison avec JavaScript

• <form action="">
      <!--max:规定当前进度条的最大值 ； value属性：设定进度条当前显示的默认值  form：规定进度条所属的一个或多个表单-->
      <p>当前下载进度：</p>
      <progress value="30" max="100">
  
      </progress>
  
      <meter value="40" max="100" min="10">
  
      </meter>
  </form>

  Recommandations associées : "

  Tutoriel vidéo HTML"

  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!