码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习第三天

时间:2018-02-02 23:23:35      阅读:319      评论:0      收藏:0      [点我收藏+]

标签:1.2   学历   提交数据   限制   居中   资源   上传   rod   一个   

学习内容:

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

HTML学习第三天

标签:1.2   学历   提交数据   限制   居中   资源   上传   rod   一个   

原文地址:https://www.cnblogs.com/whwjava/p/8404619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!