学习内容:
1.表格中的caption标签:<caption></caption>,可为表格添加标题,自带居中效果
2.表格中的th标签:<th></th>,可为表格添加表头,本质上是td标签,标签内的文字自带加粗、居中效果
1 <table border="1"> 2 <caption>这是标题</caption> 3 <tr> 4 <th>123</th> 5 <th>456</th> 6 </tr> 7 <tr> 8 <td>789</td> 9 <td>000</td> 10 </tr> 11 </table>
3.表单:
<form></form>,用于向服务器提交数据,多用于账户注册页面,常用的属性有action与method属性
(1)action=“服务器地址”,用来指定表单数据提交的服务器地址
(2)method="",method分为GET方法与POST方法:
(A)GET方法:提交数据后,地址为:get 路径?键=值 & 键=值,提交的数据在地址栏中可见,不安全,同时还有长度限制,但是这种方法在购物网站如天猫很常用,例如:
https://detail.tmall.com/item.htm?id=562569279992&ali_trackid=2:mm_12351394_2325537_70732358:1517571196_308_915254175&spm=a231o.7712113/b.1004.120&pvid=200_11.224.194.115_3956_1517571191693
即使只有https://detail.tmall.com/item.htm?id=562569279992,依然可以跳转至该页面,所以get可以做到资源定位,这是它的优势
(B)POST方法:提交数据后数据是不可见的,安全性更有保障,而且地址不会有长度限制问题
1 <form action="action_page.php" method="GET"> 2 </form> 3 <form action="action_page.php" method="POST"> 4 </form>
常用的输入类型有:
(1)<input type="text" name="username">文本输入框,用来填写非密码信息等
常用属性:autofocus自动对焦,直接进入输入状态,不需要用鼠标点击输入框;placeholder=“” 预输入数据,数据为灰色,输入数据后消失; autocomplete=“on” 自动填写,填写过一次后下次输入数据开头即可提示剩余部分,常见于登录框;value="",预输入数据,数据只有改写或删除时才会消失,常见于输入手机号时的+86
(2)<input type="password" name="password">,用于输入密码,输入的数据呈现方式是小圆点
(3)<input type="reset" value="reset">,重置按钮,点击后表单中已输入数据清空
(4)<input type="submit" value="提交">,提交按钮,点击后会把输入的数据提交给服务器
(5)<input type="file" name="file" enctype="multipart/form-data" value="上传">,文件上传按钮,用于上传文件
enctype="multipart/form-data"上传前的编码方式——不编码,在使用包含文件上传控件的表单时,必须使用该值!
PS;rest;submit;file都是以按钮形式存在的,value=""输入的值就是按钮的名字,不输入就是默认名称
(6)<textarea name="introduce" cols="20" rows="30" maxlength="50"></textarea>,用于输入信息,一般用于大段文字输入
cols控制可见列数,rows控制可见行数,用来规定尺寸,maxlength规定最大可输入字符数
(7)<input type="radio" name="sex">男
<input type="radio" name="sex">女
radio 可以实现单选功能,注意按钮name值必须相同,否则会多选
(8)<input type="checkbox" name="bb" checked> <input type="checkbox" name="fb" disabled>
checkbox可以实现复选,checked可以实现预选,checked同样适用于单选按钮,disabled可以使 该选项不可选
(9)<label></label>,当radio与checkbox嵌套在该标签中时,可以实现点击按钮旁的文字来实现选择
(10)<select><option></option></select>,用来制作下拉列表,size、multiple属性可以规定同时显示的选项个数,selected属性可以实现预选
1 <form action="" method="post"> 2 <!--action="提交的地址" method="数据提交方式" get 路径?键=值 & 键=值 不安全 post 更安全 数据不可见--> 3 用户名:<input type="text" name="username" autofocus placeholder="123" autocomplete="on"><br/> 4 <!--autofocus自动对焦 placeholder 预输入文字 autocomplete on 自动填写--> 5 密 码:<input type="password" name="password"><br> 6 7 重置<input type="reset" value="reset"> 8 9 <input type="submit" value="提交"> 10 <label for="男"><input type="radio" name="sex" id="男" checked>男</label> 11 <label for="女"><input type="radio" name="sex" id="女">女</label><br/> 12 <!--label for="id" 点击文字时也能选中 for可以删去--> 13 爱好:<label><input type="checkbox" name="bb" checked>篮球</label> 14 <!--checked属性 默认选中 disabled禁用选项--> 15 <label> <input type="checkbox" name="fb" disabled>足球</label> 16 <label> <input type="checkbox" name="vb">排球</label><br/> 17 <select name="学历" size="3"> 18 <option>请选择</option> 19 <option selected>高中</option> 20 <option>专科</option> 21 <option>本科</option> 22 <option>硕士</option> 23 </select> 24 <!--size multiple同时展示的选项个数 selected默认选中--> 25 <input type="file" name="file" enctype="multipart/form-data" value="上传"><br/> 26 <!--enctype="multipart/form-data"上传前的编码方式 不编码 在使用包含文件上传控件的表单时,必须使用该值--> 27 <textarea name="introduce" cols="20" rows="30" maxlength="50"></textarea> 28 <!--cols可见列数 rows可见行数 maxlength 最大字符数--> 29 30 </form>
PS:input标签一定要输入name属性,否则数据无法正常提交!
5.<button></button>,定义一个按钮,可用来实现某些功能,例如实现链接跳转
1 <button>
<a href="http://www.baidu.com">跳转至百度</a>
2018.02.02