目录

昨日回顾

一、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. eclipse 错误日志地址

    我们用eclipse插件的时候,有时插件会报错误,那么这些错误日志在哪儿放着呢? 这些错误日志的存放位置是:“你的workspace名称\.metadata\.log”,如果我们的eclipse报错了 ...

  2. CF-55 C.Pie or die

    做法:先把四个角分别覆盖一条边,于是问题转化为判断离边最近的一个点是否离边的距离大于等于4 #include<iostream> #include<cstdio> #inclu ...

  3. CF-1208 C.Magic Grid

    题目 大意:构造一个n行n列的矩阵,使得每一行,每一列的异或和都相等,n是4的倍数. 先看4*4的矩阵,我们很容易构造出符合要求的矩阵,比如 0    1    2    3 4    5    6  ...

  4. pywinauto教程2

    一.环境安装 1.命令行安装方法 pip install pywinauto==0.6.7 2.手动安装方法 安装包下载链接:pyWin32: python调用windows api的库https:/ ...

  5. ideal 切换git和svn

    原文地址:https://blog.csdn.net/lixld/article/details/98851427 intellij ideal gi和svn切换: 之前项目是svn的,新的项目用了g ...

  6. LeetCode 19：删除链表的倒数第N个节点 Remove Nth Node From End of List

    给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. Given a linked list, remove the n-th node from the end of list and ...

  7. let/const特性

        let: 1.声明的变量不存在预解析: console.log(a); let a=1; 2.变量名不允许重复(在同一作用域下): { let a=1; let a=2; console.lo ...

  8. sierpinski地毯(II)

    今天又是因为可以用py而高兴的一天. 继续咱的sierpinski地毯计划. 二,随机算法 在二十年前,磁盘容量以MB还是KB计的时候,分形解决计图的问题确实有很大的优势.存至多十来个数就好了.我要在 ...

  9. mysql批量更新数据(性能优化)--第二种方式

    Spring+Mybatis 手动控制事务 参考: https://blog.csdn.net/qq_41750175/article/details/87621170 public boolean ...

  10. 启明星MRBS会议室预约系统V30.0发布

    MRBS系统官方网址 https://www.dotnetcms.org/ 在线演示 http://demo.dotnetcms.org/mrbs 用户名admin,密码123456 Meeting ...