学习笔记（二）——HTML中的表格标签和列表标签

表格标签

1.表格标签的基本语法

表格标签包括<table>标签，整个表格的内容都要写在该标签内；<tr>表示表格的一行；<th>和<td>都表示表格中的单元格，区别在于<th>的文字居中加粗了,一般用作表头；<thead>标签和<tbody>标签分别表示表头和表体数据部分，这两个标签不是一定要使用，但使用了会使代码更加有条理，更好区分表格。

<table>  <--! 整个表格必须写在这个标签内 -->
	<thead>  <--! 表示表头部分 -->
		<tr>  <--! 表示表格一行 -->
			<th>表头名称1</th>  <--! 表示表头行中的元素，一行可以有多个 -->
			<th>表头名称2</th>
			··· ···
		</tr>
	<thead>
	<tbody>  <--! 表示表主体部分，存放数据的地方 -->
		<tr>  <--! 表示表格第一行数据 -->
			<td>第一行第一个单元格</td>  <--! 表示行中的元素，一行可以有多个-->
			<td>第一行第二个单元格</td>
			··· ···
		</tr>
		<tr>  <--! 表示表格第二行数据 -->
			<td>第二行第一个单元格</td>
			<td>第二行第二个单元格</td>
			··· ···
		</tr>
		··· ···
	<tbody>
</table>

表格相关标签的图解如下所示：

2.表格属性

表格属性都写在<table>标签内。

属性	说明
align	表示对齐方式，属性值有center/right/left，分别表示让表格居中/居右或居左，注意该属性是调整整个表格在页面中的对齐方式，而不是调整表格内容的对齐方式，表格内容的对齐方式要用CSS来调
border	设置表格边框，属性值一般写1或“ ”，默认“ ”（无边框）
cellpadding	表示单元格边沿与内容之间的空隙大小属性值为像素值，默认1px
cellspacing	表示单元格与单元格之间的距离，属性值为像素值，默认2px
weight	设置表格宽度，属性值为像素值或百分比
height	设置表格高度

3.合并单元格

• 合并单元格有两种模式：
  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan=“合并单元格的个数”
• 属性的书写位置：
  • 该属性要写在目标单元格标签内
  • 目标单元格是指所要合并单元格区域的最上（跨行合并时）或者最左（跨列合并时）的单元格
• 合并单元格的步骤：
  • 确定是跨行合并还是跨列合并
  • 确定目标单元格，在目标单元格的标签上写合并代码
  • 删除被合并的其他单元格代码，只保留目标单元格代码

列表标签

1.无序列表

• 无序列表的基本语法：

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	··· ···
</ul>

• 注意事项：
  • 无序列表非常常用，无序列表广泛用于页面布局，但默认列表项前都会带一个黑色小圆点，可以通过CSS去掉
  • <ul>标签内只能有直接后代<li>标签，虽然包含其他标签也可以显示，但为了规范最好不要这么做
  • <li>标签中可以包含任何标签和文本

2.有序列表

• 有序列表的基本语法：

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	··· ···
</ol>

有序列表相对少用，基本与无序列表相同，只是列表项前的小圆点变成数字序号。

3.自定义列表

• 自定义列表的基本语法：

<dl>
	<dt>名词1</dt>
	<dd>名词1拓展1</dd>
	<dd>名词1拓展2</dd>
	··· ···
	<dt>名词2</dt>
	<dd>名词2拓展1</dd>
	<dd>名词2拓展2</dd>
	··· ···
</dl>

• 注意事项：
  • 自定义列表的列表项前没有自带装饰
  • <dl>中只能直接包含<dt>和<dd>标签，<dt>和<dd>标签中可以包含任意标签
  • <dt>和<dd>标签是并列关系不是包含关系，一般<dd>标签是对<dt>标签的解释性描述
  • 每一个<dt>+<dd>模块内部是垂直排列的，一个模块占一整大行