html基础知识之二

html基础知识

1.表格

表格不是用来页面布局的，而是用来展示数据的。

<table></table> <!-- 用于定义表格的标签 -->

<tr></tr> <!-- 用于定义表格中的行，必须嵌套在<table></table>标签中 -->

<td></td> <!-- 用于定义表格中的单元格（没有列的概念，必须嵌套在<tr></tr>标签中 -->

<th></th> <!-- 表头单元格位于表的第一行或第一列，表头单元格里的文本内容加粗居中显示。 -->

例：

<table>
			<tr><th>name</th>  <th>sex</th> <th>age</th></tr>
			<tr><td>刘德华</td>  <td>男</td> <td>56</td></tr>
			<tr><td>张学友</td>  <td>男</td> <td>58</td></tr>
			<tr><td>郭富城</td>  <td>男</td> <td>51</td></tr>
		</table>

效果：

表格标签

表格标签这部分属性我们实际开发不常用，后面通过 css 来设置。这里讲的目的有两个：1.记住这些英语单词，后面 css 会使用。2.直观感受表格的外观形态。

(1).

属性名：align 属性值：left（默认值），center，right
描述：规定表格相对周围元素的对齐方式。

(2).

属性名：border 属性值：1（像素）或""（什么都不给，即空的，没有边框。默认是没有边框。

(3).

属性名：cellpadding 属性值：像素值（默认1像素）。
描述：内容和单元格之间的距离。

(4).

属性名：width 属性值：像素值或百分比
描述：规定表格的宽度。

(5).

属性名：height 属性值：像素值或百分比
描述：规定表格的高度。

注意：这些属性要写到表格标签 table 里去。

2.合并单元格

把多个单元格合并成为一个单元格，这里学会最简单的合并单元格即可。

合并单元格的方式：

跨行合并，例：

 rowspan="合并单元格的个数"

跨列合并，例：

colspan="合并单元格的个数"

目标单元格：

			跨行:最上侧单元格为目标单元格。
			跨列:最左侧单元格为目标单元格。

合并单元格三部曲：

1.先确定是跨行还是跨列。
2.找到目标单元格，写上"合并方式=合并的单元格数量"，例：

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

3.删除多余单元格。

需求：先写出一个三行三列的表格，然后合并第一行的二，三列。
做法：按顺序：1.跨列合并。2.目标单元格是第一行第二列。3.删除多余单元格：即第一行第三列。

<table width="500" height="249" border="1" cellspacing="0">
			<tr>
				<td></td>
				<td colspan="2"></td>
				<!-- <td></td> 这就是第三步删除的/-->
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>

效果：

练习：
需求：合并第一列的二，三行。

<table width="500" height="249" border="1" cellspacing="0">
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td rowspan="2"></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<!-- <td></td> 这是第三步删掉的-->
				<td></td>
				<td></td>
			</tr>
		</table>

效果：

2.列表标签

表格是用来显示数据的，那么列表就是用来布局的。列表可以分为三大类：无序列表，有序列表，自定义列表。

(1).无序列表

<h4>您喜欢的食物</h4>
		<ul>
			<!-- <p>123</p> 这样写是错误的 -->
			<li>榴莲</li>
			<li>臭豆腐</li>
			<li>鲱鱼罐头</li>
			<li>
				<p>123</p> <!-- 这样写是可以的 -->
			</li>
		</ul>

效果：

注意：

1. ul 是爸爸，li 是儿子。
2. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
3. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
4. <li>与</li>之间相当于一个容器，可以容纳所有元素。

(2).有序列表

<h4>粉丝排行榜</h4>
		<ol>
			<li>刘德华 1000</li>
			<li>刘若英 100</li>
			<li>pink老师 1</li>
		</ol>

效果：

注意：
1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2.<li>与</li>之间相当于一个容器，可以容纳所有元素。

(3).自定义列表（Definition List）

自定义列表常用于对术语或名词进行解释和描述（一个大哥带着一群小弟），自定义列表的列表项前没有任何项目符号。

<dl>
	<dt>关注我们</dt> <!-- 老大 -->
	<dd>新浪微博</dd> <!-- 小弟 -->
	<dd>新浪微信</dd> <!-- 小弟 -->
	<dd>联系我们</dd> <!-- 小弟 -->
</dl>

和有序和无序列表不同，自定义列表由三组标签组成。
注意：
1.<dl></dl>里只能包含<dt></dt>和<dd></dd>。
2.<dt></dt>和<dd></dd>个数没有限制，经常是一个<dt></dt>对应多个<dd></dd>。

3.表单标签

使用表单的目的是为了收集用户信息。一个完整的表单通常由"表单域"，"表单控件（也称为表单元素）"和"提示信息"三个部分构成。

表单域：

表单域是一个包含表单元素的区域。<form></form>标签用于第一表单域，以实现用户信息的收集和传递。<form></form>会把它范围内的表单元素提交给服务器。在我们写表单元素之前应该有个表单域把他们进行包含。

总而言之：表单域就是form标签。

表单控件（表单元素）：

1.input输入表单元素。(input是一个单标签。)
2.select下拉表单元素。
3.textarea文本域元素。

详见