前端入門-html 列表

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

無序列表
有序列表
定義列表

無序列表 —— 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 超鏈接

章我們給大家講解一下什么是css選擇器？css3中5種常見的基本選擇器。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一：什么是css選擇器？

CSS是一種用于屏幕上渲染html，xml等一種語言，CSS主要是在相應的元素中應用樣式，來渲染相對應用的元素，那么這樣我們選擇相應的元素就很重要了，如何選擇對應的元素，此時就需要我們所說的選擇器。在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素。選擇器主要是用來確定html的樹形結構中的DOM元素節點。

二：css3中5種常見的基本選擇器

css3中的選擇器種類有很多，下面介紹的是5種常見的基本選擇器：通配選擇器，類選擇器，元素選擇器， ID選擇器和群組選擇器。

1.通配符選擇器（所有瀏覽器支持）
通用選擇器用*來表示，用來選擇所有元素，，也可以選擇某個元素下的所有元素；

*{marigin: 0;
 padding: 0;
 font-size: 14px;
}

上面代碼大家在reset樣式文件中看到的肯定不少，他所表示的是，所有元素的margin和padding都設置為0，字體大小都設置為14px,另外一種就是選擇某個元素下的所有元素：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>通配符選擇器</title>
 <style>
 .demo * {
 width: 50px;
 height: 50px;
 border:1px solid blue;
 margin: 10px;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <div>1</div>
 <p>2</p>
 <span>3</span>
 </div>
 </body>
</html>

效果圖：

我們可以看到在demo元素里的三個子元素div，p，span都是分別沒有設置css樣式的，但只要我們設置了demo元素下的所有元素的統一樣式，那么demo元素里的三個子元素div，p，span就會出現樣式。

對了，在這里說一下，我目前是在職web前端開發，如果你現在正在學習前端，了解前端，渴望成為一名合格的web前端開發工程師，在入門學習前端的過程當中有遇見任何關于學習方法，學習路線，學習效率等方面的問題，都可以隨時關注并私信我：前端，我都會根據大家的問題給出針對性的建議，缺乏基礎入門的視頻教程也可以直接來找我，我這邊有最新的web前端基礎精講視頻教程，還有我做web前端技術這段時間整理的一些學習手冊，面試題，開發工具，PDF文檔書籍教程，都可以直接分享給大家。

2.類選擇器（所有瀏覽器都支持類選擇器，但多類選擇器（.className1.className2）不被ie6支持。）

類選擇器根據類名來選擇，前面以”.”來標志，是以一獨立于文檔元素的方式來指定樣式，使用類選擇器之前需要在html元素上定義類名，換句話說需要保證類名在html標記中存在。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>類選擇器</title>
 <style>
 .demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 background: #2DC4CB;
 }
 
 </style>
 </head>
 <body>
 <div class="demo">類選擇器</div>
 </body>
</html>

效果圖：

3.元素選擇器（所有瀏覽器支持）
元素選擇器（標簽名選擇器），是css3選擇器中最常見而且最基本的選擇器。元素選擇器其實就是文檔的元素，如html,body,p,div等等下下面例子中選擇了span元素，并設置了字體顏色為紅色。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>元素選擇器</title>
 <style>
 .demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 }
 span{
 color: red;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <p>這里使用<span>元素選擇器</span>改變了樣式</p>
 </div>
 </body>
</html>

效果圖：

4.ID選擇器（所有瀏覽器都支持）

ID選擇器和上面說的類選擇器是很相似的，在使用ID選擇器之前也需要先在html文檔中加注ID名稱，這樣在樣式選擇器中才能找到相對應的元素，不同的是ID選擇器是一個頁面中唯一的值，我們在類使用時是在相對應的類名前加上一個“.”號（.className）而id選擇器是在名稱前使用"#"如(#demo)。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>ID選擇器</title>
 <style>
 #demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 background: #FF0000;
 }
 
 </style>
 </head>
 <body>
 <div id="demo">ID選擇器</div>
 </body>
</html>

效果圖：

ID選擇器有幾個地方需要特別注意：

第一：一個文檔中一個id選擇器只充許使用一次，因為id在頁面中是唯一的；

第二，id選擇器不能像類選擇器一樣多個合并使用，一個元素只能命名一個id名；

第三，可以在不同的文檔中使用相同的id名，比如說在“test.html”中給h1定了“＃important”,也可給“test1.html”中定義p的id為"#important"，但前提是不管在test.html還是test1.html中只充許有一個id叫"#important"的存在。

5.群組選擇器（所有瀏覽器都支持）

當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔。群組選擇器是將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“，”隔開，這個逗號告訴瀏覽器，規則中包含多個不同的選擇器，如果不有這個逗號，那么所表達的意就完全不同了，省去逗號就成了我們前面所說的后代選擇器，這一點大家在使用中千萬要小心加小心。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>群組選擇器</title>
 <style>
 .demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 background: #FF0000;
 }
 p,li{
 color: blue;
 }
 .demo1,.demo2{
 color: #fff;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <p>這里是一個段落!</p>
 <ul><li>列表</li></ul>
 <a href="#" class="demo1">鏈接一</a><br>
 <span class="demo2">文字文字！</span>
 </div>
 </body>
</html>

效果圖：

以上就是什么是css選擇器？css3中5種常見的基本選擇器（代碼實例）的詳細內容，更多請關注我！！！

作者：程序猿的生活
鏈接：https://zhuanlan.zhihu.com/p/152153067

lt;h2 id="title1">列表標簽</h2>

<h3 id="title2">無序列表(unordered list)</h3>

作用: 給一堆內容添加無序列表語義(一個沒有先后順序整體), 列表中的條目是不分先后
格式:

li 英文是 list item, 翻譯為列表項

 <h4>選擇居住城市(CN)</h4>
 <ul>
 <li>北京</li>
 <li>上海</li>
 <li>廣州</li>
 <li>鐵嶺</li>
 </ul>

ul應用場景:

導航條
商品列表等
新聞列表

注意事項:

其實ul還有一個type屬性, 可以修改先導符號的樣式, 取值有disc、square、circle幾種
但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了
這里指的無序是指對于主體來說內容沒有先后之分, 例如主題是"選擇居住城市(CN)"北京上海都是中國的城市, 無論誰放在前面它都還是中國的城市的. 如果標題改為"中國霧霾排行", 那么就必須有嚴格的排名,北京必須寫在前面
瀏覽器會給無需列表自動添加先導符號但是一定一定千萬千萬要記住, ul的作用并不是給文字添加小圓點, 而是增加無序列表的語義
ul是一個組標簽, 一定是一坨一坨的出現, 也就是說li標簽不能單獨存在, 必須包裹在ul里面
由于ul和li是一個整體, 所以ul里面不推薦包裹其它標簽, 永遠記住ul里面最好只寫li標簽
雖然ul中推薦只能寫li標簽, 但是li標簽是一個容器標簽, li標簽中可以添加任意標簽, 甚至可以添加ul標簽
關注微信訂閱號：網頁設計輕松學

<ul>
 <li>
 好吃的 <ul>
 <li>牛奶</li>
 <li>面包</li>
 </ul>
 </li>
 <li>
 日用的 <ul>
 <li>毛巾</li>
 <li>牙膏</li>
 </ul>
 </li>
 </ul>

<h3 id="title3">有序列表(ordered list)</h3>

作用: 給一堆內容添加有序列表語義(一個有順序整體), 列表中的條目有先后之分
格式:

 <h4>中國房價排行</h4>
 <ol>
 <li>北京</li>
 <li>上海</li>
 <li>廣州</li>
 <li>鐵嶺</li>
 </ol>

ol應用場景:

xxx排行榜
其實ol應用場景并不多, 因為能用ol做的用ul都能做

注意事項:

ol和ul就是語義不一樣，怎么使用都是一樣的以及注意點都一樣
其實ul還有兩個常見屬性start、type屬性, 可以修改先導符號的樣式和序號
但是由于樣式將來都是通過css來完成, 所以這里就不給大家介紹了

<h3 id="title4">定義列表(definition list)</h3>

作用: 給一堆內容添加列表語義, 通過dt羅列出列表的條目, 然后再通過dd給每個條目進行相應的描述
格式:

dt英文definition title, 翻譯為定義標題
dd英文definition description, 翻譯為定義描述信息

 <dl>
 <dt>北京</dt>
 <dd>國家的首都, 看升國旗的地方</dd>
 <dt>上海</dt>
 <dd>魔都, 遍地是黃金的地方</dd>
 </dl>

關注微信訂閱號：網頁設計輕松學

dl應用場景:

網站底部相關信息
但凡看到一堆內容都是用于描述某一個內容的時候就要想到dl

注意事項:
- dl是一個組標簽, 一定是一坨一坨的出現, 也就是說dt和dd標簽不能單獨存在, 必須包裹在dl里面

由于dl和dt、dd是一個整體, 所以dl里面不推薦包裹其它標簽
dd和dt和li標簽一樣是容器標簽, 里面可以添加任意標簽
定義列表非常靈活, 可以給一個dt配置多個dd, 但是最好不要出現多個dt對應一個dd, dd的語義是描述離它最近的一個dt, 所以其它dt相當于沒有描述, 而定義列表存在的意義就是既可以列出每一個條目又可以對每一個條目進行描述
定義列表非常靈活, 可以將多個dt+dd組合拆分為多個dl

在線咨詢

上一篇：面對收費文章，如何免費復制，一招教你
下一篇：在HTML頁面中嵌入其他頁面的方法-零基礎自學網頁制作

您的項目需求

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

整合營銷服務商

前端入門-html 列表

無序列表 —— ul

有序列表 —— ol

定義列表——dl

列表的嵌套

總結

您的項目需求