17站长网 网站首页 编程教程 Html教程 查看内容

HTML 列表

html 支持有序、无序和定义列表

html 无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记

无序列表使用 <ul> 标签

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

HTML 有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记

有序列表始于 <ol> 标签

每个列表项始于 <li> 标签

列表项项使用数字来标记

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

HTML 自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合

自定义列表以 <dl> 标签开始

每个自定义列表项以 <dt> 开始

每个自定义列表项的定义以 <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为默认值,列表项目标记此时被放置在文本以外,它将环绕文本在文本之外,inside列表项目旋转在文本以内,环绕文本对齐。

列表最重要的CSS属性便是list-style属性,它的语法如下:

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

list-style-image可定义列表前所使用图片,list-style-position属性取值含outside、inside;outside为默认值,列表项目标记此时被放置在文本以外,它将环绕文本在文本之外,inside列表项目旋转在文本以内,环绕文本对齐。

<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>关于主题</li>
  <li>关于形式</li>
  <li>关于内容</li></ul>
<h4>list-style-position为inside</h4>
<ul class="in">
  <li>关于主题</li>
  <li>关于形式</li>
  <li>关于内容</li>
 </ul>


若列表外标签<ul>或<dl>或<ol>的padding-left设置为0,且list-style-position为outside时,列表符号将不会显示,如上例中ul添加padding-left:0;将显示如下:

list-style-type为列表显示类型 ,它共有9种常见属性值:

  • disc:默认值。实心圆

  • circle:空心圆

  • square:实心方块

  • decimal:阿拉伯数字

  • lower-roman:小写罗马数字

  • upper-roman:大写罗马数字

  • lower-alpha:小写英文字母

  • upper-alpha:大写英文字母

  • none:不使用项目符号

我们可以看到,三种不同列表实际上只是list-style-type默认值不一样而已,通过设置list-style-type即可实现不同显示效果。

列表之间的嵌套

列表嵌套的html书写是不少人容易犯的错误,经常写错格式是这样的:

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

这里包括两处错误:一是<ul>后不允许直接跟文字,二是这里的文字“女性”应当在第二个<li>后。正确格式如下:

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

使用适合的标签进行合理的嵌套可以实现很多复杂的布局,比如常见的tab标签、滑动门等完全不需要使用js操作DOM即可完成,而且实现简单,语义性强。

下例以文章列表为例,html如下:

<h4>站点文章列表摘要</h4>
<dl>
  <dt>
    <a>文章一:JavaScript程序的优化</a>
  </dt>
  <dd>文章发布时间:2021-4-17</dd>
  <dt>
    <a>文章二:深入解析JavaScript中eval</a>
  </dt>
  <dd>文章发布时间:2021-4-17</dd>
  <dt>
    <a>文章三:实现sqlite高并发的问题</a>
  </dt>
  <dd>文章发布时间: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>

有用提示

列表项内部可以使用段落、换行符、图片、链接以及其他列表等。

返回顶部