html5有序列表无序列表自定义列表

html5有序列表无序列表自定义列表

1.无序列表

无序列表代码如下

<h2>1.无序列表</h2>
    <p>你喜欢的水果有哪些</p>
    <ul>
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>大白菜</li>
    </ul>

代码实现效果：

有序列表

有序列表代码如下：

<h2>2.有序列表</h2>
    <p>奥运金牌榜</p>
    <ol>
        <li>美国</li>
        <li>英国</li>
        <li>俄罗斯</li>
        <li>美国</li>
    </ol>

有序列表代码实现图：

自定义列表

自定义列表代码如下：

<h2>3.自定义列表</h2>
    <p>地区:</p>
    <dl>
        <dt>河北</dt>
        <dd>石家庄</dd>
        <dd>保定</dd>
        <dd>廊坊</dd>
        <dd>承德</dd>
    </dl>
    <dl>
        <dt>浙江</dt>
        <dd>宁波</dd>
        <dd>杭州</dd>
        <dd>嘉兴</dd>
        <dd>温州</dd>
    </dl>

实现效果图如下：