HTML 그룹화 요소

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、

通用分组

这是一个通用分组

这是另一个通用分组

설명:

요소는 초기 버전에서 매우 일반적으로 사용되었으며

의 일반적인 그룹화 요소를 통해 배치되었습니다. HTML5에서는 의미상 다양한 다른 문서 요소로 대체됩니다.

단락과의 차이점은 텍스트의 두 단락 사이에 위쪽과 아래쪽 공백이 없으며 간격 간격이

와

의 차이점을 비교해보세요rree

3. 내용

이것은 다른 곳에서 온 큰 문단입니다

이것은 다른 곳에서 온 또 다른 큰 문단입니다

설명:

요소의 실제 기능은

요소의 기능과 동일하며 시작과 끝 부분에 들여쓰기 기능도 포함되어 있습니다. 의미상으로 말하면 다른 곳에 있는 콘텐츠의 큰 부분을 나타냅니다.

4. 형식이 지정된 콘텐츠 표시 </pref></p><pre class='brush:php;toolbar:false;'><p>这是一个段落</p> <p>这是另一个段落</p> <div>这是一个通用分组</div> <div>这是另一个通用分组</div>

: 요소의 실제 기능은 편집기가 이를 조판하는 방식이며 그대로 표시됩니다. 물론 이는 간단한 조판에만 적합하며 복잡한 조판은 요구 사항을 충족할 수 없습니다. </pref></p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/930/634/103/1487058091703651.png?x-oss-process=image/resize,p_40" class="lazy" title="HTML 그룹화 요소" alt="HTML 그룹화 요소" style="max-width:90%" style="max-width:90%"></p> <p>5. </p> <hr>구분 추가 <pre class='brush:php;toolbar:false;'><pref> ##### ##### ##### ##### ##### </pref>

설명: 이 요소의 실제 기능은 구분선을 추가하는 것입니다. 상황에 맞는 주제.

6.

• 순서가 지정되지 않은 목록 추가

  <div>这是一个通用分组</div>
  <hr>
  <div>这是另一个通用分组</div>

  설명:

  < ;li>요소가 내부 목록 항목입니다

  
  

  7.

  1. 순서가 지정된 목록 추가

     <ul>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
         <li>马六</li>
     </ul>

     설명: < ; ol> 요소는 순서가 지정된 목록을 나타내고,

  2. 요소는 내부 목록 항목을 나타냅니다. & lt; & gt; 현재 세 가지 속성을 지원합니다
     ol 요소 속성

     li 요소 속성

     

     <ol>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
         <li>马六</li>
     </ol>

     설명 목록 생성

      

     문서입니다

      

     이 문서의 세부정보는 다음과 같습니다1

     이 문서의 세부정보는 다음과 같습니다. 2

     설명: 이 세 가지 요소는 전체이지만

     또는

     ; 꼭 나오지 않아도 됩니다

     <ul>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
         <li>马六</li>
     </ul>
     <ol>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
         <li>马六</li>
     </ol>
     
         
     张三
         
     李四
         
     王五
         
     马六
     
     
         
     张三
         
     李四
         
     王五
         
     马六
     
     
         
     张三
         
     李四
         
     王五
         
     马六
     
     
         
     张三
         
     李四
         
     王五
         
     马六
     
     
         
     张三
         
     李四
         
     王五
         
     马六
     

     9.

     일러스트를 사용하세요

     <ol>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
         <li>马六</li>
     </ol>
     
         
     张三
         
     李四
         
     王五
         
     马六
     

     

     설명: 이 두 요소는 일반적으로 이미지 레이아웃에 사용됩니다.

     <dl>
     <dt>这是第一份文件</dt>
     <dd>这是第一份文件的详细内容1</dd>
     <dd>这是第一份文件的详细内容2</dd>
     <dt>这是第二份文件</dt>
     <dd>这是第二份文件的详细内容1</dd>
     <dd>这是第二份文件的详细内容2</dd>
     </dl>

     HTML 그룹화 요소 관련 추가 기사 PHP에 주목하세요. 중국사이트!