HTML5分組元素

創(chuàng)新互聯(lián)建站是一家專業(yè)提供個舊企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計、成都做網(wǎng)站、H5場景定制、小程序制作等業(yè)務(wù)。10年已為個舊眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進(jìn)行中。

所謂分組元素就是用來組織相關(guān)內(nèi)容的HTML5元素，清晰有效的進(jìn)行歸類

一、元素分類匯總

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

figcaption

表示figure元素的標(biāo)題

二、分組元素解析

1、<p>建立段落

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

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

2、<div>通用分組

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

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

通過對比看看<p>和<div>的區(qū)別

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

3、<blockquote>引用大段它處內(nèi)容

<blockquote>這是一個大段的來自它處的內(nèi)容</blockquote>
<blockquote>這是另一個大段的來自它處的內(nèi)容</blockquote>

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

4、<pref>展現(xiàn)格式化內(nèi)容

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

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

5、<hr>添加分隔

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

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

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

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

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

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

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

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

                           ol元素屬性

屬性名稱	說明
start	從第幾個序列開始統(tǒng)計：<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	強(qiáng)行設(shè)置某個項目的編號

<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>這里是這份文件的詳細(xì)內(nèi)容1</dd>

    <dd>這里是這份文件的詳細(xì)內(nèi)容2</dd>

</dl>

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

<dl>
<dt>這是第一份文件</dt>
<dd>這是第一份文件的詳細(xì)內(nèi)容1</dd>
<dd>這是第一份文件的詳細(xì)內(nèi)容2</dd>
<dt>這是第二份文件</dt>
<dd>這是第二份文件的詳細(xì)內(nèi)容1</dd>
<dd>這是第二份文件的詳細(xì)內(nèi)容2</dd>
</dl>

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

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

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

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

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

當(dāng)前題目：5、HTML分組元素-創(chuàng)新互聯(lián)
文章出自：http://www.rwnh.cn/article42/ccejec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、建站公司、Google、網(wǎng)站制作、企業(yè)網(wǎng)站制作、自適應(yīng)網(wǎng)站

廣告

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