<form action='' method='' enctype=''>
<input type='text'>
input：更下type属性就可以得到对应的效果
text:文本
passwrod:密码
date:日期
radio:单选框
checkbox:复选框
file:文件
hidden:隐藏属性
textarea:评论框
# 按钮：
input
submit 提交
button
button按钮：没有实际意义，就是一个空的按钮，后面我们会学事件，用它来绑定事件
action='' method='' enctype=''
action：朝后端发送的地址
1. 什么都不写：朝当前地址提交
2. 写全路径
3. 只写后缀
ip:port/index/
form表单可以提交的请求方式：
get
post
enctype属性：
数据格式总共分3种：
1. urlencode
2. form-data
3. json
对于form表单来说，默认提交的是urlencode格式的数据
eg: k=v&k1=v1&k2=v2
json:
{"k1":v1, "k2":"v2"}
form表单只能提交：
1. urlenocde(默认提交)
2. form-data
form上传文件的条件：
1. method = 'post'
2. enctype='form-data'
# 以上两个条件缺一不可
每一个input框都要有一个name属性，如果不写name属性，那么，用户输入的数据是没办法提交到后端的。
name属性名相当于python的字典k，用户输入的数据相当于python的字典value
# 另外：每一个input框也都可以有value属性
radio
checkbox
都要加value，否则无法判断出用户选择的是什么选项
# 其他的input框如果加了value，代表了是默认值
单选框默认选中：checked
复选框默认选中：checked
下拉框默认选中：selectd
<h1>注册页面</h1>
<!-- 在form标签内部书写的获取用户的数据都会被form标签提交到后端-->
<!-- action用来控制数据提交的后端路径，给哪个服务端提交数据-->
<!-- 1 什么都不写 默认就是朝当前页面所在的url提交数据-->
<!-- 2 写全路径：www.baidu.com-->
<!-- 3 只写路径后缀action='/index/' 自动识别当前服务端的ip和port端口到前面-->
<!-- host:port/index/-->
<form action="" method="" >
<p>
<label for="d1">用户名<input type="text" id="d1"></label>
</p>
<p>
<label for="d2">密   码<input type="password" id="d2"></label>
</p>
<p>
生   日<input type="date">
</p>
<p>
<!-- 所有获取用户输入的标签，都应该有name属性-->
<!-- name类似字典的key，用户输入的数据类似字典的value-->
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
<input type="submit" value="注册">
<input type="button" value="按钮">
<input type="reset" value="重置">
<!-- 也能提交form表单的数据-->
<button>点我</button>
input标签 通过type变形
text：普通文本
passowrd：密文
file:文件
date：日期
submit：用来出发form表单提交的数据
button：普通的按钮，本身没有任何功能，但是学了js之后可以给它自定义各种功能
reset：重置内容
redio：单选
默认选中要加checken='checked',当标签名和属性名一样的时候可以简写
<input type="radio" name="gender" checked>
checbox:多选
<select name="" id="">
<option value="">上海</option>
<option value="" selected="selected">北京</option>
<option value="">深圳</option>
</select>
CSS
# 层叠样式表
# 给网页骨架添砖加瓦
语法结构：
选择器 {
属性名：属性值
}
注释：
/*
这是注释
*/
ctrl + ? (快捷键)
1. 基本选择器
2. 属性选择器
3. 伪类选择器
4. 伪元素选择器
5. 后代选择器
6. 并列选择器
设置长宽：
'''
默认只有块儿级元素可以设置长宽
默认行内元素不能设置长宽
'''
文字属性：
font-size
font-weight
颜色属性
color:red
选择器
后代选择器
#d1 .p1 .s1 {
color: red;
}
并列选择器
#d1 .p1 .s1 , #d2 a , .s2 {
color: red;
}
颜色属性
#d1 .p1 .s1 {
/*color: red;*/
/*1600w 种颜色*/
/*color: #5b9648; */
/*0-255*/
/*color: rgb(43, 43, 44);*/
color: rgba(255, 0, 0, 0.1);
}
背景属性
/*background-color: red;*/
/*background-image: url("123.png");*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*background-repeat: no-repeat;*/
/*background-position: center center;*/
/*background-position: 100px 50px;*/
/*只要是前缀一样的属性，都可以简写 */
background: no-repeat center center red url("123.png") ;
边框属性
border-left-color: red;
border-left-style: solid;
border-left-width: 5px;
border-top-color: green;
border-top-style: dashed;
border-top-width: 5px;
border-right-color: blue;
border-right-style: solid;
border-right-width: 2px;
border-bottom-color: blueviolet;
border-bottom-style: solid;
border-bottom-width: 5px;
border: 5px solid red;
# border-radius: 50% 画圆
display属性
# inline: 行内元素
# block：块儿级元素
# inline-block：既有行内元素又有块儿级元素的特征
# none：隐藏
盒子模型
<style>
body{
margin: 0;
}
#d1{
width: 20%;
height: 1000px;
background-color: greenyellow;
float: left;
}
#d2{
width: 80%;
height: 2000px;
background-color: blue;
float: right;
}
</style>
# margin:外边距
以两个快递盒子为例，快递盒与快递盒之间的距离我们称为外边距
# padding: 内边距
物品与盒子之间的距离，我们称之为内边距
# border
# content
'''
面试题：margin值是否叠加？
不叠加，按照最大的显示
'''
浮动
# float:left
# float:right
#d2{
height: 100px;
width: 100px;
background-color: yellow;
float: left;
}
#d3{
height: 100px;
width: 100px;
background-color: blue;
float: left;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
