HTML“三表”
- 表单(form)
- 表格(table)
- 列表(list)
表单(form)
输入文件型表单
<form action=“URL”(或空格) method=“post/get”>
<input />
......... ..........
</form>
get:从服务器上面取数据 post:向外传输数据
get:不加密 ,明文显示 post:加密 安全性高
----------------------- 文本框:
type方式:text
name:文本框的名称
value:文本框的默认值
size:文本框的长度
maxlength:控制文本框最大能输几位( 不管中英文,数字)
placeholder:输入内容,会把默认的文字覆盖。---( css3 )
文本框
<input type=“text” name=“” value=“” size=“设置文本框中字的大小” maxlength=“控制输入字符的个数”/>
口令框 (不用placeholder)
<input type=“password” name=“” size=“” value=“” maxlength=“”/>
单选框 (一定要加上name="",同组相同)
<input type=“radio” name=“sex” value=“man”/>男
<input type=“radio” name=“sex” value=“woman” checked/>女
注: checked为默认值,一般情况下可以不用写,要加的话一般加在第一个。
复选框
<input type=“checkbox” name=“love” value=“zq” checked />足球
<input type=“checkbox” name=“love” value=“lq”/>篮球
注: checked表默认值
选择文件
<input type=“file” value=“photo” name=“photo” size=“控制框的大小”/>
按钮
<input type=“submit” name=“sub” value=“提交”/> 提交按钮
<input type=“reset” name=“res” value=“重新设置”/> 重新设置按钮
<button>按钮</button> 设置按钮,默认是提交按钮
填写意见框(文本域):是双标签
<textarea name=“idea” cols=“列” rows=“行”>请填写意见< / textarea>
style="resize:none;" 可以锁定框的大小,防止把文本域缩放;
overflow:auto; 取消ie浏览器下的默认滚动条;
下拉框:是双标签
<select name=“sheng” >
<option value=“sc”>四川省</option> <!--子集-->
<option value=“hb” selected>河北省</option>
<option value=“ah”>安徽省</option>
</select>
注: selected表默认值
表格(table)
创建一个四行三列的表格
<table width="480" height="200" border="1" rules="all">
<tr>
<td height="45" colspan="3" align="center">课程表</td>
</tr>
<tr>
<th >星期一</th>
<th >星期二</th>
<th >星期三</th>
</tr>
<tr>
<td align="center">语文</td>
<td align="center">英语</td>
<td align="center">数学</td>
</tr>
<tr>
<td align="center">数学</td>
<td align="center">语文</td>
<td align="center">英语</td>
</tr>
</table>
<tr></tr> 定义表格的行
<td></td> 定义表格的单元格(列)
<th></th> 定义表格的表头 ,表 格标题,会自动加粗居中
1.设定边框的厚度 -- border
<table border="1">,表格的外边框的线为1个像素
2.设定格线的宽度 -- cellspacing
<table cellspacing="1">
3.设定资料与格线的距离 -- cellpadding
<table cellpadding="1">
4.调整表格宽度 -- width
<table width=点数("110")或百分比>
5.调整表格高度 -- height
<table height=点数("110")或百分比>
6.设定表格背景色彩 -- bgcolor
<table bgcolor="#rrggbb">
7.设定表格边框色彩 -- bordercolor
<table bordercolor=#rrggbb>
8.设置文本水平居中-- align
<td align="center">语文</td>
9.设置文本垂直居中-- valigin
<td valigin=“ middle”>语文</td>
10.合并单元格
<td vcolspan=" ">语文</td>
11.拆分单元格
<td rowspan=" ">语文</td>
12.行列的线
rules ="cols" 只有列的线
rules ="rows" 只有行的线
rules ="all" 行列线都有
rules ="none" 行列的线都没有
列表(list)
有序列表:在列表项内容前自动增加排列序号
<ol type=“a” start=“3”> (注:默认序列为数字)
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
注:type中是a,表序列为小写字母(大写表大写字母),type中是i,表罗马序号小写(I大写表大写),start=“3”,表从第三个字符开始
无序列表:强调式列表,在内容前显示特殊符号
<ul type=“square(方形实心) | disc(实心圆) | circle(空心圆)”> (注:默认为圆点)
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
注:去除序列前的符号 ul,li{margin:0;padding:0;list-style:none;}
ul li{list-style:none;} 清除列表前面的样式
ul li{list-style-postion:inside;} 使列表前的样式包含在列表中
ul li{list-style-postion:outside;} 使列表前的样式包含在列表之外
ul li{list-style-image:url} 自定义列表样式