HTML 列表实例
摘要：HTML 列表实例
无序列表
本例演示无序列表。
有序列表
本例演示有序列表。
不同类型的无序列表
本例演示一个无序列表。
不同类型的有序列表
本例演示不同类型的有序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更复杂的嵌套列表。
定义列表
本例演示一个定义列表。
本例演示无序列表。
html代码
运行代码
<html> <body> <h4>一个无序列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html>
本例演示有序列表。
html代码
运行代码
<!DOCTYPE html> <html> <body> <ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> </body> </html>
本例演示一个无序列表。
html代码
运行代码
<html> <body> <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> </body> </html>
本例演示不同类型的有序列表。
html代码
运行代码
<html> <body> <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> </body> </html>
本例演示如何嵌套列表。
html代码
运行代码
<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
本例演示更复杂的嵌套列表。
html代码
运行代码
<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
本例演示一个定义列表。
html代码
运行代码
<html> <body> <h2>一个定义列表：</h2> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> </body> </html>
相关文章