熟练掌握html5中的table和form标签的功能和其属性值
table标签及其使用方法
常见形式如图所示:
常用属性
- table标签是表格标签常和form表单标签一块连用
- border属性是表格的边框属性,加上表示具有边框,不加上表示不具备边框属性。
- width属性表示其标签的宽度属性
- hight属性表示其是标签的高度属性
- bgcolor属性表示是table标签的背景的颜色,此时可以用英文直接表示,也可以用三原色来表示颜色
- bordercolor表示的是表格的颜色
- tr标签表示的是行,里面默认是左对齐,如果想表示居中,需要用一个属性align=“center”
- td表示的是列标签
- rowspan表示的是行合并,colspan表示的是列合并,在购物车功能中经常用到
给大家演示一下列合并
<table border="1" width="50%" bgcolor="gray" border="red" >
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr align="center">
<th>1</th>
<th>张三</th>
<th>男</th>
<th>女</th>
</tr>
<tr align="center">
<th>2</th>
<th>丽丽</th>
<th>女</th>
<th>男</th>
</tr>
<tr align="center">
<th>3</th>
<th>李四</th>
<th>男</th>
<th>女</th>
</tr>
<tr align="center">
<th colspan="4">一共有<font color="red" size="5">4</font>个人</th>
</tr>
</table>
运行效果
行合并的代码
<table border="1" width="20%">
<tr align="center">
<th rowspan="3"><img src="../imgs/bx.jpg"></th>
<th>商品信息:冰箱</th>
</tr>
<tr>
<th align="center">商品价格:998元</th>
</tr>
<tr>
<th align="center"><a href="./success.html"><img src="../imgs/gwc.png"></a></th>
</tr>
</table>
运行效果
form标签的使用及其属性
常见形式如图所示:
常用属性及其功能
-
form表单是前端和后端交互的一个重要途径实现数据的传递
-
action表示其访问的路径
-
type标签表示的是其需要的功能,text表示文本,password表示的是密码,radio表示的单选,checkbox表示的是多选,file表示的是文件,select是单选,textarea表示的是文本,可以表示的是文本
-
mothed表示提交方式
提交表单的时候get和post的提交方式的区别
get和post提交的区别:
*get提交的时候把参数列表显示在地址栏上,post不会,只会把它弄成封装体
*get提交的安全级别低,post的安全级别高
*get不支持大数据,post支持大数据****推荐使用post提交 get提交也是避免不了的,系统一般的默认提交方式就就是get方式提交
name和value的作用
input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的
当 type 的取值为 button、reset、submit 中的其中一个时,此时 value 属性的值表示的是按钮上显示的文本
当 type 的取值为 text、password、hidden 中的其中一个时,此时 value 属性的值表示的是输入框中显示的初始值,此初始值可以更改,并且在提交表单时,value 属性的值会发送给服务器(既是初始值,也是提交给服务器的值)
当 type 的取值为 checkbox、radio 中的其中一个时,此时 value 属性的值表示的是提交给服务器的值
运行效果