HTML-列表標簽(雙標簽) 208

表標簽有3種:1)dl,dd與dt(定義列表) 2)ol與li(有序列表) 3)ul與li(無序列表)前兩者一般不怎么用,網頁中運用最多的是第三種

1)<dl><dd>與<dt>

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <dl>
        <dt>河北</dt>
        <dd>石家莊</dd>
        <dd>秦皇島</dd>
        <dt>河南</dt>
        <dd>鄭州</dd>
        <dd>新鄉</dd>
    </dl>
</body>
</html>

2)<ol>與<li>和<ul>與<li>

它們兩個都有一個type屬性,用來設置序列的顯示樣式(在li前面顯示),type的取值有:1(數字序號)A,a(大小寫字母)I,i(大小寫羅馬數字)disc(實心原點)circle(空心圓圈)square(實心方塊)

顯示效果

有序與無序列表的區別就是type的默認值不同而已

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <dl>
        <dt>河北</dt>
        <dd>石家莊</dd>
        <dd>秦皇島</dd>
        <dt>河南</dt>
        <dd>鄭州</dd>
        <dd>新鄉</dd>
    </dl>============================================================<ol type="A">
        <li>北京</li>
        <li>上海</li>
        <li>廣州</li>
        <li>深圳</li>
    </ol>=============================================================<ul type="circle">
        <li>北京</li>
        <li>上海</li>
        <li>廣州</li>
        <li>深圳</li>
    </ul>
</body>
</html>

注意:設置屬性時考慮瀏覽器的兼容性

經過測試ol與ul列表在IE瀏覽器(IE10)下type的這幾個取值都有相應的效果;在谷歌瀏覽器下ol列表只對type值為1、a、A、i、I有效果;ul列表只對type值為disc、circle、square有效果;其他的如蘋果,火狐等瀏覽器自己測試(同一瀏覽器的不同版本不再測試)

谷歌在顯示效果

2.1使用嵌套的ul或ol來模擬二級菜單,以后會通過js,css或者Asp.net實現動態的菜單

二級菜單

TML 支持有序、無序和定義列表

實例

無序列表

[demo]

<html>

<head>

</head>

<body>

<h4>一個無序列表：</h4>

<ul>

</ul>

</body>

</html>

[/demo]

本例演示無序列表。

有序列表

[demo]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ol>

</ol>

</ol>

</body>

</html>

[/demo]

本例演示有序列表。

無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表始于 <ul> 標簽。每個列表項始于 <li>。

<ul>

<li>Coffee</li>

</ul>

瀏覽器顯示如下：

Coffee

Milk

列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

有序列表

同樣，有序列表也是一列項目，列表項目使用數字進行標記。

有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。

<ol>

<li>Coffee</li>

</ol>

瀏覽器顯示如下：

Coffee

Milk

列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

定義列表

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

瀏覽器顯示如下：

Coffee

Black hot drink

Milk

White cold drink

定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

更多實例

不同類型的無序列表

[demo]

<html>

<head>

</head>

<body>

<h4>Disc 項目符號列表：</h4>

</ul>

<h4>Circle 項目符號列表：</h4>

</ul>

<h4>Square 項目符號列表：</h4>

</ul>

</body>

</html>

[/demo]

本例演示一個無序列表。

不同類型的有序列表

[demo]

<html>

<head>

</head>

<body>

<ol>

</ol>

</ol>

<h4>小寫字母列表：</h4>

</ol>

<h4>羅馬字母列表：</h4>

</ol>

<h4>小寫羅馬字母列表：</h4>

</ol>

</body>

</html>

[/demo]

本例演示不同類型的有序列表。

嵌套列表

[demo]

<html>

<head>

</head>

<body>

<h4>一個嵌套列表：</h4>

<ul>

<li>茶

<ul>

</ul>

</li>

</ul>

</body>

</html>

[/demo]

本例演示如何嵌套列表。

嵌套列表 2

[demo]

<html>

<head>

</head>

<body>

<h4>一個嵌套列表：</h4>

<ul>

<li>茶

<ul>

<li>綠茶

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

[/demo]

本例演示更復雜的嵌套列表。

定義列表

[demo]

<html>

<head>

</head>

<body>

<h2>一個定義列表：</h2>

<dl>

<dd>用來計算的儀器 ... ...</dd>

<dd>以視覺方式顯示信息的裝置 ... ...</dd>

</dl>

</body>

</html>

[/demo]

本例演示一個定義列表。

列表標簽

標簽描述

<ol> 定義有序列表。

<ul> 定義無序列表。

<li> 定義列表項。

<dl> 定義定義列表。

<dt> 定義定義項目。

<dd> 定義定義的描述。

<dir> 已廢棄。使用 <ul> 代替它。

<menu> 已廢棄。使用 <ul> 代替它。

篇我們學習CSS列表。

對于列表，大家并不陌生。比如下面的無序列表和有序列表。

在 HTML 中，最常用的兩種列表的類型就是無序列表和有序列表，使用 ol 和 ul 元素實現。列表項通過列表元素屬性，實現空心實心圓點和數字字母等不同的形式。

在 CSS 中，列表屬性允許我們為有序列表、無序列表設置不同的列表項標記，甚至可以使用一個圖像，還可以為列表和列表項添加背景顏色。

應用 list-style-type 屬性設置不同的列表項標記。屬性值有很多，

比如：

circle 空心圓點，

disc 實心圓點，

square 小方點，

decimal 數字，

upper-roman 大寫羅馬字母，

lower-alpha 小寫字母等等。

舉個例子。

創建創建 css-list.html 文件和 list-style.css 文件。打開 html 文件，構建基礎代碼，使用 emmet 命令：小括號 ul 大于 li 乘以3 再乘以3 (ul>li*3)*3。回車，創建了三組無序列表。給三個 ul 元素添加 class 屬性，值分別為 a，b，c。給每個列表項填入一些文本。

HTML
<body>
  <ul class="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <ul class="b">
    <li>Vue</li>
    <li>React</li>
    <li>小程序</li>
  </ul>
  <ul class="c">
    <li>大前端</li>
    <li>前端架構</li>
  </ul>

  <ol class="d">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
  <ol class="e">
    <li>Vue</li>
    <li>React</li>
    <li>小程序</li>
  </ol>
  <ol class="f">
    <li>大前端</li>
    <li>前端架構</li>
  </ol>
</body>

拷貝這三組無序列表，將 ul 元素名稱修改為 ol，三個 class 值改為 d，e，f。

打開 css 文件，定義選擇器 ul.a，聲明樣式 list-style-type: circle，設置列表項標記為空心圓點。拷貝兩組樣式，修改選擇器 ul.b，ul.c。修改 list-style-type 屬性值分別為 disc，實心圓點，square 小方點。

無序列表效果就做好了！

定義選擇器 ol.d，聲明樣式 list-style-type: decimal，設置列表項標記為數字。拷貝兩組樣式，修改選擇器 ol.e，ol.f。修改 list-style-type 屬性值分別為 upper-roman，大寫羅馬字母，lower-alpha 小寫字母。

有序列表也實現了！

CSS
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: disc;
}

ul.c {
  list-style-type: square;
}

ol.d {
  list-style-type: decimal;
}

ol.e {
  list-style-type: upper-roman;
}

ol.f {
  list-style-type: lower-alpha;
}

有關更多的 list-style-type，大家參照這個案例。

list-style-image 屬性指定了一個圖像作為列表項的標記。屬性值為 url 小括號，括號里寫入圖片的路徑 url('./xxx.gif') 。

舉個例子。

在 html 里，拷貝第一組 ul，將 class 的值改為 g。在 css 里，定義選擇器 ul.g，聲明樣式屬性 list-style-image，值為 url 小括號，圖片路徑為當前目錄下的 purple.gif。

看看效果，列表項用圖片標記了！

除了更換列表項的標記，還可以設置標記的位置，通過 list-style-position 屬性來實現。這個屬性的值有兩個：outside，表示標記在列表項之外。inside，表示標記在列表項內部。

舉個例子。

在 html 里添加一個 h3 元素，填入一些文本。ul 點 h 大于 li 乘以 3 ul.h>li*3，創建一個無序列表，填入一些文本。拷貝這組列表，將 class 值改為 i。

在 css 里定義 ul.h 選擇器，聲明樣式 list-style-position: outside。定義 ul.i 選擇器，聲明樣式 list-style-position: inside。

仔細觀察列表項標記的位置，如果這里畫一條線，就一目了然了，outside，標記在列表內容的左側，也是默認的位置。inside，標記在列表內容里面。

有時，我們不希望顯示列表項標記，此時可以應用 list-style-type: none 來去掉他們。

再復制一組這個列表，將 class 值修改為 j。再定義選擇器 ul.j，聲明樣式 list-style-type: none。

我們看，列表項標記消失了。

同樣，列表屬性也可以使用簡寫——list-style，被用來在一個聲明中，設置所有的列表屬性。屬性值按照 list-style-type list-style-position list-style-image 順序來書寫，某個值缺省的話，就使用它的默認值。

復制兩份列表，修改 class 值分別為 k，l （這個是艾奧）。

HTML
<ul class="k">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<ul class="l">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

定義選擇器 ul.k，聲明樣式 list-style: square inside url("purple.gif")。再定義選擇器 ul.l，聲明樣式 list-style: none。

這樣的簡寫，同樣可以定義列表項的標記樣式，方便快捷。

我們還可以用顏色來裝飾列表，使它們看起來更有趣。添加到 ol 或 ul 標簽的任何樣式都會影響整個列表，而添加到 li 標簽的屬性只會影響單個列表項。

在 html 中再復制兩組列表，修改 class 的值分別為 m，n。

HTML
<ul class="m">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

  <ol class="n">
    <li>Vue</li>
    <li>React</li>
    <li>小程序</li>
  </ol>

定義 ul.m 選擇器，聲明樣式：background: #3399ff，padding: 20px。

定義 ol.n 選擇器，聲明樣式：background: #ff9999，padding: 20px。

定義 ul.m li 選擇器，聲明樣式：background: #cce5ff，color: darkblue，margin: 5px。

定義 ol.n li 選擇器，聲明樣式：background: #ffe5e5，color: darkred，padding: 5px，margin-left: 35px。

這樣，列表就裝飾好了！

這里用到的 padding 和 margin 屬性，給元素添加內外邊距，我們在后面的課程里還會詳細的研究。

CSS
ul.m {
  background: #3399ff;
  padding: 20px;
}

ol.n {
  background: #ff9999;
  padding: 20px;
}

ul.m li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}

ol.n li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=73

在線咨詢

上一篇：js的基礎知識必備
下一篇：Chrome DevTools 面板全攻略，助力你高

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML-列表標簽(雙標簽) 208

1)<dl><dd>與<dt>

2)<ol>與<li>和<ul>與<li>

您的項目需求