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>

实现效果图如下：