道德三皇五帝烦衣， 功名夏后商周， 五霸七雄鬧春秋掩浙， 頃刻興亡過首花吟。 青史幾行名姓， 北茫無數(shù)荒丘厨姚， 前人撒種后人收衅澈， 無非是龍爭虎斗！ pia~（驚堂木）（自己手動(dòng)拍手叫好）
咳咳谬墙，很高興能在這里給大伙講一個(gè)故事今布，這個(gè)故事呢，叫做《我要當(dāng)FE Developer》拭抬，這邊的吃瓜群眾要問了部默，什么是FE Developer 呀？
FE Developer 就是Front-End-Developer,過了英語四級(jí)的人都知道造虎，它叫前端開發(fā)甩牺，又有人問了，什么是前端開發(fā)呀累奈？
那我只能說去年買個(gè)登山包贬派，趁我還沒開始正式講，把票又退了吧澎媒，學(xué)挖掘機(jī)美容美發(fā)不在這里搞乏。
故事呢，不是從頭講起的戒努，一開始就是面試題请敦，所以希望你是有一些基礎(chǔ)的（眾人起哄）镐躲，要退票的現(xiàn)在沒戲了啊，我都開講了侍筛。
HTML篇
- Doctype作用萤皂？嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
Doctype的作用：告知瀏覽器文檔使用哪種HTML或者XHTML規(guī)范匣椰。
模式分為：閹割嚴(yán)格版本裆熙，過渡版本，以及基于框架的HTML文本禽笑。
嚴(yán)格模式： 瀏覽器很時(shí)髦入录，他要以最高標(biāo)準(zhǔn)來呈現(xiàn)網(wǎng)頁。
混雜模式： 他很包容佳镜，既能夠接受老式的樣式僚稿，也能夠接受時(shí)髦的東西，他將會(huì)以一種比較寬松的方式來向后兼容蟀伸。而且遇到老前輩（也就是老網(wǎng)頁）的時(shí)候蚀同，將會(huì)去模擬老式瀏覽器的行為來解析網(wǎng)頁。
- HTML5 為什么只需要寫 <!DOCTYPE HTML>啊掏？
一般的網(wǎng)頁其實(shí)都要寫DTD標(biāo)準(zhǔn)蠢络，但是HTML5并不是基于SGML的，所以不用寫在PUBLIC后面脖律，但是還是須要DOCTYPE來規(guī)范瀏覽器一標(biāo)準(zhǔn)模式渲染谢肾。
而HTML4.01是基于SGML的腕侄，所以需要?DTD進(jìn)行引用小泉。-----
SGML 是國際上定義電子文檔和內(nèi)容描述的標(biāo)準(zhǔn)。
- 行內(nèi)元素有哪些冕杠？塊級(jí)元素有哪些微姊？ 空(void)元素有那些？
推薦鏈接 biubiubiu~
行內(nèi)元素：(只寫了常見的)
a
b
br
button
em
i
img
input
label
select
span
strong
textarea行內(nèi)元素屬性
- 設(shè)置width 無效
- 設(shè)置height 無效分预，但是可以通過設(shè)置line-height來設(shè)置兢交。
- margin值設(shè)定只有左右有效，上下沒有效果
- 設(shè)置padding笼痹，只有左右padding有效配喳，上下還是沒有效果。
塊級(jí)元素
address
button
div
dl
dt
form
h1->h6
li
p
table
tbody
td
tfoot
th
thead
tr
ul
塊級(jí)元素屬性
?設(shè)置height width 都有效凳干。
margin晴裹，padding上下左右都有效。空元素
常見
<area>
<br‘>’(轉(zhuǎn)個(gè)譯)
<img‘>’(轉(zhuǎn)個(gè)譯)
<input>
<link>
<meta>
#######不常見
<base>
<col‘>’(轉(zhuǎn)個(gè)譯)
<colgroup‘>’
<command>
<embed>
<keygen>
<param>
<source>
<track>
<wbr>
- 頁面導(dǎo)入樣式時(shí)救赐，使用link和@import有什么區(qū)別涧团？
- link屬于XHTML標(biāo)簽，而import是CSS提供的一種方式，也就導(dǎo)致了link除了可以引用css外還可以做很多其他的東西泌绣，比如說定義RSS钮追，定義rel連接等等，但是對(duì)于@import 那就只能加載css了
- 他們兩個(gè)的加載順序不同阿迈，當(dāng)一個(gè)頁面被加載的時(shí)候元媚，link引用的CSS會(huì)同時(shí)被加載，但是@import引用的樣式是在頁面加載完了之后才會(huì)加載仿滔， 在網(wǎng)速慢的時(shí)候兩者的差別比較大惠毁。
- @import 在一些老瀏覽器上不兼容，link都兼容
- javascript可以通過dom去改變link的樣式崎页，但是不能改變@import的樣式
- @import之中可以繼續(xù)引用其他樣式鞠绰，也就是css里面繼續(xù)引用其他樣式
- 介紹一下你對(duì)瀏覽器內(nèi)核的理解？
瀏覽器內(nèi)核飒焦，就是用來解釋網(wǎng)頁語法并且渲染網(wǎng)頁的蜈膨。所以一般的瀏覽器的內(nèi)核就是渲染引擎。
- 常見的瀏覽器內(nèi)核有哪些
Trident -> IE
Gecko -> Firefox
WebKit->Safari
Presto->Oprea
- HTML5有哪些特性牺荠、移除了哪些元素翁巍？如何處理HTML5新標(biāo)簽瀏覽器兼容的問題？如何區(qū)分HTML和HTML5?
HTML5有哪些特性休雌、移除了哪些元素灶壶？
新增有繪畫canvas，用于媒介回放的audio杈曲，video還有本地離線存儲(chǔ)localStorage 長期存儲(chǔ)數(shù)據(jù)驰凛，瀏覽器關(guān)閉之后數(shù)據(jù)不會(huì)丟失。
內(nèi)容元素担扑，article恰响、footer、header涌献、nav胚宦、section
表單控件，canlendar燕垃、date枢劝、timer、email卜壕、url您旁、search
控件元素，webworker印叁，websockt,Geolocation
移出的元素
顯示層元素：basefont被冒，big军掂，center，font昨悼，s蝗锥，strike，tt率触，u
性能較差的元素：frame终议，frameeset,noframes
- 簡述一下你對(duì)HTML語義化的理解？
用正確的標(biāo)簽做正確的事葱蝗、
HTML語義化 讓頁面內(nèi)容結(jié)構(gòu)化穴张，結(jié)構(gòu)更加的清晰漓帅，便于對(duì)瀏覽器憔古，搜索引擎解析；即使在沒有css樣式的情況下也能夠以一種文檔的樣式來顯示供常，并且是容易閱讀的悼凑，搜索引擎的爬蟲也是依賴HTML標(biāo)記來確定上下文以及各個(gè)關(guān)鍵字的權(quán)重的偿枕，有利于seo，使閱讀源代碼的人跟容易 將網(wǎng)站分塊户辫，便于閱讀和理解渐夸。
- HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下渔欢？
在用戶沒有與因特網(wǎng)連接的時(shí)候墓塌，可以正常訪問站點(diǎn)或者應(yīng)用，在用戶與因特爾網(wǎng)連接的時(shí)候奥额，就更新機(jī)器上面的緩存苫幢。
原理就是： HTML5的離線緩存是基于一個(gè)新建的.appcatche文件的緩存機(jī)制（不是存儲(chǔ)技術(shù)），通過這個(gè)文件的解析清單離線存儲(chǔ)資源披坏，那么這些資源就會(huì)像cookie一樣被存儲(chǔ)下來态坦，瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁面展示盐数。
- 瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢棒拂？
加載
頁面頭部像下面那樣加入一個(gè)manifest的屬性：
而在 catche.manifest文件中編寫離線存儲(chǔ)資源
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
> 離線狀態(tài)時(shí)，操作window.applicationCatche進(jìn)行實(shí)現(xiàn)
**解析**
- 在線的情況下玫氢，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性帚屉，它會(huì)請求mainifet文件，如果是第一次訪問app漾峡，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)攻旦。如果已經(jīng)訪問過得app已經(jīng)被加載過了也被離線過了，那么瀏覽器就會(huì)使用離線的資源加載頁面生逸，然后瀏覽器會(huì)對(duì)比行的manifest 與舊的manifest對(duì)比牢屋，如果文件改變那么瀏覽器將會(huì)離線新的文件且预，跟新離線存儲(chǔ)的資源。
>但是在離線的情況下烙无，瀏覽器就會(huì)直接使用離線存儲(chǔ)資源锋谐。
>
>- 對(duì)于mainest 文件進(jìn)行緩存的時(shí)候十分小心，因?yàn)榭赡艹霈F(xiàn)一種情況就是mainfest已經(jīng)更新了截酷，但是http緩存還有原來的舊的mainfest 而且沒有過期涮拗，那么就會(huì)有問題，所以最好不要設(shè)置mainfest緩存迂苛。
>
>- 瀏覽器更新mainfest的時(shí)候是一次性的下載的三热，如果下載失敗，那么瀏覽器使用的還是原來的mainfest三幻，這次更新算是失敗的就漾。
> - 在更新資源之后，新的資源需要下次打開app才會(huì)生效念搬，如果過需要資源馬上加載就能生效```windoq.applicarionCathe.SwapCatche（）```方法來使之生效从藤，出現(xiàn)這種原因是因?yàn)闉g覽器先用離線資源加載頁面，然后再去檢查manifest是否有更新锁蠕，所以需要下次打開才生效夷野。
那么說了這么多關(guān)于html5存儲(chǔ)的東西，大家能夠分清楚cookies荣倾，sessonStorage和localStorage的區(qū)別嗎悯搔？？ 欲知后事如何舌仍，且聽下回分解妒貌，pia~~~~
