Day2-课堂笔记-表单和CSS

作者: 晓晓的忍儿 | 来源:发表于2018-08-14 12:55 被阅读0次

1.表单

1)表单标签---form

可以提交表单中收集的信息
action属性：设置提交信息的位置
method属性：提交方式-post/get

2)input标签 ---文本输入框

是表单标签
type属性：text普通的文本输入框
name属性：必须设置(提交信息)
value属性：标签内容
placeholder:提示语言，当用户输入值时，会自动消失

3)input-密码输入框

type属性：password---输入的值是密文显示
name属性：必须设置(提交信息)
placeholder:提示语言，当用户输入值时，会自动消失

4)input-单选按钮

type属性：radio
name属性：同一类型对应的name值必须一样
value：设置选中按钮提交的值
checked:设置checked，让按钮默认处于选中状态

5）input---多选按钮

type属性：checkbox
name:同一类型对应的name值必须一样
value：设置选中按钮提交的值
checked:设置checked，让按钮默认处于选中状态

6)input---普通按钮

type属性：button
value属性：显示按钮名称
input---重置按钮
type:reset,让form中所有表单标签对应的值，回到最初状态
value属性：显示按钮名称

8）input---文件选择器

type属性：file

9）maxlength标签:输入框最多能输入的字符个数

10）readonly标签：让输入框只读(不能往里面输入内容)值readonly

11）disabled标签：让按钮不能点击

12)input-提交

type属性：submit
value属性：显示按钮名称

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表单</title>
    </head>
    <body>
        <!--
            ####1)表单标签---form
            * 可以提交表单中收集的信息
            * action属性：设置提交信息的位置
            * method属性：提交方式-post/get
        -->
        <form action=""  method="get">
            <!--####2)input标签 ---文本输入框
                * 是表单标签
                * type属性：text普通的文本输入框
                * name属性：必须设置(提交信息)
                * value属性：标签内容
                * placeholder:提示语言，当用户输入值时，会自动消失
                
                
            -->
            <input type="text" name="username" value="" placeholder="请输入姓名" maxlength="11"/>
            <br />
            <!--
                ####3)input-密码输入框
                * type属性：password---输入的值是密文显示
                * name属性：必须设置(提交信息)
                * placeholder:提示语言，当用户输入值时，会自动消失
            -->
            <input type="password" name="password" value="" placeholder="请输入密码"/>
            <!--
                ####4)input-单选按钮
                * type属性：radio
                * name属性：同一类型对应的name值必须一样
                * value：设置选中按钮提交的值
                * checked:设置checked，让按钮默认处于选中状态
                
            -->
            <br />
            <input type="radio" name="sex" checked="checked" id="" value="男" /><span >男</span>
            <input type="radio" name="sex" id="" value="女" /><span >女</span>
            <!--
                ####5）input---多选按钮
                * type属性：checkbox
                * name:同一类型对应的name值必须一样
                * value：设置选中按钮提交的值
                * checked:设置checked，让按钮默认处于选中状态
            -->
            <br />
            <input type="checkbox" checked="checked" name="interest" value="篮球" id=""/><span>篮球</span>
            <input type="checkbox" name="interest" value="乒乓球" id=""/><span>乒乓球</span>
            <input type="checkbox" name="interest" value="看电影" id=""/><span>看电影</span>
            <input type="checkbox" name="interest" value="旅游" id=""/><span>旅游</span>
            <!--
                ####6)input---普通按钮
                * type属性：button
                * value属性：显示按钮名称
            -->
            <br />
            <input type="button" name="" id="" value="登录" />
            <!--
                ####7)input---重置按钮
                * type:reset,让form中所有表单标签对应的值，回到最初状态
                * value属性：显示按钮名称
            -->
            <input type="reset" name="" id="" value="重置" />
            <!--
                input---文件选择器
                type属性：file
            -->
            <br />
            <input type="file" name="icon" id="icon" value="" />
            <!--
            ####8）maxlength标签:输入框最多能输入的字符个数
            ####9）readonly标签：让输入框只读(不能往里面输入内容)值readonly
            ####10）disabled标签：让按钮不能点击
            -->
            <br />
            <input type="button" disabled="disabled" name="" id="" value="登录" />
            <input type="text" readonly="readonly" name="username" value="" placeholder="请输入姓名" maxlength="11"/>
            <!--
                ####11)input-提交
                * type属性：submit
                * value属性：显示按钮名称
            -->
            <br />
            <input type="submit" name="" id="" value="提交" />
</form>
    </body>
</html>

13)下拉菜单

select标签
name属性：
size属性：设置最多显示，其他滑动
option标签
value属性：

14)多行文本域(多行文本输入框)

textarea标签
placeholder属性：默认提示
maxlength属性：最多输入
rows属性：行
cols属性：列
readonly属性：只读
disabled属性:禁止点击

15)fieldset标签，对表单内容进行分组

logend标签：设置分组名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单和多行文本域</title>
    </head>
    <body>
        <form action="" method="post">
            <!--
                下拉菜单
                select标签
                name属性：
                size属性：设置最多显示，其他滑动
                option标签
                value属性：
            -->
            <select name="city" >
                <option value="成都" >成都</option>
                <option value="重庆">重庆</option>
                <option value="北京" selected="selected">北京</option>
                <option value="大连">大连</option>
                <option value="青岛">青岛</option>
            </select>
            <!--    
            多行文本域(多行文本输入框)
            textarea标签
            placeholder属性：默认提示
            maxlength属性：最多输入
            rows属性：行
            cols属性：列
            readonly属性：只读
            disabled属性:禁止点击
            form
            -->
            <br />
            <textarea  name="mesage" disabled="disabled" rows="4" cols="30" placeholder="请输入意见..." maxlength="100" readonly="readonly"></textarea>
            <!--fieldset标签，对表单内容进行分组
                logend标签：设置分组名
            -->
            <fieldset id="">
                <legend>下拉菜单</legend>
                <select name="city" >
                    <option value="成都" >成都</option>
                    <option value="重庆">重庆</option>
                    <option value="北京" selected="selected">北京</option>
                    <option value="大连">大连</option>
                    <option value="青岛">青岛</option>
                </select>
                <input type="reset" name="" id="" value="重置1" />
            </fieldset>
            <fieldset id="">
                <legend>多行文本</legend>
                <textarea  name="mesage" rows="4" cols="30" placeholder="请输入意见..." maxlength="100" ></textarea>
                <input type="reset" name="" id="" value="重置2" />
            </fieldset>
        </form>
    </body>
</html>

3.空白标签

HTML中的标签分为两大类
块级标签：一行只能有一个div(不管标签的宽度是多少)
h1-h6,p,hr,列表标签，table，form
行内标签：一行可以有多个span
a,img，inp，select(下拉列表)，textarea(多文本域)

1）div标签

是空白标签，没有任何特殊的意义(无语义标签)
块级标签：一个div独占一个整行，不管内容大小，一行只能有一个div

2）span标签

是空白标签，没有任何特殊的意义(无语义标签)
行内标签：一行可以有多个span

4.认识CSS

1)CSS是什么

CSS是web标准中的表现标准，用来设置网页上标签的样式(长什么样，在哪儿)
CSS代码或文件，也叫样式表
使用版本：CSS3

2)写在哪儿

内联样式表：将CSS写在标签的style属性中
内部样式表：写在head标签中的style标签的内容中
外部样式表：写在一个css文件中，通过head中的link标签来关联
三种样式表的优先级：内联样式最高，内部样式表与外部样式表没有绝对的优先，主要看同一个属性
谁在后面赋值，谁的优先级高(谁就有效)

3)格式：

选择器(属性：属性值；属性：属性值)--内部和外部样式
选择器：用来选中需要设置样式的标签
属性：css属性(css2中的属性有两百多个)位置随意
属性值：如果属性值是数字，表示的是大小要在后面加px
注意：每个属性之间要使用分号隔开，否则属性无效
补充属性：color-设置字体颜色 background-color：设置背景颜色 width：标签宽度
height：标签的高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            style标签
            专门用来设置样式的标签
        -->
        <!--内部样式表-->
        <style type="text/css">
            div{
                background-color: royalblue;
                color: gold;
            }
        </style>
        <!--关联外部样式表-->
        <link rel="stylesheet" type="text/css" href="css/04-css.css"/>
    </head>
    <body>
        <!--style属性：每个标签都有-->
        <div style="">
            一个div
        </div>
    </body>
</html>

5.css选择器

1）元素选择器(标签选择器)：标签名

选中所有的标签名对应的标签

2）id选择器：#id属性值

每个标签都有一个id属性，整个HTML中，id的值必须是唯一的

3）class选中器：.class属性

每个标签都有一个class属性

4)通配符：*

选中所有的标签

5)层级选择器：选择器1 选择器2...

6)群组选择器：选择器1，选择器，...

补充：
css中的颜色值：
颜色英语单词
16进制的颜色值 0-255--00-ff(#ff0000红色)
rgb值：rgb(红，绿，蓝)，rgb(红，绿，蓝，透明度)-透明度0-1

-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*通配符*/
            *{
                font-size: 30px;
            }
            /*class选择器*/
            .c1{
                color: blue;
                background-color: greenyellow;
            }
            /*元素选择器*/
            a{
                background-color: yellow;
            }
            /*id选择器*/
            #a1{
                color: red;
                /*color: #ff0000;*/
                /*color: rgb(0,255,0);*/
                /*color: rgba(0,0,255,0.4);*/
            }
            /*层级选择器*/
            #all_a a{
                color: pink;
            }
            /*层级选择器*/
            div div a{
                text-decoration: none;
            }
            /*群组选择器，同时选中所有的h3和和所有的span标签*/
            h3,span{
                background-color: wheat;
            }
            
        </style>
    </head>
    <body>
        <h3>标题</h3>
        <span id="">
            span标签
        </span>
        <div id="">
            <div id="">
                <p>你是p</p>
            </div>
            <div id="all_a">
                <a href="">a3</a>
                <a href="">a4</a>
                <a href="">a5</a>
                <a href="">a6</a>
            </div>
        </div>
        <a id="a1" href="">我是a1</a>
        <a  href="">我是a2</a>
        <p class="c1">我是p</p>
        <div id="" class="c1">
            我是div
            <a href="">我是a3</a>
        </div>
    </body>
</html>

6)伪类选择器

伪类选择器---选择器：状态

1)link：初始状态---一次都没有访问成功时的状态

2)visited：超链接访问后的状态---已经访问成功后的状态

3)hover：鼠标悬停在标签上对应的状态

4)active：鼠标按住的状态

注意：给同一个标签的不同状态用伪类选择器设置不同的样式时，要遵守爱恨原则(先爱才能恨)
LoVe HAte

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*同时设置a标签的所有状态*/
            a{
                color: black;
            }
            /*一次都没有访问成功时的状态*/
            a:link{
                color: red;
            }
            /*访问成功后的状态*/
            a:visited{
                color: mediumspringgreen;
            }
            a:hover{
                color: yellow;
                font-size: 40px;
            }
            a:active{
                color: orchid;
            }
            #d1{
                width: 100px;
                height: 50px;
                background-color:cyan ;
            }
            #d1:hover{
                width: 50px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <a href="http://shouhu.com">百度一下</a>
        <div id="d1" >
            sdfs
        </div>
    </body>
</html>