HTML & CSS设计与构建网站(第三章:列表)

142 阅读1分钟

第三章:列表

一、了解

  1. <ol></ol>:==有序==列表
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50"><!------------从50开始---------------->
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>
  1. <li></li>:每一个事件

  2. <ul></ul>:==无序==列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

二、不了解

  1. <dl></dl>: 标签定义一个描述列表。==类似于
        对里面东西进行定义==
    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
    
    <dl>
      <dt>Coffee</dt>
      <dd>Black hot drink</dd>
      <dt>Milk</dt>
      <dd>White cold drink</dd>
    </dl>
    
    </body>
    </html>
    

    image-20211025193436638

    1. <dt></dt>:变成==表头==,==无缩进==
    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
    
    <dl>
      <dt>Coffee</dt>
      <dd>Black hot drink</dd>
      <dt>Milk</dt>
      <dd>White cold drink</dd>
    </dl>
    
    </body>
    </html>
    

    image-20211025193518097

    1. <dd></dd>:==有缩进==见上图(Black hot drink)

    image-20211025193930306