整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端入門-html 列表

          篇介紹了html 中文本格式及段落等標簽,今天說下列表,什么是列表?它就是一種數據排列方式,以條列式的方式顯示文本,使讀者一目了然。列表主要有以下三種:

          1. 無序列表
          2. 有序列表
          3. 定義列表

          無序列表 —— ul

          無序列表在每行開始位置顯示一個符號,語法如下:

          <html>
          <body>
          <h4>一個無序列表:</h4>
          <ul>
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
          </ul>
          </body>
          </html>

          顯示效果:


          無序列表的符號可以通過在ul 標簽上設置 type 屬性顯示不同的符號,比如:

          1、disc —— 實心圓點 (默認類型)
          2、circle —— 空心圓圈
          3、square —— 實心方塊

          實例代碼:

          <html>
          <body>
          <h4>一個無序列表:</h4>
          <ul type="disc">
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
          </ul>
          <h4>一個無序列表:</h4>
          <ul type="circle">
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
          </ul>
          <h4>一個無序列表:</h4>
          <ul type="square">
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
          </ul>
          </body>

          顯示效果:


          有序列表 —— ol

          有序列表使用數字或字母符號排列,表示文本按一定順序顯示,語法如下:

          <!DOCTYPE html>
          <html>
          <body>
          <ol>
            <li>咖啡</li>
            <li>牛奶</li>
            <li>茶</li>
          </ol>
          </body>
          </html>

          效果如下:

          同無序列表一樣,在ol上通過type 屬性設置使用那種符號表示順序,有以下幾種:

          1、1,表示數字 1、2、3..... (默認數字)
          2、a,表示小寫字母 a、b、c....
          3、A,表示大寫字母 A、B、C ....
          4、i,表示小寫羅馬字母 i、ii、iii、iv....
          5、I,表示大寫羅馬字母 I、II、III、IV....

          顯示效果如下:

          html代碼:

          <!DOCTYPE html>
          <html>
          <body>
          數字
          <ol type="1">
            <li>咖啡</li>
            <li>牛奶</li>
            <li>茶</li>
          </ol>
          小寫字母
          <ol type="a">
            <li>咖啡</li>
            <li>牛奶</li>
            <li>茶</li>
          </ol>
          大寫字母
          <ol type="A">
            <li>咖啡</li>
            <li>牛奶</li>
            <li>茶</li>
          </ol>
          小寫羅馬字母
          <ol type="i">
            <li>咖啡</li>
            <li>牛奶</li>
            <li>茶</li>
          </ol>
          大寫羅馬字母
          <ol type="I">
            <li>咖啡</li>
            <li>牛奶</li>
            <li>茶</li>
          </ol>
          </body>
          </html>

          有序列表還可以通過start 屬性設置起始數組,如下:

          <ol  start="3">
            <li>咖啡</li>
            <li>牛奶</li>
            <li>茶</li>
          </ol>

          顯示效果:

          定義列表——dl

          不同以上2種列表,定義列表主要用來解釋名詞,由2種層次列表顯示,第一層是被解釋的名詞,第二層是詳細地解釋文字,語法如下:

          <html>
          <body>
          <h2>一個定義列表:</h2>
          <dl>
             <dt>計算機</dt>
             <dd>用來計算的儀器 ... ...</dd>
             <dt>顯示器</dt>
             <dd>以視覺方式顯示信息的裝置 ... ...</dd>
          </dl>
          </body>
          </html>
          

          顯示效果:

          第一行<dt>是要解釋的名詞,第二行標簽<dd>是解釋文本,會自動縮進。

          列表的嵌套

          以上三種列表是可以嵌套使用的,看如下示例:

          <html>
          <body>
          <h4>一個嵌套列表:</h4>
          <ul>
            <li>咖啡</li>
            <li>茶
              <ul>
              <li>紅茶</li>
              <li>綠茶</li>
              </ul>
            </li>
            <li>牛奶</li>
          </ul>
          </body>
          </html>

          效果:

          每嵌套一層,它的符號是不一樣的,你可以試試再嵌套一層看看效果。

          當然,不同列表類型也可互相嵌套,根據顯示效果可以自由使用,一般建議不要這樣使用,不同類型列表顯示在一塊不是很美觀。如下面無序列表中嵌套有序列表:

          <html>
          <body>
          <h4>一個嵌套列表:</h4>
          <ul>
            <li>咖啡</li>
            <li>茶
              <ul>
              <li>紅茶</li>
              <li>綠茶
                <ol>
                <li>中國茶</li>
                <li>非洲茶</li>
                </ol>
              </li>
              </ul>
            </li>
            <li>牛奶</li>
          </ul>
          </body>
          </html>

          效果如下:

          總結

          列表是網頁制作中經常會使用的標簽,比如在制作網頁導航欄菜單時會經常用到ul列表,以后會講如何通過ul標簽制作一個下拉菜單,感謝您閱讀及關注,祝你學習愉快。

          上篇:前端入門——html 文字格式、標題與段落

          下篇:前端入門——html 超鏈接

          網絡上,有序列表可以使您的 HTML 頁面更有組織、簡潔且易于閱讀。在本文中,我將向您展示如何在 HTML 中創建高質量、有趣的有序列表。您將學習如何在平凡的列表中帶來鮮為人知的"Wow"效果。讓我們開始吧!


          一、HTML 中的 ordered list 基礎

          HTML 中的有序列表(ordered list)使用 <ol> 元素創建,并且對于每個列表項使用 <li> 元素。下面是一段有序列表的基本示例:

          html
          <ol>
          <li>項目 1</li>
          <li>項目 2</li>
          </ol>
          

          在上面的示例中,您可以看到列表由 <ol> 元素包圍,每個列表項使用 <li> 元素表示。

          二、美化有序列表

          要讓您的有序列表更具吸引力,您可以通過使用 CSS 進行累積 з?熄culation。以下是一些建議:

          1. 自定義列表部分的風格: affair CAN I USE CSS 屬性供您選擇,例如顏色、背景圖片、邊框、邊距和填充。此外,可以使用盒子陰影為列表添加淺顯的三維效果。
          2. 更新列表標記: 更先Progressive Enhancement,在文本內容之前使用數字列表標記,可以讓列表更立體。您可以使用 CSS Counter 功能自動結合標記和內容。
          css

          、列表說明:列表是在頁面上有很多列同時存在的信息,分為無序列表和有序列表。

          1、無序列表概念:用來放置一些對于順序無關緊要的內容,例如下面的新聞內容。

          2、有序列表概念:有序列表用于存放內容不能錯亂的信息,比如下面的阿里云內容。

          3、自定義列表:自定義列表用于正文之外的框框欄欄之類的。

          二、列表樣式:

          列表樣式2

          列表樣式3

          三、無序列表 <ul> </ul> 和 <li> </li>標簽

          列表標簽是用 ul 表示,但是不是單獨使用的,需要和 li 標簽配合使用,并且列表標簽也有屬性,用法:

          <ul type="disc"> ,屬性有多個值:

          disc :小圓點,默認屬性

          circle :小圓圈

          square :實心方塊

          none :不要任何符號

          源碼:↓

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <!--網頁抬頭-->

          <title>Title</title>

          </head>

          <body>

          <!--列表與列表屬性-->

          <ul type="disc">

          <li>這是列表a</li>

          <li>這是列表b</li>

          <li>這是列表c</li>

          </ul>

          </body>


          主站蜘蛛池模板: 国产一区二区在线观看视频| 亚洲AV网一区二区三区| 精品视频一区二区三三区四区| 无码国产精品久久一区免费 | 国产一区二区三区手机在线观看 | 日韩社区一区二区三区| 国产福利微拍精品一区二区| 国产日韩AV免费无码一区二区 | 男插女高潮一区二区| 精品亚洲一区二区| 国产伦精品一区二区免费| 免费精品一区二区三区在线观看| 精品一区二区三区在线播放视频 | 久久久91精品国产一区二区| 亚洲国模精品一区| 亚洲一区二区视频在线观看 | 精品国产亚洲一区二区在线观看 | 岛国无码av不卡一区二区| 波多野结衣一区在线观看| 国产精品一区电影| 免费在线视频一区| 亚洲一区二区三区在线播放| 一区二区三区四区无限乱码 | 欧洲精品一区二区三区在线观看| 成人国产精品一区二区网站公司| 无码中文人妻在线一区二区三区| 亚洲av乱码一区二区三区按摩| 精品福利一区二区三区免费视频| 中文激情在线一区二区| 国产av一区最新精品| 国产日韩综合一区二区性色AV| 成人毛片一区二区| 夜夜爽一区二区三区精品 | 男插女高潮一区二区| 国模无码视频一区二区三区| 国产一区二区三区电影| 亚洲一区二区三区偷拍女厕| 蜜臀Av午夜一区二区三区| 国产精品亚洲一区二区麻豆| 国产伦精品一区二区三区免.费| 亚洲av片一区二区三区|