初識HTML，HTML基本列表

時間 2019-11-11

標籤 html 基本列表欄目 HTML 简体版

原文原文鏈接

HTML基本列表有三類，有序列表，無序列表和自定義列表。下面做簡單介紹：css

有序列表
1.1 基本效果：

1.2 代碼：
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>有序列表</title>
    </head>
    <body>
        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
    </body>
</html>
```
1.3 說明
在代碼中咱們寫的列表中沒有前面的編號，而顯示時有編號。這就是有序列表。
使用時，ol標籤爲雙標籤，標籤中的全部內容寫在li標籤中，不能寫在外面。（固然了，也能夠寫在外面，高版本瀏覽器能夠揣測你的代碼意思），其中的內容能夠是其餘的部分，好比a、img等等標籤。
1.4 屬性
start：規定起始號爲多少。
值：任意可表明編號的類型，如：html
```
<ol start="5">
```
type：改變編號的類型、
值：1；A；a；I；i；等，如：瀏覽器
```
<ol type="a">
```

無序列表
2.1 基本效果

2.2 代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>無序列表</title>
    </head>
    <body>
        <ul>
            <li>無序列表</li>
            <li>無序列表</li>
            <li>無序列表</li>
        </ul>
    </body>
</html>

2.3 說明spa

代碼中咱們沒有寫實心圓點，顯示時有。可根據屬性值來改變
使用時同有序列表同樣，須要將內容放入ul標籤中的li標籤裏。
2.4 屬性
type：改變列表前面的顯示樣式。
值：disc，默認樣式，實心圓點顯示；
square，實心正方形；
circle，空心圓點。

自定義列表
3.1 基本樣式

3.2 代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定義列表</title>
    </head>
    <body>
        <dl>
            <dt>定義自定義標籤</dt>
            <dd>描述自定義標籤</dd>
            <dt>定義自定義標籤</dt>
            <dd>描述自定義標籤</dd>
        </dl>
    </body>
</html>

使用技巧，有序列表能夠用來實現某些排行榜的排名，無需咱們手動添加編號實現，同時也會利於後期維護。無序列表不少時候是用css取消了前面的圓點即：code

<ul style="list-style: none;">
    <li>無序列表</li>
    <li>無序列表</li>
    <li>無序列表</li>
</ul>

顯示效果爲
htm

不少時候還會利用到其餘方式，共同實現導航欄的編寫。blog

1. HTML---初識HTML
2. 【HTML】初識HTML
3. html初識form表單
4. html基本知識
5. HTML基本知識
6. 初識HTML、HTML標籤
7. HTML第一講初識HTML
8. html初識（一）
9. HTML初識
10. 1、html初識
更多相關文章...
• ASP.NET Web Pages - HTML 表單 - ASP.NET 教程
• ASP.NET Web Forms - HTML 表單 - ASP.NET 教程
• Kotlin學習（二）基本類型
• Kotlin學習（一）基本語法

相關標籤/搜索

html&html

html

html+css+javascript+html

每日一句

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