前端day2总结

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--1.form标签(表单标签)
            专门用来进行用户信息收集的一个标签,一般要结合表单相关的标签来使用才有意义。
            表单相关的标签:input;select;textarea等
            主要提供form中子标签的内容的提交和重置功能
            
                action 属性: 提交的相对路径(接口)
                method 属性: 提交的方式(post/get)
                    
        -->
        <!--form action="" method="post"-->
            

        <!--2.input标签
            input标签是表单相关标签,可以在form标签中使用,也可以单独使用
            
            2) type
            input标签会英文type的不同,功能完全不一样
            
            3) name
            name  --  区分;提交(相当于字典的key)
            要不要给这个属性赋值,主要看:1.是否需要区分不同的内容;2.是否需要提交这个input标签的值
            
            4)value
            value的意义会根据type值得不同而不一样,但是做表单提交的时候,提交的都是value的值。
            
        -->
            
        <form action="" method="get">
            <!--1)可以作为文本输入款 -- text
                value属性 --- 给这个属性赋值是在设置输入款的默认值;修改输入框中的内容会改变这个属性的值
                placeholder属性 -- 输入款为空的时候的默认显示信息
                maxlength 属性 --- 限制输入款最大字符串长度
                
                
            -->
            <font><strong>账号:</strong></font>
            <input type="text" name="tel" value="" placeholder="请输入电话号码" maxlength="6"/><br />          
            <!--input type="submit" value="提交"/-->
            
            <!--2.密码输入款
                password
                value属性 --- 给这个属性赋值是在设置输入款的默认值;修改输入框中的内容会改变这个属性的值
                placeholder属性 -- 输入款为空的时候的默认显示信息
                maxlength 属性 --- 限制输入款最大字符串长度
                
            -->
            <font>密码:</font>
            <input type="password" name="pw" id="" value="123456" placeholder="密码" maxlength="10" /><br />
    
            <!--3.单选按钮
                name 属性 --- 如果多个选项是一组数据必须保证他们的name属性值一样,才能做到多个选项单选
                value 属性 --- 在radio中 只能用来提交,不会显示,需要提交的话必须输入值
                checked 属性 --- 给这个属性赋值为checked让按钮处于默认状态
                
            label的for属性  input的 id属性保持一致,让label和input关联
                                
            -->
            
            <font>性别</font>
            <input type="radio" name="sex" id="男" value="男" checked="checked"/><label for="男">男</label> 
            <input type="radio" name="sex" id="女" value="女"/><label for="女">女</label>
            <br />
            
            <!--4.复选按钮
                checkbox 
                
            -->
            <font>兴趣:</font>
            <input type="checkbox" name="interest" id="in1" value="餐饮" /><label for="in1">餐饮</label>
            <input type="checkbox" name="interest" id="in2" value="旅游" /><label for="in2">旅游</label>
            <input type="checkbox" name="interest" id="in3" value="游戏" /><label for="in3">游戏</label>
            <br />
            
            <!--5.普通按钮
                value属性 --- 按钮上显示的内容
                
                补充: button 标签 不是input标签了
            -->
            <input type="button" name="" id="" value="登录" />
            <button>登录</button>
            <br />
            <button><img src="img/aaa.ico"/></button>
            <br />
            <input type="submit" value="提交"/>

            <!--6.重置按钮 -- reset
                重置当前重置按钮所在的form标签中所有相关标签里面
            -->
            <br />
            <input type="reset" name="" id="" value="重置"/>
            
            <!--7.提交按钮 -- submit
                以‘name=value’值得方式提交当前form
            -->
            <input type="color" name="" id="" value="" />
            <input type="search" name="" id="" value="" />
            <input type="file" name="file" id="" value="" />
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--下拉菜单
            select标签 -- 整个下拉列表
            option标签 -- 列表中的选项
            optgroup标签  -- 一个列表选项分组,通过label属性值来设置分组名
                           只是在显示上对选项进行分区,不影响提交值
        -->
        <form action="" method="get">
            <select name="province">
            <option value="四川省">四川省</option>
            <option value="湖南省">湖南省</option>
            <option value="湖北省">湖北省</option>    
            <option value="福建省">福建省</option>            
            </select>
            <select name="city">
                <option value="成都">成都</option>
                <option value="内江">内江</option>
                <option value="眉山">眉山</option>
                <option value="乐山">乐山</option>              
            </select>
            
            <br />
            <select name="city2">
                <optgroupl abel="四川省">四川省</optgroup>
                <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 />  
            
            <!--2.多行文本域 -- textarea
                提供一个可以换行输入的输入框
                    name  --  区分;提交(相当于字典的key)
                                要不要给这个属性赋值,主要看:
                                1.是否需要区分不同的内容;
                                2.是否需要提交这个input标签的值
                    rows  --  行数,用来影响输入框的默认高度
                    cols  --  列数,用来影响输入框的默认宽度
                    maxlength --  输入的最大长度
                    autofocus --  值设置为autofocus,页面刷新和加载的时候自动成为焦点
                    
            -->
            
            <textarea autofocus="autofocus" name="" rows="10" cols="100" maxlength="10" placeholder="默认值"></textarea>
            
            <br />
            <input type="submit" value="提交"/>
            <input type="reset" name="重置" id="重置" value="重置" />
        </form  
        
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            div标签和span标签 都是无语义标签,
            使用div一般用于网页中的内容分块和分组
            
        -->
        <div id="">
            <a href="http://www.baidu.com" target="_blank" ">百度一下</a>       
        </div>
        <div id="">
            <a href="http://www.baidu.com">百度一下</a>     
        </div>
        
        
        <span id="">
            <a href="http://www.baidu.com" target="_blank" ">百度一下</a>       
        </span>
        <span id="">
            <a href="http://www.baidu.com">百度一下</a>     
        </span>
        
        
        
        
    </body>
</html>

<!--
    1.什么是css
        css又叫样式表(层叠样式表),是web标准中的表现标准,专门用来针对网页中内容的布局和样式
        现在最新版本是css3,绝大部分使用的。
    
    2.怎么写样式表
        a. 语法
        选择器{属性:属性值;属性2:属性值2;属性3:属性值3}
        b.说明
            选择器 --- 选中需要设计样式的标签;在内联样式表中选择器需要省略
            {}   ---  固定写法
            属性    --- 属性是以“属性:属性值”的形式成对出现,多个属性之间用分号隔开
            值       --- 如果是数字表示大小,数字后面必须加单位:px(像素)、em(空格数)
                    颜色值:颜色的英文单词、#十六进制的颜色值、rgb(r,g,b)、rgba(r,g,b,透明度)
                        rgb颜色:红绿蓝,范围都是0~255
                                红色:(255,0,0) == #ff0000 ==red
                                绿色:(0,255,0) == #00ff00 == green
                                黑色:(0,0,0) == #000000 == black
                                白色:(255,255,255) == #ffffff == white
                                透明度  ---  0(透明)~ 1(完全不透明)
                                
    3.写在哪里
    内联样式表、内部样式表、外部样式表
        1、内联样式表
            将样式写在标签的style属性中
            只作用于一个固定的标签
        2、内部样式
            将样式写在style标签中(一般写在head标签里)
            作用于当前html文件
        3、外部样式表
            将样式写在css文件中,然后再html中通过link标签导入
            可以作用于所有的html中的所有标签
    
    复用性:外部>内部>内联    
    优先级: 内联样式表的优先级不管什么时候都是最高的、内部和外部,谁后写谁高(后写的会覆盖之前写的)
            
    
    
    
    4.常见属性
        color --- 设置 标签中字体颜色
        background-color  --- 设置标签的背景颜色
        font-size  --- 字体大小
        width  --- 标签宽度
        height  --- 标签高度
        
        
        
-->


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--内部样式-->
        <style type="text/css">
            /*这个是css写注释的方式*/
            div{color: orange;background-color: aquamarine          
            }
            h1{color: blanchedalmond;background-color: blueviolet}
            
        </style>
        <!--3.外部样式表-->
        <link rel="stylesheet" type="text/css" href="css/01-test1.css"/>
        
        
        
    </head>
    <body>
        <!--内联样式-->
        <p style="color: red;font-size: 60px;">hello</p>
        
        <div id="">
            我是div
        </div>
        <h1>
            我是h1
        </h1>
    </body>
</html>


<!--选择器:
    1.什么是选择器
        通过选择器选中标签
        
    2.选择器的写法
        1)元素选择器(标签选择器)
            直接将标签名作为选择器  --- 选中当前html页面中所有对应的标签
            例如: a{}  --- 选中当前html当中所有a标签
        2)id选择器
            (所有的标签都有一个id属性,值是自己设置,但是要保证一个html中id的值唯一)
            将标签的id属性的值 前面加#作为选择器 --- 选中id属性值是指定值得标签
            例如:#a  ---  选中html中,id值是a的标签
        3)类选择器(class选择器)
            (一个标签中class属性值可以有多个,每个值之间用空格隔开,且不需要唯一,可以有多个相同值得class属性)
            将标签的class属性的值 前面加.作为选择器 --- 选中class属性是指定值的标签
            例如: .a  --- 选中html当中所有class值是a的标签
        4)通配符
            直接将*作为选择器  --- 选中当前html中所有的标签(就是全选)
        5)群组选择器
            将多个单独的选择器用逗号隔开来作为一个选择器  --- 把每个独立的选择器对应的标签全部选中
            例如: p,a{}  --- 选中所有的p、a标签
                div,#a{} --- 选中所有的div标签和id值是a的标签
                #p1,.c1,.c2{} --- 选中id值是p1的标签和class值是c1和c2的所有的标签
        6)后代选择器
            将多个选择器用空格隔开来作为一个选择器
            例如:div p{} --- 选中所有div标签中的p标签       
            
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="">超链接1</a>
        <div id="">
            <a href="">超链接1</a>
                <div id="">
                    <a href="">超链接1</a>
                </div>

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


<!--
    1.伪类选择器
        普通选择器选中的是html中不同的标签;伪类选择器选中的是标签中不同状态
        
    2.语法
        普通选择器:状态{属性1:属性值;属性2:属性值2;....}
        状态:
            1.link --- 初始状态,对于a标签来说,link对应的状态是a标签中的链接重来没有成功访问过(一般之在a标签中设置)
            2.visited --- 超链接被成功访问过的状态(一般也是作用于a标签)
            3.hover --- 鼠标悬停在标签上的状态 (不止针对超链接,标签也常用)
            4.active  --- 鼠标按住标签不放的时候对应的状态(超链接和按钮用的比较多)
    
    3.选择器的权重值(权重越大优先级越高,但是内联样式表的优先级永远最高)
        元素选择器的权重:0001 == 1
        伪类选择器的权重:0001 == 1
        class选择器的权重: 0010 == 2
        id选择器 的权重: 0100 == 4
        群组选择器的权重:看单独每个选择器的权重
        后代选择器的权重:所有选择器的权重之和
        
-->






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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容