整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇介紹了html 中文本格式及段落等標簽，今天說下列表，什么是列表？它就是一種數據排列方式，以條列式的方式顯示文本，使讀者一目了然。列表主要有以下三種：
無序列表在每行開始位置顯示一個符號，語法如下：
<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>顯示效果：
有序列表使用數字或字母符號排列，表示文本按一定順序顯示，語法如下：
<!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>顯示效果：
不同以上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 超鏈接
列表是一個接一個顯示條目的首選方式，而不是使用<br>標記。完整的列表定義包括開始和結束標記，以及表示列表中每個條目的標記。
有三種類型的列表：有序列表、無序列表和定義列表。
無序列表是一個帶條目符號的列表，類似于菜單。
無序列表 - <ul> ... </ul>
ul標記定義無序列表的開始和結束，列表項包含在ul標記中。
無序列表項 - <li> ... </li>
li標記添加每個條目的文本，每個列表項必須有自己的li標記。
符號類型 <ul type="disc | circle | square">
默認情況下，瀏覽器將顯示圓形條目符號。這可以通過使用ul標記的type屬性來更改，這將更改整個列表的條目符號類型。
條目符號類型 <li type="?">
通過設置li標記的type屬性，可以為列表中的某個條目設置不同的符號類型。
以下是無序列表的示例：
瀏覽器顯示內容如下所示：
天找一個 ? 點的符號 • 查到了這張表，分享出來。
HTML符號
1.特色的
| ? | © | ? | 版權標志 |
| | | | | 豎線，常用作菜單或導航中的分隔符 | |
| · | · | · | 圓點，有時被用來作為菜單分隔符 |
| ↑ | ↑ | ↑ | 上箭頭，常用作網頁“返回頁面頂部”標識 |
| | € | | 歐元標識 |
| 2 | ² | 2 | 上標2，數學中的平方，在數字處理中常用到，例如：10002 |
| ? | ½ | ? | 二分之一 |
| ? | ♥ | ? | 心型，用來表達你的心 |
2常用的
| | 空格 | ||
| & | & | & | and符號，與 |
| " | " | " | 引號 |
| ? | © | ? | 版權標志 |
| ? | ® | ? | 注冊標志 |
| ? | ™ | ? | 商標標志 |
| “ | “ | “ | 左雙引號 |
| ” | ” | ” | 右雙引號 |
| ‘ | ‘ | ‘ | 做單引號 |
| ’ | ’ | ’ | 右單引號 |
| ? | « | ? | 左三角雙引號 |
| ? | » | ? | 右三角雙引號 |
| ? | ‹ | ? | 左三角單引號 |
| ? | › | ? | 右三角單引號 |
| § | § | § | 章節標志 |
| ? | ¶ | ? | 段落標志 |
| ? | • | ? | 列表圓點（大） |
| · | · | · | 列表圓點（中） |
| … | … | … | 省略號 |
| | | | | 豎線 | |
| | | ¦ | | | 斷的豎線 |
| – | – | – | 短破折號 |
| — | — | — | 長破折號 |
3.貨幣類
| ¤ | ¤ | ¤ | 一般貨幣符號 |
| $ | $ | 美元符號 | |
| ￠ | ¢ | ￠ | 分 |
| ￡ | £ | ￡ | 英鎊 |
| ￥ | ¥ | ￥ | 日元 |
| | € | | 歐元 |
4 數學類
| < | < | < | 小于號 |
| > | > | > | 大于號 |
| ≤ | ≤ | ≤ | 小于等于號 |
| ≥ | ≥ | ≥ | 大于等于號 |
| × | × | × | 乘號 |
| ÷ | ÷ | ÷ | 除號 |
| ? | − | ? | 減號 |
| ± | ± | ± | 加/減 號 |
| ≠ | ≠ | ≠ | 不等于號 |
| 1 | ¹ | 1 | 上標1 |
| 2 | ² | 2 | 上標2 |
| 3 | ³ | 3 | 上標3 |
| ? | ½ | ? | 二分之一 |
| ? | ¼ | ? | 四分之一 |
| ? | ¾ | ? | 四分之三 |
| ‰ | ‰ | ‰ | 千分率 |
| ° | ° | ° | 度 |
| √ | √ | √ | 平方根 |
| ∞ | ∞ | ∞ | 無限大 |
5.方向類
| ← | ← | ← | 左箭頭 |
| ↑ | ↑ | ↑ | 上箭頭 |
| → | → | → | 右箭頭 |
| ↓ | ↓ | ↓ | 下箭頭 |
| ? | ↔ | ? | 左右箭頭 |
| ? | ↵ | ? | 回車箭頭 |
| ? | ⌈ | ? | 左上限 |
| ? | ⌉ | ? | 右上限 |
| ? | ⌊ | ? | 左下限 |
| ? | ⌋ | ? | 右下限 |
6 其它
| ? | ♠ | ? | 黑桃 |
| ? | ♣ | ? | 梅花 |
| ? | ♥ | ? | 紅桃，心 |
| ? | ♦ | ? | 方塊牌 |
| ? | ◊ | ? | 菱形 |
| ? | † | ? | 匕首 |
| ? | ‡ | ? | 雙劍號 |
| ? | ¡ | ? | 反向感嘆號 |
| ? | ¿ | ? | 反向問號 |
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
