您的位置：首页 > Web前端 > HTML5

HTML5基础09----HTML5列表的使用

2015-07-26 15:25 519 查看

<!DOCTYPE html>
<!--HTML5列表的使用-->
<html>
<head lang="zh">
<meta charset="UTF-8">
<title>这是一个列表</title>
</head>
<body>
<!--无序列表 disc实体圆，默认效果-->
<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>

<!--有序列表1表示123...显示默认-->
<ol type="1">
<li>苹果</li>
<li>香蕉</li>
<li>苹果</li>
</ol>
<!--有序列表start="10"表示从10开始...-->
<ol start="10">
<li>苹果</li>
<li>香蕉</li>
<li>苹果</li>
</ol>
<!--有序列表A表示ABC...显示-->
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>苹果</li>
</ol>
<!--有序列表a表示abc...显示-->
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>苹果</li>
</ol>
<!--有序列表i表示i,ii,iii...显示-->
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>苹果</li>
</ol>
<!--有序列表I表示I,II,III...显示-->
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>苹果</li>
</ol>

<!--无序列表的嵌套-->
<ul type="square">
<li>四大名著</li>
<ul>
<li>水浒传</li>
<li>红楼梦</li>
<li>西游记</li>
</ul>
<li>水果</li>
<ul>
<li>香蕉</li>
<li>橘子</li>
<li>橙子</li>
</ul>
<li>人类</li>
</ul>
<!--有序列表的嵌套-->
<ol type="square">
<li>四大名著</li>
<ol>
<li>水浒传</li>
<li>红楼梦</li>
<li>西游记</li>
</ol>
<li>水果</li>
<ol>
<li>香蕉</li>
<li>橘子</li>
<li>橙子</li>
</ol>
<li>人类</li>
</ol>
<!--自定义列表-->
<dl>
<dt>水果</dt>
<dd>水果种类多</dd>
<dt>水果</dt>
<dd>水果种类多</dd>
<dt>水果</dt>
<dd>水果种类多</dd>
</dl>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航