HTML列表是什麼?

乞力馬紮羅的雪CYF發表於2015-09-26

標籤                描述

<ol>               有序列表

<ul>               無序列表

<li>               列表項

<dl>              列表

<dt>             列表項

<dd>            描述


1.無序列表

使用標籤:<ul>  <li>

屬性:disc,circle,square


2.有序列表

使用標籤:<ol> <li>

屬性:A,a,I,i,start


3.巢狀列表

使用標籤:<ul> ,<ol>,<li>


4.自定義列表

使用標籤:<dl>,<dt>,<dd>


程式碼演示如下:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body >

    <ul type="square">
        <li>蘋果</li>
        <li>三星</li>
        <li>華為</li>
        <li>魅族</li>
    </ul>

    <ol type="I" start="10">
        <li>蘋果</li>
        <li>三星</li>
        <li>華為</li>
        <li>魅族</li>
    </ol>


    <ul>
        <li>國家</li>
        <ul>
            <li>中國</li>
            <li>美國</li>
            <li>韓國</li>
        </ul>

        <li>蔬菜</li>
        <ol>
            <li>白菜</li>
            <li>蘿蔔</li>
            <li>黃瓜</li>
        </ol>
        <li>汽車</li>
    </ul>



    <dl>
        <dt>HTML5</dt>
            <dd>11</dd>
        <dt>JS</dt>
            <dd>22</dd>
        <dt>CSS</dt>
            <dd>33</dd>

    </dl>


</body>
</html>

效果如下:

.


github主頁:https://github.com/chenyufeng1991  。歡迎大家訪問!

相關文章