python进阶之路
Day16
hello world！今日是python学习的第十六天，今天对前端进行学习，今日主要内容为：表单标签、input标签的使用、select与textarea、div与span、css基础、选择器、伪类选择器等。
1 表单标签 - form
是一个容器标签，本身单独用没有意义，一般需要结合表单相关的标签（input、select、textarea）来使用。
它可以对表单标签中所有用户信息收集相关的标签的内容进行整体的重置和提交。
action属性 - 后端数据接口的地址
method属性 - 请求方式（get/post）
2 input标签的使用
##### 2.1 input是表单相关标签，可以放在form标签中做数据的提交和重置
###### 1) type属性 - 设置标签类型
a. text(默认值) - 普通文本输入框
value属性 - 和输入框中的内容是关联
name属性 - 用来区分不同的数据和对数据进行提交的（因为提交数据的是是以 name=value 的形式提交）
placeholder属性 - 设置输入的提示信息
disabled属性 - 设置为disabled，表示标签不可用
maxlength属性 - 设置最多能够输入的字符的个数
b. password - 密码输入框
value属性 - 和输入框中的内容是关联
name属性 - 用来区分不同的数据和对数据进行提交的（因为提交数据的是是以 name=value 的形式提交）
placeholder属性 - 设置输入的提示信息
disabled属性 - 设置为disabled，表示标签不可用
maxlength属性 - 设置最多能够输入的字符的个数
c.radio - 单选按钮
value属性 - 单选选中的时候被选中的值(选项值)
name属性 - 提交和区分以外，还可以将相同的name作为一个组，在同一个组中只能选中一个选项
checked属性 - 值设为checked表示默认选中
d.checkbox - 复选按钮
value属性 - 单选选中的时候被选中的值(选项值)
name属性 - 提交和区分以外
checked属性 - 值设为checked表示默认选中
e.button - 按钮
value属性 - 按钮上显示的文字
f.submit - 提交按钮
将当前表单中所有设置了name属性的标签内容，以 name=value的形式提交
g.reset - 重置按钮
将当前表单中所有表单相关的标签状态变成初始状态
text
password
radio
checkbox
button
删除submit和reset
其他的input标签
显色选择器：时间选择器: 日期选择器: 时间和日期：
选择头像： 文件选择器:
label标签中for属性可以将文本与之后的元素绑定在一块起到相同作用
3 select与textarea
3.1 下拉列表：select-option
name属性 - 是select属性，用于提交和区分
value属性 - 是option属性，表示当前选项的值和提交数据
selected属性 - 是option属性，设置默认选中的项
option标签内容 - 用来展示选项
3.2 optgroup - 选项分组标签
label属性 - 分组名
3.3 多行文本域 - textarea
rows属性 - 设置一次最多能显示的行数（默认2）
cols属性 - 设置一行的列数
placeholder属性 - 占位符
name属性 - 用于区分和提交
maxlength属性 - 限制最大输入字符的个数
注意： textarea在使用的是代码放在一行
select
四川省 辽宁省 广东省 云南省 成都市 德阳市 绵阳市 成都市 德阳市 绵阳市 巴中市 沈阳市 大连市 盘锦市 铁岭市 广州 深圳 佛山 汕头textarea
你好4 div与span
div和span本身无语义，也是html中比较轻量级的标签
1）span - 用于一行显示多个内容的时候
2）div - 主要用于界面标签的分块和分组
5 css基础
5.1 什么是CSS（样式表）
CSS(Cascading Style Sheets) - 层叠样式表
CSS是web标准中的表现标准，主要用来设置网页内容的样式和布局（给标签化妆）
5.2 CSS代码写在哪儿
1)内联样式表：将样式表(css代码)写在标签的style属性中(样式只能作用于一个标签)
2)内部样式表：将样式表写在style标签中（样式只能作用于当前html文件中的所有标签）
3)外部样式表：将样式表写在外部的css文件中，然后在html文件中用link导入（样式可作用域所有的html中所有的标签）
优先级: 内联样式表 > 内部样式表、外部样式表（谁后写谁的优先级高）
5.3 CSS怎么写
语法：
选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;…}
说明:
1)选择器 - 选择器是用来选中当前需要设置样式的标签。（写内联样式表 ‘选择器{}’ 需要省略）
2)属性 - 以 属性名:属性值 的形式存在，多个属性之间必须用 ; 隔开
a.常用属性：color(文字颜色); background-color(背景颜色); font-size(文字大小); width(宽度);
height(设置高度)
b.常用的值： A.数字(数字如果是用来表示，那么值后面必须加单位:px) 100px 100%
B.颜色：
颜色的英文单词，例如：red, green, yellow、pink
rgb值(通过调节红色、绿色和蓝色的值来调出不同的颜色，值的范围是0~255)
rgb(red, green, blue) rgb(255, 0, 0) rgb(0, 255, 0) rgb(255,255,255) rgb(0,0,0) rgb(200, 100, 45)
rgba(red, green, blue, 透明度)， 透明度的取值范围是0~1 rgba(255,0,0,1)
16进制颜色值：#6位的16进制数 #ff0000 #00ff00 #ffffff
<!DOCTYPE html>
<html>
</head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.内联样式表 -->
<h1 style="background-color: #ffff00;">内联样式表</h1>
<p style="color: green;">内联样式表</p>
<!-- 3.外部样式表 -->
<div id="div1">
</div>
<link rel="stylesheet" type="text/css" href="css/06-css基础.css"/>
<!-- 2.内部样式表 -->
<a id="a1" href="">刷新</a>
<style type="text/css">
/* 这儿写的css代码 */
#a1 {
color: darkmagenta;
font-size: 30px;
}
h1{
width: 200px;
color: green;
}
</style>
</body>
</html>
6 选择器
选择器是用来选中指定标签来添加样式
常用的选择器:
1.id选择器: 在标签的id属性值前加#作为一个选择器，选中id属性是指定值的标签。（注意：同一个id值在当前页面中只有一个标签）
#p1{} - 选中id是p1的标签
2.类选择器：在标签的class属性值前加.作为一个选择器，选中class属性是指定值的标签。
.c1{} - 选中class是c1的所有的标签
注意：同一个class可以作用于不同的标签，同一个标签可以同时拥有多个class值（有多个的时候中间用空格隔开）
3.元素选择器：直接将标签名作为选择器，选中当前页面中所有指定的标签
p{} - 选中所有的p标签
div{} - 选中所有的div标签
4.通配符：将*作为选择器, 选中当前页面中的所有的标签
5.群组选择器：将多个其他的选择器有逗号隔开作为一个选择器，选中每个独立的选择器选中所有的标签
p,.c1,#p1{} - 选中所有的p标签和class是c1标签，以及id是p1的标签
a,img{} - 选中所有的图片和超链接
6.后代选择器：将多个选择器用空格隔开作为一个选择器
div p{} - 获取所有是div后代的p标签
div .p1 - 选中div中所有class是p1的标签(div 和 .p1的标签是后代关系)
7.子代选择器：将多个选择器用>隔开作为一个选择器
div>p{} - 选中所有div标签子标签中的p标签
div>.p1{} - 选中所有div标签子标签中class是p1的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ============1.id选择器 ============-->
<!-- <h1 id="title1">id选择器</h1>
<p id="p1">我是段落1</p>
<p>我是段落2</p>
<style type="text/css">
#p1{
color: #FF69B4;
font-size: 25px;
}
#title1{
color: #8B008B;
width: 200px;
background-color: yellow;
}
</style> -->
<!-- ============2.class和元素选择器 ============-->
<!-- <h1 class="c1">class选择器</h1>
<p class="c1">我是段落1</p>
<p class="c2">我是段落2</p>
<p class="c1">我是段落3</p>
<a class="c1 c2" href="">我是超链接1</a>
<a class="c2" href="">我是超链接2</a>
<style type="text/css">
/* 元素选择器 */
p{
color: red;
}
/* class选择器 */
.c1{
background-color: seagreen;
}
.c2{
font-size: 25px;
}
/* 通配符 */
*{
border: 1px solid firebrick;
}
</style> -->
<!-- ============3.群组选择器 ============-->
<!-- <h1 class="c1">class选择器</h1>
<p class="c1">我是段落1</p>
<p class="c2">我是段落2</p>
<p class="c1">我是段落3</p>
<a class="c1 c2" href="">我是超链接1</a>
<a class="c2" href="">我是超链接2</a>
<style type="text/css">
p,a{
color: red;
}
h1,.c2{
background-color: yellow;
}
</style> -->
<!-- ============4.后代选择器 ============-->
<p>我是段落1</p>
<div id="">
<p>我是段落2</p>
<span>
<p>我是段落3</p>
</span>
<a href="">我是超链接1</a>
</div>
<div id="">
<p>我是段落4</p>
<div id="">
<p>我是段落5</p>
</div>
</div>
<style type="text/css">
/* 后代选择器 */
div p{
color: red;
}
/* 子代选择器 */
div>p{
background-color: skyblue;
}
</style>
</body>
</html>
7 伪类选择器
- 什么是伪类选择器
普通选择器选中的是标签（选中一个标签的所有状态）
伪类选择器选中的是标签的状态
语法：
选择标签的选择器:伪类选择器{}
常用的伪类选择器：
- link - 链接未被成功访问对应的状态（只针对超链接有效）
- visited - 链接已经被成功访问对应的状态（只针对超链接有效）
- hover - 鼠标悬停在标签上对应的状态（针对所有可见标签有效）
- active - 鼠标按住标签不放对应的状态（针对所有可见标签有效）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com">我是超链接1</a>
<br>
<style type="text/css">
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: #0000FF;
font-size: 30px;
}
a:active{
color: #FF69B4;
}
</style>
<div id="div1" style="width: 100px; height: 100px;"></div>
<style type="text/css">
#div1{
background-color: #008000;
}
#div1:hover{
background-color: aqua;
}
#div1:active{
background-color: #8B008B;
}
</style>
</body>
</html>
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
