1. 程式人生 > >html的列表標簽

html的列表標簽

例如 標記 層疊樣 style 應用 菜單 序列 type 分享

列表一般應用在布局中的新聞標題列表和文章標題列表以及網頁菜單等。

例如這個就是一個列表:

技術分享圖片

列表標簽有幾種,分別是有序列表,無序列表,定義列表。

  • 有序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--有序列表-->
    <ol>
        <li>有序列表的第一項</
li> <li>有序列表的第二項</li> <li>有序列表的第三項</li> </ol> </body> </html> 網頁效果如下: 1.有序列表的第一項 2.有序列表的第二項 3.有序列表的第三項
  • 無序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</
head> <body> <!--無序列表--> <ul> <li>無序列表的第一項</li> <li>無序列表的第二項</li> <li>無序列表的第三項</li> </ul> </body> </html> 網頁效果如下: ·有序列表的第一項 ·有序列表的第二項 ·有序列表的第三項
  • 定義列表
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <dl> <dt>html</dt> <dd>html是超文本標記語言,用於聲明網頁的內容和網頁的結構</dd> </dl> </body> </html> 網頁效果如下: html html是超文本標記語言,用於聲明網頁的內容和網頁的結構

列表中還可以有列表,也就是列表的嵌套。上面的三種列表都可以嵌套。

下面用定義列表嵌套進行演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <dl>
        <dt>html</dt>
            <dd>html是超文本標記語言,用於聲明網頁的內容和網頁的結構</dd>
        <dt>css</dt>
            <dd>css是層疊樣式表,用於聲明網頁的外觀和樣式</dd>
    </dl>
</body>
</html>

網頁效果如下:
html
      html是超文本標記語言,用於聲明網頁的內容和網頁的結構
css
      css是層疊樣式表,用於聲明網頁的外觀和樣式

html的列表標簽