HTML自学之旅(五)列表

这个内容较少,也很简单

<html>
<body>
<h4>无序列表:列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。</h4>
<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

<h4>有序列表:列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。</h4>
<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

<h4>有序列表:图片、链接以及其他列表等等。</h4>
<ol>
    <li>Coffee</li>
    <li>
    <img src="C:\Users\Ideal\Desktop\^_^\webweb\img\鼓掌.gif"/>
    </li>
    <li>
    <a href="http://www.baidu.com">点击这里进入百度</a>
    </li>
    <li>
        <ul>
            <li>Coffee</li>
            <li>Milk</li>
        </ul>
    </li>
</ol>
<h4>定义列表:自定义列表不仅仅是一列项目,而是项目及其注释的组合。</h4>
<dl>
<dt>Coffee</dt>
    <dd>Black hot dring</dd>
<dt>Milk</dt>
    <dd>White cold dring</dd>
</dl>

<h4>不同类型的无序列表:</h4>
<ul type="disc">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange</li>
</ul>

<ul type="circle">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange</li>
</ul>

<ul type="square">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange</li>
</ul>

<h4>不同类型的无序列表:</h4>
<p>默认为数字列表</p>
<ol>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange</li>
</ol>
<p>大写字母列表</p>
<ol type="A">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange</li>
</ol>
<p>小写字母列表</p>
<ol type="a">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange</li>
</ol>
<p>大写罗马数字列表</p>
<ol type="I">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange</li>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange</li>
</ol>
<p>小写罗马数字列表</p>
<ol type="i">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange</li>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange</li>
</ol>

<h4>嵌套列表:</h4>
<ul>
    <li>咖啡</li>
    <li><ul>
            <li>红茶</li>
            <li>绿茶</li>
            <ul>
                <li>中国茶</li>
                <li>非洲茶</li>
            </ul>
        </ul>
    </li>
    <li>牛奶</li>
    <li>果汁</li>
</ul>

<h4>再来一个定义列表:</h4>
<dl>
    <dt>计算机哇</dt>
        <dd>是一个很强大的东西<dd>
    <dt>电脑哇</dt>
        <dd>其实跟计算机是一个东西哇<dd>
</dl>

</body>
</html>

编写代码的时候还是应该注意层次,慢慢养成习惯哈

原文地址:https://www.cnblogs.com/lx09110718/p/2839586.html