zoukankan      html  css  js  c++  java
  • table表格,form表单

    (1)table 表格标签:

      table设置  border:1;属性,单元格带边框的效果;

        style="border_collapse:collapse;"表格中很细表格边线的制作;

      tr : 每行;

      td : 每行单元格的数据;

    (2)form表单标签:

      action : 提交的地址;

      method : 提交的方式 :  get(不安全) , post(相对安全)

    <!--如果action为空,那么默认是打开页面的地址
    缺点:form只能做提交操作,form表单不能接收数据.
    -->

      input表单控件:

        type : text:明文显示用户输入的数据;

             password 密文显示用户输入的数据;

           radio 单选按钮;

             checkbox : 复选框;

              file : 上传文件所用;

           submit : 功能固定化,负责将表中的表单控件提交给服务端;

        value : 控件的值即要提交给服务器的数据;

        name : 控件的名称 , 服务端用;

        disabled : 该属性只要表现在标签中,表示的是禁用该控件;

      注意 : 如果有文件需要提交给服务器,method必须为post , enctype必须为multipart/form_data

      状态码简单介绍:

        200以上 : 表示成功请求的状态码;

        300以上 : 缓存;

        400以上 : 404网页加载失败,前端出错;

        500以上 : 后端逻辑出错,后端业务逻辑出错;

    协议     主机地址  端口号  路由地址

    http : // locahost : 8080/s/a

    表单控件 : 

      input: type: text : 文本输入框;

           password : 密码;

           radio : 单选;

              checkbox : 多选;

           file : 文件上传;

           submit : 提交按钮;

           bottom : 普通按钮;

      select : option      text area : 多行文本输入框;

      

      以下是例子:

    <label for="user">用户名</label>
    <input type="text" name="username" value="" id="user"><br>
    密码: <input type="password" name="password"><br>
    性别: <input type="radio" name="gender" value="male" checked>男
    <input type="radio" name="gender" value="female" >女<br>
    爱好: <input type="checkbox" name="love" value="eat">吃饭
    <input type="checkbox" name="love" value="sleep">睡觉
    <input type="checkbox" name="love" value="bat" checked>打豆豆
    <!--如果是form表单提交,type一定是submit-->
    <br>
    <input type="submit" value="登录">
    <input type="button" value="登录2">
    <button type="submit" disabled>注册</button>
    <input type="reset" value="重置按钮" id="re"><br>
    <input type="file" value="文件选择框">
    <select multiple="" size="3">
    <option >小学</option>
    <option >初中</option>
    <option >高中</option>
    <option >大学</option>
    <option >研究生</option>
    </select>
    <textarea name="" id="" cols="50" rows="20"></textarea>
    </form>
    <form>
    <fieldset>
    <legend>账号信息</legend>
    姓名: <input value="呵呵">逗比<br>
    密码: <input type="password" value="pwd" size="50"><br>
    </fieldset>
    <fieldset>
    <legend>其他信息</legend>
    性别: <input type="radio" name="gender" value="male" checked="">男
    <input type="radio" name="gender" value="female">女<br>
    爱好: <input type="checkbox" name="love" value="eat">吃饭
    <input type="checkbox" name="love" value="sleep">睡觉
    <input type="checkbox" name="love" value="bat" checked>打豆豆
    </fieldset>

      前端跟后端进行交互有两种方式 :

      1. form标签提交 : 如果是get请求,那么会把表单控件input中的name属性对应的值封装成地址栏的key,value值封装成地址栏的value,打包发送到后端,后端进行相应的处理.

      2.Ajax技术

    css : 层叠样式表

      三种引入方式 : 1. 行内样式     优先级最高

             2.内接样式 : 基础css选择器:

                    id选择器

                    class选择器

                    标签选择器 : div

                    通配符选择器:*{}

                高级选择器 : 

                      后代(儿子,孙子 .....)选择器 : div p

                      子代(亲儿子)选择器 : div>p

              3. 外接样式

        placehdder   在input里把字变成虚字

        em根据当前文字的大小

  • 相关阅读:
    C#数据结构与算法系列(十三):递归——迷宫问题
    C#数据结构与算法系列(十二):递归(Recursion)
    C#数据结构与算法系列(十一):中缀表达式转后缀表达式
    C#数据结构与算法系列(十):逆波兰计算器——逆波兰表达式(后缀表达式)
    Quartz.Net系列(八):Trigger之CalendarIntervalScheduleBuilder详解
    Quartz.Net系列(七):Trigger之SimpleScheduleBuilder详解
    C#数据结构与算法系列(九):栈实现综合计算器(中缀表达式)
    Redis系列(五):数据结构List双向链表源码解析和API实现
    Quartz.Net系列(六):Quartz五大构件Trigger之TriggerBuilder解析
    C#数据结构与算法系列(八):栈(Stack)
  • 原文地址:https://www.cnblogs.com/fengkun125/p/9465633.html
Copyright © 2011-2022 走看看