day2 表单方法和css基础

2018-12-04 本文已影响0人遇见那天的雨真大

1.知识补充 - 细线表格

1.不设置border，设置默认值 cellspacing的值为表格线的宽度1
2.设置表格的背景颜色的为表格线的颜色，然后再设置每个单元格的背景颜色和整个表格的背景颜色不一样

2.表单标签

1.表单标签的作用：

搜集用户信息：实质是将表单标签作为容器，来搜集表单标签中其他标签信息，本身没有任何效果
action属性：设置提交地址
method属性：提交方式
点提交按钮，将表单中相关标签以nname = value的形式
按照method属性提供的提交方式，提交给action属性对应的接口
form标签提供了两大功能，1：统一提交；2.重置

2.input标签

既可以放在form标签中，也可单独使用
单标签：typr对应的值不一样，input对应的功能也就不一样

a.text - 文本输入框
name属性 - 专门用来区分不同的信息，相当于字典的key，
value属性 - 标签内容；指向输入框中内容，设值是设文本输入的默认值
placeholder属性 - 当输入框中没有值的时候输入提示信息
maxlength属性 - 设置输入框最大的位数
b：passwor属性 - 密码输入框
c：radion 单选按钮。
name属性：同一属性要求name值必须一样才能单选。
values属性：提交时用来区分被选中的值
checked属性：让单选按钮处于选中状态
d：checkbox复选框-->
e：input中的 button按钮
点击提交按钮后会自动提交当前form中，所有设置了name属性相关标签的值
以name = value的方式提交
单纯的button按钮，双标签，使用更暗灵活
f：reset - 重置按钮
将当前form标签中所有的标签的状态设置为默认状态

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="" method="get">
            <font>用户名：</font><input type="text" name="email" placeholder="请输入邮箱。。。"/><br />
            <font>电话：</font><input type="text" name="tel" maxlength="11"/><br />
            <font>密码：</font><input type="password" name="password" id="" value="" placeholder="密码"/><br />
            <input type="radio" name="sex" id="" value="boy" / checked="checked"> <font>男</font> 
            <input type="radio" name="sex" id="" value="girl" /> <font>女</font> <br />
            <input type="radio" name="marry" id="" value="已婚" checked="checked"/"> <font>已婚</font> 
            <input type="radio" name="marry" id="" value="未婚" /> <font>未婚</font> <br />
            
        <!--checkbox复选框-->
        <input type="checkbox" name="hobby" id="" value="钱" /><font>钱</font>
        <input type="checkbox" name="hobby" id="" value="钱钱" /><font>钱钱</font>
        <input type="checkbox" name="hobby" id="" value="香烟" /><font>香烟</font>
        <input type="checkbox" name="hobby" id="" value="美女" /><font>美女</font><br />

        -->
        <!--reset - 重置按钮
            将当前form标签中所有的标签的状态设置为默认状态
        -->
        <input type="button" name="" id="" value="注册" />
        <!--单纯的button按钮，双标签，使用更暗灵活-->
        <button>登录</button>
        <input type="submit" name="id" value="提交"/>
        <input type="reset" name="" id="" value="重置" />
        <input type="color"  name="" id="" value="" />
        <input type="date" name="" id="" value="" />
        <input type="datetime" name="" id="" value="2018.11.11" />
        <input type="datetime-local" name="" id="" value="" />
        <input type="email" name="" id="" value="qq.com" />
        </form>
    </body>
</html>

3.下拉菜单：selec= option

a.selec标签- 代表整个下拉菜单
name属性 - 区分提交
b.option标签 - 下拉菜单的顺序ing
内容 - 显示部分
value属性 - 提交的内容
c.optgroup：labe = 分组名称
e.selected = selected设置下拉菜单的默认值

4.多行文本输入框

超出文本的范围可以搜索
name属性 =提交和区分
rows一次可以显示的行数
cols - 一次最多显示多少个文字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <!--1.下拉菜单（selec= option
        <form action="" method="post">
            <font>科目</font><select name="学科">
                <optgroup label="理科"></optgroup>
                <option value="">数学</option>
                <option value="">英语</option>
                <option value="">物理</option>
                <option value="">化学</option>
                <option value="">生物</option>
                <optgroup label="文科"></optgroup>
                <option value="">语文</option>
                <option value="">地理</option>
                <option value="">历史</option>
                <option value="">政治</option>
            </select>
            <br />
            <font>城市</font><select name="province">
                <option value="四川">四川</option>
                <option value="广东">广东</option>
                <option value="湖南">湖南</option>
                <option value="云南省">云南省</option>
                <option value="贵州省">贵州省</option>
                <option value="海南省" selected="selected">海南省</option>
            </select>
            <select name="city">
                <option value="">成都</option>
                <option value="">广元</option>
                <option value="">东莞</option>
                <option value="">长沙</option>
                <option value="">昆明</option>
            </select>
            <!--多行文本输入框-->
            <textarea maxlength="10" name="" rows="4" cols="30" placeholder="意见">默认值</textarea>
        </form>
    </body>
</html>

5.div和span

div和span是无语义标签;一般用来将网页中的标签进行分组和分模块使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>div1</div>
        <div>div1</div>
        <span>span1</span>
        <span>span1</span>
    </body>
</html>

6.选择器

选择器{属性名：属性值；属性名2：属性值2}；css提供的选择器写法有十几种，常见的有.

1.标签选择器：直接将标签名作为选择器选中当前html文件中所有的指定标签
例如：a{} - 选中当前html中所有的a标签；div{}
2.id选择器，将标签的id属性值前面加#作为选择器，选择所有id是指定值的标签
例如：#text{} - 选中当前html文件中id属性值是text的所有标签
3.class选择器（类型选择器）：将标签的class属性值前面加.作为选择器，选中所有class是指定的标签
例如：.test{}，选中当前html文件中class属性值是test的所有标签
4.群组选择器：将多个选择器用，隔开，作为一个选择器，同时选中每个单独的选择器选中所有的标签
p,a,test,text{}，选中所有的p标签a标签，和class值是test以及id值是text的标签
5.后代选择器：将多个选择器用空格隔开，作为一个选择器，从前往后一层一层的找，找到最后一个选择器对应的标签
例如div .test text{} - 选中div标签中class值是test标签中id值text标签
div div p选中div中div中p标签
6.通配符：将作为选择器，选中所有的标签{}f

<style type="text/css">
    p{
        color: #006400;
    }
    div{
        color: red;
    }
    #text{
        /*id选择器*/
        background-color:yellow;
    }
    .test{
        width: 300px;
        height: 200px;
        background-color: skyblue;
    }
    /*4.群组选择器*/
    div,.test{
        font-size: 50px;
    }
    /*5.后代选择器*/
    div div{
        font-size: 10;
        color: aqua;
    }
    /*6.通配符*/
    *{
        /*设置文字装饰效果
         underline下划线
         overline上划线
         line through删除线
         none - 去掉下划线*/
        text-decoration: line-through;
    }
</style>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="">
            <div id="">
                div1
                <div>
                    div后代选择器
                </div>
            </div>
            <div id="text">
                div2                
            </div>
        </div>
        <div id="">
            外部
        </div>
        <div class="test">div4</div>
        <h1 class="test">我是h1</h1>
        <p id="text">p标签测试</p>
    </body>
</html>

7.伪类选择器

是用来选中标签的不同的状态（为了标签的不同状态设置不同样式）——

1.基本格式
普通选择器：伪类选择器
2:伪类选择器
- a - link - 标签的初始状态；一般作用域a标签，表示a标签中的链接，没有成功访问过的对应的状态
  标签：link{} - 标签是通过各种选择器来选中的标签
- b - visited
- 超链接访问过后的状态
- c. - hover 鼠标悬停在标签上的时候对应的状态
- e.active 鼠标激活状态，鼠标按下但是还没有弹起的时候的状态
3.爱恨yuanze
LoVeHAte：当同一个标签需要同事给多个状态添加样式的时候，要遵守爱恨原则
**link visited hover active **
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{
                text-decoration: none;
            }
            a:link{
                color: red;
            }
            a:visited{
                color: #00FFFF;
            }
            a:hover{
                text-decoration: underline;
            }
            p:hover{
                color: #FF0000;
                background-color:yellow ;
                font-size:40px ;
            }
            a:active{
                color: blue;
            }
            h1:active{
                color: blue;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度一下</a>
        <a href="http://www.baidu.co">百度二下</a>
        <a href="http://www.baidu.c">百度三下</a>
        <p>我是段落</p>
        <h1><h1>鼠标释放状态</h1></h1>
    </body>
</html>