HTML列表分类：
无序列表，不考虑排序，<ul>+<li>，常用于导航
有序列表，结构化列表，考虑排序，<ol>+<li>
定义列表，当作字典或术语，包含定义和描述，<dl>+<dt>+<dd>（其中，dl表示定义列表，dt定义术语，dd定义描述）
选择列表，简易说明
有序列表
|
无序列表
|
<ul type=…>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
……
</ul>无序列表中type属性的常用值有三个，它们呈现的效果不同:
小黑点:disc（默认值）；
方块:square；
空心圆:circle。
举例：
<ul type=”square”>
<li>吉林联通百兆独享:$899 /月</li>
<li>江苏电信特价百兆:$1099 /月</li>
<li>山东联通百兆独享:$899 /月</li>
<li>黑龙江联通百兆独享:$899 /月</li>
</ul>有序列表ol即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，其基本语法格式如下：
<ol type="～～" start="~~">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>……</li>
</ol>有序列表其属性有 type 和 start 、HTML5新增reversed
（1）、type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。type的值表示有序列表项目符号的类型。
| type类型 | 描述 |
| Type=1 | 表示列表项目用数字表示（1,2,3…..） |
| Type=a | 表示列表项目用小写字母表示(a,b,c..) |
| Type=A | 表示列表项目用大写字母表示(A,B,C..) |
| Type=i | 表示列表项目用小写罗马数字表示(i,ii,iii….) |
| Type=I | 表示列表项目用大写罗马数字表示(I,II,III…) |
（2）、start是编号开始的数字，如start=2则编号从2开始，如果从1开始可以省略。start的值表示项目开始的数值。
或是在<li>标签中设定value＝”n”改变列表行项目的特定编号，例如<li value=”7″>。使用这些属性，把它们放在<ol>或<li>的的初始标签中。
（3）、reversed 属性是逻辑属性。是 HTML5 中的新属性。当使用该属性时，它规定列表属性为降序 (9, 8, 7...)，而不是升序 (1, 2, 3...)。
提示：目前只有 Chrome 和 Safari 6 支持 ol 元素的 reversed 属性。
举例：
<ol type=”a” start=”3″>
<li>吉林联通百兆独享:$899 /月</li>
<li>江苏电信特价百兆:$1099 /月</li>
<li>山东联通百兆独享:$899 /月</li>
<li>黑龙江联通百兆独享:$899 /月</li>
</ol><ol reversed>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<p><strong>注释：</strong>目前只有 Chrome 和 Safari 6 支持 ol 元素的 reversed 属性。</p><dl> <!--定义一个描述列表-->
<dt>名词1</dt> <!--定义一个项目/名字-->
<dd>名词1解释1</dd> <!--描述每一个项目/名字-->
<dd>名词1解释2</dd>
…
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
…
</dl>举例：
<dl>
<dt>YUNVM.COM吉林联通百兆独享特价!$899 /月</dt>
<dd>数据中心：吉林延边联通 </dd>
<dd>4 核CPU 4 GB内存 </dd>
<dd>100 Mbps带宽 120 GB存储 </dd>
</dl>
<dl>
<dt>YUNVM.COM江苏电信特价百兆降价了!$1099 /月</dt>
<dd>数据中心：江苏镇江电信 </dd>
<dd>4 核CPU 4 GB内存 </dd>
<dd>100 Mbps带宽 120 GB存储 </dd>
</dl>| Properties 属性 |
CSS Version 版本 |
Inherit From Parent 继承性 |
Description 简介 |
|---|---|---|---|
| list-style | CSS1 | 有 | 复合属性。设置列表项目相关内容 |
| list-style-image | CSS1 | 有 | 设置或检索作为对象的列表项标记的图像 |
| list-style-position | CSS1 | 有 | 设置或检索作为对象的列表项标记如何根据文本排列 |
| list-style-type | CSS1/2 | 有 | 设置或检索对象的列表项所使用的预设标记 |
list-style 简写属性在一个声明中设置所有的列表属性。
可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image.
可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
| 默认值： | disc outside none |
|---|---|
| 继承： | yes |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.listStyle="decimal inside" |
list-style：[ list-style-image ] || [ list-style-position ] || [ list-style-type ]
默认值：看独立属性自身
适用于：所有 display:list-item 的元素
继承性：有
动画性：否
计算值：看独立属性自身
<html>
<head>
<style type="text/css">
ul
{
list-style: square inside url('https://img-blog.csdn.net/20180704075535799?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjcyNTkw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70')
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>list-style-type：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
默认值：disc
适用于：所有 display:list-item 的元素
继承性：有
动画性：否
计算值：特定值
list-style-type 列表标记类型<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>list-style-type 列表标记类型</title>
<meta name="author" content="博文作者-李思雨" />
<style>
h1{font-size:16px;font-family:Arial;}
.disc{list-style-type:disc;}
.circle{list-style-type:circle;}
.square{list-style-type:square;}
.decimal{list-style-type:decimal;}
.decimal-leading-zero{list-style-type:decimal-leading-zero;}
.lower-roman{list-style-type:lower-roman;}
.upper-roman{list-style-type:upper-roman;}
.lower-alpha{list-style-type:lower-alpha;}
.upper-alpha{list-style-type:upper-alpha;}
.none{list-style-type:none;}
.armenian{list-style-type:armenian;}
.cjk-ideographic{list-style-type:cjk-ideographic;}
.georgian{list-style-type:georgian;}
.lower-greek{list-style-type:lower-greek;}
.hebrew{list-style-type:hebrew;}
.hiragana{list-style-type:hiragana;}
.hiragana-iroha{list-style-type:hiragana-iroha;}
.katakana{list-style-type:katakana;}
.katakana-iroha{list-style-type:katakana-iroha;}
.lower-latin{list-style-type:lower-latin;}
.upper-latin{list-style-type:upper-latin;}
</style>
</head>
<body>
<h1>1、disc：默认。标记是实心圆。</h1>
<ul class="disc">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>2、circle：标记是空心圆。</h1>
<ul class="circle">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>3、square：标记是实心方块。</h1>
<ul class="square">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>4、decimal：标记是数字。</h1>
<ul class="decimal">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>5、decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等)</h1>
<ul class="decimal-leading-zero">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>6、lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)</h1>
<ul class="lower-roman">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>7、upper-roman：大写罗马数字(I, II, III, IV, V, 等。)</h1>
<ul class="upper-roman">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>8、lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)</h1>
<ul class="lower-alpha">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>9、upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)</h1>
<ul class="upper-alpha">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>10、none：无标记。</h1>
<ul class="none">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>11、armenian：传统的亚美尼亚编号方式</h1>
<ul class="armenian">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>12、cjk-ideographic：简单的表意数字</h1>
<ul class="cjk-ideographic">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>13、georgian：传统的乔治亚编号方式(an, ban, gan, 等。)</h1>
<ul class="georgian">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>14、lower-greek：小写希腊字母(alpha, beta, gamma, 等。)</h1>
<ul class="lower-greek">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>15、hebrew：传统的希伯来编号方式</h1>
<ul class="hebrew">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>16、hiragana：标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）</h1>
<ul class="hiragana">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>17、hiragana-iroha：标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）</h1>
<ul class="hiragana-iroha">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>18、katakana：标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）</h1>
<ul class="katakana">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>19、katakana-iroha：标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）</h1>
<ul class="katakana-iroha">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>20、lower-latin：小写拉丁字母(a, b, c, d, e, 等。)</h1>
<ul class="lower-latin">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
<h1>21、upper-latin：大写拉丁字母(A, B, C, D, E, 等。)</h1>
<ul class="upper-latin">
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
<li>这是一个项目列表</li>
</ul>
</body>
</html>
list-style-image 属性使用图像来替换列表项的标记。
注意: 请始终规定一个 "list-style-type" 属性以防图像不可用。
| 默认值： | none |
|---|---|
| 继承： | yes |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.listStyleImage="url('/images/blueball.gif')" |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS list-style-image属性详解</title>
<style>
ul
{
list-style:square url("https://img-blog.csdn.net/20180704081041735?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjcyNTkw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70");
}
</style>
</head>
<body>
<h1>用list-style-image重置项目符号：</h1>
<ul class="test">
<li>列表项一</li>
<li>列表项一</li>
<li>列表项一</li>
<li>列表项一</li>
</ul>
</body>
</html>
list-style-position：outside | inside
默认值：outside
适用于：所有 display:list-item 的元素
继承性：有
动画性：否
计算值：特定值
列表位置
列表位置描述列表在何处显示。
基本格式如下：
list-style-position：参数
参数取值范围：
·inside：在BOX模型内部显示
·outside：在BOX模型外部显示
list-style-position属性指示如何相对于对象的内容绘制列表项标记。
| 默认值： | outside |
|---|---|
| 继承： | yes |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.listStylePosition="inside" |
<html>
<head>
<meta charset="utf-8">
<title>CSS list-style-position属性详解</title>
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
.inside{width:270px;}
.outside{width:270px;}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>该列表的 list-style-position 的值是 "inside"：
该列表的 list-style-position 的值是 "outside"：
在HTML中，﹤select﹥标签用于定义表单中的下拉列表，使用下拉列表可以节省页面大量空间，select的中文意思是选择，而用于定义下拉列表中的选项则是由﹤option﹥标签来完成的，option标签被包含在select标签中使用，闲话少说，马上来制作一个下拉列表：
<span STYLE="color:red">请问今天是星期几？</span>
<select NAME="week">
<option VALUE="Monday">星期一</option>
<option VALUE="Tuesday">星期二</option>
<option VALUE="Wednesday">星期三</option>
<option VALUE="Thursday">星期四</option>
<option VALUE="Friday">星期五</option>
<option VALUE="saturday">星期六</option>
<option VALUE="sunday">星期日</option>
</select><br />从上面代码中可以看到 select 标签中分别包含了七组 option 标签，每一组 option 标签中的内容都是可供用户输入的一个选项，打开浏览器效果会如右边显示 → 
可以看到这样就大大缩小了页面空间所占的位置，七组选项仅仅占用了一小部分地方就得到了解决。
在HTML5中，select元素新增了几个属性，下面就来看看select标签与option标签都包含了哪些属性吧！
，而你当设置option lable="星期一"，那么在选项中只会显示“星期一”，其它的字会被省略；第（八）段落主要讲解了select标签与option标签的使用，option标签能够在不带任何属性的情况下使用，但是通常需要value属性，该属性定义了发送到服务器的数据。请与 select 或 datalist 标签结合使用。放在其它地方，option标签是无意义的。