首页 专题 文章 代码 归档
html列表相关标签
2020.01.25 15:05 2020.01.25 15:05

1. 列表相关标签

1.1. 无序列表

无序列表是一个项目的序列。各项目前加有标记(通常是黑色的实心小圆圈)。 无序列表以<ul>标签开始。每个列表项目以<li>开始。

代码:

<ul>
    <li>hello world</li>
    <li>misiai</li>
    <li>kuan</li>
</ul>

效果:

截图-1579935388

无序列表的项目中可以加入段落、换行、图像,链接,其他的列表等等。

1.2. 有序列表

有序列表也是一个项目的序列。各项目前加有数字作标记。 有序列表以<ol>标签开始。每个列表项目以<li>开始。

截图-1579935487

1.3. 有序列表的不同形式

不同的表现形式,是通过给ol 加一个type属性,然后其下的li标签的前面就有不同的结果!

<h4>数字列表(默认):</h4>
<ol>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>
<h4>字母列表(type="A")</h4>
<ol type="A">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>
<h4>小写字母列表(type="a")</h4>
<ol type="a">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>
<h4>罗马字列表(type="I")</h4>
<ol type="I">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>
<h4>小写罗马字母列表(type="i")</h4>
<ol type="i">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ol>

截图-1579935648

1.4. 无序列表的不同形式

<h4>实心圆(type="disc")</h4>
<ul type="disc">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>
<h4>空心圆(type="circle")</h4>
<ul type="circle">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>
<h4>小方块(type="square")</h4>
<ul type="square">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>

效果:

截图-1579935767

本节阅读完毕! (分享
二维码图片 扫描关注我们哟