HTML --列表

时间 2019-11-20

标签 html 列表栏目 HTML 繁體版

原文原文链接

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

无序列表例子code

<!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>

有序列表例子htm

<!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>

2.utf-8

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

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

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

示例以下:meta

<!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属性di

<!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>