3-表单及CSS选择器

 表单与CSS
    1，表单
        主要用于收集来自用户的信息，并将收集的信息发送给服务器端处理程序处理。表单时客户端和服务器端传递数据的桥梁，是实现用于与服务器互动的最主要方式。
        1）form
            表单控件的容器
            <form action="">
            </form>
            属性
            action     设定处理表单数据URI的地址
            method    设定数据传送到服务器的方式
                get    将输入的数据追加到action地址后面
                post将输入的数据保存到HTTP协议的报文中
            name    设定表单的名称
            enctype    设定表单数据的内容类型
                application/x-www-form-urlencoded    在发送前编码所有字符（默认）
                    编码方式：
                        1）控件的名称和值都被转义，空白字符使用【+】替换，保留的字符一般都是用来实现特定的目的，例如（: / ? ; @ = & 等）。非数字和字母的字符使用%HH（这里HH表示两个十六进制数字，代表该字符的ASCII码）进行转换，
                        2）控件的"名称/值"对按照它们在文档数据流中出现的顺序列出来。"名称""值"使用"="分割，两个"名称/值"之间使用&隔开。
                multipart/form-data        不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
                    数据分成多个部分，每个部分代表一个结构良好的控件，作为文档数据流的一部分，每一个部分都按照它们在文档数据流中出现的顺序依次发送到服务器端，并且，每一部分的边界不会出现在数据中。每一部分有一个content-desposition标题头，它的值的格式是：
                        Content-Disposition:form-data;name="myControl"
                text/plain                空格转换为 "+" 加号，但不对特殊字符编码。
            accept-charset    设置服务器端可以处理的字符编码
        2）input    基本表单控件
            <input type="text">
            属性：
                type:        控件类型:
                text        单行文本框
                textarea    多行文本框
                password    密码框
                checkbox    复选框
                radio        单选按钮
                submit        提交按钮
                reset        重置按钮
                file        文件
                hidden        隐藏域
                image        图像按钮
                button        普通按钮
            name
                控件名称，这个名称将与控件的当前值形参"名称/值"对 一同随表单提交
            value    
                用于设定初始化，可选。
            checked    
                单选框，复选框默认选中属性
            size    
                当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text,password，这时宽度是整数值，表示字符的数目
            maxlength
                指定可以输入的字符的最大值。适用于控件类型为text,password。
        3）button    按钮控件
            <button></button>
            属性
            name    控件名称
            value    控件初始值
            type    控件类型
                button    普通按钮
                submit    提交按钮
                reset    重置按钮

                图片按钮
                    <button><img src="" alt=""></button>
        4）select    下拉列表或列表
            <select name="" id="">
                <option value=""></option>
                <option value=""></option>
            </select>
            属性
            name:        控件名称
            size:        列表框中行的显示数量
            multiple:    是否允许多选
                如果select元素不包含属性size和属性multiple时，表单类型显示为菜单（组合框）
                如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框
            selected:    默认选中
          option    下拉列表选项
              属性：
              value:    定义控件的初始值。提交表单时，初始值会被提交给服务器。
          optgroup    分组选项
          <select name="" id="">
                  <optgroup label="大洋">
                      <option value="">太平洋</option>
                      <option value="">大西洋</option>
                      <option value="">印度洋</option>
                  </optgroup>
                  <optgroup label="大海">
                      <option value="">东海</option>
                      <option value="">南海</option>
                      <option value="">渤海</option>
                  </optgroup>
              </select>
            4）textarea    多行文本框
                属性
            name:    控件名称
            rows:    定义文本框行数
            cols:    定义文本框列数
            warp:    是否自动换行。
                    off    不自动换行
                    hard自动硬回车换行，换行元素一同被传送到服务器中
                    soft自动软回车换行，换行元素不会传到服务器中
        5）label    为表单控件定义标签
            一些表单控件内建有标签，当内建有标签时，一般使用value属性的值作为标签，而另外一些表单控件没有标签，则直接使用文本作为标签来说明控件的意义。每个label元素都要和表单控件关联到一起
            <table>
                <tr>
                    <td><label for="username">用户名：</label></td>
                    <td><input type="text" id="username" name="username"></td>
                </tr>
                <tr>
                    <td><label for="passwold">密码：</label></td>
                    <td><input type="password" id="password" name="password"></td>
                </tr>
            </table>

        6）fieldset    为表单添加结构
            一般与legend元素配合使用，fieldset元素可以包含其他的表单控件，在这些表单控件周围画一个方框，而legend元素可以显示一个标签说明被包含的这些表单控件。

        7）其他控件特性
            disabled    禁用
                支持该属性的控件：button,input,optgroup,option,select,textarea
                1）禁止的元素不接受焦点
                2）禁止的控件的值不与表单一起被提交
            readonly    只读
                 支持该属性的控件：input,textarea
                 1）可以接受焦点，但是不能被用户修改
                 2）只读元素的值可以与表单一起被提交。
    2，CSS简介
        CSS(cascading style sheet，层叠样式表)是描述文档怎么样被呈现的语言，使用CSS可以对HTML文档进行描述。

        语法：
            1)CSS属性和值之间用冒号分隔
            2)CSS属性之间用分号分隔（建议每个属性后都书写分号）
            3)CSS的值有多个的时候使用空格分隔
        
    3，CSS在网页中的使用
        1）内嵌式 style="css"
            每个HTML元素都包含有一个style属性，使用该属性可以直接指定样式
            <p style=""></p>
            存在问题：
                1.不方便修改
                2.结构与显示不能很好的分离
                3.建议在测试或个别情况下使用
        2）嵌入式
            CSS样式定义内容位于style元素之间，其type属性必须被定义为text/css
            <head>
                <style type="text/css">
        
                </style>
            </head>
        3）外部引用式
            可以在多个文档间共享样式表，提高效率；可以改变样式表而无须改变HTML文档。
            <head>
                <link rel="stylesheet" href="">

                <style type="text/css">
                    @import "style.css";
                    @import url("style.css");
                </style>
            </head>

            其他样式的导入
                @import url(common.css);
            
    4. CSS基本语法规则
        选择器{css属性1:css值1; css属性2:css值2;}
        1）选择器
            用于选择html中的元素
            html选择器（标签选择器）
                即html标签，任何一个HTML元素的标签名都可以是css的选择器
                p{    text-indent:10px}  /*段落第一行缩进10像素*/
                h1{ color:red}
                优先级：
                    默认情况下，子级通常先继承父级标签属性
                    如果子级和父级拥有相同的属性，子级优先，就近原则
                    类选择器的优先级高于标签选择器
            类选择器
                 class属性
                  .类名(类名不能使用数字开头，不能使用关键字来命名)
                  .rr{ color :red}

                  使用class属性来调用类名称
                 <p class="rr">one</p>
                 <p class="rr">two</p>
                 <p class="rr">three</p>
            ID选择器
                 id属性
                  #id名
                  #two{background-color:green}
                 <p class="rr">one</p>
                 <p id="two" class="rr">two</p>
                 <p class="rr">three</p>
            关联选择器
                 用一个空格隔开的两个或者多个单一选择器组成的字符串
                 它们的优先级比单一的选择器大。
                 table a{color:red}
                   定义了table中的a样式，而多table外的a样式不做改变
            组合选择器
                 使用逗号,隔开选择器，可以减少样式表的重复声明
                 h1,h2,h3,h4{color:red}
            伪元素选择器
                 是指对同一个HTML元素的不同状态的一种定义方式
                 HTML标签:伪元素{}
                a:link{}    超链接没有任何动作前的状态
                a:hover{}    光标移动到超链接上的状态
                a:active{}    选中超链接时的状态
                a:visited{}访问过超链接的状态
                text-decoration:none  去掉下划线

        2）选择器优先级
            多个CSS选择器同时作用于同一个html时，声明不同的属性具有继承的关系，如果声明的是相同的属性，则以优先级高的为主。

            内嵌式
            > 关联选择器(后代，子代，组合(且))
            > ID选择器
            > 类选择器
            > HTML选择器

            同级别的后者覆盖前者
            就近原则

        3）样式
            样式是零个或多个以分号分割的【属性名：属性值】列表
        4）规则集
            选择器 样式
            选择器{属性名:属性值;属性名:属性值}
        5）注释
            /*
                注释内容
            */

    5. 基本布局
        布局顺序
            由上至下，由左至右，由内至外
        块居中
            要居中的块必须小于父级元素
            利用margin-left margin-right的自动值来居中
        布局级别：
            1）行布局级（横排）
            2）列布局级（浮动布局）
                1.设置浮动 float
                    任何元素都可以浮动，可以改变普通文档流的排列方式，可以使得块元素在同一行中排列，使我们的布局更加方便，浮动是脱离文档流的，也就是其他元素视而不见。

                    浮动何时停止？
                        1. 当遇到一个浮动元素后
                        2. 当遇到父级元素后
                    多个盒子都浮动后，就产生了块级元素水平排列的效果
                    多个浮动元素不会相互覆盖
                    若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动，但如果浮动元素的高度不同，那么它们向下移动时可能会被卡住。
                    float:
                    left     元素向左浮动。
                    right     元素向右浮动。
                    none     默认值。元素不浮动，并会显示在其在文本中出现的位置。
                2. 清理浮动
                    clear
                        left     在左侧不允许浮动元素
                    right     在右侧不允许浮动元素
                    both     在左右两侧均不允许浮动元素
                        margin上下值在行布局时共用，浮动后不再共用
                        clear 清除浮动对象对当前对象的影响

            课堂练习：对newbalance中国官网进行布局


*************************回顾一下*************************
1. HTML
2. 标签
    1)块级元素
        div
        p
        h1~h6
        列表标签
        ul
        ol
            li
        dl
            dt
            dd
    2)行内元素
        span
        a
        img
        装饰标签
        i
        em
        b
        strong
        ...
3 标签
    a
    img
        地图
        width
        height
        alt
        src
        ...
    table
        caption
        thead
        tbody
        tfoot
            tr
                td
    框架
        dtd
        <frameset rows=",,">
            <frame src=".html">
        </frameset>
        top.html
        left.html
        center.html

        main.html
            doctype
            head
            <frameset>
                <frame src="top.html">

            </frameset>

1. 表单  样式以及功能    
    
2. 基本布局方式