07-HTML&CSS

今日知识

1. HTML表单标签
2. CSS
3.总结

表单标签

* 表单：
	* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
	* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
        * 属性：
            * action：指定提交数据的URL
            * method:指定提交方式
                * 分类：一共7种，2种比较常用
                   * get：
                        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                        2. 请求参数大小是有限制的。
                        3. 不太安全。
                   * post：
                        1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                        2. 请求参数的大小没有限制。
                        3. 较为安全。
    * 表单项中的数据要想被提交：必须指定其name属性
* 表单项标签：
        * input标签可以通过type属性值，改变样式
             type类型：
                1. text：文本输入框，默认值
                    *placeholder:指定文本框提示信息，当文本框发生变化是，自动清空提示信息
                2. password:密码输入框
                3. radio:单选框
                    *注意；
                        1. 要想让你多个单选框实现单选的效果，就必须让单选框的name属性值一样
                        2. 一般会给单选框提供value值，指定被选中后提交的值
                        3. checked属性：可以默认
                4. checkbox:复选框
                    *注意：
                        1. 一般会给单选框提供value值，指定被选中后提交的值
                        2. checked属性：可以默认
                5. file:文本选择框
                6. hidden:隐藏域，用于提交一些信息
                7.按钮：
                    * submit:提交按钮，可以 提交表单
                    * button:普通按钮
                    * image：图片提交按钮
                        * src属性指定图片路径
        * lable:指定输入项的文字描述
            *注意：
                * label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
        * select: 下拉列表
			* 子元素：option，指定列表项

		* textarea：文本域
			* cols：指定列数，每一行有多少个字符
			* rows：默认多少行。
		* filedset：把input框起来，同时设置一个标签
        	*如：
                    <fieldset name="用户信息">
                        <input type="text" value="">
                    </fieldset>
        * frame框架：
                 <frameset rows="20%,40%,20%">
                     <frame src="02.html"/>
                     <frame src="02list.html"/>

                    <frame src="03%20href.html"/>
                 </frameset>

CSS：页面美化和布局控制

1. 概念： Cascading Style Sheets 层叠样式表
    *   层叠：多个样式可以作用在同一个html的元素上，同时生效
2. 好处：
    1. 功能强大
    2. 将内容与样式分离
        * 降低耦合
        * 让分工更明确
        * 提高开发效率
3. CSS的使用：CSS与HTML结合使用
    1. 内联样
        * 在标签中使用style属性指定CSS代码
        * 如：<div style="color: darkgray">Hello world</div>
    2. 内部样式
        * 在head标签内定义style标签，style标签内就是css的内容
        * 如： <style>
                div{
                    color: #000;
                }
                </style>
             <div>Hello world</div>
    3. 外部样式
        1. 定义CSS资源文件
        2. 在head标签内，用link标签引入资源文件
        3. 如：a.css文件
                         ：div{
                            color: aqua;
                            }
               <link rel="stylesheet" href="css/a.css">
                <div>Hello world</div>
                <div>Hello world</div>
        * 注意：
        * 1,2,3种方式的css的作用的信息越来越大
        * 1方式不常用，后期常用2,3
        * 第3种格式可以写为：
            <style>@improt "css/a.css"</style>
    4. css语法
        * 格式：
            选择器{
                属性名1:属性值1;
			    属性名2:属性值2;
			    ...
            }
        * 选择器：筛选具有相似的特征元素
        * 注意：每一对属性需要使用;隔开，最后一对可以不用隔开。

    5. 选择器：筛选具有相似的特征元素
        * 分类：
            1. 基础选择器
                1. id选择器
                    * 语法：#firstname{}  选择所有id="firstname"的元素
                2. 元素选择器
                    * 语法： p{}  选择所有<p>元素
                3. 类选择器
                    * 语法： .intro{}  选择所有class="intro"的元素

            2. 扩展选择器
                1. 选择所有元素
                    * 语法： *{}  选择所有元素
                2. 并集选择器
                    * 语法：div,p{}  选择所有<div>元素和<p>元素
                3. 子选择器
                    * 语法：div p{}  选择<div>元素内的所有<p>元素
                4. 父选择器
                    * 语法：div>p  选择所有<p>元素的父级<div>元素
                5. 属性选择器：
                    * 语法：[target=-blank]{} 选择所有使用target="-blank"的元素
                6. 伪类选择器:选择一些元素具有的状态

                    * <a>
                        *状态：
                            * a:link{} 选择所有未访问链接
                            * a:visited{} 选择所有访问过的链接
                            * a:active{} 选择活动链接 ,就是正在访问的连接
                            * a:hover{}  选择鼠标在链接上面时 

    6. 属性
        1. 文字，文本
            * font-size：字体大小
		    * color：文本颜色
		    * text—align:对其方式
		    * line-height:行高
		2. 背景
		    * background url("图片地址") no-repeat center
		3. 边框
		    * border：设置边框，符合属性
		4. 尺寸
		    * width:宽度
		    * height：高度
		5. 盒子模型
		    * Margin(外边距) - 清除边框外的区域，外边距是透明的。
            * Border(边框) - 围绕在内边距和内容外的边框。
            * Padding(内边距) - 清除内容周围的区域，内边距是透明的。
                *   box-sizing: border-box;让width和height就是盒子最终的大小。
            * float:浮动。
                * left：左浮动
                * center：居中
                * right：有浮动
            * Content(内容) - 盒子的内容，显示文本和图像。
            * 实例：
            * div {
                    width: 300px;
                    border: 25px solid green;
                    padding: 25px;
                    margin: 25px;
                }
实例
代码：
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                /*让width和height就是盒子最终的大小。*/
                box-sizing: border-box;
            }
            body{
                background: url("img/register_bg.png") no-repeat center;
            }
            .rg_layout{
                width: 900px;
                height: 500px;
                border: 8px solid #EEEEEE;
                background: white;
                margin: auto;
                margin-top: 30px;
            }
            .rg_left{
              /*  border: 2px  solid red ;*/
                float: left;
                margin: 20px;
                width: 150px;
            }
            .rg_left p:first-child{
                color: #FFD026;
            }
            .rg_left p:last-child{
                color:#A6A6A6;
            }
            .rg_center{
               /* border: 2px  solid red ;*/
                float: left;
                width: 500px;
                height: auto;
                margin-top:20px ;
            }
            .rg_right{
              /*  border: 2px  solid red ;*/
                float: right;
                margin: 20px;
            }
            .rg_right p{
                 font-size:15px ;
            }
            .rg_right p a{
                color: #ff62ac;
            }
            .td_left{
                width: 100px;
                text-align: right;
                height: 45px;
            }
            .td_right{
                width: 400px;
                text-align: left;
                height: 45px;
                /*设置文本框和文字的距离*/
                padding-left: 50px;
                color: #A6A6A6;
            }
            /*设置文本框的大小*/
            #username,#password,#email,#brithday,#name,#phone{
                width: 251px;
                height: 30px;
                border: 1px solid #A6A6A6;
                /*设置圆角*/
                border-radius: 5px;
                /*input里面的填充文字，距离input的间距*/
                padding-left: 10px;
                font-size:13px;
            }
            /*单独设置验证码的样式*/
           #verify{
                width: 110px;
                height: 30px;
                border: 1px solid #A6A6A6;
                /*设置圆角*/
                border-radius: 5px;
                /*input里面的填充文字，距离input的间距*/
                padding-left: 10px;
            }
           /*设置验证码图片*/
            #img_checkcode{
                height: 30px;
                /*垂直居中*/
                vertical-align:middle;
                padding-left: 15px;
            }
            #btn_submit{
                width: 110px;
                height: 30px;
                background: #FFD026;
                border: 2px solid #FFD026;
                margin-top: 10px;
            }
            label{
                font-size:14px;
                color: #A6A6A6;
            }

        </style>
    </head>
    <body>
    <!--第二层div-->
        <div class="rg_layout">
            <div class="rg_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
            </div>
            <div class="rg_center">
               <div class="rg_form">
                    <form>
                        <table>
                            <tr>
                                <td class="td_left"><label for="username">用户名:</label></td>
                                <td class="td_right"><input name="user" id="username" type="text" placeholder="请输入用户名"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="password">密码:</label></td>
                                <td class="td_right"><input name="password" id="password" type="password" placeholder="请输入密码"></td>
                            </tr>
                            <tr>
                                <td class="td_left"> <label for="email">Email:</label></td>
                                <td class="td_right"><input name="email" id="email" type="email" placeholder="请输入email"></td>
                            </tr>
                            <tr>
                                <td  class="td_left"><label for="name">姓名:</label></td>
                                <td class="td_right"><input name="name" id="name" type="text" placeholder="请输入真实姓名"></td>
                            </tr>
                            <tr>
                                <td  class="td_left"><label for="phone">手机号:</label></td>
                                <td class="td_right"><input name="name" id="phone" type="number" placeholder="请输入你的手机号"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="sex">性别:</label></td>
                                <td class="td_right">
                                    <input name="sex" id="sex" type="radio" value="女" checked>女
                                    <input name="sex"  type="radio" value="男">男
                                </td>
                            </tr>
                            <tr>
                                <td  class="td_left"><label for="brithday">出生日期:</label></td>
                                <td class="td_right"><input name="brithday" id="brithday" type="date"></td>
                            </tr>
                            <tr>
                                <td  class="td_left"><label for="verify">验证码:</label></td>
                                <td class="td_right"><input name="verify" id="verify" type="text"><img id="img_checkcode" src="./img/verify_code.jpg"></td>
                            </tr>
                            <tr align="center">
                                <!--<td colspan="2"><input name="zhuce"  type="image" src="img/regbtn.jpg"></td>-->
                                <td colspan="2"><input name="zhuce"  type="submit" id="btn_submit" value="注册"></td>

                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="rg_right">
                <p>已有账号?<a href="">立即登录</a></p>

            </div>
        </div>
    </body>
    </html>