目录

昨日回顾

一、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. java jvm虚拟机类加载器

    在Java中任意一个类都是由这个类本身和加载这个类的类加载器来确定这个类在JVM中的唯一性. 类加载器 虚拟机设计团队把类加载阶段中的“通过一个类的全限定名来获取描述此类的二进制字节流”这个动作放到J ...

  2. CF 938G Shortest Path Queries

    又到了喜闻乐见的写博客清醒时间了233,今天做的依然是线段树分治 这题算是经典应用了吧,假的动态图(可离线)问题 首先不难想到对于询问的时间进行线段树分治,这样就可以把每一条边出现的时间区间扔进线段树 ...

  3. ClassLoader.getSystemResourceAsStream("a.txt")获取不到资源文件

    一.解决方案 换成XXX.class.getClassLoader().getResourceAsStream("a.txt")即可. 二.场景复现 src/main/resour ...

  4. Pencil 基于Electron的GUI原型工具之菜单再探

    为什么要重试呢? 主要是觉得Pencil这个工具还是比较有价值.就像Linus对Linux下分发版的态度"让用户有选择"一样,在现在这个Sass服务.Web服务化越来越普遍越便利的 ...

  5. HTTPS 相关问题

    什么是 HTTPS? HTTPS,是指超文本传输安全协议(Hypertext Transfer Protocol Secure),是一种在 HTTP 协议基础上进行传输加密的安全协议,能够有效保障数据 ...

  6. Netty中的ChannelFuture和ChannelPromise

    在Netty使用ChannelFuture和ChannelPromise进行异步操作的处理 这是官方给出的ChannelFutur描述 * | Completed successfully | * + ...

  7. 转 OpenCV Mat 数据读写

    转:https://blog.csdn.net/u011520181/article/details/83831866 1.创建 Mat 对象: // 创建一个 320x240 的 8 位无符号型 4 ...

  8. js变量--全局变量和局部变量

    1.javaScript中在函数里声明的变量为局部变量,其余为全局变量. 2.javaScript没有块级元素

  9. jakarta-oro-2.0.8.jar-----------JAVA FTP相关

    资源不好找,找到了就和大家分享一下! 链接:https://share.weiyun.com/51kBB0y 密码:2hcxcu

  10. IntelliJ IDEA2018激活码

    使用前提: 在hosts文件里面添加一行,hosts文件在Windows系统中的路径:C:\Windows\System32\drivers\etc\,Linux系统存放在/etc目录下. 0.0.0 ...