4、列表属性
F:\Html\MyHtmls1\list\html_list.html
4.1 简单的无序列表
- 使用ul标签实现无需列表
<html>
<body>
<!--简单的无序列表 -->
<h4>这是一个简单无序列表 ul标签表示无序 </h4>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
</body>
</html>
运行效果：
4.2.1、有序列表
- 使用ol来实现有序列表
<!--有序列表 -->
<html>
<body>
<h4>有序列表 ol标签表示有序</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ol>
</body>
</html>
运行效果：
4.2.2、定义起始位置的有序列表
- 使用ol标签实现有序，使用start标签定义起始位置
<!--定义起始位置的有序列表 -->
<html>
<body>
<h4>这是一个定义了起始位置的有序列表</h4>
<ol start="30">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ol>
</body>
</html>
运行效果：
4.3 不同类型的无序列表
- 使用type标签实现不同的类型效果 type的值为**“disc”、“circle”、“square”**
<!--不同类型的无序列表 -->
<html>
<body>
<h4>this list with type="disc":</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
<h4>this list with type="circle":</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
<h4>this list with type="square":</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
</body>
</html>
运行效果：
4.4 不同类型的有序列表
<html>
<body>
<!--不同类型的有序列表 -->
<h4>数字列表</h4>
<ol>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ol>
<h4>大写字母列表</h4>
<ol type="A">
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ol>
<h4>小写字母列表</h4>
<ol type="a">
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ol>
<h4>大写罗马字母列表</h4>
<ol type="I">
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ol>
<h4>小写罗马字母列表</h4>
<ol type="i">
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ol>
</body>
</html>
运行效果：
4.5 嵌套列表
<!--嵌套列表 -->
<html>
<body>
<h4>嵌套列表</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶
<ul>
<li>非洲红茶</li>
<li>非洲绿茶</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
运行效果：
4.5 定义列表
- 使用dl标签实现定义列表，dt标签是指标题，dd标签设置内容
<!--定义列表 -->
<html>
<body>
<h4>定义列表：</h4>
<dl>
<dt>计算机</dt>
<dd>用来计算的机器</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置</dd>
</dl>
</body>
</html>
运行效果：
扫一扫
1279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
