day21表单标签

2018-08-14  本文已影响0人  剑眉星目cz

表单标签(input标签)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>

表单标签
专门用来收集信息的标签
1.可以提交表单中收集的信息
action属性:设置提交信息的位置
method属性:提交方式 - post/get

        <form action="" method="post">

input标签(单标签) -- text(文本输入框)
1.是表单标签
2.type属性:
text - 普通的文本输入框
3.name属性:必须设置(a.用于提交信息),若不设置当前信息无法提交。
4.value属性:标签内容
5.placeholder属性:占位符(在value的值为空和删除value的值时,显示的提示信息)
6.maxlength:输入框最多能输入的字符个数
7.readonly:readonly - 输入框只读(不能往里面输入内容)

            <input type="text" name="username" value="hello world!!!" placeholder="请输入手机号" maxlength="8"/>

input标签 - 密码输入框
1.type属性:password --- 输入的值是密文显示的

            <input type="password" name="password" value="" placeholder="请输入密码"/>

input标签 :单选按钮
1.type属性:radio
2.name:同一类型对应的name值必须一样,若不一样则按钮可以同时选中
3.value:设置选中按钮对应的意义
4.checked:设置为checked,让按钮默认处于选中状态
<span>空白标签</span>

            <input type="radio" name="sex" id="" value="boy" checked="checked"/><span>男</span>
            <input type="radio" name="sex" id="" value="girl" /><span>女</span>

input标签:多选按钮
1.type:checkbox
2.name:同一类型对应的name值必须一样
3.value:设置选中按钮提交的值

            <input type="checkbox" name="interest" id="" value="篮球" /><span>篮球</span>
            <input type="checkbox" name="interest" id="" value="乒乓球" /><span>乒乓球</span>
            <input type="checkbox" name="interest" id="" value="看电影" /><span>看电影</span>
            <input type="checkbox" name="interest" id="" value="旅游" /><span>旅游</span>

input标签:普通按钮
disabled:disabled - 让按钮不能点击

            <input type="button" name="" id="" value="登陆" />

input标签:重置按钮
将当前所在的form的所有表单相关标签对应的值,回到最初的状态

            <input type="reset" name="" id="" value="重置全部" />

input标签:
type="file":文件选择器

            <input type="file" name="" id="" value="重选择文件" />

        </form>
    </body>
</html>

表单标签(下拉和多行文本域)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单和多行文本域</title>
    </head>
    <body>
        <form action="" method="post">
            <fieldset id="">
                <legend>账号信息</legend>
                <input type="text" name="username" value="hello world!!!" placeholder="请输入手机号" maxlength="8"/>
                <input type="password" name="password" value="" placeholder="请输入密码"/>
                
            </fieldset>

1.下拉菜单

        <select name="city">
            
            <option value="">成都</option>
            <option value="">重庆</option>
            <option value="">北京</option>
            <option value="">大连</option>
            <option value="">青岛</option>
            <!--selected="selected"默认选择-->
            <option value="" selected="selected">上海</option>
        </select>

2.多行文本域(多行文本输入框)

            <textarea name="message" rows="5" cols="60" placeholder="请输入意见..."></textarea>

        </form>
    
    </body>
</html>

空白标签

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

html中的标签分为两大类:
1.块级标签:一行只能有一个(不管标签的宽度是多少)
h1-h6
<p></p>
<hr />
列表标签:
<ol></ol>
<ul></ul>
<dl></dl>
表格标签<table></table>
表单标签<form></form>
空白标签<div></div>

2.行内标签:一行可以有多个
<a></a>
<img>
<input>
下拉列表<select></select>
textarea
空白标签<span></span>
div标签,是空白标签,没有任何特殊的意义(无语义标签)

        <div>
            我是div
        </div>
    </body>
</html>

认识css

1.什么是css
css是web标准中的表现标准,用来设置网页上标签的样式(长什么样,在哪儿)
css代码/css文件,我们叫样式表

目前我们使用的是css3

2.写在哪儿
内联样式表:将css代码写在标签的style属性中
内部样式表:写在head标签中的style标签内容中
外部样式表:写在一个css文件中,通过head中的link标签来关联

优先级:内联的优先级最高,内部和外部没有绝对的优先,看谁最后执行,谁就有效。

3.怎么写(css语法)
选择器{属性:属性值;属性:属性值}

选择器:用来选中需要设置样式的标签()
属性:css属性(css2中的属性有200多个)
属性值:如果属性值是数字,表示的是大小要在后面加px(不加无效)
注意:每个属性之间要用分号隔开,否则属性无效

补充属性:color - 设置字体颜色
background - 设置背景颜色
width - 标签的宽度
height - 标签的高度

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

css选择器

选择器
0.元素选择器(标签选择器):标签名
选中所有的标签名对应的标签
1.id选择器:#id属性值
每个标签都有一个id属性,整个html中,id的值必须唯一
2.class选择器:.class属性值
每个标签都有一个class属性,可以同时选择多个
3.通配符:*
选中所有的标签
4.层级选择器:选择器1 选择器2 ...
5.群组选择器:选择器1,选择器...

补充:
css中的颜色值:
1.颜色的英语单词
2.十六进制的颜色值0-255 -- 00-ff(#ff0000红色)
3.rgb值:rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) - 透明度0-1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
                *{
                    font-size: 40px;
                }
                .c1{
                    color:red ;
                    background-color: olive;
                }
                
                a{
                    background-color: yellow;
                }
                
                #a1{
                    
                    /*color:#ff0000;*/
                    /*color: rgb(0,255,0);*/
                    color: rgba(0,0,255,1);
                }
                
                /*层级选择器*/
                #all_a a{
                    color: pink;
                }
                
                div div a{
                    text-decoration:none;
                }
                /*群组选择器*/
                /*同时选中所有h1标签和所有的span标签*/
                h1,span{
                    background-color:#FFC0CB
                }
                
        </style>
    </head>
    <body>
        <h1>我是标题</h1>
        <span>
            我是span
        </span>
        <div>
            <div id="">
                <a href="">aaa</a>
            </div>
            <div id="all_a">
                <a href="">a1</a>
                <a href="">a2</a>
                <a href="">a3</a>
                <a href="">a4</a>
                <a href="">a5</a>
            </div>
        </div>
        
        <a id="a1" href="">我是a</a>
        
        <a href="">我是a2</a>
        
        <p class="c1">我是p</p>
        
        <div id="" class="c1">
            我是div
        </div>
    </body>
</html>

伪类选择器

伪类选择器: 选择器:状态
link:超链接的初始状态 --- 一次都没有访问成功的时候的状态
visited:超链接访问后的状态 --- 已经访问成功后的状态
hover:鼠标悬停在标签上对应的状态
active:鼠标按住的状态

给同一个标签通过伪类选择器给不同状态设置不同样式的时候,要遵守爱恨原则(先要爱才能恨)
Love HAte(伪类选择器的优先级)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        /*同时设置a标签的所有状态*/
            a{
                color: black;
            }
            a:link{
                color: green;
            }
            a:visited{
                color: pink;
            }
            a:hover{
                color: red;
                font-size:50px;
            }
            a:active{
                color: yellow;
            }
            #d1{
                width: 300px;
                height: 100px;
                background-color: green;
            }
            #d1:hover{
                background-color: yellowgreen;
            }
            
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度一下</a>
        <button id="d1" style="width:100px;height: 50px;">
            
            
        </button>
    </body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读