目录

昨日回顾

一、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. 游戏设计艺术 第2版 (Jesse Schell 著)

    第1章 太初之时,有设计师 (已看) 第2章 设计师创造体验 第3章 体验发生于场景 第4章 体验从游戏中诞生 第5章 游戏由元素构成 第6章 元素支撑起主题 第7章 游戏始于一个创意 第8章 游戏通 ...

  2. Go 中 ORM 的 Repository（仓储）模式

    ORM 在业务开发中一直扮演着亦正亦邪的角色.很多人赞颂 ORM,认为 ORM 与面向对象的契合度让代码简洁有道.但是不少人厌恶它,因为 ORM 隐藏了太多的细节,埋下了超多的隐患.在 Go 中,我们 ...

  3. CodeForce 359C Prime Number

    Prime Number CodeForces - 359C Simon has a prime number x and an array of non-negative integers a1,  ...

  4. SQL Server温故系列(0)：导航目录

    创建本系列博文通用库表及数据的 SQL 语句:下载 SQL Server温故系列(0):导航目录 SQL Server温故系列(1):SQL 数据操作 CRUD 之增删改合 SQL Server温故系 ...

  5. 剑指 Offer——2. 替换空格

    题目描述 请实现一个函数,将一个字符串中的每个空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 思路与实现 ...

  6. Javascript 关于基本类型和引用类型的个人理解

    一.基础类型 A. 基础类型有5种,Number,String,Boolean,Null,Undefined B. 基础类型没有堆的概念,堆只针对引用类型. 所有基础类型都是以key-value形式存 ...

  7. page的js访问全局变量:app.globalData.openid

    page获取app.js:const app = getApp(); page的js访问全局变量(get/set):const app = getApp(); app.globalData.openi ...

  8. Android培训准备资料之五大布局简单介绍

    本篇博客主要简单的给大家介绍一下Android五大布局 (1)LinearLayout(线性布局) (2)RelativeLayout(相对布局) (3)FrameLayout(帧布局) (4)Abs ...

  9. 章节十五、2-PageObjectModel

    一.在实现自动化过程中,会有很多重复的代码,我们在维护代码时会很困难,如果想解决这个问题,我们就需要使用PageObjectModel(页面对象模型)的方式来进行自动化代码的书写. 二.案例演示 以该 ...

  10. LeeCode——Combine Two Tables

    Table: Person +-------------+---------+ | Column Name | Type | +-------------+---------+ | PersonId ...