目录

昨日回顾

一、HTTP协议

（一）四大特性

  1. 基于TCP/IP作用于应用层之上的协议

  2. 基于请求响应

  3. 无状态

    不保存用户状态，所以才有了cookies、session、token、自定义加密字符串

  4. 无连接

（二）数据格式

（1）请求格式

请求首行（请求方式 协议版本）
请求头（一堆键值对）

请求体（只有向后段提交数据的时候，post）

（2）响应格式

响应首行（响应方式、协议版本）
响应头（一堆键值对）

响应体

（三）响应状态码

用文字表示一堆文字信息

  1. 1xx：服务端已经成功接收到你的请求，正在处理，你可以继续提交数据
  2. 2xx：服务端对你的请求出了成功的响应200
  3. 3xx：重定向（当你访问A的时候，跳转到了B）
  4. 4xx
    1. 404：请求资源不存在
    2. 403：当前不符合条件、服务端拒绝访问
  5. 5xx：服务器内部错误，500

注意;每个公司都可自定义自己的状态码，可以不完全按照上面的规定

二、HTML

（一）什么是HTML

超文本标记语言，它仅仅是一门标记语言，并不是编程语言，包含了一堆标签，一种网络上传输数据的规则

（二）注释

（三）文档结构

<html>
    <head></head>
    <body></body>
</html>

（四）head内标签

  1. title：网页标题
  2. style：自定义css代码
  3. link：外部引入css代码
  4. script：定义和外部引入js代码
  5. meta：网页源信息

（五）body内标签

（1）常用标签

  1. h：标题
  2. p：段落
  3. u：下划线
  4. i：斜体
  5. s：删除线
  6. b：加粗
  7. br：换行
  8. hr：分割符

（2）重要标签

一个标签通常都应该有两个属性：id（唯一性）和class

  1. div：块级元素

  2. span：行内元素

  3. a：超文本链接

    1. href

      1. 跳转到url
      2. 跳转到另外的本地html文件
      3. 锚点功能：html文件中位置的跳转
    2. target
      1. _self：当前页面跳转，默认值
      2. _blank：新建页面跳转

  4. img：图片链接

    1. src：图片的地址，可以是网上的，也可以是本地的
    2. alt：图片加载不出来的时候，默认的提示信息
    3. title：鼠标悬浮在图片上的时候，显示的提示信息
    4. width和height：如果只设置一个，会等比例缩放或者扩大

  5. 列表标签

    1. ul>li：无序列表、type参数（disc、square、none、circle）
    2. ol>li：有序列表、type参数（1、A、a、I、i）
    3. dl>dt>dd：列表、标题、内容

  6. 表格标签

    <table>
    <thead>
        <tr>
            <th>字段</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>字段值</td>
        </tr>
    </tbody>
</table>

（3）重要符号

  1. 空格：&nbsp;
  2. &：&amp;
  3. ¥：&yen;
  4. >：&gt;
  5. <：&lt
  6. 版权：&copy;
  7. 注册：&reg;

（六）标签分类

（1）自闭和标签和双标签

（2）块级标签和行内标签

  1. 块级标签：独占一行，可以嵌套其他块级和行内标签，p标签只能嵌套行内标签
  2. 行内标签：不能嵌套

今日内容

一、form表单

（一）什么是form表单

  1. 能够获取用户输入、包括输入的内容、选择和上传的文件，再发送给后端
  2. 所有获取用户输入的标签、都应该有name属性
    1. name属性相当于字典的key
    2. 用户输入都会放到对应标签的value属性中

（二）参数

（1）action

控制数据提交的地址，三种赋值方式：

  1. 不赋值，默认向当前这个页面所在的地址提交数据
  2. 全路径(https://www/baidu.com)
  3. 只写路径后缀（/index/）

（2）method

控制数据提交的方式，get和post，form表单中默认是get请求

（3）enctype

如果要提交文件数据，必须修改以下数据：enctype="multipart/form-data"

（4）novalidate

规定当提交表单时不对其进行验证。

（三）input标签

（1）如何使用

通常情况下，input需要结合label一起使用

<!--使用方式1-->
<label for="d1">用户名:<input type="text" id="d1"></label>
绑定id值 之后点击label标签内任何的位置都可以自动选中input框

<!--使用方式2-->
<label for="d2">用户名:</label>
<input type="text" id="d2">

（2）input内参数

1. type

  1. text：用户输入的内容显示成普通文本
  2. password：用户输入的内容显示成密文
  3. date：日期
  4. radio：单选圆圈
  5. checkbox：多选打钩
  6. hidden：隐藏
  7. file：传文件
  8. button：没有任何意义的普通按钮、用来绑定js动作
  9. reset：重置按钮
  10. submit：提交按钮，触发form表单提交数据功能

2. disabled

无需赋值，添加后会禁止用户操作该input框

3. checked

当type=radio和type=checkbox的选择输入时，默认选中设置：

  1. checked='checked'，当属性名和属性值相同的时候 可以只写属性名

（四）button标签

触发form表单提交数据

（五）select标签

下拉框标签

（1）multiple参数

可以使其变成多选，不用赋值

（2）option标签

  1. 嵌套在select标签中、下拉框中的选项内容
  2. value参数：后端中接收到的值

（六）textarea标签

获取大段文本

二、css

（一）什么是css

层叠样式表，用来控制html标签样式

（二）注释

/*注释内容*/

（三）css代码样式

/*这是网站首页的css样式文件*/
/*通用样式*/
/*导航条样式*/
/*轮播图样式*/

（四）语法结构

选择器 {属性:属性值;}

（五）三种引入方式

（1）link标签（内联式）

<link rel='stylesheet' href="css样式.css">

（2）style标签（外联式）

<style>
    h1 {
        color:green;
    }
</style>

（3）行内（行间式）

直接在标签内部通过style属性直接书写

<h1 style="solor:red">我是标题1</h1>

（六）选择器

（1）基本选择器

  1. 标签选择器

    p {color:red;}

  2. id选择器（其次）

    #d1 {color:red;}

  3. class选择器（使用最频繁）

    .c1 {color:red;}

  4. 通配选择器

    * {color:red;}

（2）组合选择器

  1. div span（后代选择器）

    选择div内部的所有span标签内容：

    div span {color:green;}

  2. div>span（子代选择器）

    只选择div子级的span标签内容：

    div>span {color:red;}

  3. div+span（相邻选择器）

    只选择div之后相邻的span标签内容：

    div+span {color:red;}

  4. div~span（兄弟选择器）

    选择div同级的span标签内容：

    div~span {color:red;}

（3）属性选择器

  1. 任何的标签都有自己默认的属性id和class
  2. 标签中可以自定义任意多的属性，也可以携带数据
/*选择带有某个属性的元素*/
[password] {color:red;}

/*选择含有某个属性并且规定了属性值的元素*/
[password = '123'] {color:red;}

/*选择p标签带有某个属性的元素,不能有空格*/
p[password] {color:red;}

/*选择p标签并且含有某个属性并且规定了属性值的元素，不能有空格*/
p[password='123'] {color:red;}

（4）分组和嵌套

  1. 分组

    同时选择多个标签内容：

       div,p {color:red;}

  2. 嵌套

    多种选择器混合使用，比如选择.c1内部所有p标签内容：

    .c1 p {
    color:red;
}

（5）伪类选择器

  1. link

    连接未访问时

    a:link {color: red;}

  2. hover

    鼠标悬浮时

    a:hover{color:red;}

  3. active

    鼠标点击后不松开时

    a:active{color:red;}

  4. visited

    连接访问后

    a:visited{color:red;}

  5. focus

    input聚焦时，即当鼠标点进input框之后的状态

    input:focus {
            background-color: orange;
        }

（6）伪元素选择器

before、after多用于清除浮动带来的负面影响，可以通过css添加文本内容

  1. first-letter

    首字符

    p:first-letter {
            font-size: 48px;
            color: red;
        }

  2. before

    在每个

    元素之前插入内容

    p:before {
            content: '*';
            color: green;
        }

  3. after

    在每个

    元素之后插入内容

    p:after {
            content: '?';
            color: blue;
        }

（七）选择器优先级

  1. 选择器相同时，遵循就近原则，谁离标签更近，就遵循哪个
  2. 选择器不同时，行内选择器>id选择器>类选择器

（day43）form表单、css的更多相关文章

  1. 1113 form表单与css选择器

    目录 1.form表单 form元素 特点 参数 form元素内的控件 1.input的使用 2.select标签 3.textarea元素 4.autofocus属性 2.CSS 1.基础语法 cs ...

  2. 前端form表单与css

    form表单(******) 能够获取用户输入(输入,选择,上传的文件) 并且将用户输入的内容全部发送给后端 参数 action 控制数据提交的地址 三种书写方式 1.不写 默认就是朝当前这个页面所在 ...

  3. form表单和CSS

    一.form表单 1. form表单有什么用 能够获取用户输入的信息(输入,选择, 上传的文件),并且将这些数据全部发送给后端 2. form表单的用法 (1)有两个重要参数: action : 控制 ...

  4. 前端之form表单与css（1）

    目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...

  5. form表单和CSS基础

    form 表单 input type="" 表单的组合标签,用来确定需要的是什么输入类型 type属性值: 文本输入框:text 密码输入框:password 单选按钮:radio ...

  6. 前端-form表单与CSS

    目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...

  7. form表单与CSS选择器和样式操作

    form表单 """获取前端用户数据并发送给后端服务器""" <form action=""></fo ...

  8. form表单，css简介，css选择器，css样式操作

    form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...

  9. form表单与css选择器

    目录 form表单 action属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...

随机推荐

  1. Spring Boot 2.2.1 正式发布，需特别注意这个注解的使用！

    Spring Boot 2.2.1 已于2019年11月7日正式发布. 该版本内容包含110项修复.改进和依赖升级. 如果开发者要从Spring Boot 2.2.0升级到2.2.1的话,这里要特别注 ...

  2. 冒泡排序法（C语言）

    冒泡排序(Bubble Sort)一种计算机科学领域的较简单的排序算法.它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果顺序(如从大到小.首字母从从Z到A)错误就把他们交换过来.走访元素的工 ...

  3. vue-cli2.0和vue-cli3.0中当发布到生产环境时禁用console.log

    vue-cli2.0中的方法 1.安装插件 npm install uglifyjs-webpack-plugin --save-dev 2.修改webpack.prod.conf.js配置文件 co ...

  4. 使用nexus搭建maven仓库（maven 本地私服）

    我们在使用maven的时候,对于项目所依赖的jar包,maven默认会在中央仓库下载jar包,到本地的磁盘目录(如果没有配置则是用户目录下/.m2/repository文件夹下).如果公司内部搭了一个 ...

  5. Java单元测试简述

    最开始项目中是没有单元测试的,基本都是自己通过各种方式来实现测试的.比如修改代码,测完再改回来:再比如直接模拟用户操作,直接当黑盒测试,然后自己去看相应的逻辑有没有,状态有没有改变. 这些方式有几个缺 ...

  6. Prometheus 监控K8S Node监控

    Prometheus 监控K8S Node监控 Prometheus社区提供的NodeExporter项目可以对主机的关键度量指标进行监控,通过Kubernetes的DeamonSet可以在各个主机节 ...

  7. 【目标检测】关于如何在 PyTorch1.x + Cuda10 + Ubuntu18.0 运行 CenterNet 源码

    这几天一直在尝试运行CenterNet的源码,但是出现各种问题,本已经打算放弃,中午吃完饭又不甘心,打算重新安装环境再来一遍,没想到竟然成功了.所以,坚持下去,黑夜过后便是黎明. 注意:gcc/g++ ...

  8. 【JS】---5 JS通过事件隐藏显示元素

    JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none    <div id=" ...

  9. HM NIS Edit制作安装包时检测是否有.net4.6环境，没有的时候自动安装。

    把.net4.6安装包打包进安装程序. 关键脚本如下: 头部引用字符串对比库 !include "WordFunc.nsh" 新建一个Section,.Net4.6的文件版本号是4 ...

  10. js、jquery、css属性及出错集合

    *)注意使用jquery设置css的语法 css("propertyname","value");#单个时时逗号 css({"propertyname ...