• 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根据当前文字的大小

  • 相关阅读:
    Fiddler: Creation of interception certificate failed.
    ip地址检查正则表达式 兼容ipv4,ipv6
    母版页与子页的启动过程
    erlang 读取confg文件异常 could not start kernel pid error in config file
    转义字符 显示形式 转换成 实际形式 \\n to \n
    How to use epoll? A complete example in C
    Lex & Flex 词法分析器实践(未完,持续更新)
    我理解的爱情———柳智宇 (转载)
    Learning by doing 系列文章概述
    锁与RCU数据共享机制
  • 原文地址:https://www.cnblogs.com/fengkun125/p/9465633.html
Copyright © 2020-2023  润新知