HTML 5深入淺出教學(xué)篇之三

作者：webabcd 2012-05-30 13:17:46

本文所講的內(nèi)容是HTML 5內(nèi)容分組元素：p, hr, pre, blockquote, ul, ol, li, dl, dt, dd, figure, figcaption, div的使用

介紹

HTML 5: 內(nèi)容分組元素

內(nèi)容分組元素 - p, hr, pre, blockquote, ul, ol, li, dl, dt, dd, figure, figcaption, div

示例

1、p - 用于定義段落（p 是 paragraph 的縮寫）element/group/p.html

<!doctype html> 
<html> 
<head> 
    <title>p</title> 
</head> 
<body> 
    <!--  
        p - 用于定義段落（p 是 paragraph 的縮寫）  
    --> 
    <p> 
        段落1  
    </p> 
    <p> 
        段落2  
    </p> 
    <p> 
        段落3  
    </p> 
</body> 
</html>

2、hr - 水平線，用于分隔文檔的不同部分element/group/hr.html

<!doctype html> 
<html> 
<head> 
    <title>hr</title> 
</head> 
<body> 
    <article> 
        我是一段完整且獨(dú)立的內(nèi)容1  
    </article> 
 
    <!--  
        hr - 水平線，用于分隔文檔的不同部分  
    --> 
    <hr /> 
 
    <article> 
        我是一段完整且獨(dú)立的內(nèi)容2  
    </article> 
</body> 
</html>

3、pre - 用于定義預(yù)定義格式文本（空格和換行都會(huì)被保留）element/group/pre.html

<!doctype html> 
<html> 
<head> 
    <title>pre</title> 
</head> 
<body> 
    <!--  
        pre - 用于定義預(yù)定義格式文本（空格和換行都會(huì)被保留）  
    --> 
    <pre> 
我是一段預(yù)定義格式文本  
我的換行和                   空格都會(huì)被保留  
 
if (true)  
    write("true");  
    </pre> 
</body> 
</html>

4、blockquote - 用于定義一段引用的內(nèi)容（長(zhǎng)內(nèi)容）element/group/blockquote.html

<!doctype html> 
<html> 
<head> 
    <title>blockquote</title> 
</head> 
<body> 
    <!--  
        blockquote - 用于定義一段引用的內(nèi)容（長(zhǎng)內(nèi)容）  
          cite - 引用的內(nèi)容的來(lái)源 url  
    --> 
    <blockquote cite="http://webabcd.cnblogs.com/">從 http://webabcd.cnblogs.com 里引用的一段長(zhǎng)內(nèi)容</blockquote> 
 
    <!--  
        區(qū)別：  
        cite 標(biāo)簽用于定義引用內(nèi)容的標(biāo)題；blockquote 標(biāo)簽用來(lái)定義較長(zhǎng)的引用；q 標(biāo)簽用來(lái)定義較短的內(nèi)容  
    --> 
</body> 
</html>

5、ul - 用于定義無(wú)序列表（ul 是 unorder list 的縮寫），li - 用于定義列表項(xiàng)（可在 ul 或 ol 或 menu 內(nèi)）（li 是 list item 的縮寫）element/group/ul_li.html

<!doctype html> 
<html> 
<head> 
    <title>ul li</title> 
</head> 
<body> 
    <!--  
        ul - 用于定義無(wú)序列表（ul 是 unorder list 的縮寫）  
        li - 用于定義列表項(xiàng)（可在 ul 或 ol 或 menu 內(nèi)）（li 是 list item 的縮寫）  
    --> 
    <ul> 
        <li>item01</li> 
        <li>item02</li> 
        <li>item03</li> 
    </ul> 
</body> 
</html>

#p#

6、ol - 用于定義有序列表（ol 是 order list 的縮寫），li - 用于定義列表項(xiàng)（可在 ul 或 ol 或 menu 內(nèi)）（li 是 list item 的縮寫）element/group/ol_li.html

<!doctype html> 
<html> 
<head> 
    <title>ol li</title> 
</head> 
<body> 
    <!--  
        ol - 用于定義有序列表（ol 是 order list 的縮寫）  
          start - 設(shè)置起始數(shù)字  
          reversed - bool 類型。如果為 true，則列表倒序排列，目前還沒看到哪款瀏覽器支持這個(gè)屬性  
          type - 設(shè)置列表樣式類型，比如用想用 “A, B, C, ...” 做排序標(biāo)識(shí)的話則設(shè)置 typ="A"。如果用樣式表則設(shè)置：list-style-type: upper-alpha  
        li - 用于定義列表項(xiàng)（可在 ul 或 ol 或 menu 內(nèi)）（li 是 list item 的縮寫）  
    --> 
    <ol> 
        <li>item01</li> 
        <li>item02</li> 
        <li>item03</li> 
    </ol> 
 
    <ol start="10"> 
        <li>item01</li> 
        <li>item02</li> 
        <li>item03</li> 
    </ol> 
 
    <ol reversed> 
        <li>item01</li> 
        <li>item02</li> 
        <li>item03</li> 
    </ol> 
 
    <ol type="A"> 
        <li>item01</li> 
        <li>item02</li> 
        <li>item03</li> 
    </ol> 
 
    <ol style="list-style-type: upper-alpha"> 
        <li>item01</li> 
        <li>item02</li> 
        <li>item03</li> 
    </ol> 
</body> 
</html>

7、dl - 定義列表（definition list），dt - 定義列表中的標(biāo)題（definition title），dd - 對(duì)定義列表中的標(biāo)題的描述（definition description）element/group/dl_dt_dd.html

<!doctype html> 
<html> 
<head> 
    <title>dl dt dd</title> 
</head> 
<body> 
    <!--  
        dl - 定義列表（definition list）  
        dt - 定義列表中的標(biāo)題（definition title）  
        dd - 對(duì)定義列表中的標(biāo)題的描述（definition description）  
    --> 
    <dl> 
        <dt>飲料</dt> 
        <dd>很甜，很甜，喝了會(huì)發(fā)胖</dd> 
        <dt>牛奶</dt> 
        <dd>好喝，好喝，但是太貴了</dd> 
        <dt>咖啡</dt> 
        <dd>太苦，太苦，像感冒沖劑</dd> 
    </dl> 
</body> 
</html>

8、figure - 整合相關(guān)元素element/group/figure.html

<!doctype html> 
<html> 
<head> 
    <title>figure</title> 
</head> 
<body> 
    <!--  
        figure - 整合相關(guān)元素  
    --> 
    <figure> 
        <p>學(xué) html 5 有用嗎？</p> 
        <p>我正在學(xué)習(xí) html 5，對(duì)它的未來(lái)充滿信心</p> 
    </figure> 
</body> 
</html>

9、figcaption - figure 元素的標(biāo)題，它應(yīng)該是 figure 的第一個(gè)子元素或最后一個(gè)子元素element/group/figcaption.html

<!doctype html> 
<html> 
<head> 
    <title>figcaption</title> 
</head> 
<body> 
    <!--  
        figcaption - figure 元素的標(biāo)題，它應(yīng)該是 figure 的第一個(gè)子元素或最后一個(gè)子元素  
    --> 
    <figure> 
        <figcaption>html 5</figcaption> 
        <p>學(xué) html 5 有用嗎？</p> 
        <p>我正在學(xué)習(xí) html 5，對(duì)它的未來(lái)充滿信心</p> 
    </figure> 
</body> 
</html>

10、div - 沒有任何語(yǔ)義（div 是 division 的縮寫）element/group/div.html

<!doctype html> 
<html> 
<head> 
    <title>div</title> 
</head> 
<body> 
    <!--  
        div - 沒有任何語(yǔ)義（div 是 division 的縮寫）  
          div 與 span 的區(qū)別：div 是塊級(jí)（block-level）元素，span 是內(nèi)聯(lián)（inline）元素  
    --> 
    <div> 
        我沒有任何語(yǔ)義  
    </div> 
</body> 
</html>