HTML Class 3-CSDN博客

学习内容：

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="重置">，重置按钮，点击后表单中已输入数据清空

（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值必须相同，使得两个radio为同一组，否则会多选

（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属性可以规定同时显示的选项个数，option标签的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"  value="male" checked>男</label>
11 　　　　　　<label for="女"><input type="radio" name="sex" value="female">女</label><br/>
12 <!--label for="id" 点击文字时也能选中 for可以删去-->
13　　 爱  好：<label><input type="checkbox" name="bb" value="bb" checked>篮球</label>
14 <!--checked属性 默认选中 disabled禁用选项-->
15     　 　　<label> <input type="checkbox" name="fb" value="fb" disabled>足球</label>
16        　　<label> <input type="checkbox" name="vb" value="vb">排球</label><br/>
17 　　　　　　<select name="学历" size="3">
18    　　　　 　　<option value=“chose”>请选择</option>
19         　　　 <option value="hs" selected>高中</option>
20         　 　　<option value="cg">专科</option>
21            　　<option value="ut">本科</option>
22            　　<option value="md">硕士</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属性，否则数据无法正常分类！另input标签必须嵌套在form标签中，否则数据不会上传！

选择选项包括单选、多选、下拉列表，每一项要填写value，帮助计算机识别该数据的名称！

5.<button></button>，定义一个按钮，可用来实现某些功能，例如实现链接跳转

1 <button>
<a href="http://www.baidu.com">跳转至百度</a>

2018.02.02

转载于:https://www.cnblogs.com/whwjava/p/8404619.html