Maison > interface Web > tutoriel HTML > Élément de regroupement HTML

Élément de regroupement HTML

高洛峰
Libérer: 2017-02-14 15:47:40
original
2766 Les gens l'ont consulté

HTML5分组元素

所谓分组元素就是用来组织相关内容的HTML5元素,清晰有效的进行归类

一、元素分类汇总

   元素名称                               说明    

p    表示段落    

div    一个没有任何语义的通用元素,和span是对应的元素    

blockquote    表示引自它处的大段内容    

pre    表示其格式应该被保留的内容    

hr    表示其段落级别的主题转换,即水平线    

ul,ol    表示无序列表,有序列表    

li    用于ul,ol元素中的列表项    

dl,dt,dd    表示包含一系列术语和定义说明的列表。dt在dl内部表示术语,一般充当标题,dd在dl内部表示定义,一般是内容    

figure    表示图片    

figcaption    表示figure元素的标题    


二、分组元素解析

1、

建立段落

这是一个段落


这是另一个段落


解释:

元素实际作用就是将内部元素包含的文本形成一个段落;而段落和段落之间保持一定的空隙


2、

通用分组

这是一个通用分组

这是另一个通用分组

Explication : L'élément

était très couramment utilisé dans les premières versions et était présenté via l'élément de regroupement général de
. En HTML5, pour des raisons de sémantique, il est remplacé par divers autres éléments du document. La différence avec les paragraphes

est qu'il n'y a pas d'espace supérieur et inférieur entre les deux paragraphes de texte et que l'intervalle d'espacement est le même que celui des sauts de ligne

Regardez la différence entre

et

par comparaison
<p>这是一个段落</p>
<p>这是另一个段落</p>
<div>这是一个通用分组</div>
<div>这是另一个通用分组</div>
Copier après la connexion

Élément de regroupement HTML

3. contenu ailleurs

Ceci est une grande partie du contenu provenant d'ailleurs

Ceci est une autre grande partie du contenu provenant d'ailleurs

Explication : La fonction réelle de l'élément

est la même que celle de l'élément

Sémantiquement parlant, une grande section fait référence à du contenu ailleurs.




4.

Afficher le contenu formaté </p><pre class="brush:html;toolbar:false"><pref> ##### ##### ##### ##### ##### </pref>
Copier après la connexion

Explication : La fonction réelle de l'élément

est la façon dont l'éditeur l'a composé, et il est affiché intact. Bien sûr, cela ne convient qu'à une composition simple, et une composition complexe ne peut pas répondre aux exigences. </p><p><img src="https://img.php.cn//upload/image/930/634/103/1487058091703651.png" title="Élément de regroupement HTML" alt="Élément de regroupement HTML" style="max-width:90%" style="max-width:90%"/></p><p>5. <hr>Ajouter une séparation </p><pre class="brush:html;toolbar:false"><div>这是一个通用分组</div> <hr> <div>这是另一个通用分组</div>
Copier après la connexion

Explication : La fonction réelle de cet élément est d'ajouter une ligne de démarcation, destinée à présenter la division des sujets contextuels .

Élément de regroupement HTML

6.

  • Ajouter une liste non ordonnée

    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>马六</li>
    </ul>
    Copier après la connexion

    Explication : L'élément

      , L'élément
    • est un élément de liste interne


      7

      1. Explication : L'élément
          représente une liste ordonnée, tandis que l'élément
        1. & lt; & gt; Element prend actuellement en charge trois attributs

          <ol>
              <li>张三</li>
              <li>李四</li>
              <li>王五</li>
              <li>马六</li>
          </ol>
          Copier après la connexion

          ol Element attributs

          Élément de regroupement HTML

          <ul>
              <li>张三</li>
              <li>李四</li>
              <li>王五</li>
              <li>马六</li>
          </ul>
          <ol>
              <li>张三</li>
              <li>李四</li>
              <li>王五</li>
              <li>马六</li>
          </ol>
          
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          Copier après la connexion
          Attributs de l'élément li

          Élément de regroupement HTML

          Élément de regroupement HTML

          <ol>
              <li>张三</li>
              <li>李四</li>
              <li>王五</li>
              <li>马六</li>
          </ol>
          
          1. 张三
          2. 李四
          3. 王五
          4. 马六
          Copier après la connexion
          8.
          Générer une liste de descriptions.

          Élément de regroupement HTML

          dd>

          Voici le détail de ce document 2

          Explication : Ces trois éléments ne font qu'un Le tout, mais
          ou
          ;figcaption>Utiliser des illustrations

          Explication : Ces deux éléments sont généralement utilisés pour la mise en page des images

          <dl>
          <dt>这是第一份文件</dt>
          <dd>这是第一份文件的详细内容1</dd>
          <dd>这是第一份文件的详细内容2</dd>
          <dt>这是第二份文件</dt>
          <dd>这是第二份文件的详细内容1</dd>
          <dd>这是第二份文件的详细内容2</dd>
          </dl>
          Copier après la connexion

          Élément de regroupement HTML

          <figure>
               <figcation>这是第一张图</figcation>
               <img  src="1.png" alt="Élément de regroupement HTML" >
          </figure>
          Copier après la connexion
          Pour plus d'articles liés aux éléments de regroupement HTML, veuillez faire attention au site Web PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal