第一阶段HTML5—2019/9/4

11. 列表标签

• 无序列表ul（重点）
• 有序列表ol （了解）
• 自定义列表（理解）

无序列表：

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

有序列表：

<ol>
	<li> 列表1 </l1>
	<li> 列表2 </l1>
	<li> 列表3 </l1>
	<li> 列表4 </l1>
</ol>

练习

自定义列表：常用于对术语解释

<dl>
	<dt> 名词1 </dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>

	<dt>名词2</dt>
	<dd>名词2解释1</dd>
	<dd>名词2解释2</dd>
</dl>

表格

• 创建表格

<table width=“表格宽度”  height="表格高度"  border="边宽">  
	<tr>
		<td>第1行第1个单元格</td>
		<td>第1行第2个单元格</td>
		<td>第1行第3个单元格</td>
	</tr>
	<tr>
		<td>第2行第1个单元格</td>
		<td>第2行第2个单元格</td>
		<td>第2行第3个单元格</td>
	</tr>
</table>

• 表格属性

<table width="" hieght="" cellspacing="" cellspacing="" align="">
</table>

• 表头

<table>
	<th></th>
</table>

• 表格结构

<table>
	<thead>
		<tr>
			<td>第1行第1个单元格</td>
			<td>第1行第2个单元格</td>
			<td>第1行第3个单元格</td>
		</tr>
	</thead>
	
	<tbody>
			<tr>
			<td>第1行第1个单元格</td>
			<td>第1行第2个单元格</td>
			<td>第1行第3个单元格</td>
		</tr>
	</tbody>
</table>

• 表格标题

<table>
	<caption>表格标题</caption>
</table>

1. 合并单元格（难点）

2. 跨行合并<td rowspan="x"></td> 该单元格占x行
   

3. 跨列合并<td colspan="x"></td> 该单元格占x列
   
   练习：
   

表单标签（掌握）

1. 表单域
2. 提示文本
3. 表单控件
   

表单控件

• input控件（重点）（单标签）
  

1. 文本框 text

用户名：<input tpye="text"/>

2. 密码框password

密码：<input type="password"/>

3. 单选框radio

性别：<input tpye="radio" name="sex"/>男
   	  <input type="radio" name="sex"/>女    通过定义同一个name来表示同一组  

4. 复选框checkbox

爱好：<input type="checkbox" name="hobby">篮球
	<input type="checkbox" name="hobby">足球
	<input type="checkbos" name="hobby">乒乓球    
	   可以同时选择多个 通过定义同一个name来表示同一组

5. 默认选项checked="checked"

性别：<input tpye="radio" name="sex"  checked="checked"/ checked>男
   	  <input type="radio" name="sex"/>女    
   	  通过定义同一个name来表示同一组 ,通过checked表示初始默认选项为男