首页 > 代码库 > 1.2 HTML“三表”
1.2 HTML“三表”
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=http://www.mamicode.com/“” size=“设置文本框中字的大小” maxlength=“控制输入字符的个数”/>
口令框 （不用placeholder）
<input type=“password” name=“” size=“” value=http://www.mamicode.com/“” maxlength=“”/>
单选框 （一定要加上name="",同组相同）
<input type=“radio” name=“sex” value=http://www.mamicode.com/“man”/>男
<input type=“radio” name=“sex” value=http://www.mamicode.com/“woman” checked/>女
注： checked为默认值，一般情况下可以不用写，要加的话一般加在第一个。
复选框
<input type=“checkbox” name=“love” value=http://www.mamicode.com/“zq” checked />足球
<input type=“checkbox” name=“love” value=http://www.mamicode.com/“lq”/>篮球
注： checked表默认值
选择文件
<input type=“file” value=http://www.mamicode.com/“photo” name=“photo” size=“控制框的大小”/>
按钮
<input type=“submit” name=“sub” value=http://www.mamicode.com/“提交”/> 提交按钮
<input type=“reset” name=“res” value=http://www.mamicode.com/“重新设置”/> 重新设置按钮
<button>按钮</button> 设置按钮，默认是提交按钮
填写意见框（文本域）：是双标签
<textarea name=“idea” cols=“列” rows=“行”>请填写意见< / textarea>
style="resize:none;" 可以锁定框的大小，防止把文本域缩放；
overflow:auto; 取消ie浏览器下的默认滚动条；
下拉框：是双标签
<select name=“sheng” >
<option value=http://www.mamicode.com/“sc”>四川省
<option value=http://www.mamicode.com/“hb” selected>河北省
<option value=http://www.mamicode.com/“ah”>安徽省
</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} 自定义列表样式
1.2 HTML“三表”