现在的位置: 首页 > 综合 > 正文

HTML:列表

2018年01月08日 ⁄ 综合 ⁄ 共 1472字 ⁄ 字号 评论关闭

本文介绍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>

抱歉!评论已关闭.