HTML5分組元素

創新互聯建站是一家專業提供個舊企業網站建設,專注與網站設計、成都做網站、H5場景定制、小程序制作等業務。10年已為個舊眾多企業、政府機構等服務。創新互聯專業網站設計公司優惠進行中。

所謂分組元素就是用來組織相關內容的HTML5元素，清晰有效的進行歸類

一、元素分類匯總

元素名稱	說明
p	表示段落
div	一個沒有任何語義的通用元素，和span是對應的元素
blockquote	表示引自它處的大段內容
pre	表示其格式應該被保留的內容
hr	表示其段落級別的主題轉換，即水平線
ul，ol	表示無序列表，有序列表
li	用于ul，ol元素中的列表項
dl，dt，dd	表示包含一系列術語和定義說明的列表。dt在dl內部表示術語，一般充當標題，dd在dl內部表示定義，一般是內容
figure	表示圖片

figcaption

表示figure元素的標題

二、分組元素解析

1、<p>建立段落

<p>這是一個段落</p>
<p>這是另一個段落</p>

解釋：<p>元素實際作用就是將內部元素包含的文本形成一個段落；而段落和段落之間保持一定的空隙

2、<div>通用分組

<div>這是一個通用分組</div>
<div>這是另一個通用分組</div>

解釋：<div>元素在早期的版本中非常常用，通過<div>這種一般性分組元素進行布局。而在HTML5中，由于語義的緣故，被其他各種文檔元素所代替。和<p>段落的區別是，兩段文本的上下空隙是沒有的，空隙間隔和<br>換行一樣。

通過對比看看<p>和<div>的區別

<p>這是一個段落</p>
<p>這是另一個段落</p>
<div>這是一個通用分組</div>
<div>這是另一個通用分組</div>

3、<blockquote>引用大段它處內容

<blockquote>這是一個大段的來自它處的內容</blockquote>
<blockquote>這是另一個大段的來自它處的內容</blockquote>

解釋：<blockquote>元素實際作用除了和<p>元素一樣，有段落空隙的功能，還包含了首尾縮進的功能。語義上表示，大段的引用它處的內容。

4、<pref>展現格式化內容

<pref>
    #####
       #####
          #####
       #####
    #####
</pref>

解釋：<pref>元素實際作用就是編輯器怎么排版的，原封不動的展現出來，當然這種只適合簡單的排版，復雜的排版就無法滿足要求了。

5、<hr>添加分隔

<div>這是一個通用分組</div>
<hr>
<div>這是另一個通用分組</div>

解釋：該元素實際作用就是添加一條分割線，意圖呈現上下文主題的分割。

6、<ul><li>添加無序列表

<ul>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ul>

解釋：<ul>元素表示無序列表，而<li>元素則是內部的列表項

7、<ol><li>添加有序列表

<ol>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>

解釋：<ol>元素表示有序列表，而<li>元素則是內部的列表項。<ol>元素目前支持三種屬性

                           ol元素屬性

屬性名稱	說明
start	從第幾個序列開始統計：<ol start='2'>
reversed	是否倒敘排列：<ol reversed>, 一半主流瀏覽器不支持
type	表示列表的編號類型，值分別為：1、a、A、i、I

<ul>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ul>
<ol>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol start="5">
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol reversed>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol type="i">
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol type="I">
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol type="A">
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>

                      li元素屬性

屬性名稱	說明
value	強行設置某個項目的編號

<ol>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>馬六</li>
</ol>
<ol>
    <li>張三</li>
    <li>李四</li>
    <li value="5">王五</li>
    <li>馬六</li>
</ol>

8、<dl><dt><dd>生成說明列表

<dl>

   <dt>這是一份文件</dt>

    <dd>這里是這份文件的詳細內容1</dd>

    <dd>這里是這份文件的詳細內容2</dd>

</dl>

解釋：這三個元素是一個整體，但<dt>或者<dd>并非都必須出現

<dl>
<dt>這是第一份文件</dt>
<dd>這是第一份文件的詳細內容1</dd>
<dd>這是第一份文件的詳細內容2</dd>
<dt>這是第二份文件</dt>
<dd>這是第二份文件的詳細內容1</dd>
<dd>這是第二份文件的詳細內容2</dd>
</dl>

9、<figure><figcaption>使用插圖

<figure>
     <figcation>這是第一張圖</figcation>
     <img src="1.png">
</figure>

解釋：這兩個元素一般用于圖片的布局

<figure>
     <figcation>這是第一張圖</figcation>
     <img src="1.png">
</figure>

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前題目：5、HTML分組元素-創新互聯
文章出自：http://vcdvsql.cn/article42/ccejec.html

成都網站建設公司_創新互聯，為您提供云服務器、建站公司、Google、網站制作、企業網站制作、自適應網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯