H5學習之旅-H5列表（8）-H5教程-PHP中文網

H5學習之旅-H5列表（8）

黄舟

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

原創

1552 人瀏覽過

列表的基本語法

ol：有序列表

ul：無序列表

li：列表項

dl：列表

dt

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>

登入後複製

效果圖

列表的基本語法

ol：有序列表 H5學習之旅-H5列表（8）

ul：無序列表

項列表

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>

登入後複製

效果圖