HTML的form表单详情与css之选择器(超详细的)

昨日内容回顾

HTML简介

'''HTML 是超文本标记语言'''

1.构建网页的骨架(所有的网页都是依赖于它构建而成)

2.固定的文档结构
<html>
	<head>
	<head>
	<body>
	<body>
<html>

3.语法注释
<!--注释内容-->

4.标签分类
	一：
		单标签 双标签
    
	二：
	块儿级标签 h1~h6 p
		独占一行显示(后期可以通过css调正不占一行)
        
	行内标签 u i s b 
		自身文本多大 就占多大

head内常见标签

# title	内部定义网页小标题

# style	内部书写css代码

# link	通过href属性导入外部css文件

# script	既可以在内部书写js代码 也可以通过src属性导入外部js文件

# meta	定义网页源信息(跳转、关键字搜索、网页简介)

body内基本标签

# h1~h6	标题标签

# p	段落标签

# u	下划线

# i	斜体

# s	删除线

# b	加粗

# br	换行

# hr	水平分割线

"""
相同的展示形式 可能是由不同的标签渲染出来的

eg:
	i 表示斜体 em 也表示斜体
	b 表示加粗 strong 也表示加粗
	...
	
甚至有些是通过css代码美化出来的
"""

body内特殊符号

# 主要是为了防止与HTML符号冲突

&nbsp;	空格

&ge;	大于
&lt;	小于

&amp;	&

&yen;	羊角符

&copy;	版权
&reg;	注册

body内常用标签

# 1.布局标签
	div	块儿级标签(区域块布局)
	span	行内标签(普通文本布局)
    
# 2.链接标签 a
	链接功能
	锚点功能
    
# 3.图片标签 img
	src	图片地址
	alt	图片加载失败提示用户的信息
	title	鼠标悬浮在图片之上自动展示的信息
    height、width	尺寸调节

body内列表标签

# 无序列表
<ul>
	<li>内容<li>
<ul>

'''网页上很多有规则排列的横向和竖向 大部分都是无序列表'''

body内表格标签

<table>
	<head>
	<head>
	<body>
	<body>
<table>

1.tr	表示一行
2.th	表示标题
3.td	表示文本

今日内容概要

form表单
初识后端框架
css简介
css选择器

内容详细

1、form表单

# 作用：获取用户的数据信息并发送给后端(服务端)
	eg:网站的登录、注册、验证码...
        
"""以注册页面为例"""
# 1.获取用户数据最为常见的标签
	01 input标签 
	该标签为行内标签 input标签是前端标签里面的变形金刚 通过type属性参数的不同 可以变换不同的表现形式
	text	普通文本
	password	密码展示(隐藏)
	date	日历展示
	
	radio	单选框(多个选项标签需要有相同的name属性 否则是多选)
			如果要显示默认选择 需额外配置 checked='checked'
			当属性名与属性值相等的时候也可以简写 checked
			
	checkbox	多选(默认选择也是需要额外的 checked属性)
	
	email	邮箱格式

	file	上传文件(默认只支持单个文件)
			如果需要一次性上传多个需要额外配置 multiple属性
        
	submit	提交按钮 点击触发提交数据的动作
	button	普通按钮 本身没有任何功能 需要绑定(JS)
	reset	重置按钮
"""
	按钮组的提示信息可以通过value属性自定义，如果不自定义那么不同的浏览器可能会展示出不同的提示信息 尤其是submit按钮
"""
        
	02 select标签是下拉框选项
	一个个选项就是一个个option标签 
	默认是单选也可以变为多选 需要额外的 multiple属性

	03 textarea标签 获取大段文本内容
    
    
    
# 2.直接编写input会出现黄色阴影，原因在于input需要结合lable一起使用
	解决：
		01 label包裹input并绑定id
		<label for='input标签id值'>input标签</label>
        
		02 abel与input单独出现并绑定id
		<label for="d1">username:</label>
		<input type="text" id="d1">
        
        
# 3.form表单提交数据
	数据的提交地址由form表单的action参数来控制
	action="URL"
	不写默认朝当前页面所在的地址提交
    
	method="数据的提交方式"
	数据的提交方式有很多种 这里先忽略(后续讲解get post put delete patch...)
    
"""
form表单在提交数据的时候 如果含文件则需要指定两个固定参数
	method='post'
	enctype="multipart/form-data"
"""


# HTML文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>
</head>

<body>
    <h2>注册页面</h2>
    <form action="" method="">
        <!--利用 p 标签达到换行的目的-->
        <p>username:<input type="text"></p>
        <p>password:<input type="password"></p>
        <p>birthday:<input type="date"></p>

        <p>gender:
            <input type="radio" name="gender" checked>male
            <input type="radio" name="gender">female
            <input type="radio" name="gender">others
        </p>

        <p>hobby:
            <input type="checkbox">篮球
            <input type="checkbox">足球
            <input type="checkbox">网球
        </p>

        <p>email:<input type="email"></p>

        <p>city:
            <select name="" id="">
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">广州</option>
                <option value="">深圳</option>
                <option value="">香港</option>
            </select>
        </p>

        <p>goddess:
            <select name="" id="" multiple>
                <option value="">波多野结衣</option>
                <option value="">小泽玛丽亚</option>
                <option value="">吉泽明步</option>
            </select>
        </p>

        <p>introduce:
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>

        <p>file:<input type="file"></p>
        <p>files:<input type="file" multiple></p>

        <p>
            <input type="submit">
            <input type="button" value="按钮">
            <input type="reset">
        </p>
        
    </form>
</body>
</html>

2、体验前后端交互

"""后端框架:可以简单的理解为 别人写好的一个非常牛逼的TCP服务端"""

# 以flask框架为例
	需要导入第三方框架 pip3 install flask
    
	前端通过标签获取用户数据发送给后端的过程中 标签需要有name属性 相当于字典的key
	用户输入的数据会存储到标签的value属性中 相当于字典的value
	如果是选择型标签需要自行加上name和value
    
    
    
# 服务端代码 
from flask import Flask, request

app = Flask(__name__)

@app.route('/test/', methods=['GET', 'POST'])
def test():
    print(request.form)  # 获取普通数据
    print(request.files)  # 获取文件数据
    # print(request.form.get('name'))  # 获取用户某项数据
    file_obj = request.files.get('file')  # 获取文件对象
    file_obj.save('xxx.jpg')  # 保存文件
    return 'flask框架'

app.run()




# HTML文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>
</head>

<body>
    <h2>注册页面</h2>
    <form action="http://127.0.0.1:5000/test/" method="post" enctype="multipart/form-data">
        <!--利用 p 标签达到换行的目的-->
        <p>username:<input type="text" name="name"></p>
        <p>password:<input type="password" name="pwd"></p>
        <p>birthday:<input type="date" name="birth"></p>

        <p>gender:
            <input type="radio" name="gender" name="gender" value="男" checked>male
            <input type="radio" name="gender" name="gender" value="女">female
            <input type="radio" name="gender" name="gender" value="其他">others
        </p>

        <p>hobby:
            <input type="checkbox" name="hobby" value="篮球">篮球
            <input type="checkbox" name="hobby" value="足球">足球
            <input type="checkbox" name="hobby" value="网球">网球
        </p>

        <p>email:<input type="email" name="email"></p>

        <p>city:
            <select name="" id="">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="gz">广州</option>
                <option value="sz">深圳</option>
                <option value="hongkang">香港</option>
            </select>
        </p>

        <p>goddess:
            <select name="" id="" multiple>
                <option value="波多野结衣">波多野结衣</option>
                <option value="小泽玛丽亚">小泽玛丽亚</option>
                <option value="吉泽明步">吉泽明步</option>
            </select>
        </p>

        <p>introduce:
            <textarea name="introduce" id="" cols="30" rows="10"></textarea>
        </p>

        <p>file:<input type="file" name="file"></p>
        <p>files:<input type="file" name="files" multiple></p>

        <p>
            <input type="submit">
            <input type="button" value="按钮">
            <input type="reset">
        </p>
        
    </form>
</body>
</html>

3、css简介

'''
又叫做：层叠样式表
功能：就是给HTML标签修改样式
'''

# 1.语法结构
	选择器 {
		属性名1:属性值1;
		属性名2:属性值2
	}
    
# 2.注释语法
	/*注释内容*/ 
	多行的话 就写多行/*注释内容*/ 
    
# 3.引入方式(<head></head>标签对中编写)
	1.style内部直接编写css代码
		平时学习、练习的时候推荐使用
        
	2.link标签引入外部css文件
		正式工作、实际生产环境推荐使用
    
    
	3.标签内直接书写
<body>
    <h1 style="color: blue">新年好兄弟姐妹们！！！</h1>
</body>
		一般情况下不推荐使用 容易造成代码冗余现象

    
"""
单独开设的css文件内代码也是非常多的 可以借助于注释管理	
	/*导航条样式*/	
	...
	/*侧边栏样式*/
	...
"""


# HTML文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>

    <style>
        h1 {
             color:red
        }
    </style>

    <link rel="stylesheet" href="03%20first%20css%20file.css">

</head>

<body>
    <h1 style="color: blue">新年好兄弟姐妹们！！！</h1>
</body>
</html>

4、基本选择器(重要)

"""
css是用来调节标签样式的 那为什么需要学选择器呢?

	因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 我们肯定先需要学习如何查找指定的标签
"""

# 1.标签选择器(<head></head>标签对中编写)
	/*通过标签名直接查找所有的div标签 无论内部是否嵌套或被嵌套在内部 全部执行*/
	<style>
		div { 
			color: red;
		}
		p {
			color: greenyellow;
		}
	</style>
    
    
# 2.类选择器(关键符号为句点符.)(<head></head>标签对中编写)
	/*通过class值 查找所有含有c1样式类的标签*/
	<style>
		.c1 {
			color: red;
		}
	</style>
    
    
# 3.id选择器(关键符号为警号#)(<head></head>标签对中编写)
	/*通过id值查找id为d1的标签*/
	<style>
		#d1 {
			color: red;
		}
	</style>
    
    
# 4.通用选择器(了解)(<head></head>标签对中编写)
	/*body内所有的标签*/
	<style>
		* {
			color: red;
		}
	</style>
    
    
    
# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>

    <style>
        * {
            color: red;
        }
    </style>
</head>

<body>
    <div id="d1">div标签
        <p>div内部的P标签</p>
    </div>
    <p class="c1">p标签</p>
    <div id="d2">div标签</div>
    <span class="c1">span标签</span>
    <p class="c1 c2" id="d3">p1</p>
</body>
</html>

5、组合选择器(重点)

"""
为了区分嵌套标签之间的关系 我们发明了一种称呼
	<div>
		<p>
			<span></span>
		</p>
	</div>
	
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先
"""

# 1.后代选择器(特征为 空格)(<head></head>标签对中编写)
	/*查找div内部所有的后代span*/
	<style>
		div span {
			color: red;
		}
	</style>


# 2.儿子选择器(特征为 >)(<head></head>标签对中编写)
	/*查找div内部所有的儿子span*/
	<style>
		div > span {
			color: red;
		}
	</style>
    

# 3.毗邻选择器(特征为 +)(<head></head>标签对中编写)
	/*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/
	<style>
		div + span {
			color: red;
		}
	</style>


# 4.弟弟选择器(特征为 ~)(<head></head>标签对中编写)
	/*查找同级别下面所有的span(不需要紧挨着)*/
	<style>
		div ~ span {
			color: red;
		}
	</style>
    
    

# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>

    <style>
        div ~ span {
            color: red;
        }
    </style>
</head>

<body>
    <span>div上面的span</span>
    <div>div标签
        <p>div内部的P
            <span>div内部的P内部的span</span>
        </p>
        <span>div内部的span</span>
        <a href="">div内部的a</a>
        <span>div内部的span</span>
    </div>
    <span>div下面的span</span>
    <p>p</p>
    <span>span</span>
</body>
</html>

6、属性选择器

'''标签可以有默认的属性也可以自定义属性'''

# 1./*查找含有name属性名的标签*/
	<style>
		[name] {
			color: red;
		}
	</style>

    
# 2./*查找含有name属性名并且值为jason的*/
	<style>
		[name='jason'] {
			color: red;
		}
	</style>
    
    
# 3./*查找含有name属性名并且值为jason的p标签*/
	<style>
		p[name='jason'] {
			color: red;
		}
	</style>
    


# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>

    <style>
        p[name='jason'] {
            color: red;
        }
    </style>
</head>

<body>
    <p id="d1" class="c1" name="jason">123</p>
    <p id="d2" class="c2" name="ly">456</p>
    <div name="jason" >789</div>
</body>
</html>

7、分组与嵌套

# 1.多个相同选择器并列使用(特征为 ,)
	/*查找div或者span或者p*/
	<style>
		div,span,p {
			color: red;
		}
	</style>
    
    
# 2.多个不同选择器并列使用(特征为 ,)
	/*标签查找div id查找d1 类查找c1*/
	<style>
		div,#d1,.c1 {
			color: red;
		}
	</style>
    
    
# 3.不并列同样可以使用组合选择器(特征为 空格)
	/*查找class为c1的后代p标签*/
	<style>
		.c1 p {
			color: red;
		}
	</style>
    
    
# 4.直接筛选
	/*查找id为d1的div标签*/
	<style>
		div#d1 {
			color: red;
		}
	</style>
    
	/*查找class为c1的div标签*/
	<style>
		div.c1 {  
			color: red;
		}
	</style>
    

    
# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>

    <style>
        div#d1 {
            color: red;
        }
    </style>
</head>

<body>
    <div>div</div>
    <span id="d1">span</span>
    <p class="c1">p</p>
    <div class="c1">div
        <p>儿子p</p>
    </div>
</body>
</html>
    
    
    
"""
练习题
	#d1>div>.c1>span.c2
	
	先查找id为d1的标签内部的儿子div
	接着在儿子div内部查找class为c1的儿子标签
	最后在该儿子内部查找class为c2的儿子span


# HTML文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>

    <style>
        #d1>div>.c1>span.c2 {
            color: red;
        }
    </style>
</head>

<body>
    <div id="d1">1
        <div>2
            <p class="c1">3
                <span class="c1">4</span>
                <span class="c2">5</span>
            </p>
            <p class="c2">6
                <span class="c1">7</span>
                <span class="c2">8</span>
            </p>
        </div>
    </div>
</body>
</html>

"""

8、伪类选择器

# 1./*鼠标悬浮在链接文字上面的颜色*/
	<style>
		a:hover {
			color: red;
		}
	</style>
"""
a标签默认的颜色会变化 第一次是蓝色 后面是紫色
只要点击一次链接之后 颜色就不会再发生改变(不包括刷新页面)
"""
    
    
# 2./*选中input框之后框内的颜色*/
	<style>
		input:focus {
			background-color: red;
		}
	</style>
"""
我们将input框被用户点击即将录入数据的过程看成是
	focus状态(聚焦状态)
"""

posted @ 2022-01-20 23:00 Deity_JGX 阅读(299) 评论(0) 收藏举报

刷新页面返回顶部

Deity_JGX

HTML的form表单详情与css之选择器(超详细的)

昨日内容回顾

今日内容概要

内容详细

1、form表单

2、体验前后端交互

3、css简介

4、基本选择器(重要)

5、组合选择器(重点)

6、属性选择器

7、分组与嵌套

8、伪类选择器

公告