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

HTML学习笔记（六）列表

2016-03-31 17:33 405 查看

无序列表

无序列表是一个项目的列表，通过粗体圆点、空心圆点等进行标记。默认为粗体小圆点。

无序列表 <ul> 标签。列表项 <li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

小栗子：（不同类型的无序列表）

<html>
<body>
<h5>type="cirle"的列表：</h5>
<ul type="circle">
<li>橘子</li>
<li>芒果</li>
<li>葡萄</li>
</ul>
<h5>type="disc"的列表：(默认)</h5>
<ul type="disc">
<li>绘画</li>
<li>唱歌</li>
<li>骑行</li>
</ul>
<h5>type="square"的列表：</h5>
<ul type="square">
<li>程序猿</li>
<li>攻城狮</li>
<li>搬砖的</li>
</ul>
</body>
</html>
图示：





有序列表

有序列表也是一列项目，列表项目使用数字进行标记。

有序列表
<ol> 标签。每个列表项 <li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等。

小栗子：（不同类型的有序列表）

<html>
<body>
<h5>数字形式标记：(默认)</h5>
<ol>
<li>枯藤</li>
<li>老树</li>
<li>昏鸦</li>
</ol>
<h5>大写字母形式标记：</h5>
<ol type="A">
<li>小桥</li>
<li>流水</li>
<li>人家</li>
</ol>
<h5>小写字母形式标记：</h5>
<ol type="a">
<li>古道</li>
<li>西风</li>
<li>瘦马</li>
</ol>
<h5>大写罗马字母标记：</h5>
<ol type="I">
<li>绘画</li>
<li>唱歌</li>
<li>骑行</li>
</ol>
<h5>小写罗马字母标记：</h5>
<ol type="i">
<li>芒果</li>
<li>橘子</li>
<li>葡萄</li>
</ol>
</body>
</html>
图示：



定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表<dl>
标签。自定义列表项 <dt>标签 。自定义列表项的描述 <dd>
标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等。
<html>
<body>
<h4自定义列表：></h4>
<dl>
<dt>程序猿</dt>
<dd>一个神奇的职业，俗称码农...</dd>
<dt>攻城狮</dt>
<dd>一个神奇的职业，日常以搬砖为主...</dd>
</dl>
</body>
</html>



列表的嵌套：

小栗子：

<html>
<body>
<ul type="disc">
<li>北京</li>
<li>广州
<ul type="circle">
<li>天河</li>
<li>萝岗</li>
<li>海珠</li>
</ul>
</li>
<li>上海</li>
</ul>
</body>
</html>
图示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航