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

最新推荐文章于 2024-06-16 10:46:27 发布

原创最新推荐文章于 2024-06-16 10:46:27 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css3 #css #javascript

本文深入讲解HTML5中三种列表的应用：无序列表、有序列表和自定义列表，通过实例展示如何使用<ul>、<ol>及<dl>标签创建结构化的信息列表。

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>