一、form表单

1. form表单有什么用

  • 能够获取用户输入的信息（输入，选择， 上传的文件），并且将这些数据全部发送给后端

2. form表单的用法

（1）有两个重要参数：

  • action ： 控制数据提交的地址

    • 三种书写方式：

      1. 不写 ， 默认就是朝当前这个页面所在的地址提交数据
      2. 写全路径，如 http://www.baidu.com
      3. 只写路径后缀（/index/）
  • method ： 控制数据提交的方式
    • get form表单默认是get请求
    • post
  • enctype 控制前端朝后端提交数据的编码格式
    • 默认是urlencoded

      form表单如果想要传输文件 必须要做两件事

      1.method必须是post

      2.必须将默认的urlencoded换成formdata
<body>

	<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">

    </form>

</body>

（2）input 结合 label 一起使用

<body>

	<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">

1. 绑定id值方法一

<label for="d1">用户名:<input type="text" id="d1"></label>

绑定id值 之后在浏览器中点击label标签内文字任何的位置都可以自动选中input框

2. 绑定id值方法二

<label for="d2">用户名:</label>

<input type="text" id="d2">

     </form>

<body>

（3）input的type参数

  • 根据input的type属性的参数的不同，展示不同的功能，以下都是type的参数
  1. text 普通文本
  2. password 输入的内容，会变成密文
  3. date 日期
  4. radio 单选圆圈
  5. checkbox 多选 打钩
  6. hidden 隐藏
  7. file 传文件
  8. button 普通按钮，没有任何意义。然而却是最多的，你可以给它绑定js事件
  9. reset 重置按钮
  10. submit 提交按钮，能够自动触发form表单提交数据的动作

  • input标签的其他属性

    • disable 属性 ，禁用该input框
    • value属性 ， 设置默认值

  • 选择的标签，如何默认选中

    • radio

      • 添加checked = 'checked' 。当属性名和属性值相同的时候 可以只写属性名(******)
    • checkbox
      • 添加checked = 'checked' 。当属性名和属性值相同的时候 可以只写属性名(******)

  • select标签 ：下拉框

    • 一个个的option标签就是一个个的选项
    • 默认是单选
    • 你可以给select标签加一个multiple参数，就可以变成多选
    • 在option标签中添加selected属性类似checked，就可以默认选中

  • textarea 标签 获取大段文本

  • 能够触发form表单提交数据的动作的两个标签

    • input标签的type = submit
    • button标签（input标签的type参数也有button，两者作用不一样）

  • 所有获取用户输入的标签，都应该有name属性（*******）

    • name属性就类似于字典的key
    • input框获取到的用户输入都会自动放到input框的value属性中，无需自己在添加value属性

  • 针对所有选择框来说，传到后端的数据，由value属性接收再传到后端，所以要手动添加value属性。

  • form表单如果要提交文件数据，必须修改以下参数

    • enctype="multipart/form-data"

二、CSS

1. 什么是css

  • css就是层叠样式表

  • css就是用来控制html标签样式的，让其在浏览器上渲染的样式更合适，好看。

2. 注释

  • 单行注释：/*单行注释*/

  • 多行注释：

    /*
    
多行注释`1
    
多行注释2
    
*/

  • 注释的作用

    • 通常我们在写css的时候，都会单独写一个css文件，里面只有css代码
    • 这时，就用注释来标注和区分一个个功能

3. css的语法结构

  • 选择器 {属性1：属性值1}

4. css的三种引入方式

  1. 通过head标签内部的link标签引入外部的css文件（最正规的用法）

    <link rel="stylesheet" href="css文件路径（只能放相对路径）">

  2. 直接在html页面上的head内通过style标签直接书写css代码

<style>

    h1 {

        color: green;

    }

</style>

  1. 行内式（直接在标签内部通过style属性直接书写），不推荐使用

    <h1 style="color: orange">我是Oscar</h1>

5. css 查找标签方法

（1）基本选择器

  1. 元素选择器（即标签选择器）

    让页面上的所有该标签都变成红色

标签名 {
    
            color: red;
    
        }

  2. id选择器

    让id为该id值的标签变成绿色 (# + id值)

#id值 {
    
            color: green;
    
        }

  3. 类选择器

    让类中有c1的标签都变成粉红色 (. +类值)
    
.c1 {
    
            color: pink;
    
        }

  4. 通用选择器

    让页面的所有标签都变成橘黄色
    
* {
    
            color: orange;
    
        }

（2）组合选择器

  1. 后代选择器

    只要在标签内部都算作该标签的后代，用1个空格连接
    
如div 内部的所有span标签：

div span {
    
           color: red;
    
        }

  2. 儿子选择器

    表示一个标签内部的第一层标签。用 > 连接
    
如 div内的第一个span是儿子标签，第二个是div的孙子标签
    
<div>
    
	<span>adff</span> # div 的儿子标签
    
	<p>dsfsadf		  # div 的儿子标签
    
		<span>iuiuio</span> # div 的孙子标签
    
	</p>
    
</div>

儿子选择器语法：
    
div>span {
    
            color: green;
    
            }

  3. 弟弟选择器

    属于同一级别标签的标签1的之下的标签都是标签1的弟弟标签， 用 ~ 连接

<div>div
    
    <span>div里面的span</span>
    
    <p>div里面的p
    
        <span>div里面的p里面的span</span>
    
    </p>
    
    <span>div里面最下面的span</span>
    
</div>
    
<p>ppp</p>		   # div 的毗邻标签 也是 # div 的弟弟标签 。当毗邻选择器和弟弟选择器同时出现的时候，以毗邻选择器优先。
    
<span>span</span>  # div 的弟弟标签
    
<p>ppp</p>		   # div 的弟弟标签
    
<span>span</span>  # div 的弟弟标签

弟弟选择器语法：

div~span {
    
    color : yellow
    
}

  4. 毗邻选择器

    毗邻选择器 标签1的下方的第一个同级别标签 ，用 + 连接

<div>div
    
    <span>div里面的span</span>
    
    <p>div里面的p
    
        <span>div里面的p里面的span</span>
    
    </p>
    
    <span>div里面最下面的span</span>
    
</div>
    
<p>ppp</p>		    # div 的毗邻标签 也是 # div 的弟弟标签 。当毗邻选择器和弟弟选择器同时出现的时候，以毗邻选择器优先。
    
<span>span</span>  # div 的弟弟标签
    
<p>ppp</p>		   # div 的弟弟标签
    
<span>span</span>  # div 的弟弟标签

div+span {
    
            color: aqua;
    
        }

（3）属性选择器

  • 标签的补充

    • 任何的标签都有自己的默认的属性 id class
    • 标签还支持你自定义任何数量的属性(也就意味着可以让标签帮你携带一些额外的数据)(******)
  • <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
    <style>
    
        /*
    
        1.含有某个属性名的标签
    
        2.含有某个属性名并且属性值是...的标签
    
        3.找p标签并且含有某个属性名并且属性值是...的标签
    
        */
    
        [password] {
    
            color: red;
    
        }

        [username='jason'] {
    
            color: black;
    
        }

        span[username='jason'] {
    
            color: red;
    
        }
    
    </style>
    
</head>
    
<body>
    
<p username="jason">ppp</p>
    
<p username="oscar">ppp</p>
    
<p username="sean">ppp</p>
    
<span username="jason">span</span>
    
<span password="123">span</span>
    
<div password>div</div>
    
</body>
    
</html>

（4）伪类选择器

  • hover状态所有标签都有

  • a标签有四种状态

    1.没有被点击过

    2.鼠标悬浮上面

    3.点击之后不松手

    4.点击之后 再回去

    依次对应上面a标签的4种状态
    
<style>
    
        a:link {
    
            color: red;
    
        }
    
        a:hover {  /*hover表示的就是悬浮的意思*/
    
            color: black;
    
        }
    
        a:active {
    
            color: orange;
    
        }
    
        a:visited {
    
            color: pink;
    
        }

input输入框的聚焦状态：
    
        input:focus {
    
            background-color: orange;
    
        }
    
普通文本的鼠标悬浮状态：
    
        span:hover {
    
            background-color: pink;
    
        }
    
    </style>

  • input输入框的两种状态

    • 我们将input框鼠标点进去之后的那个状态叫做 input获取焦点 聚焦 focus；

    • 鼠标移出去之后的状态 叫做input框失去焦点

（5）伪元素选择器

  • (清除浮动带来的负面影响)，可以通过css添加文本内容

    p标签的文本信息首个字符变大且变成红色：
    
		p:first-letter {
    
            font-size: 48px;
    
            color: red;
    
        }
    
p标签的文本信息首个字符前面加绿色的 * ，content的内容不能被选中
    
        p:before {
    
            content: '*';
    
            color: green;
    
        }
    
p标签的文本信息末尾加上蓝色的 ？	，content的内容不能被选中
    
        p:after {
    
            content: '?';
    
            color: blue;
    
        }

    6.选择器的优先级

    1.选择器相同的情况下 引入方式不同

    遵循就近原则 谁离标签更近 就听谁的 ， 行内选择器优先级最高

    2.选择器不同的情况下

    行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器

7.分组与嵌套

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

***************分组写法，把同等级标签写在一起*********************

        div,span,p {

            color: blue;

        }

****************嵌套，各种选择器放在一起写，前提是他们对应的标签要是同等级的标签。用逗号隔开****************

        #d1,.c1,p {

            color: orange;

        }

    </style>

</head>

<body>

<div id="d1">div</div>

<span class="c1">span</span>

<p class="c2">

    p

</p>

</body>

</html>

form表单和CSS的更多相关文章

  1. 前端-form表单与CSS

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

  2. （day43）form表单、css

    目录 昨日回顾 一.HTTP协议 (一)四大特性 (二)数据格式 (1)请求格式 (2)响应格式 (三)响应状态码 二.HTML (一)什么是HTML (二)注释 (三)文档结构 (四)head内标签 ...

  3. 1113 form表单与css选择器

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

  4. 前端form表单与css

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

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

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

  6. form表单和CSS基础

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

  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. Elasticsearch 6.2.3版本 Windows环境 简单操作

    背景描述 Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进.性能最好的.功能最全的搜索引擎库. El ...

  2. 精通CSS：高级Web标准解决方案（第二版） 不明白的地方

    P47 在图3-14中,当把框1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘.因为它不在处于文档流中,所以它不占据空间,实际上覆盖住了框2,使框2从视图中消失. 我的疑问是, ...

  3. python3实现自动化框架robotframework(最新)

    # python3.6及以上版本兼容RIDE1.7.3版本由于最近RIDE1.7.3的版本改进,RIDE这个版本对高版本的wxpython兼容很好,python3.6及以上版本都可以顺利运行RIDE为 ...

  4. Unity 声音与录音与麦克风实时播放

    Unity AudioSource与MicroPhone以及AudioClip之间的关系. 下面是一个声音,长度为7秒钟,声音的实际数据本质是由采样点组成的的列表,一秒钟内的采样点数就是采样频率,下面 ...

  5. ELK+Kafka

    kafka:接收java程序投递的消息的日志队列 logstash:日志解析,格式化数据为json并输出到es中 elasticsearch:实时搜索搜索引擎,存储数据 kibana:基于es的数据可 ...

  6. 一本值得你反复研读的Python佳作《Python编程从0到1》

    现在的Python入门书太多太多了,究竟如何选择呢? 当然选最好的最入门的讲解最清晰的,没有那么多废话的. 现在就推荐一本<Python编程从0到1>,还带视频的,到时候跟大家一起学习沟通 ...

  7. 【miscellaneous】网络摄像机

    自20世纪90年代初期网络摄像机开始诞生,产业已历经20余年的演变. "IP大时代"的口号在安防领域已响彻已久,但也是自2015年至今才开使有了真正的底气.当全面超越模拟已尘埃落定 ...

  8. 微信小程序request请求封装，验签

    1/ 公共文件util添加 request请求 //简单封装请求 function request(params, path, isShowLoading = true, goBack = false ...

  9. kubernetes集群node加入不了master错误处理

    #如果node加入不了master或者加入成功但是,在master中显示不出来.排查错误:1. 运行,kubelet, 查看日志,一般是kubelet的运行和docker启动方式不匹配.调整:vim  ...

  10. HDU 1873 看病要排队（优先队列）

    看病要排队 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...