1、css less

//單行注釋
開頭：@charset "utf-8";

變量：
    @color:#000;
    
用法;
    color:@color;
    width:@width;
    
混合(mixin 1、普通)  
    1.在選擇器里引用另一個選擇器
      先定義一個.w{
                    width:1210px;
                    margin:0 auto;
                }
    2.定義一個不帶輸出的mixin：
        .w(){
            加個()就不輸出了
        }
    3.帶有一個參數的mixin
        .f(@fl){
            float:@fl;
        }
        .left{
            .f(left);
        }
    4.傳一個參數的,并帶有默認值的mixin
        .f(@fl:left){
            float:@fl;
        }
        h2{
            .f();
        }
        p{
            .f(right);
        }
    5.傳多個參數的mixin
        .f(@fl;@w;@h){
            float:@fl;
            width:@w;
            height:@h;
        }
        .left{
            .f(left;200px;300px)
        }
    6.帶有默認值的多個參數的mixin
        .f(@fl:left;@w:200px;@h:300px){
            float:@fl;
            width:@w;
            height:@h;
        }
        .left{
            .f();
        }
        .right{
            .f(right;300px;400px);
        }

2、less的嵌套規則

.right{
    h3{
        .f(right;300px;30px);
    }
    li{
        .f();
        a{
            color:@color;
        }
        &:nth-child(2){
        }
    }
}       

3、HTML5新增標簽

<header class="header">
</header>

<nav class="nav">
</nav>

<div class="main">
    <aside class="left">
    </aside>
    <div class="center">
    </div>
    <div class="right">
    </div>
</div>  

<time></time>行內

<footer class="footer">
</footer>

<address></address>

section==div

圖文混排:
<figure>
    <img src="">
    <figcaption>
        <h3></h3>
        <p></p>
    </figcaption>
</figure>

  兩個標題同時出現：
<hgroup></hgroup>

文章：
<article></article>

畫布：
<canvas></canvas>