前端从HTML开始——表格与列表

HTML知识点

HTML表格
基础结构

  <table border="1">
  <tr>
  	<th>姓名</th> 			
  	<th>年龄</th>
  	<th>性别</th>
  </tr>
  <tr>
  	<td>张三</td>
  	<td>18</td>
  	<td>男</td>
  </tr>
   <tr>
  	<td>王五</td>
  	<td>19</td>
  	<td>女</td>
  </tr>
  </table>

页面显示

姓名	年龄	性别
张三	18	男
王五	19	女

<caption> 表格标题，居中显示

优化：带结构的表格（各部分分开加载，用户体验更佳）
表格划分为三部分：表头、主体、脚注
<thead> 表格的头（标题之类）
<tbody>表格的主体（数据主题）
<tfoot>表格的脚注

跨列属性colspan
跨越两列的单元格

<td colspan="2">内容</td>

跨行属性rowspan
跨越两行的单元格

<td rowspan="2">内容</td>

嵌套表格：可在<td>内插入一个表格

HTML列表

我们最常用的无序列表，例如，用来制作一个导航栏、文章列表、轮播图等

无序列表的父元素为 ul（unorder list）元素，列表项为 li（list item）元素。

基础结构：

<ul>
	<li>湖北</li>
	<li>河南</li>
	<li>湖南</li>
</ul>

页面显示

• 湖北
• 河南
• 湖南

还有有序列表，可以用来制作排行榜的展示等，

有序列表的父元素为 ol（order list）元素，列表项为 li 元素。在 ol元素中，通过start属性指定列表项的起始编号；通过reversed属性指定列表项的序号是否倒序排列，该属性是布尔类型，如果设置，则会倒序排列。

<ol>
	<li>湖北</li>
	<li>河南</li>
	<li>湖南</li>
</ol>

页面显示

1. 湖北
2. 河南
3. 湖南

还有定义列表

描述列表的父元素为 dl元素，而其中的每个名/值组，则包含一个或多个dt（description title）元素，以及一个或多个dd（description description）元素。dt元素用来定义名称或术语，dd元素用来定义名称或术语的值。如：

<dl>
  <dt>列表标题1：</dt>
      <dd>表项描述1-1</dd>
      <dd>表项描述1-2</dd>
      <dd>表项描述1-3</dd>
  <dt>列表标题2：</dt>
      <dd>表项描述2-1</dd>
       <dd>表项描述2-2</dd>
      <dd>表项描述2-3</dd>
</dl>

页面显示

列表标题1：

表项描述1-1

表项描述1-2

表项描述1-3

列表标题2：

表项描述2-1

表项描述2-2

表项描述2-3

从上图可以看出，描述列表是没有项目符号的。虽然它也是列表，但不能使用CSS的list-style-type属性定义列表项目符号的样式。