form表单

"""获取前端用户数据并发送给后端服务器"""
<form action=""></form> # 需要在form标签内部编写获取用户数据标签 # 1.属性action
控制数据的提交地址
方式1:写全路径
action="http://www.aa7a.cn/user.php"
方式2:写后缀(自动补全IP和PORT)
action="user.php"
方式3:不写(朝网页所在的地址提交)
action=""
'''URL:统一资源定位符(网址)'''
# 2.input标签
获取用户各中类型数据的标签(html里面的变形金刚)
type属性
text 正常展示的普通文本
password 密文展示
date 日历展示
radio 单选
可以通过添加checked="checked"设置默认值
ps:如果属性名和属性值相同 可以简写checked
checkbox 多选
可以通过添加checked="checked"设置默认值
ps:如果属性名和属性值相同 可以简写checked
email 邮箱格式数据
file 文件数据
可以通过添加multiple属性控制获取单个还是多个文件
submit 触发form表单提交数据的动作
能够触发form表单提交数据动作的标签有两个
1.input的type=submit
2.button标签
reset 重置页面填写的数据
button 普通按钮默认没有任何的功能
意味着以后可以给它添加任意的功能(JS事件)
# 3.select标签
下拉框
<select name="province" id="">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="SZ">深圳</option>
</select>
一个个的下拉选项是一个个option标签
默认是单选 也可以添加multiple变成多选
# 4.textarea标签
获取大段文本内容
<textarea name="desc"></textarea>
"""
input标签中有两个非常重要的属性
1.name属性
类似于字典的key(前端程序员写)
2.value属性
类似于字典的value(用户自己传)
如果标签是选择类型的 那么还需要前端程序员自己填写value
用于区分具体数据含义
ps:我们在编写input标签的时候应该添加name属性
"""
# 3.label标签
专门给input标签配文字说明 也可以不使用
方式1
<label for="d1">用户名:</label>
<input type="text" id="d1">
方式2
<label>用户名:
<input type="text">
</label>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<form action="">
<div>用户名:
<input type="text" name="username">
</div>
<div>密码:
<input type="password" name="password">
</div>
<p>性别:
男<input type="radio" name="gender" checked = checked>
女<input type="radio" name="gender">
其他<input type="radio" name="gender">
</p>
<p>生日:
<input type="date">
</p>
<p>爱好:
篮球<input type="checkbox" name="baskeball">
足球<input type="checkbox" name="football">
排球<input type="checkbox" name="volleyball">
</p>
<p>邮箱:
<input type="email" name="email">
</p>
<p>单个文件:
<input type="file" name="single_file">
</p>
<p>多个文件:
<input type="file" multiple name="files_list">
</p>
<p>省份:
<select name="province" id="">
<option value="sh">上海</option>
<option value="js">江苏</option>
<option value="zj">浙江</option>
</select>
</p>
<p>好友:
<select name="friends" id="" multiple>
<option value="ah">安徽</option>
<option value="la">六安</option>
<option value="sh">上海</option>
</select>
</p>
<p>
<input type="submit" value="注册">
<button>点击我也可以注册</button>
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</p>
</form>
</body>
</html>

网络请求方式

"""最常见的网络请求方式有两种"""
1.get请求
朝服务端索要数据
2.post请求
朝服务端提交数据
# 两种请求都可以携带数据
get请求是在url后面通过?组织数据
url?name=jason&pwd=123&email=123@qq.com post请求是在请求体中组织数据
HTTP协议请求数据格式

CSS简介

# 1.语法结构
选择器 {属性名1:属性值1;属性名2:属性值2}
# 2.语法注释
/*注释内容*/
# 3.多种引入css的方式
1.head内style标签内部直接编写css代码
建议在小白学习阶段可以使用 方便查看
2.head内link标签引入外部css文件
工作中一般使用的都是link形式 符合标准
3.标签内部通过style属性直接编写
第三种也称之为"行内式"是最不推荐使用的一种方式
因为它会将HTML和CSS柔和到一起 增加了耦合度

CSS查找标签之基本选择器

# 1.标签选择器(范围查找)
直接通过标签名查找标签
h1 {
color: deeppink; /*让所有h1标签内部所有的字体颜色变为深粉色*/
}
# 2.类选择器(范围查找)
通过标签的class属性查找标签(关键性符号是句点符)
.c1 {
color: greenyellow; /*将所有class属性中含有c1的标签内部字体颜色改为亮绿色*/
}
# 3.id选择器(精确查找)
通过标签的id属性查找标签
#d1 {
color: orange;
}
# 4.通用选择器(了解 几乎不用)
查找所有的标签
* {
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <style>-->
<!-- h1{-->
<!-- color: brown;-->
<!-- }-->
<!-- </style>-->
<!-- <link rel="stylesheet" href="">-->
<!-- <style>-->
<!-- h1{-->
<!-- color: red;-->
<!-- }-->
<!-- </style>-->
<style>
.c1{
color: aqua;
}
</style>
<style>
#d1{
color: darkmagenta;
}
</style>
</head>
<body>
<!-- <h1 style="color: red">好好学习</h1s>-->
<h1 class="c1 c2">好好学习</h1>
<h2 class="c3 c2">好好学习</h2>
<h3 class="c1">好好学习</h3>
<h3 id="d1">好好学习</h3>
<h5 class="c3">好好学习</h5>
<h1 class="c2">好好学习</h1>
</body>
</html>

CSS查找标签之组合选择器

<div id="d1">div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
通过嵌套层级来表示亲属关系
1.对于div1来说div2、p2、span2都是儿子
2.对于div2、p2、span2来说div1就是父亲
3.对于p1来说div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
4.对于span2来说div2、p2是哥哥 span2是弟弟
5.div1内部所有的标签无论层级都可以称之为是div1的后代
ps:判断的时候一定要看层级关系
# 1.儿子选择器(关键符号是大于号)
#d1 > span { 查找id是d1标签内部所有的儿子span
color: red;
}
# 2.后代选择器(关键符号是空格)
#d1 span { 查找id是d1标签内部所有的后代span
color: red;
}
# 3.毗邻选择器(关键符号是加号)
#d1 + a { 查找id是d1标签同级别下面紧挨着第一个a标签
color: red;
}
# 4.弟弟选择器(关键符号是小波浪号)
#d1 ~ a { 查找id是d1标签同级别下面所有a标签
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合标签</title>
<!-- <style>-->
<!-- #d1 > span {-->
<!-- color: red;-->
<!-- }-->
<!-- </style>-->
<style>
#d1 span {
color: red;
}
</style>
<!-- <style>-->
<!-- #d1 + a{-->
<!-- color: aquamarine;-->
<!-- }-->
<!-- </style>-->
<style>
#d1 ~ a{
color: aquamarine;
}
</style>
</head>
<body>
<div id="d1">div1
<div>div2
<p>p1</p>
<span>span4</span>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
<span>span3</span>
</div>
<a href="">222</a>
<a href="">222</a>
<a href="">222</a>
</body>
</html>

属性选择器

# 根据标签内部的属性名和属性值查找标签(关键符号是中括号)
1.方式1:直接通过属性名查找
[type] {
background-color: red;
} 2.方式2:属性名是type并且值是text的标签
[type='text'] {
background-color: red;
} 3.方式3:属性名是type并且值是text的div标签
div[type='text'] {
background-color: red;
}

分组与嵌套

# 1.分组
div, p, span { 查找div或者p或者span
color: red;
}
# 2.嵌套
#d1, .c1, span { 查找id是d1或者class包含c1或者span
color: red;
}
"""
综合玩法
玩法1
div#d1 查找id是d1的div标签
div.c1 查找class包含c1的div标签
玩法2
div #d1 查找div内部id是d1的后代标签
#d1>.c1 查找id是d1的内部class包含c1的儿子标签

伪类选择器

# 1.鼠标悬浮
p:hover { 鼠标移动到p标签上方 字体颜色动态修改为橙色
color: orange;
}
# 2.获取聚点
input:focus { 输入框被鼠标左键选中(聚焦)
background-color: black;
}

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属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...

  3. 前端-form表单与CSS

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

  4. form表单,css简介,css选择器,css样式操作

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

  5. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  6. (day43)form表单、css

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

  7. 前端form表单与css

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

  8. form表单和CSS

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

  9. 前端之form表单与css(1)

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

随机推荐

  1. Python form...import...和import的区别(自己理解的)

    Python有两种导入包和模块的方式,区别如下 form...import... import 相对导包 导入不同包子模块 可以导入模块所需变量/函数/类   init文件的__all__特殊变量(模 ...

  2. TCP(三)

    1.三次握手 置位概念:根据TCP的包头字段,存在3个重要的标识ACK.SYN.FIN ACK:表示验证字段 SYN:位数置1,表示建立TCP连接 FIN:位数置1,表示断开TCP连接 三次握手过程说 ...

  3. 学习FastDfs(二)

    分布式文件系统(DFS) 指文件系统管理的物理存储资源不一定直接连接在本地节点上 而是通过计算机网络与节点相连 分布式文件系统的设计基于客户机/服务器模式 一个典型的网络可能包括多个多个用户访问的服务 ...

  4. js获取一周前日期

    项目中需要设定默认开始时间为一周前,结束时间为现在,现在写一下如何用js获取一周前日期. 1 var time=(new Date).getTime()-7*24*60*60*1000; 2 var ...

  5. .NET 6学习笔记(3)——在Windows Service中托管ASP.NET Core并指定端口

    在上一篇<.NET 6学习笔记(2)--通过Worker Service创建Windows Service>中,我们讨论了.NET Core 3.1或更新版本如何创建Windows Ser ...

  6. cpu内部组成

    计算机系统的硬件结构主要由四部分组成:控制器.运算器.内存和输入输出设备 其中,控制器和运算器统称为中央处理器.简称CPU.它是计算机硬件系统的指挥中心. 它包括控制器.运算器.寄存器三个部分,其中, ...

  7. 【每日日报】第三十四天---Scanner类的应用

    1 今天继续看书 Scanner类的应用 1 package File; 2 import java.util.Scanner; 3 4 public class ScannerDemo { 5 pu ...

  8. python---单链表的常用操作

    class Node(object): """结点""" def __init__(self, data): self.data = dat ...

  9. 帝国CMS网站地图生成插件

    可以生成电脑端也可以生成手机端的地图XML. 安装方法: 这个帝国sitemap插件的安装跟其他插件的安装方式一样,介于可能有人不会安装帝国的插件,就写一下吧,以后你们如果碰到帝国插件也可以参考这个. ...

  10. (转)Angular中的拦截器Interceptor

    什么是拦截器? 异步操作 例子 Session 注入(请求拦截器) 时间戳(请求和响应拦截器) 请求恢复 (请求异常拦截) Session 恢复 (响应异常拦截器) 转之:http://my.osch ...