H5学习之旅-H5列表（8）-H5教程-PHP中文网

H5学习之旅-H5列表（8）

黄舟

发布： 2017-02-17 14:33:33

原创

1757人浏览过

列表的基本语法

ol：有序列表

ul：无序列表

li：列表项

dl：列表

dt：列表项

dd：列表描述

常用列表

1.无序列表：使用标签 ul，li 属性：disc（默认实心圆） circle （空心圆）square （方块）

2.有序列表：使用标签ol，li 属性：A（大写字母） a （小写字母）l （大写罗马数字）i （小写罗马数字）start （设置开始阿拉伯数字）

3.混合列表 : 使用标签 ul ol li

4.自定义列表：使用标签 dl dt dd

！！！！！！代码实例

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body>
   <ul type="square">
       <li>香蕉</li>
       <li>香蕉</li>
       <li>香蕉</li>
   </ul>
   <ol type="I">
       <li>香蕉</li>
       <li>香蕉</li>
       <li>香蕉</li>
   </ol>
   <ul type="square">
       <li>香蕉</li>
       <ol>
           <li>水谷</li>
           <li>水谷</li>
       </ol>
       <li>香蕉</li>
       <ol>
           <li>水谷</li>
           <li>水谷</li>
       </ol>
       <li>香蕉</li>
       <ol>
           <li>水谷</li>
           <li>水谷</li>
       </ol>
   </ul>
    <dl>
        <dt>hello world</dt>
        <dd>can you feel me</dd>
        <dt>hello world</dt>
        <dd>can you feel me</dd>
        <dt>hello world</dt>
        <dd>can you feel me</dd>
    </dl></body></html>

登录后复制

效果图

这里写图片描述

豆包爱学

豆包旗下AI学习应用

674

查看详情

列表的基本语法

ol：有序列表

ul：无序列表

li：列表项

dl：列表

dt：列表项

dd：列表描述

常用列表

1.无序列表：使用标签 ul，li 属性：disc（默认实心圆） circle （空心圆）square （方块）

2.有序列表：使用标签ol，li 属性：A（大写字母） a （小写字母）l （大写罗马数字）i （小写罗马数字）start （设置开始阿拉伯数字）

3.混合列表 : 使用标签 ul ol li

4.自定义列表：使用标签 dl dt dd

！！！！！！代码实例

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body>
   <ul type="square">
       <li>香蕉</li>
       <li>香蕉</li>
       <li>香蕉</li>
   </ul>
   <ol type="I">
       <li>香蕉</li>
       <li>香蕉</li>
       <li>香蕉</li>
   </ol>
   <ul type="square">
       <li>香蕉</li>
       <ol>
           <li>水谷</li>
           <li>水谷</li>
       </ol>
       <li>香蕉</li>
       <ol>
           <li>水谷</li>
           <li>水谷</li>
       </ol>
       <li>香蕉</li>
       <ol>
           <li>水谷</li>
           <li>水谷</li>
       </ol>
   </ul>
    <dl>
        <dt>hello world</dt>
        <dd>can you feel me</dd>
        <dt>hello world</dt>
        <dd>can you feel me</dd>
        <dt>hello world</dt>
        <dd>can you feel me</dd>
    </dl></body></html>

登录后复制