HTML之列表

列表的創(chuàng)建過程

創(chuàng)建一個HTML列表需要兩個元素哎壳,這兩個元素結合使用就可以創(chuàng)建一個HTML列表颊埃。
第一個元素用來標記列表項,第二個元素決定你創(chuàng)建的列表類型:有序還是無序亭罪。

  • 第一步:
    把每個列表項目放到一個< li>元素中
    把每個列表項目放到各自的< li>元素中創(chuàng)建列表复哆。這意味著把內容放在< li>和< /li>之間欣喧。
<li>我是一個列表項目<li>
  • 第二步
    用< ul>和< ol>封裝列表元素。
    如果使用< ul>封裝列表元素梯找,則列表為無序列表唆阿;如果使用< ol>封裝列表元素,則列表為有序列表锈锤。
    無序列表:
<ul>
    <li>Javascript</li>
    <li>Java</li>
<ul>

有序列表:

<ol>
    <li>第一天</li>
    <li>第二天</li>
</ol>

運行結果:
<ul> <li>Javascript</li> <li>Java</li> <ul> <ol> <li>第一天</li> <li>第二天</li> </ol>

列表的嵌套使用

在制作列表的時有時候需要也個列表嵌套使用驯鳖,比如:目錄
列表在嵌套創(chuàng)建時可以在有序列表中嵌套無序列表,也可以在無序列表中嵌套有序列表久免。

<ul>   
   <li>JavaScript</li>    
   <ol>        
      <li>第一章</li>        
      <ul>            
            <li>const</li>              
            <li>let</li>        
      </ul>         
   </ol>    
</ul>

運行結果:
<ul> <li>JavaScript</li> <ol> <li>第一章</li> <ul> <li>const</li> <li>let</li> </ul> </ol></ul>

列表的使用注意事項

  • < ol>和< li>必須一起使用嗎?
    必須一起使用浅辙,它們唇齒相依,缺一不可阎姥。
  • 我們可以在< ol>或< ul>中添加其他元素或文字嗎记舆?
    不行,< ol>和< ul>的誕生只是為了配合< li>的使用丁寄。
  • 列表有有序列表和無序列表氨淌,還有其他的類型嗎?
    還有自定義列表伊磺,列表中的每個項目都有一個限項< dt>和一個描述< dd>。
    自定義列表示例:
<dl>
    <dt>HTML</dt>
     <dd>HTML 是用來描述網頁內容的一種語言删咱。全稱超文本標記語言 (Hyper Text Markup Language)</dd>
    <dt>JavaScript</dt>
      <dd>JavaScript屑埋,一種高級編程語言</dd>
</dl>

運行結果:
<dl> <dt>HTML</dt> <dd>HTML 是用來描述網頁內容的一種語言。全稱超文本標記語言 (Hyper Text Markup Language)</dd> <dt>JavaScript</dt><dd>JavaScript痰滋,一種高級編程語言</dd>
</dl>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末摘能,一起剝皮案震驚了整個濱河市续崖,隨后出現的幾起案子,更是在濱河造成了極大的恐慌团搞,老刑警劉巖严望,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異逻恐,居然都是意外死亡像吻,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進店門复隆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拨匆,“玉大人,你說我怎么就攤上這事挽拂〔衙浚” “怎么了?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵亏栈,是天一觀的道長台腥。 經常有香客問我,道長绒北,這世上最難降的妖魔是什么黎侈? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮镇饮,結果婚禮上蜓竹,老公的妹妹穿的比我還像新娘。我一直安慰自己储藐,他們只是感情好俱济,可當我...
    茶點故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著钙勃,像睡著了一般蛛碌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上辖源,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天蔚携,我揣著相機與錄音,去河邊找鬼克饶。 笑死酝蜒,一個胖子當著我的面吹牛,可吹牛的內容都是我干的矾湃。 我是一名探鬼主播亡脑,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了霉咨?” 一聲冷哼從身側響起蛙紫,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎途戒,沒想到半個月后坑傅,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡喷斋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年唁毒,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片继准。...
    茶點故事閱讀 38,100評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡枉证,死狀恐怖,靈堂內的尸體忽然破棺而出移必,到底是詐尸還是另有隱情室谚,我是刑警寧澤,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布崔泵,位于F島的核電站秒赤,受9級特大地震影響,放射性物質發(fā)生泄漏憎瘸。R本人自食惡果不足惜入篮,卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望幌甘。 院中可真熱鬧潮售,春花似錦、人聲如沸锅风。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽皱埠。三九已至肮帐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間边器,已是汗流浹背训枢。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留忘巧,地道東北人恒界。 一個月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像砚嘴,于是被迫代替她去往敵國和親部逮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,834評論 2 345

推薦閱讀更多精彩內容

  • 還是舉個例子吧席吴,如下圖所示网杆,該怎么樣通過HTML實現這個列表呢? 創(chuàng)建一個含有兩項的無序列表 結果如圖...
    WP啦啦啦閱讀 1,164評論 2 5
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案也颤? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,728評論 1 92
  • 一洋幻,有序列表、無序列表翅娶、自定義列表如何使用文留?寫個簡單的例子。三者在語義上有什么區(qū)別竭沫?在哪些情況下使用哪種(重要)燥翅?...
    kingBirds閱讀 818評論 0 0
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,518評論 32 459
  • 回來已是六點。桌上攤開的速寫本應該是中午畫的蜕提,第二次完美錯開森书。不敢把這句話發(fā)在微信里,怕是要一語成讖谎势。住處的人回來...
    柳不浪閱讀 104評論 0 0