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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。