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

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

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

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

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

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

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

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

有利于SEO：便于爬蟲(chóng)抓取更多有效的信息

cookie本是用來(lái)客戶端與服務(wù)端進(jìn)行通信的，因?yàn)槠溆写鎯?chǔ)功能，而被借用來(lái)存儲(chǔ)信息，cookie數(shù)據(jù)會(huì)始終在同源http請(qǐng)求中攜帶

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

存儲(chǔ)大小

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

過(guò)期時(shí)間

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

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

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

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

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

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

新特性：

繪畫(huà)canvas

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

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

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

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

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

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

移除的元素

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

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

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

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

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

!import > id > class > tag

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

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

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

使用浮動(dòng)布局（或者使用display：inline-block）

// html

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

左邊定寬+設(shè)置浮動(dòng)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

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

// 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;
}

使用絕對(duì)定位，左右兩邊絕對(duì)定位，脫離文檔流，中間使用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 定寬值；

居中浮動(dòng)元素

    


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

居中絕對(duì)定位元素

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

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

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

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

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

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

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

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

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

JS 部分等待更新