HTML基础之列表标签、表格标签、表单标签

列表标签

无序列表（重要）

<ul  type="项目符号类型">
	<li>列表项</li>
	<li>列表项</li>
	.............
</ul>

type的取值：

• circle：空心圆点
• disc：实心圆点 (默认)
• square：实心方块

有序列表

<ol type="项目符号类型·" start="起始值" >
	<li>列表项</li>
	<li>列表项</li>
	..............
</ol>

type的取值：

• 1：项目符号是数字
• a或A：项目符号是26个字母
• i或I：项目符号是罗马数字

项目列表（自定义列表）

常用于对术语或词语进行解释和描述

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

表格标签

表格含义：
表格是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。

<table></table>       表格
<tr></tr>             行
<td></td>			  单元格
<th></th>			  列标题
<caption></caption>	  表格的标题

table、td、th、tr的属性：

1、table的常用属性：

	border：边框宽度
	bgcolor：表格颜色
	align：对齐方式（left、center、right）
	width：表格的宽度
	height：表格的高度
	cellspacing：单元格之间的间距
	cellpadding：内容和单元格边框间距离

2、td、th的常用属性：

	align：水平对齐方式（left 、center、 right）
	valign：垂直对齐方式 (top、middle、bottom)
	width：单元格宽    
	height：单元格高
	bgcolor：单元格的背景色

3、tr的常用属性：

	align：表示水平对齐方式(left、center、right)
	valign：垂直对齐方式(top、middle、bottom)
	bgcolor：表示行的背景色 
	background：行的背景图片

合并单元格： 跨行跨列的表格

• 跨列：colspan=“列数”
• 跨行：rowspan=“行数”

表单标签

表单的作用： 用于收集用户信息。实现用户和网页之间的对话

表单的构成：

• 提示信息：说明性文字，提示用户如何进行操作
• 表单控件：是具体的功能项
• 表单域：包含了提示信息和表单控件

创建表单：

<form  action="URL地址" method="提交方式" name="表单名称">
		提示信息、表单控件
</form>

• action：指定接收表单数据的服务器地址
• method：表单数据的提交方式 常用方式：get 和 post
• name：表单名称，用于多个表单的区分

提示信息：

<lbael> 提示信息</label>

表单控件：
（1）input控件：

单行文本框：<input type="text"  placeholeder="提示信息"  maxlength="最大输入长度" value="值"/>
密码框：<input type="password" placeholder="提示信息"  maxlength="最大输入长度" value="值"/>
单选按钮：<input type="radio" value="值" name="名称" checked  id="值" />文字
复选按钮：<input type="checkbox" name="名称" value="值">文字
数字输入框：<input type="number" name="名称" value="值" max="最大值" min="最小值">
日期、时间输入框：<input type="date/datetime " name="名称">
颜色选择框：<input type="color" name="名称">
图像控件：<input type="image" name="名称">
文件控件：<input type="file" name="名称">
隐藏控件：<input type="hidden" name="名称" value="值">  页面上不显示，可以向服务器传递值
按钮：
	1) 提交按钮：将表单信息（表单域中所有控件的值）提交给服务器（action指定的服务器）
		<input type="submit" value="按钮上的文字">
	2) 重置按钮：将表单信息恢复初始状态
		<input type="reset" value="按钮上的文字">
	3) 普通按钮：没有任何操作
		<input type="button" value="按钮上的文字">

（2）select控件：

<select>
	<option value="值">选项</option>
	<option value="值">选项</option>
</select>

（3）textarea控件：

<textarea name="名称" cols="列数" rows="行数"></textarea>