码迷,mamicode.com
首页 > Web开发 > 详细

HTML:列表

时间:2014-12-02 19:20:25      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:html

本文介绍html中列表的基本用法。

代码整理自w3school:http://www.w3school.com.cn

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>列表</title>

<body>
<h4>一个无序列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

<h4>一个有序列表:</h4>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<h4>自定义列表:</h4>
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

<hr/>

<!--不同类型的无序列表-->
<h3>不同类型的无序列表</h3>
<h4>Disc 项目符号列表:</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表:</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表:</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>不带任何符号的列表:</h4>
<ul type="none">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul> 

<hr/>
<!--不同类型的有序列表-->
<h3>不同类型的有序列表</h3>
<h4>数字列表:</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表:</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表:</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表:</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表:</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<hr/>
<!--嵌套列表-->
<div style="background-color:#8d8">
<h4>嵌套列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul type="circle">
       <li>红茶</li>
       <li>绿茶
         <ul>
           <li>中国茶</li>
           <li>非洲茶</li>
         </ul>
       </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</div>

<br/><br/>
</body>
</html>



HTML:列表

标签:html

原文地址:http://blog.csdn.net/books1958/article/details/41681431

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!