网页列表

程序员文章站 2022-03-08 17:04:25

...

HTML列表分类：

无序列表，不考虑排序，<ul>+<li>，常用于导航

有序列表，结构化列表，考虑排序，<ol>+<li>

定义列表，当作字典或术语，包含定义和描述，<dl>+<dt>+<dd>（其中，dl表示定义列表，dt定义术语，dd定义描述）

选择列表，简易说明

网页列表

HTML 列表

有序列表

第一个列表项
第二个列表项
第三个列表项

无序列表

列表项
列表项
列表项

（一）HTML无序列表ul

无序列表ul的各个列表项之间没有顺序级别之分，是并列的，其基本语法格式如下：

<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>

（二）HTML有序列表ol

有序列表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>

（三）HTML自定义列表dl

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<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>

CSS列表：css列表属性可以设置、改变列表项标志或者将图像作为列表项标志。

列表 List

Properties 属性	CSS Version 版本	Inherit From Parent 继承性	Description 简介
list-style	CSS1	有	复合属性。设置列表项目相关内容
list-style-image	CSS1	有	设置或检索作为对象的列表项标记的图像
list-style-position	CSS1	有	设置或检索作为对象的列表项标记如何根据文本排列
list-style-type	CSS1/2	有	设置或检索对象的列表项所使用的预设标记

（四）CSS列表list-style属性

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：[ list-style-image ] || [ list-style-position ] || [ list-style-type ]

默认值：看独立属性自身

适用于：所有 display:list-item 的元素

继承性：有

动画性：否

计算值：看独立属性自身

list-style的取值介绍

[ list-style-image ]：: 设置或检索作为对象的列表项标记的图像
[ list-style-position ]：: 设置或检索作为对象的列表项标记如何根据文本排列
[ list-style-type ]：: 设置或检索对象的列表项所使用的预设标记

list-style的使用说明

复合属性。设置列表项目相关内容

对应的脚本特性为listStyle。

网页列表

<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>

网页列表

（五）CSS列表list-style-type属性列表标记

list-style-type的具体语法

默认值：disc

适用于：所有 display:list-item 的元素

继承性：有

动画性：否

计算值：特定值

list-style-type的取值介绍

disc：: 实心圆(CSS1)
circle：: 空心圆(CSS1)
square：: 实心方块(CSS1)
decimal：: 阿拉伯数字(CSS1)
lower-roman：: 小写罗马数字(CSS1)
upper-roman：: 大写罗马数字(CSS1)
lower-alpha：: 小写英文字母(CSS1)
upper-alpha：: 大写英文字母(CSS1)
none：: 不使用项目符号(CSS1)
armenian：: 传统的亚美尼亚数字(CSS2)
cjk-ideographic：: 浅白的表意数字(CSS2)
georgian：: 传统的乔治数字(CSS2)
lower-greek：: 基本的希腊小写字母(CSS2)
hebrew：: 传统的希伯莱数字(CSS2)
hiragana：: 日文平假名字符(CSS2)
hiragana-iroha：: 日文平假名序号(CSS2)
katakana：: 日文片假名字符(CSS2)
katakana-iroha：: 日文片假名序号(CSS2)
lower-latin：: 小写拉丁字母(CSS2)
upper-latin：: 大写拉丁字母(CSS2)

list-style-type的使用说明

设置或检索对象的列表项所使用的预设标记。

若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。
仅作用于具有display值等于list-item的对象（如li对象）。
注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。
对应的脚本特性为listStyleType。

list-style-type 列表标记类型

list-steyl-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>

（六）CSS列表list-style-image属性

list-style-image的具体语法

list-style-image：none | <url>

默认值：none

适用于：所有 display:list-item 的元素

继承性：有

动画性：否

计算值：图像计算值或none

list-style-image的取值介绍

none：: 不指定图像，默认内容标记将被 list-style-type 代替。
<url>：: 使用绝对或相对地址指定列表项标记图像。如果图像地址无效，默认内容标记将被 list-style-type 代替。

list-style-image的使用说明

设置或检索作为对象的列表项标记的图像。

若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。
对应的脚本特性为listStyleImage。

list-style-image 属性使用图像来替换列表项的标记。

注意: 请始终规定一个 "list-style-type" 属性以防图像不可用。

默认值：	none
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStyleImage="url('/images/blueball.gif')"

用 list-style-image 重置列表项目标记符号栗子

网页列表

<!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>

（七）CSS列表list-style-type属性列表标记

list-style-position的具体语法

list-style-position：outside | inside

默认值：outside

适用于：所有 display:list-item 的元素

继承性：有

动画性：否

计算值：特定值

list-style-position的取值介绍

outside：: 列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside：: 列表项目标记放置在文本以内，且环绕文本根据标记对齐

列表位置

列表位置描述列表在何处显示。

基本格式如下：

list-style-position：参数

参数取值范围：

·inside：在BOX模型内部显示

·outside：在BOX模型外部显示

list-style-position的使用说明

设置或检索作为对象的列表项标记如何根据文本排列。

仅作用于具有display值等于list-item的对象（如li对象）。
注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。
对应的脚本特性为listStylePosition。

属性定义及使用说明

list-style-position属性指示如何相对于对象的内容绘制列表项标记。

网页列表

默认值：	outside
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.listStylePosition="inside"

用 list-style-position 确定列表位置栗子

<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"：

Earl Grey Tea - 一种黑颜色的茶
Jasmine Tea - 一种神奇的“全功能”茶
Honeybush Tea - 一种令人愉快的果味茶

该列表的 list-style-position 的值是 "outside"：

Earl Grey Tea - 一种黑颜色的茶
Jasmine Tea - 一种神奇的“全功能”茶
Honeybush Tea - 一种令人愉快的果味茶

（八）选择列表（下拉列表）

在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标签都包含了哪些属性吧！

select标签属性

name：这几天经常都能见到这个属性，就不用多解释了；属性代表下拉列表的名称；
size：规定下拉列表可见的选项数，选项值以数字表示；我们看到下拉列表在默认下只能看到一个选项，而如果select size="3"则代表下拉列表同时显示出三个选项；
multiple：规定同时选择多项；可配合size属性使用，在windows操作系统中，按住Ctrl键来选择多个选项；
disabled：属性会禁用下拉列表，被禁用的下拉列表既不可用，也不可点击。一般设置disabled属性是为了满足某些条件时才被使用，比如当用户点击按钮时才会恢复下拉列表的使用；
form：HTML5新属性。定义select字段所属的一个或多个表单；
required：HTML5新属性。规定用户在提交表单前必须选择一个下拉列表中的选项；
autofocus：HTML5新属性。规定在页面加载时下拉列表自动获得焦点；

option标签属性

value：value的值是发送到服务器的值；
lable：规定option选项更短的标注；例如在option标签中的内容为“星期一你要去哪里？”，没有设置lable属性时，会显示为，而你当设置option lable="星期一"，那么在选项中只会显示“星期一”，其它的字会被省略；
selected：规定默认选项；默认下，下拉列表选中的是第一个option标签中的内容，即（星期一），而如果给“星期三”这个选项加上selected，那么下拉列表则会选中“星期三”；
disabled：属性会禁用某个选项；被禁用的下拉列表既不可用，也不可点击；

第（八）段落主要讲解了select标签与option标签的使用，option标签能够在不带任何属性的情况下使用，但是通常需要value属性，该属性定义了发送到服务器的数据。请与 select 或 datalist 标签结合使用。放在其它地方，option标签是无意义的。

网页列表

HTML列表分类：

HTML 列表

有序列表

无序列表

（一）HTML无序列表ul

（二）HTML有序列表ol

（三）HTML自定义列表dl

CSS列表：css列表属性可以设置、改变列表项标志或者将图像作为列表项标志。

列表 List

（四）CSS列表list-style属性

list-style的具体语法

list-style的取值介绍

list-style的使用说明

（五）CSS列表list-style-type属性 列表标记

list-style-type的具体语法

list-style-type的取值介绍

list-style-type的使用说明

list-steyl-type 列表标记类型完整版

（六）CSS列表list-style-image属性

list-style-image的具体语法

list-style-image的取值介绍

list-style-image的使用说明

用 list-style-image 重置列表项目标记符号栗子

（七）CSS列表list-style-type属性 列表标记

list-style-position的具体语法

list-style-position的取值介绍

list-style-position的使用说明

属性定义及使用说明

用 list-style-position 确定列表位置栗子

（八）选择列表（下拉列表）

select标签属性

option标签属性

为你的html5网页添加音效示例

HTML5资源预加载(Link prefetch)详细介绍（给你的网页加速）

2014年圣诞节倒计时网页的制作过程

jquery自定义下拉列表示例

ASP.NET MVC5网站开发之添加删除重置密码修改密码列表浏览管理员篇2（六）

Python 列表及其应用

android开发实现列表控件滚动位置精确保存和恢复的方法(推荐)

jQuery+PHP+ajax实现微博加载更多内容列表功能

浏览器的网页点不动原因分析及解决

PHP网页游戏学习之Xnova(ogame)源码解读（十三）

（五）CSS列表list-style-type属性列表标记

（七）CSS列表list-style-type属性列表标记