form表单与CSS选择器和样式操作
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选择器和样式操作的更多相关文章
- 1113 form表单与css选择器
目录 1.form表单 form元素 特点 参数 form元素内的控件 1.input的使用 2.select标签 3.textarea元素 4.autofocus属性 2.CSS 1.基础语法 cs ...
- form表单与css选择器
目录 form表单 action属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...
- 前端-form表单与CSS
目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...
- form表单，css简介，css选择器，css样式操作
form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- （day43）form表单、css
目录 昨日回顾 一.HTTP协议 (一)四大特性 (二)数据格式 (1)请求格式 (2)响应格式 (三)响应状态码 二.HTML (一)什么是HTML (二)注释 (三)文档结构 (四)head内标签 ...
- 前端form表单与css
form表单(******) 能够获取用户输入(输入,选择,上传的文件) 并且将用户输入的内容全部发送给后端 参数 action 控制数据提交的地址 三种书写方式 1.不写 默认就是朝当前这个页面所在 ...
- form表单和CSS
一.form表单 1. form表单有什么用 能够获取用户输入的信息(输入,选择, 上传的文件),并且将这些数据全部发送给后端 2. form表单的用法 (1)有两个重要参数: action : 控制 ...
- 前端之form表单与css（1）
目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...
随机推荐
- @RequestMapping 注解有什么用？
@RequestMapping 注解用于将特定 HTTP 请求方法映射到将处理相应请求的 控制器中的特定类/方法.此注释可应用于两个级别: 类级别:映射请求的 URL 方法级别:映射 URL 以及 H ...
- 爬虫-ip代理
代理(proxy) 代理服务器:实现请求转发,从而可以实现更换请求的ip地址 代理的匿名度: 透明:服务器知道你使用了代理并且知道你的真实ip 匿名:服务器知道你使用了代理,但是不知道你的真实ip 高 ...
- Leetcode26——删除有序数组中的重复项（双指针法）
Leetcode26--删除有序数组中的重复项(双指针法) 1. 题目简述 给你一个升序排列的数组 nums ,请你原地 删除重复出现的元素,使每个元素只出现一次 ,返回删除后数组的新长度.元素的相对 ...
- 攻防世界php_rce
php_rce 进入题目提示为ThinkPHP V5 遇到这种题我们一般去找一下框架的rce漏洞即可,搜索到这样一篇文章 https://www.freebuf.com/articles/web/28 ...
- Linux文件管理 | Linux 文件基础知识
目录 Linux 常用文件类别 Linux 目录结构概述 LInux 系统目录及说明 一.Linux 常用文件类别 1.文件 在Linux上系统上,有一切皆文件的说法,就是说任何软件和I/O设备都 ...
- 【Android开发】Android 删除指定文件和文件夹
/** * 删除单个文件 * @param filePath 被删除文件的文件名 * @return 文件删除成功返回true,否则返回false */ public boolean deleteFi ...
- python解释器安装与使用
Python解释器安装与使用 首先了解下python是由'龟叔' 也就是右边这位和蔼的大叔叔 全名'Guido van Rossum'在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言. ...
- Array实现
(一)基本类型数组实现 public class Array { private int[] data; private int size; // 构造函数,传入数组的容量capacity构造Arra ...
- jsp中c:forEach使用
首先需要在jsp中引入<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> ...
- 如何写好一份晋升PPT（附PPT模板）
又到了每年晋升述职的时间,在过去的5.6年里,我以评委身份参与了大量的晋升述职(主要是前端,也包括客户端和测试),也辅导了许多(100+)组内外的同学,指导他们书写和完善PPT.过程中我发现大家有许多 ...