目录
1.3、textarea控件：文本区,可以输入多行、多列数据
一、列表
1.无序列表
无序列表没有排序，但是他的项目符号可以改变，默认的type是type='disc'显示效果是小黑点，还有type='circle'空心圆点，type='square'小黑方块。他的一般格式如下
<ul type="项目符号的类别">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
演示代码
<p>四大传说</p>
<ul type='disc'>
<li>梁山伯与祝英台</li>
<li>白蛇传</li>
<li>牛郎织女</li>
<li>孟姜女哭长城</li>
</ul>
<p>四大名著</p>
<ul type='circle'>
<li>三国演义</li>
<li>西游记</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
<p>四大美女</p>
<ul type='square'>
<li>王昭君</li>
<li>西施</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ul>
可以看到四大传说项目符号都是type='disc'四大名著的是type='circle'四大美女的是type='square'
2.有序列表
有序列表可以对列表项进行排序，他的项目符号可以是阿拉伯数字、大小写的罗马数字、大小写的字母，他还可以规定起始值。以阿拉伯数字为例可以从1开始（type="1" start="1"），也可以从2，3开始（type="1" start="2" ；type="1" start="3"）
<ol type='项目符号的类别' start='起始值'>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<ol type="A" start="1"><!--表示以大写字母作为项目符号，起始字母是第一个大写字母A-->
<li>JavaScript</li>
<li>JSP</li>
<li>ASP</li>
</ol>
<ol type="A" start="3"><!--表示以大写字母作为项目符号，起始字母是第三个大写字母C-->
<li>JavaScript</li>
<li>JSP</li>
<li>ASP</li>
</ol>
需要注意的是
（1）、如果没有添加type=‘’属性，那么type的属性默认是1；
（2）、如果没有添加start=‘’属性那么默认是从第一个排序的元素开始。例如：如果type属性是‘A’，且没有添加start属性，那么他第一个排序的元素默认就是‘A’
3.两种列表的代码示例和解释
<ul><ul/>和<ul><ul/>、<ol><ol/>和<ol><ol/>、<ol><ol/>和<ul><ul/>标签之间可以互相嵌套，嵌套之后他的列表排序会有层级显示；用作书写目录，调查问卷都是非常方便的。
<p>中国行政区划</p>
<ul>
<li>陕西</li>
<ol>
<li>西安</li>
<li>咸阳</li>
<li>宝鸡</li>
</ol>
<li>北京</li>
<ul type='circle'>
<li>朝阳区</li>
<li>海淀区</li>
<li>大兴区</li>
</ul>
</ul>
二、表格
1.表格的基本结构
<table>
<caption></caption>
<thead>
<tr>
<th>文本</th>
</tr>
</thead>
<tbody>
<tr>
<td>文本</td>
</tr>
</tbody>
</table>
（2）<thead></thead>、<tbody></tbody>:语义标签,表示表格的头部、主体部分
（3）<th></th>：表示列头,文字会自动加粗、自动居中,特殊的单元格
（4）<td></td>：表示的表格中的单元格<tr align='行的对齐方式' bgcolor='行的背景色'
（5）<tr></tr>：表示表格的行,一个tr代表一行
（6）<td></td>：表示的表格中的单元格
（7）<caption></caption>：表示表格的标题
2.属性
2.1常用的表格属性
| bgcolor | 表格的背景色 |
| align | 规定表格相对周围元素的对齐方式；可以居中对齐（center）、左对齐（left）、右对齐（right） |
| border | 规定表格单元是否有边框，默认值为’’，表示没有边框 |
| cellspacing | 规定单元边缘与其内容的空白，默认1像素 |
| cellpading | 规定单元格之间的空白，默认2像素 |
| width | 规定表格的宽度 |
2.2常用的单元格属性
（1）align=''：行、单元格的对齐方式，可以居中对齐（center）、左对齐（left）、右对齐（right）
（2）bgcolor=''：行的背景色
（3）background=''：背景图片
3.单元格的合并
（1）跨列(合并列)：一个单元格占据多列,在<td>中添加属性colspan,该属性的值为占据的列数
（2）跨行(合并行)：一个单元格占据多行,在<td>中添加属性rowspan,该属性的值为占据的行数
代码示例：
<table border="1" align="center">
<tr align="center">
<th rowspan="3">早餐食谱</th>
<td colspan="2">食物</td>
</tr>
<tr>
<td>牛奶</td>
<td>饮料</td>
</tr>
<tr>
<td>甜点</td>
<td>开心粉</td>
</tr>
</table>结果如图所示：
三、表单
1、表单标签
<form></form>：所有的表单控件必须放在该标签下
<form></form>会把它范围内的所有元素信息提交给服务器。
他的常见属性有 ：
（1）、action属性：表单数据提交的远程服务器的地址(服务器的URL)
（2）、method属性：表单数据的提交方式
2、表单内的控件标签
1.1 input控件
| 单行输入文本框： | <input type='text'/> |
| 重置按钮： | <input type='reset' value='按钮上显示的文字'/>,若没有value属性,按钮上默认显示'重置' |
| 提交按钮 | <input type='submit'/>，将表单数据提交给action指定的URL |
| 单选按钮： | <input type='radio' name='控件的名称' checked/> ,属性'checked'表示选中 |
| 复选框: | <input type='checkbox' /> |
| 数字 | <input type='number' /> |
| 日期选择框 | <input type='date' /> |
| 时间选择框 | <input type='time' /> |
| 隐藏控件 | <input type='hidden' /> |
1.2、select控件：下拉列表控件
<select>
<option value=''>列表项</option>
<option value=''>列表项</option>
<option value=''>列表项</option>
</select>
1.3、textarea控件：文本区,可以输入多行、多列数据
<textarea cols="30" rows="10"></textarea> ：cols='每行中的字符数’，rows='显示的行数。
1.4、button控件：按钮控件
<button type='按钮的类型'></button>
type属性的取值：
| button | 普通按钮,不含默认的动作(功能) |
| reset | 重置按钮,重置表单控件 |
| submit | 提交按钮,将表单控件的值提交给远程服务器 |
1.5、label控件：用于显示文本
让单选按钮和文本进行绑定：radio的id属性值和label的for属性值必须一致
这样点击男或者女zhelian也可以选中单选按钮
<input type="radio" name="sex" id='s1'>
<label for="s1">男</label>
<input type="radio" name="sex" checked id="s2">
<label for="s2">女</label>3.强调
(1)所有的表单控件(标签)都可以有id属性,id的属性值不能重复
(2)所有的表单控件都有value属性,value属性的值会提交给远程服务器
(3)所有的表单控件都有name属性,在后台可以通过name属性值找到对应的标签
(4)disabled属性表示input是否可用(置灰)
(5)readonly属性表示input的值是只读的
(6)单行文本输入框(<input type='text'/>)的属性placeholder起提示的作用
(7)required属性表示input是必须要输入的
(8)maxlength属性表示input输入的最大长度
(9)tabIndex属性用于设置表单控件的tab顺序
(10)title属性用来设置鼠标经过时的提示文字
代码如下
<form action="#" method="GET">
<table >
<thead>
<tr>
<td colspan="2"><font face='隶书' color='purple' size='5'>绑定MSN、QQ账号（找到上的朋友一起玩，或当他们加入关系时，第一时间通知您）</font></td>
</tr>
</thead>
<tbody>
<tr >
<td width='200' align="right">账号类型：</td>
<td>
<select ><option value="">MSN</option><option value="">QQ</option></select>
</td>
</tr>
<tr>
<td width='200' align="right">MSN账号：</td>
<td>
<input type="text" required maxlength="8"/>
</td>
</tr>
<tr>
<td width='200' align="right">MSN密码：</td>
<td>
<input type="password" required maxlength="16" title="登录密码"/>
</td>
</tr>
</tbody>
</table>
<hr/>
<table >
<thead>
<tr>
<td colspan="3"><font face='隶书' color='purple' size='5'>创建您的雅虎邮箱</font></td>
</tr>
</thead>
<tbody>
<tr>
<td width='200' align="right" >选择您的雅虎邮箱：</td>
<td width='20'><font face='宋体' color='red' size='5'>@</font></td>
<td>
<select ><option value="">yahoo.cn</option></select>
</td>
</tr>
<tr>
<td width='200' align="right">密码：</td>
<td colspan="2">
<input type="password" required maxlength="16" title="登录密码"/></td>
</tr>
<tr>
<td width='200' align="right">再次输入密码：</td>
<td colspan="2">
<input type="password" required maxlength="16" title="登录密码"/></td>
</tr>
<tr>
<td width='200' align="right">性别：</td>
<td colspan="2">
<input type="radio" name="sex" id='s1'>
<label for="s1">男</label>
<input type="radio" name="sex" checked id="s2">
<label for="s2">女</label>
</td>
</tr>
<tr>
<td width='200' align="right">居住城市：</td>
<td colspan="3">
<select >
<option value="">--请选择--</option>
<option value="">陕西省</option>
<option value="">河南省</option>
<option value="">安徽省</option>
<option value="">湖南省</option>
</select>
<select>
<option value="">--请选择城市--</option>
<option value="">西安市</option>
<option value="">宝鸡市</option>
<option value="">延安市</option>
<option value="">安康市</option>
</select>
</td>
</tr>
</tbody>
</table>
<hr/>
<table >
<thead>
<tr>
<td colspan="3"><font face='隶书' color='purple' size='5'>密码保护信息（以下信息用于取回密码以及处理其他账户问题，请您慎重填写并牢记）</font></td>
</tr>
</thead>
<tbody>
<tr>
<td width='200' align="right">密码保护问题：</td>
<td colspan="2">
<select ><option value="">-请选择一个问题-</option></select>
</td>
</tr>
<tr>
<td width='200' align="right">答案：</td>
<td colspan="2">
<input type="text">
</td>
</tr>
<tr>
<td width='200' align="right">生日：</td>
<td ><input type="text" value="19">年
<select ><option value="">-请选择-</option></select>
月<input type="text" value="19">日
</td>
<td>
<input type="checkbox" id="chk1" checked>
<label for="chk1" >保密年龄</label>
</td>
</tr>
</tbody>
</table>
<hr/>
<table>
<thead>
<tr>
<td colspan="2"><font face='隶书' color='purple' size='5'>注册校验</font></td>
</tr>
</thead>
<tbody>
<tr>
<td width='200' align="right">输入校验码：</td>
<td>
<input type="text">
</td>
</tr>
</tbody>
</table>
</form>结果如图所示：
这个表单使用表格进行布局的，要注意表格必须在<form></form>标签里面
1289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
