HTML 列表

HTML 布局►◄HTML 構(gòu)建塊

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

html 無序列表

無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記

無序列表使用 <ul> 標(biāo)簽

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

HTML 有序列表

同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記

有序列表始于 <ol> 標(biāo)簽

每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽

列表項(xiàng)項(xiàng)使用數(shù)字來標(biāo)記

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

HTML 自定義列表

自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合

自定義列表以 <dl> 標(biāo)簽開始

每個(gè)自定義列表項(xiàng)以 <dt> 開始

每個(gè)自定義列表項(xiàng)的定義以 <dd> 開始

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

列表的css

列表最重要的css屬性便是list-style屬性，它的語法如下：

list-style:list-style-image||list-style-position||list-style-type

list-style-image可定義列表前所使用圖片，list-style-position屬性取值含outside、inside；outside為默認(rèn)值，列表項(xiàng)目標(biāo)記此時(shí)被放置在文本以外，它將環(huán)繞文本在文本之外，inside列表項(xiàng)目旋轉(zhuǎn)在文本以內(nèi)，環(huán)繞文本對(duì)齊。

列表最重要的CSS屬性便是list-style屬性，它的語法如下：

list-style:list-style-image||list-style-position||list-style-type

list-style-image可定義列表前所使用圖片，list-style-position屬性取值含outside、inside；outside為默認(rèn)值，列表項(xiàng)目標(biāo)記此時(shí)被放置在文本以外，它將環(huán)繞文本在文本之外，inside列表項(xiàng)目旋轉(zhuǎn)在文本以內(nèi)，環(huán)繞文本對(duì)齊。

<style type="text/css">
ul{border:dotted 1px #666;}
li{background:#ddd;}
ul.out{list-style-position:outside;}
ul.in{list-style-position:inside;}
</style>

list-style-position為outside

<ul class="out">
  <li>關(guān)于主題</li>
  <li>關(guān)于形式</li>
  <li>關(guān)于內(nèi)容</li></ul>
<h4>list-style-position為inside</h4>
<ul class="in">
  <li>關(guān)于主題</li>
  <li>關(guān)于形式</li>
  <li>關(guān)于內(nèi)容</li>
 </ul>

若列表外標(biāo)簽<ul>或<dl>或<ol>的padding-left設(shè)置為0，且list-style-position為outside時(shí)，列表符號(hào)將不會(huì)顯示，如上例中ul添加padding-left:0;將顯示如下：

list-style-type為列表顯示類型，它共有9種常見屬性值：

disc:默認(rèn)值。實(shí)心圓
circle:空心圓
square:實(shí)心方塊
decimal:阿拉伯?dāng)?shù)字
lower-roman:小寫羅馬數(shù)字
upper-roman:大寫羅馬數(shù)字
lower-alpha:小寫英文字母
upper-alpha:大寫英文字母
none:不使用項(xiàng)目符號(hào)

我們可以看到，三種不同列表實(shí)際上只是list-style-type默認(rèn)值不一樣而已，通過設(shè)置list-style-type即可實(shí)現(xiàn)不同顯示效果。

列表之間的嵌套

列表嵌套的html書寫是不少人容易犯的錯(cuò)誤，經(jīng)常寫錯(cuò)格式是這樣的：

<ul>
  <li>男性</li>
  <li>
    <ol>女性
      <li>女孩子</li>
      <li>姑娘</li>
      <li>大媽</li></ol>
  </li>
</ul>

這里包括兩處錯(cuò)誤：一是<ul>后不允許直接跟文字，二是這里的文字“女性”應(yīng)當(dāng)在第二個(gè)<li>后。正確格式如下：

<ul>
  <li>男性</li>
  <li>女性
    <ol>
      <li>女孩子</li>
      <li>姑娘</li>
      <li>大媽</li></ol>
  </li>
</ul>

使用適合的標(biāo)簽進(jìn)行合理的嵌套可以實(shí)現(xiàn)很多復(fù)雜的布局，比如常見的tab標(biāo)簽、滑動(dòng)門等完全不需要使用js操作DOM即可完成，而且實(shí)現(xiàn)簡(jiǎn)單，語義性強(qiáng)。

下例以文章列表為例，html如下：

<h4>站點(diǎn)文章列表摘要</h4>
<dl>
  <dt>
    <a>文章一：JavaScript程序的優(yōu)化</a>
  </dt>
  <dd>文章發(fā)布時(shí)間:2021-4-17</dd>
  <dt>
    <a>文章二：深入解析JavaScript中eval</a>
  </dt>
  <dd>文章發(fā)布時(shí)間：2021-4-17</dd>
  <dt>
    <a>文章三：實(shí)現(xiàn)sqlite高并發(fā)的問題</a>
  </dt>
  <dd>文章發(fā)布時(shí)間:2021-4-17</dd></dl>

CSS樣式如下：

<style type="text/css">
h4 {
	font-size:14px;
	color:#333;
}
a {
	color:#069;
}
dl {
	border:dashed 1px #666;
	font-size:14px;
	padding:4px;
	background:#FDFBDB;
}
dt {
	clear:left;
	float:left;
	padding:4px 0;
}
dd {
	text-align:right;
	padding:4px 0;
	font-size:12px;
	color:#666;
}
</style>

有用提示

列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等。