HTML5编程教学7列表-绪飞博客网

无序列表基本格式

<ul> 用于定义无序列表

<li>内容放到这里面，根据内容来可以无限叠加</li>

</ul>结束标签

无序列表的type属性

无序列表的type属性有三大值：1.disc（默认值）；2.circle；3.square 这些属性值加到ul标签里面例：

</ul>

有序列表的基本格式

<ol>

</ol>

有序列表的type属性
整数（默认值）；2.大（小）写字母A\B\C…;3.大小写的罗马字母：i ii…;I\II\III
有序列表的start属性

定义列表的开始序号，比如第一项不是数字1，而是从数字10开始…..

有序列表的value属性

定义一个单个列表的序号……这个属性加在li标签里面例<li value=”3”>内容</li>

有序列表的value属性

自定义列表组的形成：由dl定义列表；dt定义列表项目；dd定义列表内容；

例：

<dl>

<dt>列表项目一</dt>

<dd>

内容

</dd>

</dl>

可以无限叠加

代码展示

<!DOCTYPE html>
<html>
	<head lang="zh-cn">
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<h1 align="left">无序列表</h1>
	     <ul type="disc">
	     	<!--这是默认值-->
			<li>内容</li>
			<li>内容</li>
			<li>内容</li>
		</ul>
		<ul type="circle">
			<!--空心圈-->
			<li>内容</li>
			<li>内容</li>
			<li>内容</li>
			</ul>
			
			<ul type="square">
				<!--实心正方形-->
		    <li>内容</li>
			<li>内容</li>
			<li>内容</li>
			</ul>
			
			<h1 align="left">有序列表</h1>
			<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><hr />
			<ol start="10">
				<!--第一项是从10开始-->
				<li>内容</li>
			<li>内容</li>
			<li>内容</li>
				
			</ol>
			
			<ol>
				
			<li>内容</li>
			<li>内容</li>
			<li value="10">内容</li>
			<!--单个开始这个就是从10开始-->
			<li>内容</li>
			<li>内容</li>
			<li>内容</li>
			<li value="20">内容</li>
			<!--单个开始这个就是从20开始-->
			<li>内容</li>
			<li>内容</li>
			<li>内容</li>
			<li value="30">内容</li>
			<!--单个开始这个就是从30开始-->
			<li>内容</li>
		    <li>内容</li>
			<li>内容</li>
			   <li>内容</li>
			<li value="40">内容</li>
			<!--单个开始这个就是从40开始-->
			   <li>内容</li>
			<li>内容</li>
			   <li>内容</li>
			<li>内容</li>
			
			</ol>
			
			<dl>
				<dt>列表项目一</dt>
				<dd>
					内容********************************************************
					********************************************************
				</dd>
					<dd>
					内容********************************************************
					********************************************************
				</dd>
					<dd>
					内容********************************************************
					********************************************************
				</dd>
					<dd>
					内容********************************************************
					********************************************************
				</dd>
				
			</dl>
	</body>
</html>

版权声明 1 本网站名称：绪飞博客网
2 本站永久网址：https://www.93bk.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ2168312466进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

前端编程教程
# html

HTML5编程教学7列表

请登录后发表评论