HTML列表详解-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

HTML列表分为有序列表、无序列表和定义列表

无序列表例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <h4>无序列表</h4>
    <ul>
        <li>苹果</li>
        <li>桔子</li>
        <li>香蕉</li>
    </ul>
</body>
</html>

有序列表例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <h4>有序列表，默认从1开始</h4>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <h4>有序列表，自定义从几开始</h4>
    <ol start="35">
        <li>湖人</li>
        <li>太阳</li>
        <li>黄蜂</li>
    </ol>
</body>
</html>

无序列表标签<ul>，每个列表开始于<li>。

有序列表标签<ol>，每个列表开始于<li>。

自定义列表以<dl>标签开始；每个表项以<dt>开始；表项对应的内容标签<dd>。

示例如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <dl>
        <dt>咖啡</dt>
        <dd>喝起来很苦</dd>
        <dt>苹果</dt>
        <dd>吃起来很甜</dd>
        <dt>桔子</dt>
        <dd>尝起来很酸</dd>
    </dl>
</body>
</html>

3.不同类型的无序列表，通过设置<ul>标签的type属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <ul type="disc">
        <li>苹果</li>
    </ul>
    <ul type="circle">
        <li>桔子</li>
    </ul>
    <ul type="square">
        <li>香蕉</li>
    </ul>
</body>
</html>

4.不同类型的有序列表，通过设置<ol>标签的type属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<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="i">
    <li>苹果</li>
    <li>香蕉</li>
    <li>桔子</li>
</ol>
</body>
</html>

5.嵌套列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <h4>嵌套列表</h4>
    <ul>
        <li>咖啡</li>
        <li>茶</li>
        <ul>
            <li>红茶</li>
            <li>绿茶</li>
            <ul>
                <li>杭州绿茶</li>
                <li>成都绿茶</li>
            </ul>
        </ul>
        <li>牛奶</li>
    </ul>
</body>
</html>

6. 自定义列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <h4>自定义列表</h4>
    <dl>
        <dt>纸</dt>
        <dd>最早出现在中国......</dd>
        <dt>柚子</dt>
        <dd>以福建蜜柚最为出名......</dd>
    </dl>
    
</body>
</html>

转载于:https://my.oschina.net/u/2312022/blog/536124