zoukankan      html  css  js  c++  java
  • HTML Class 3

    学习内容:

    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

  • 相关阅读:
    module(JS模块系统)
    Sass 教程
    Vue编写的页面部署到springboot网站项目中出现页面加载不全问题
    vue安装教程
    李大庆 软件工程 课后作业(一) 自我介绍
    课后作业(一)
    软工假期预习作业1
    浅谈C#中 加密方式
    C# 日志帮助类
    开荒笔记---UML类图之间的几种关系介绍
  • 原文地址:https://www.cnblogs.com/whwjava/p/8404619.html
Copyright © 2011-2022 走看看