html的简单笔记01

 

a标签 target属性 _blank _self
描点 ：<a href="id">2 演艺经历</a>  <div id="id></div>

<fieldset>
    <legend>用户登录</legend>
    用户名: <label><input type="text"/></label><br>
    密　码: <label><input type="password"/></label><br>
</fieldset>

<audio controls>
　　<source src="music.m4a">
　　<source src="music.m4a">
　　<source src="music.m4a">
　　您的浏览器不支持播放声音
</audio>
video标签

<form action="javascript:;">
        颜 色: <label><input type="color"></label><br/><br/>
        邮 箱: <label><input type="email"></label><br/><br/>
        手 机: <label><input type="tel"></label><br/><br/>
        数 字: <label><input type="number"></label><br/><br/>
        url :  <label><input type="url"></label><br/><br/>
        搜 索: <label><input type="search"></label><br/><br/>
        区 域: <label><input type="range"></label><br/><br/>
        年月日: <label><input type="date"></label><br/><br/>
        月 份: <label><input type="month"></label><br/><br/>
        星 期: <label><input type="week"></label><br/><br/>
        时 间: <label><input type="time"></label><br/><br/>
        <br/><br/>
    <input type="submit" />
</form>

word-spacing针对英文
letter-spacing针对中文与英文
p标签不可以嵌套块级元素

选择器
1.连接选择器
    a:link{
                color: deeppink;
              }
     a:visited{
                color: green;
            }
     a:hover{
                color: red;
            }
     a:active{
                color: purple;
            }
2.结构性伪类
    li:first-child{
        color: blue;
       }
    li:last-child{
        color: green;
      }
    li:nth-child(4){ 从前往后
        color: purple;
     }
    li:nth-last-child(5){ 从后往前
        color: yellow;
    }
    li:nth-child(odd){
        color: blue;
    }
    li:nth-child(even){
        color: green;
    }
    li:nth-child(2n+1){
        color: purple;
    }
3. 目标伪类  :target目标伪类选择器 ，用于选取当前活动的目标元素
    :target{
                color: purple;
                font-size: 40px;
            }

属性选择器
     a[title]{
                color: purple;
                font-size: 30px;
            }

       input[type=text]{
                color: red;
            }

       <a href="#" title="1号">小撩1号</a>

　　　　class^= 字符A  表示 字符A 处于开始位置都可以匹配 
       div[class^=like]{
                color: red;
            }
　　　　class $= 字符B  表示 字符B 处于结束位置都可以匹配 
       div[class$=liao]{
                color: green;
            }
　　　　class *= 字符C  表示 字符C 处于任意位置都可以匹配
       div[class*=it]{
                color: blue;
            }

     <div class="like01">like01</div>
    <div class="like02">like02</div>
    <div class="like03">like03</div>
    <div class="like04">like04</div>
    <div class="like05">like05</div>
    <div class="06like">06like</div>
    <br/>

    <div class="small-liao">小撩同学</div>
    <div class="big-liao">大撩同学</div>
    <div class="liao-da-da">撩大大同学</div>

    <br/>

    <div class="sh-it-com">任意位置</div>
    <div class="it-sh-com">任意位置</div>
    <div class="com-it-sh">任意位置</div>

1、外边距合并
            垂直的块级盒子，以最大的外边距为准
    
           div{
                width: 200px;
                height: 200px;
                background-color: purple;
            }

            div:first-child{
                margin-bottom: 100px;
            }
            div:last-child{
                background-color: red;
                margin-top: 50px;
            }

2、父子盒子都设置margin-top,只以父的为准

    父：解决加边框，并不好的解决
    
    父：加padding

box-sizing
    CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这            样我们计算盒子大小的方式就发生了改变。    
    1）content-box  盒子大小为 width + padding + border  此值为其默认值，其让元素维    持W3C的标准盒子模式    

    2）border-box  padding 和 border 是包含到width里面的  推荐使用 会挤压里面的内容