HTML 2017.07.18

1. 单元格跨行

<th colspan="number">Tab1</th>

2.单元格跨列

<th rowpan="number"> Tab2</th>

3.colspan与rowspan

<th></th>中colspan与rowspan分别对行和列作用。

4.table的cellspacing属性与cell padding属性

即单元格间距属性（cellspacing）(是边格中心之间！)

效果：

单元格边距属性（cellpadding）（是边与边之间！）：

这看起来其实是改变了单元格的大小。但是字体大小并没有变化。

实例：

5. 表格的页眉与页脚与表格体

①<thead>

②<tfoot>

③表格体<tbody>

另：thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

<table>将<thead>,<tfoot>,<tbody>包括在其中，方便使用CSS对其进行修饰。

在<table>中，如果没有特殊说明，则表格数据默认为<tbody>的内容，与其使用同样的style。

效果示例：

说明：从上到下分别是<thead>.<tbody>,<tfoot>

6. <caption>

<caption>用来定义表格的标题，一个表格通常只有一个标题；

而且 <caption> 通常放置于 <table>后面。

例如：

7.  html中的列

格式：

<ur>

<li>....</li>

<li>.....</li>

<li>....</li>

</ur>

实例：

8.  <colground>与<col>

注：span表示规定某个列组所跨越的列数：

实例：

<table border="1" cellspacing="0" cellpadding="10">
	<colground>
		<col span="2" style ="background-color:skyblue">
		<col style="background-color:greenyellow">
	</colground>
		<tr>
			<th>fight on</th>
			<td>paradise</td>
			<td>war zone</td>
		</tr>
		<tr>
			<td>make</td>
			<td>done</td>
          <td>fight</td>
				</tr>		
	</table>

实例效果：

9. 有序列表与无序列表(ordered list,unordered list)

①有序列表

格式： 

<ol>

<li>......<li>

</ol>

②无序列表

格式：

<ul>

<li>....</>

</ul>

实例：

		<ul>
			<li>fight</li>
			<li>make</li>
			<li>sixsix</li>
		</ul>


<ol>
	<li>five</li>
	<li>four</li>
	<li>three</li>
	<li>two</li>
</ol>

效果图：

10.  自定义列表

基本格式:

<dl>                     //define list

<dt>....</dt>       // define list title

<dd>....</dd>      //define list define

</dl>

实例效果：

11.  html 区块元素

大多数HTML元素被定义成区块元素，这其中又包括了块级元素和内联元素；显示块级元素通常以新行开始（包括table，ul，h，p）；而显示内联元素却通常不以新行开始（例如<td>,<b>(注释)，<img>等）。

12. HTML中的<div>与<span>

<div>是块级元素，没有特定的含义，一般与CSS 一起使用；来设置大的内容块的样式。

<span>是内联级元素，也没有特定的含义，可以设置部分文本的样式。

13. <div>内容块可以使用id唯一标识，这样做会更加方便。

<div>元素常用的属性：

1）height

用来定义div的宽度.

2）margin

3）padding

4）position

5）font

6）overflow

一些特殊的效果：

1)z_index

2)cursor

3)clip

4)opacity