form表单 css的选择器和一些属性以及盒子模型，浮动

form表单

<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">密&nbsp&nbsp&nbsp码<input type="password" id="d2"></label>
        </p>
        <p>
            生&nbsp&nbsp&nbsp日<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;
        }