html5——列表、表格

目录

列表 

无序列表

有序列表

自定义列表

表格 

基本结构 

示例 

表格的跨列 

表格的跨行 

列表 

无序列表

<ul>【声明无序列表】

      <li>河间驴肉火烧</li>【声明列表项】

      <li>唐山棋子烧饼</li>

      <li>邯郸豆沫</li>

      <li>石家庄金毛狮子鱼</li>

 </ul>

无序列表的特性：

1. 没有顺序，每个<li>标签独占一行（块元素） 
2. 默认<li>标签项前面有个实心小圆点
3. 一般用于无序类型的列表，如导航、侧边栏新闻、有规律    的图文组合模块等

有序列表

<ol>【声明有序列表】

  <li>驴肉火烧</li>【声明列表项】

  <li>京东煨肘子</li>

  <li>牛肉罩饼</li>

  <li>缸炉烧饼</li>

</ol>

有序列表的特性：

1. 有顺序，每个<li>标签独占一行（块元素） 
2. 默认<li>标签项前面有顺序标记
3. 一般用于排序类型的列表，如试卷、问卷选项等

自定义列表

<dl>【声明定义列表】

    <dt>水果</dt>【声明列表项】

    <dd>苹果</dd>【定义列表项内容】

    <dd>桃子</dd>

    <dd>李子</dd>

</dl>

 定义列表的特性：

1. 没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
2. 默认没有标记
3. 一般用于一个标题下有一个或多个列表项的情况

表格 

基本结构 

• 单元格 
• 行
• 列 

示例 

<table>【表格标签】

    <tr>【行标签】

         <th>1行1列的标题</th>【单元格标题标签】

         <th>1行2列的标题</th>

    </tr>

    <tr>

         <td>1行1列的单元格</td>【单元格标签】

         <td>1行2列的单元格</td>

    </tr>

</table>

表格的跨列 

<table>

  <tr>

    <td colspan="2">学生成绩</td>【所跨的列数】

  </tr>

  <tr>

    <td>语文</td>

  <td>98</td>

  </tr>

  <tr>

<td>数学</td>

<td>95</td>

</tr>

</table>

表格的跨行 

<table >

  <tr>

    <td rowspan="n">&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

  </tr>

</table>