HTML笔记5、列表、表格 与 表单

列表

1、有序列表（<ol>）order list

<ol type="I" start="5">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
</ol>

每一项是一个li
type：编号类型，如“1、a、A、i、I ”
start：从第几个开始排序

2、无序列表（<ul>）unorder list

<ul type="square">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
</ul>

type：符号类型，disc（圆点）、circle（圆圈）、square（方格）

3、自定义列表（<dl>）define list

<dl>
<dt>厦门</dt>
<dd>同安区</dd>
<dd>集美区</dd>
<dt>漳州</dt>
<dd>芗城区</dd>
<dd>龙文区</dd>
</dl>

表格

默认情况下，网页布局是流布局（排队），不能够随意摆放位置——通过表格来布局

表格的作用就是用来布局的

1、与表格相关的标记

<table></table>

表格

<tr></tr>

行

<td></td>

单元格

<th></th>

列标题

2、单元格数据对齐方式

水平对齐，垂直对齐

属性	作用
align	水平对齐，取值left、center、right
valign	垂直对齐，取值top、middle、bottom
border	边框粗细，数值越大越粗
bordercolor	边框颜色

3、单元间距与单元填充

4、合并单元格

表单

表单是用来收集用户提交的数据

1、表单域<from></from>

表单域是表单的区域，用来控制表单提交时候的数据访问

标记为<from></from>

所有的表单元素都要放到表单中

2、表单元素<form></form>  <input/>

I、文本框（单行文本）text

<form>
<input type="text" name="no1" size="20" maxlength="10"/>
</form>

属性	作用
type	表单元素类型，取text为文本框
name	文本框的名字。命名规则是：可以包含字母、数字、下划线，只能以字母开头。
size	文本框的长度，以“字符”为单位。
maxLength	最多可以输入多少个字符

 

II、密码框 password

<input type="password" name="no2" maxlength="6"/>

类别type取password为密码框

III、单选按钮 radio

<input type="radio" name="sex" value="0"/>女
<input type="radio" name="sex" value="1" checked="checked"/>男

IV、复选框（多选按钮）checkbox

<input type="checkbox" name="hobby" value="a" checked="checked"/>吃
<input type="checkbox" name="hobby" value="b" />喝
<input type="checkbox" name="hobby" value="c" />嫖
<input type="checkbox" name="hobby" value="d" />赌

类别type取checkbox为复选按钮

ps：

1. 同一组名字要一致
2. 必须给无法输入的表单元素赋值

V、下拉菜单 select option

<select name="学历">
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="大专">大专</option>
<option value="本科" selected="selected">本科</option>
</select>

VI、下拉列表

<select size="3" multiple="multiple" name="学历">
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="大专">大专</option>
<option value="本科" selected="selected">本科</option>
</select>

VII、多行文本（文本域）<textarea>

<textarea name="文本域" cols="30" rows="5">宫商角徵羽，琴棋书画唱，孔雀东南飞，织女会牛郎。</textarea>

 

VIII、提交按钮 （带有功能）submit

<input type="submit" name="注册" value="submit"/>

用来向服务器提交数据

IX、重置按钮 （带有功能）reset

<input type="reset" name="重置" value="reset"/>

用来清空填写的数据，恢复初始值

X、普通按钮 （不带有功能）button

<input type="button" name="按钮" value="返回"/>

总结input-type属性

text	文本框
password	密码框
radio	单选框
checkbox	复选框
submit	提交按钮
reset	重置按钮
button	普通按钮

3、使用表单

表单有两个属性

action=‘数据提交的位置’，action=‘ ’表示提交到本页面

method=‘get|post’，数据提交的方法，分为get和post

get和post的区别

	get（提交使用最多）	post
外观上	能在地址栏上看到”？“	地址栏上没有”？“
提交的数据上	少量数据一般低于2K	大量数据，PHP默认8M
安全性上	不安全	安全
提交原理	提交的数据之间都是独立的	将所有的数据作为一个整体一起提交
灵活性	很灵活，只要页面跳转就可以传递数据	不灵活，必须要有表单的参与