html中的列表

HTML中列表中共有三种：有序列表、无序列表和定义列表。

1、有序列表是一列使用数字进行标记的项目，它使用<li>包含于<ol>标签（ordered lists）内；



<ol>
<li>开始部分</li>
<li>次要部分</li>
<li>结尾部分</li>
</ol>




2、无序列表是一组使用黑点状进行标记的项目，它使用<li>包含在<ul>标签（unordered lists）内；




<ul>
<li>关于主题</li>
<li>关于形式</li>
<li>关于内容</li>
</ul>




3、定义列表语义上表示项目及其注释的组合，它以<dl>标签（definition lists）开始，自定义列表项以<dt>（definition title）开始，自定义列表项的定义以<dd>（definition description）开始。 




<dl>
<dt>CSS</dt>
<dd>CSS概念</dd>
<dd>CSS应用</dd>
<dd>CSS hacks</dd>
</dl>




从语义上来讲，三组标签分别对应不同具有含义的列表：无序列表适合成员之间无级别顺序关系的情形；有序列表适合各项目之间存在顺序关系的情形；定义列表用于一个术语名对应多重定义或者多个术语名同一个给出的定义，也可以只有术语名称或只有定义，也就是说<dt>与<dd>在其中数量不限、对应关系不限。


列表的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即可完成，而且实现简单，语义性强。例如还有这篇文章定义列表dl打造图文并茂的CSS列表元素。


下例以文章列表为例，html如下：






<h4>www.51obj.cn站点文章列表摘要</h4>
<dl>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章一：javascript程序的优化</a></dt>
<dd>文章发布时间:2010-4-17</dd>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章二：深入解析javascript中eval</a></dt>
<dd>文章发布时间：2010-4-17</dd>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章三：实现SQLite高并发的问题</a></dt>
<dd>文章发布时间:2010-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>




效果图：


				


				
时间： 2024-10-02 12:42:16

		
		


		


	

	
	

		


		
html中的列表的相关文章


						

		

			

                Python中操作列表之List.append()方法的使用
			

		

		

									

				  这篇文章主要介绍了在Python中操作列表之List.append()方法的使用,是Python入门学习中的基础知识,需要的朋友可以参考下 append()方法追加传递obj到现有的列表. 语法 以下是append()方法的语法: ? 1 list.append(obj) 参数 obj -- 这是在列表中要追加的对象. 返回值 此方法不返回任何值,但更新现有的列表. 例子 下面的例子显示了append()方法的使用. ? 1 2 3 4 5 #!/usr/bin/python   aList			

		

	

				

		

			

                在Python中操作列表之list.extend()方法的使用
			

		

		

									

				  这篇文章主要介绍了在Python中操作列表之list.extend()方法的使用,是Python入门学习中的基础知识,需要的朋友可以参考下 extend()方法追加序列内容到列表. 语法 以下是extend()方法的语法: ? 1 list.extend(seq) 参数 seq -- 这是列表的元素 返回值 此方法不返回任何值,但添加内容到现有列表中 例子 下面的例子显示了extend()方法的使用 ? 1 2 3 4 5 6 7 #!/usr/bin/python   aList = [1			

		

	

				

		

			

                在Python中操作列表之List.pop()方法的使用
			

		

		

									

				  这篇文章主要介绍了在Python中操作列表之List.pop()方法的使用,是Python入门中的基础知识,尤其该方法的返回值在Python编程中经常被灵活运用,需要的朋友可以参考下 pop()方法从列表移除并返回最后一个对象或obj. 语法 以下是pop()方法的语法: ? 1 list.pop(obj=list[-1]) 参数 obj -- 这是一个可选参数,该对象的索引可以从该列表中删除 返回值 此方法返回从列表中移除对象 例子 下面的例子显示了pop()方法的使用 ? 1 2 3 4			

		

	

				

		

			

                Excel中使用列表法制作动态下拉菜单的方法
			

		

		

									

				  Excel中使用列表法制作动态下拉菜单的方法           谈起建立动态数据有效性,很多小伙伴会立刻想起OFFSET函数.然而利用OFFSET函数制作动态数据有效性,对于函数小白来说,颇难理解.且不易操作.今天大家分享一个简便的方法:Excel中使用列表法制作动态下拉菜单的方法. 如上图,E列是员工花名册名单,在B列建立数据有效性,要求数据有效性的列表菜单,可以根据员工花名册人名的增加而有相应的变化.--简而言之,就是建立一个简易的动态数据有效性喽. 1.创建"表" 单击将作			

		

	

				

		

			

                在Python中处理列表之reverse()方法的使用教程
			

		

		

									

				  这篇文章主要介绍了在Python中处理列表之reverse()方法的使用教程,是Python入门中的基础知识,需要的朋友可以参考下 reverse()方法代替逆转列表对象. 语法 以下是reverse()方法的语法: ? 1 list.reverse() 参数 NA 返回值 此方法不返回任何值,但反转列表中的给定对象. 例子 下面的例子显示了reverse()方法的使用. ? 1 2 3 4 5 6 #!/usr/bin/python   aList = [136, 'xyz', 'zara			

		

	

				

		

			

                iOS中关于列表滚动流畅的一些探讨
			

		

		

									

				本文讲的是iOS中关于列表滚动流畅的一些探讨,近些年,App 越来越推崇体验至上,随随便便乱写一通的话已经很难让用户买帐了,顺滑的列表便是其中很重要的一点.如果一个 App 的页面滚动起来总是卡顿卡顿的,轻则被当作反面教材来吐槽或者衬托"我们的 App balabala-",重则直接卸载.正好最近在优化这一块儿,总结记录下. 如果说有什么好的博客文章推荐,ibireme 的 iOS 保持界面流畅的技巧 这篇堪称业界毒瘤,墙裂推荐反复阅读.这篇文章中讲解了很多的优化点,我自己总结了下收益			

		

	

				

		

			

                mfc 属性页 列表控件-属性页中添加列表框控件，当我点击下一步时，想让列表显示信息
			

		

		

									

				问题描述 属性页中添加列表框控件,当我点击下一步时,想让列表显示信息 我在用向导模式实现数据库导入,想实现当点击下一步时,能够在列表控件中添加信息,这个信息提示着数据库导入到哪了,与进度条差不多,可是我在OnWizardNext()中添加m_ListCtrl.InsertItem(1,"数据库导入中,请稍后.....");,一开始并不显示着一行信息,等数据库导入完成后才跳出信息,请问我该怎么弄			

		

	

				

		

			

                python 八皇后中的列表问题
			

		

		

									

				问题描述 python 八皇后中的列表问题 我这里写了一个简单的八皇后程序,用的是最笨的算法,大家就不要吐槽我的算法了,问题是我的保存所有解法的总列表不正常,列表中所有元素都一样,劳烦大家看下问题出在哪 import time import os def check(list_): #这个函数用来检查当前位置是否合法 for i in range(0,len(list_)-1): if len(list_)==1 : continue for j in range(i+1,len(list_))			

		

	

				

		

			

                算法实现-如何根据A文档中关键词列表提取B文档信息？
			

		

		

									

				问题描述 如何根据A文档中关键词列表提取B文档信息? 假设A文档有关键词列表如下 白日依山尽 天将降大任于斯人也 将进酒 B文档是一篇长文章,如何快速地判断B文档中是否包含上述关键词?假设A文档的关键词有几万个,有现成的工具的吗,最好是java的.thx~帮忙解决的如果在北京的朋友请吃饭,呵呵~再次谢谢各位! 解决方案 用lucene 分词查询试试.			

		

	

				

		

			

                Qt qml中listview 列表视图控件（下拉刷新、上拉分页、滚动轴）_Android
			

		

		

									

				Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) 先给大家展示下效果图: [功能] 下拉刷新和上拉分页逻辑 /下拉刷新 /上拉更多 /滚动栏 /工具栏半拉显隐 Author: surfsky.cnblogs.com Lisence: MIT 请保留此文档声明 History: init. surfsky.cnblogs.com, 2015-01 add initPosition pro