html的简单笔记01

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

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

1 <audio controls>
2 　　<source src="music.m4a">
3 　　<source src="music.m4a">
4 　　<source src="music.m4a">
5 　　您的浏览器不支持播放声音
6 </audio>
7 video标签

 1 <form action="javascript:;">
 2         颜 色: <label><input type="color"></label><br/><br/>
 3         邮 箱: <label><input type="email"></label><br/><br/>
 4         手 机: <label><input type="tel"></label><br/><br/>
 5         数 字: <label><input type="number"></label><br/><br/>
 6         url :  <label><input type="url"></label><br/><br/>
 7         搜 索: <label><input type="search"></label><br/><br/>
 8         区 域: <label><input type="range"></label><br/><br/>
 9         年月日: <label><input type="date"></label><br/><br/>
10         月 份: <label><input type="month"></label><br/><br/>
11         星 期: <label><input type="week"></label><br/><br/>
12         时 间: <label><input type="time"></label><br/><br/>
13         <br/><br/>
14     <input type="submit" />
15 </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 1、外边距合并
 2             垂直的块级盒子，以最大的外边距为准
 3     
 4            div{
 5                 width: 200px;
 6                 height: 200px;
 7                 background-color: purple;
 8             }
 9 
10             div:first-child{
11                 margin-bottom: 100px;
12             }
13             div:last-child{
14                 background-color: red;
15                 margin-top: 50px;
16             }
17 
18 2、父子盒子都设置margin-top,只以父的为准
19 
20     父：解决加边框，并不好的解决
21     
22     父：加padding

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

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

猜你喜欢