06-創(chuàng)建列表

本課案例

image.png

列表的定義

以統(tǒng)一形式呈現(xiàn)的一組相關(guān)內(nèi)容航唆。

列表的分類(lèi)

無(wú)序列表、有序列表、定義列表和嵌套列表

列表的使用

1.無(wú)序列表(unordered list):<ul></ul>

無(wú)序列表:一組沒(méi)有先后順序的相關(guān)內(nèi)容,即列表中的條目是不分先后名船。
示例:

<h4>常見(jiàn)飲料(排名不分先后)</h4>
 <ul type="disc"> <!-- ul : unordered list,聲明無(wú)序列表 -->
  <li>咖啡</li>   <!-- li : list item,聲明列表項(xiàng)目 -->
  <li>茶</li>
  <li>牛奶</li>
  <li>果汁</li>
</ul> 

注:

  1. 屬性 type = disc| square | circle 用于表示前面的項(xiàng)目符號(hào),目前HTML4.01已經(jīng)廢棄旨怠。
    因?yàn)椴煌臑g覽器的顯示會(huì)有差異渠驼,實(shí)際應(yīng)用中通常使用CSS中的背景圖片來(lái)控制項(xiàng)目符號(hào)的距離和樣式。

無(wú)序列表練習(xí)

  • Apples
  • Bananas
  • Lemons
  • Oranges

2.有序列表(ordered list):<ol></ol>

<h4>小寫(xiě)字母列表:</h4>
<ol type="a">  <!-- ol:ordered list,聲明有序列表 -->
   <li>Apples</li>  <!-- li : list item,聲明列表項(xiàng)目 -->
   <li>Bananas</li>
   <li>Lemons</li>
   <li>Oranges</li>
</ol>  

常用屬性示例:

  <ol reversed = "reversed" > <!-- 反轉(zhuǎn)編號(hào) -->
  <li value="4" > <!-- 雖然不贊成使用value鉴腻,不過(guò)暫時(shí)沒(méi)有用來(lái)替代它的CSS方案 -->

不推薦OL使用的屬性有(用其它辦法解決解決):
type = "1 | a | A | i | I " 規(guī)定了編號(hào)的樣式迷扇,以后用CSS來(lái)解決。
start = " number " 規(guī)定了編號(hào)的起始值爽哎,用li的value屬性來(lái)解決谋梭。
:常見(jiàn)CSS代碼為ol { list-style-type : upper-roman | lower-alpha | decimal-leading-zero | lower-greek; }

注意事項(xiàng)

ul+li以及ol+li是一個(gè)整體,因此ul和ol內(nèi)部建議只使用li倦青,li是一個(gè)容器,因而li內(nèi)部可以則可以使用任何標(biāo)簽盹舞。具體見(jiàn)下面代碼:

<ol>
   <p>雖然我能正常顯示产镐,但是不建議隘庄!</p>
   <li><h3>第一名<h3><p>Apples</p></li>
   <li><h3>第二名<h3><p>Bananas</p></li>
   <li><h3>第三名<h3><p>Lemons</p></li>
   <li><h3>第四名<h3><p>Oranges</p></li>
</ol>  

定義列表

工作中,假如需要先定義一個(gè)標(biāo)題癣亚,下面再加以描述丑掺,此時(shí)就需要使用定義列表。

   <dl> <!-- definition list:定義列表 -->
        <dt>首都</dt> <!-- 定義標(biāo)題:definition title-->
        <dd>國(guó)家的行政中心</dd> <!-- 定義描述:definition description-->
        <dd>首都也通常是一個(gè)國(guó)家的經(jīng)濟(jì)和文化中心</dd>
        <dt>省會(huì)</dt>
        <dd>省的行政中心</dd>
        <dt>首府</dt>
        <dd>少數(shù)民族自治地區(qū)的行政中心</dd>
    </dl>

具體效果如圖:


image.png

注意事項(xiàng):

1.由于dl和dt述雾、dd是一個(gè)整體, 因而dl里面不建議放其它標(biāo)簽街州。
2.dd和dt和li標(biāo)簽一樣都屬于容器標(biāo)簽, 里面可以添加任意標(biāo)簽。
3.一個(gè)dt能對(duì)應(yīng)多個(gè)dd, 但是不要多個(gè)dt對(duì)應(yīng)一個(gè)dd是錯(cuò)誤的, 因?yàn)閐d的語(yǔ)義是描述它上面的那一個(gè)dt玻孟。

嵌套列表

有時(shí)唆缴,在列表項(xiàng)目中,還需要繼續(xù)擴(kuò)展列表黍翎,此時(shí)就需要嵌套列表面徽。如下圖


image.png

代碼如下:

<h4>一個(gè)嵌套列表:常見(jiàn)飲料</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>紅茶</li>
    <li>綠茶
      <ul>
      <li>中國(guó)茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

注意事項(xiàng)

嵌套列表和定義列表很類(lèi)似,其實(shí)認(rèn)真想想匣掸,他們是有區(qū)別的趟紊。

  • 最核心的區(qū)別是,嵌套列表是多個(gè)名詞的集合碰酝,而定義列表是有名詞有描述霎匈。
  • 從表現(xiàn)形式上看,他們也有區(qū)別送爸,嵌套列表有項(xiàng)目符號(hào)铛嘱,定義列表每一個(gè)前面都沒(méi)有項(xiàng)目符號(hào)。不過(guò)這一點(diǎn)不能作為辨別標(biāo)準(zhǔn)碱璃,因?yàn)轫?xiàng)目符號(hào)在實(shí)際應(yīng)用中通常用CSS清除掉弄痹。

思考

下圖應(yīng)該用定義列表還是嵌套列表?


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末嵌器,一起剝皮案震驚了整個(gè)濱河市肛真,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌爽航,老刑警劉巖蚓让,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異讥珍,居然都是意外死亡历极,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)衷佃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)趟卸,“玉大人,你說(shuō)我怎么就攤上這事〕校” “怎么了图云?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)邻邮。 經(jīng)常有香客問(wèn)我竣况,道長(zhǎng),這世上最難降的妖魔是什么筒严? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任丹泉,我火速辦了婚禮,結(jié)果婚禮上鸭蛙,老公的妹妹穿的比我還像新娘摹恨。我一直安慰自己,他們只是感情好规惰,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布睬塌。 她就那樣靜靜地躺著,像睡著了一般歇万。 火紅的嫁衣襯著肌膚如雪揩晴。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,793評(píng)論 1 314
  • 那天贪磺,我揣著相機(jī)與錄音硫兰,去河邊找鬼。 笑死寒锚,一個(gè)胖子當(dāng)著我的面吹牛劫映,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播刹前,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼泳赋,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了喇喉?” 一聲冷哼從身側(cè)響起祖今,我...
    開(kāi)封第一講書(shū)人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎拣技,沒(méi)想到半個(gè)月后千诬,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡膏斤,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年徐绑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片莫辨。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡傲茄,死狀恐怖毅访,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情烫幕,我是刑警寧澤俺抽,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站较曼,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏振愿。R本人自食惡果不足惜捷犹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望冕末。 院中可真熱鬧萍歉,春花似錦、人聲如沸档桃。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)藻肄。三九已至蔑舞,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間嘹屯,已是汗流浹背攻询。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留州弟,地道東北人钧栖。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像婆翔,于是被迫代替她去往敵國(guó)和親拯杠。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,562評(píng)論 32 459
  • Bootstrap是什么啃奴? 一套易用潭陪、優(yōu)雅、靈活纺腊、可擴(kuò)展的前端工具集--BootStrap畔咧。GitHub上介紹 的...
    凜0_0閱讀 10,881評(píng)論 3 184
  • 列表標(biāo)簽 無(wú)序列表(unordered list) 作用: 給一堆內(nèi)容添加無(wú)序列表語(yǔ)義(一個(gè)沒(méi)有先后順序整體), ...
    cheney0217閱讀 300評(píng)論 0 0
  • 最近項(xiàng)目開(kāi)發(fā)中,我負(fù)責(zé)給數(shù)據(jù)庫(kù)加索引揖膜。Mysql提供了豐富的索引類(lèi)型誓沸,主要是B樹(shù)索引(前綴索引、復(fù)合索引)壹粟,Has...
    孫闊閱讀 418評(píng)論 0 2
  • 最近拜隧,經(jīng)常遇到多個(gè)Excel文件需要合并成為一個(gè)工作表宿百,進(jìn)行全面的數(shù)據(jù)分析。于是洪添,小晞開(kāi)始學(xué)習(xí)【如何偷懶】垦页。 小晞...
    希日晞閱讀 7,594評(píng)論 0 4