摘要：為何只要寫不基于標(biāo)準(zhǔn)通用標(biāo)記語言，所以不需要引用，但需要來規(guī)范瀏覽器的行為使得瀏覽器知道應(yīng)該以何種解析方式對文檔進(jìn)行解析基于，所以要引用才能告知瀏覽器文檔所使用的文檔類型講講行內(nèi)元素塊元素空元素有哪些行內(nèi)元素，，，，，，，標(biāo)記性元素塊元素，

HTML5不基于SGML（標(biāo)準(zhǔn)通用標(biāo)記語言），所以不需要引用DTD，但需要doctype來規(guī)范瀏覽器的行為（使得瀏覽器知道應(yīng)該以何種解析方式對文檔進(jìn)行解析）

HTML4.0基于SGML，所以要引用DTD才能告知瀏覽器文檔所使用的文檔類型

行內(nèi)元素：a，span，img，input，select，strong，em，b（標(biāo)記性元素）

塊元素：div，p，ul，li，ol，dd，dt，dl，h1-h6

空元素：hr，br，input，img，link，meta

link屬于XHTML標(biāo)簽，除了可以加載css外，還能定義SSR，定義rel連接屬性等作用，@import是css提供的，只能加載css樣式

頁面加載時(shí)，link引入的資源能夠同時(shí)被加載，而@import引入的css必須等頁面加載完成后才能進(jìn)行加載

link是XHTML標(biāo)簽，無兼容問題，而@import是css2.1提出的，IE5以下的低版本瀏覽器不支持

在沒有css樣式時(shí)，以一種文檔的形式顯示，并且是容易閱讀的

HTML5語義化使頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于瀏覽器、搜索引擎解析

有利于哪些有視障的人使用屏幕閱讀器根據(jù)標(biāo)記來訪問網(wǎng)站

有利于團(tuán)隊(duì)的開發(fā)和維護(hù)

有利于SEO：便于爬蟲抓取更多有效的信息

cookie本是用來客戶端與服務(wù)端進(jìn)行通信的，因?yàn)槠溆写鎯δ埽唤栌脕泶鎯π畔ⅲ琧ookie數(shù)據(jù)會始終在同源http請求中攜帶

localStorage和sessionStorage不會自動把數(shù)據(jù)發(fā)送到服務(wù)器上，僅在本地存儲

存儲大小

cookie只有4k；而localStorage和sessionStorage可以達(dá)到5M或者更大

過期時(shí)間

cookie在設(shè)置的過期時(shí)間前一直有效，

localStorage長期有效，關(guān)閉瀏覽器數(shù)據(jù)不會丟失，除非用戶主動刪除數(shù)據(jù)

sessionStorage數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除

區(qū)分用戶是人還是機(jī)器，可以防止惡意破解密碼、刷票等；可以防止黑客對某一特定注冊用戶以暴力破解的方式不斷的嘗試登錄

data-*用于存儲頁面或者應(yīng)用程序的私有自定義的數(shù)據(jù)，可以在所有的html元素中嵌入data-自定義屬性，可以被js利用來操作數(shù)據(jù)

注意：data屬性應(yīng)該為小寫，且data-后至少要有一個字符，不能單單使用data，data屬性值可以是任意字符串

新特性：

繪畫canvas

用于媒介回放的video、audio元素

本地離線locaStorage長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失

sessionStorage在瀏覽器關(guān)閉后數(shù)據(jù)自動刪除

表單控件：data、email、search、url、calendar、time

語義化標(biāo)簽：header、footer、nav、section、article

新的技術(shù)：webworker、websocket、Geolocation

移除的元素

純表現(xiàn)元素：basefont、center、font、big、u、tt、strike、s

對可用性產(chǎn)生負(fù)面影響的元素：frame、frameset、noframes

w3c標(biāo)準(zhǔn)盒子模型：content的width就是設(shè)置的width

IE怪異盒子模型：content的width包含border和padding

優(yōu)先級就近原則，同等權(quán)重時(shí)樣式最近者優(yōu)先級更高

!import > id > class > tag

!import比內(nèi)聯(lián)樣式優(yōu)先級更高

瀏覽器種類眾多，不同瀏覽器的默認(rèn)樣式不一樣，需要進(jìn)行reset統(tǒng)一瀏覽器的樣式

使用flex布局：父元素設(shè)置：display：flex

使用浮動布局（或者使用display：inline-block）

// html

    
fff
    
ffffdf
    
// css
.left{
    float: left;
    background: red;
    /*display: inline-block;*/
}
.right{
    overflow: hidden;
    background: green;
    /*display: inline-block;*/
}

左邊定寬+設(shè)置浮動width：300px；float：left；右邊設(shè)置overflow：hidden（或者margin-left：左邊的寬度）

.left{
    float: left;
    width: 300px;
    background: red;
}
.right{
    overflow: hidden;
    background: green;
}

父元素設(shè)置display：flex；左邊設(shè)置width：300px；右邊設(shè)置flex-grow：1

父元素設(shè)置display：table；左邊設(shè)置width：300px；右邊設(shè)置display：table-cell；width：100%；

父元素設(shè)置position：relative；左邊設(shè)置position：absolute；width：300px；右邊設(shè)置margin-left：左邊的寬度

父元素設(shè)置display：table；右邊設(shè)置：display：table-cell

父元素設(shè)置display：flex；右邊設(shè)置flex-grow：1

使用左右浮動布局，中間居中布局，此時(shí)中間div要放在右浮動下面（因?yàn)閏enter的div在正常文檔流中，占據(jù)全屏寬度，右邊的浮動元素會放置在下一行）

// html

    
fff
    
ffffddd
    
ss
    
// css
.left{
    float: left;
    background: red;
}
.right{
    float: right;
    background: green;
}
.center{
    margin: 0 auto;
    background: yellow;
}

使用flex布局

父元素設(shè)置display：flex；左邊定寬width：300px；右邊定寬width：300px；中間設(shè)置flex-grow：1

// html

    
fff
    
ss
    
ffffddd
    
// css
.box{
    display: flex;
}
.left{
    width: 300px;
    background: red;
}
.right{
    width: 300px;
    background: green;
}
.center{
    flex-grow: 1;
    background: yellow;
}

使用絕對定位，左右兩邊絕對定位，脫離文檔流，中間使用margin留出定寬的margin值

.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    background: red;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    background: green;
}
.center{
    margin: 0 300px;
    background: yellow;
}

其實(shí)是利用負(fù)margin值實(shí)現(xiàn)，也就是固比固（兩邊盒子寬度固定，中間盒子自適應(yīng)）

    
dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
        dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg
    

    

    

.box{
    overflow: hidden;
    padding: 0 150px;
}
.left{
    left: -150px;
    margin-left: -100%;
    width: 150px;
    height: 50px;
    background: red;
}
.right{
    right: -150px;
    margin-left: -150px;
    width: 150px;
    height: 50px;
    background: green;
}
.center{
    width: 100%;
    height: 50px;
    background: yellow;
}
.col{
    position: relative;
    float: left;
}

定位完成后，要進(jìn)行position：relative；再左右兩欄添加left和right值，使中間的內(nèi)容不被遮蓋

    

        
dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg
            dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg
        
    
    

    

    
.left{
    margin-left: -100%;
    width: 150px;
    height: 50px;
    background: red;
}
.right{
    margin-left: -150px;
    width: 150px;
    height: 50px;
    background: green;
}
.center{
    width: 100%;
    height: 50px;
    background: yellow;
}
.col{
    float: left;
}
.wrap{
    margin: 0 150px;
}
與圣杯布局只是中間的div增加了包含的容器，防止遮蓋文字使用了在包含容器中設(shè)置margin：0 定寬值；

居中浮動元素

    


.right{
    float：left;
    width: 150px;
    height: 50px;
    margin: 0 0 0 -75px;
    position: relative;
    left: 50%;
    top: 50%;
    background: green;
}

居中絕對定位元素

.right{
    position: absolute;
    width: 150px;
    height: 50px;
    margin: 0 auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: green;
}

absolute：生成絕對定位元素，相對于值不為static的第一個父元素進(jìn)行定位

fixed：生成絕對定位，相對于瀏覽器窗口進(jìn)行定位

relative：生成相對定位元素，相對于其正常位置進(jìn)行定位

static：沒有定位，元素出現(xiàn)在正常的流中（忽略偏移聲明：top、left、right、bottom、z-index）

inherit：從父元素繼承position屬性的值

行框的排列會受到中間空白（回車或者空格）的影響，空格也屬于字符，也會應(yīng)用樣式，占據(jù)空間
將字符大小設(shè)為0就可以將間隔去除

漸進(jìn)增強(qiáng)：針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)，追加功能達(dá)到更好的用戶體驗(yàn)

優(yōu)雅降級：先構(gòu)建完整的功能，再針對低版本瀏覽器進(jìn)行兼容

JS 部分等待更新