html5 列表表格学习笔记

LRainner

发布于 2020-07-16 22:54:09

1K0

发布于 2020-07-16 22:54:09

1.无序列表

ul：一个无序列表项目
li：列表中一个单独的项

<body>
    <ul>
      <li>你</li>
      <li>我</li>
      <li>他</li>
    </ul>
  </body>

<body>
    <ul>
      <li>你</li>
      <ul>
        <li>漂亮</li>
      </ul>
      <li>我</li>
      <ul>
        <li>帅</li>
      </ul>
    </ul>
  </body>

2.有序列表

ol：一个有序列表项目
li：列表中一个单独的项

 <body>
    <ol>
      <li>你</li>
      <li>我</li>
      <li>他</li>
    </ol>
  </body>

3.自定义列表

dl：definition list 定义列表
dt：定义列表中的项目，即术语部分
dd：项目的定义部分，即术语的描述

  <body>
    <dl>
      <dt>我</dt>
      <dd>真的很帅的那种</dd>
      <dt>你</dt>
      <dd>真的很漂亮的那种</dd>
    </dl>
  </body>

表格

table：表格
caption：表标题
tr：行
td：单元格
th：列标题

 <body>
    <table>
      <caption>
        啦啦啦
      </caption>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>你</td>
        <td>女</td>
        <td>18</td>
      </tr>
      <tr>
        <td>我</td>
        <td>男</td>
        <td>19</td>
      </tr>
    </table>
  </body>

合并列(colspan)

 <body>
    <table>
      <caption>
        啦啦啦
      </caption>
      <tr>
        <th>姓名</th>
        <th colspan="2">em</th>
      </tr>
      <tr>
        <td>你</td>
        <td>年轻</td>
        <td>漂亮</td>
      </tr>
      <tr>
        <td>我</td>
        <td>幽默</td>
        <td>帅气</td>
      </tr>
    </table>
  </body>

合并列(rowspan)

<body>
    <table>
      <caption>
        啦啦啦
      </caption>
      <tr>
        <th>姓名</th>
        <th colspan="2">em</th>
      </tr>
      <tr>
        <td>你</td>
        <td rowspan="2">漂亮</td>
        <td rowspan="2">年轻</td>
      </tr>
      <tr>
        <td>我</td>
      </tr>
    </table>
  </body>