Web前端必備基礎知識點，百萬程式設計師：牛逼！

因為要告知瀏覽器的解析器用什麼文件標準解析這個文件，所以在文件的開頭要寫上文件型別宣告，H5的文件型別宣告要比H4文件型別宣告簡潔的多。因為H5不基於SGML（標準通用標記語言），所以不需要對DTD文件型別定義）進行引用，但是H4是基於SGML，必須對DTD進行引用。H4的三種文件型別宣告是：過渡模式，嚴格模式，框架模式。

HTML是HyperText Markup Language（超文字文字標記標籤語言），透過HTML，瀏覽器才能解析文件，在頁面上顯現文件的內容和結構。同時HTML

也是網路三大基石之一：URL（統一資源定位符），HTTP（超文字傳輸協議）。超文字就是影片，音訊和圖片。

HTML的行內標籤，塊級標籤，空標籤有哪些？

行內標籤：a b span img input select strong

塊級標籤：div ul ol li dl dt dd h1-h6 p

空/單標籤：br hr img link meta base source

如果你依然在程式設計的世界裡迷茫，不知道自己的未來規劃，可以加入web前端學習交流群： 731771211  裡面可以與大神一起交流並走出迷茫。小白可進群免費領取學習資料，看看前輩們是如何在程式設計的世界裡傲然前行！群裡不停更新最新的教程和學習方法（進群送web前端系統學習路線，詳細的前端專案實戰教學影片），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

點選：

頁面匯入外部樣式檔案時，使用link和@import有什麼區別？

（1）link屬於XHTML標籤，除了載入CSS外，還可以定義RSS，定義rel連線屬性等作用；而@import是CSS提供的，只用用於載入CSS。

（2）頁面被載入時，link會同時被載入，而@import引用的CSS只能等頁面載入完才能載入。

（3）link無相容性問題，而@import只能在IE5+上才被識別。

HTML和XHTML的區別？

（1）XHTML標籤必須擁有根元素HTML

（2）標籤必須被正確地巢狀

（3）標籤必須正確關閉

（4）標籤必須用小寫字母

（5）空標籤頁必須關閉

（6）XHTML相容性比較好

（7）XHTML不允許使用target="_blank"

（8）XHTML標籤屬性值必須用引號

w3c的標準與標籤語義化？

W3C標準：

（1）所有的標籤都使用小寫字母

（2）所有的屬性值都放在引號裡

（3）標籤正確巢狀/關閉

（4）符合HTML,CSS,JS的規則

（5）結構層+表示層+行為層

遵循W3C標準和標籤語義化有利於：

讓頁面更友好，支援更多的終端，讓更多的人可以使用網際網路獲得自己想要的資訊。

（1）搜尋引擎的搜尋，有利於爬蟲抓取內容

（2）支援多終端

（3）支援樣式佈局讓站點支援個性化

（4）有利於開發和維護

（5）有利於降低成本

（6）提高使用者體驗

（7）頁面能更好的呈現內容結構

瀏覽器核心的理解？

瀏覽器的核心分為兩部分：渲染引擎和JS引擎，但是由於JS引擎越來越獨立了，所以核心也就是傾向渲染引擎。但是因為各個瀏覽器的核心不一樣，所以它們的渲染

引擎就不一樣，所以渲染出來的頁面也就不一樣，這就是為什麼瀏覽器有差異性，為什麼我們要去適配瀏覽器的相容性。

瀏覽器的核心有哪些？

firefox核心：Gecko

IE TT 360 世界之窗 搜狗瀏覽器核心：Trident

Opera：Presto 現為：Blink

Safari Chrome：Webkit

Chrome：blink

H5新特性+新語義化標籤

HTML5不是SGML（標準通用標記語言）的子集了，主要是關於影像，位置，儲存多工等功能的增加。

新語義化標籤：

繪畫：canvas

影片：video

音訊：audio

article footer header nav section calendar date time email url search

低端IE透過document.createElement方法新增標籤

新特性：

客戶端儲存機制

cookie是網站為了標示使用者身份而儲存在使用者本地終端上的資料（經過加密）

cookie資料始終在同源的http請求中攜帶（即使不需要），在瀏覽器和伺服器間來回傳遞。

sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。

儲存大小：

cookie資料不能超過4k

sessionStorage和localStorage雖然也有儲存大小的限制，可以達到5m更大。

期限時間：

localStorage 瀏覽器關閉後資料不丟失除非刪除資料

sessionStorage 資料在當前瀏覽器視窗關閉後自動刪除

作用域是限定在文件源中，文件源url是透過協議+主機+埠決定的，同文件源可以共享資料，不同文件源不能共享

cookie 設定過期時間之前一直有效，即使視窗或瀏覽器關閉

cookie相容性好，但是難用，是早期為伺服器端指令碼設計的客服端儲存機制

webworker提供一個簡單的方法使得web內容能夠在後臺執行指令碼。

websocket 標籤頁之間的通訊

1.地理位置API

地理位置API( )它能夠允許瀏覽器（使用者允許的情況下）檢測使用者的地理位置。

2.歷史管理API

它允許web應用儲存和更新它們的狀態，以便當使用者點選瀏覽器的後退與前進按鈕的時候，無需重新整理頁面而立即做出響應。

3.跨文件訊息傳遞

單位與字型

1.px:（Pixel）單位名稱畫素，相對長度單位，是相對顯示器螢幕解析度而言的。國內使用的多。

2.em:單位名稱為相對長度單位，相對於當前物件內文字的字型尺寸。如果當前對行內文字的字型尺寸未被人設定，則相對於瀏覽器的預設字型尺寸。國外使用的多。

3.pt:單位名稱為點(point)，絕對長度單位一般老版本的table使用，現在已經不用了。

4.rem:是CSS3中新增加的一個單位值，是相對長度單位。

em是相對於元素的父元素的font-size進行計算。

rem是相對於根元素html的font-size進行計算。

這樣rem就繞開了複雜的層級關係，實現了類似於em單位的功能。

CSS

盒子模型：

標準盒子（w3c盒子模型）：content+padding+margin+border

IE盒子模型：content(padding+border+content)+margin

CSS選擇符？哪些屬性是可以繼承？

id# class. 標籤 相鄰+ 子選擇器 > 後代選擇 li a 萬用字元* 屬性選擇器 偽類選擇器

可繼續的樣式：font-size font-family color ul li dl dd dt

不可繼承的樣式：border padding margin width height

CSS優先順序演算法如何計算？

同級權重，遵循就近原則

載入樣式以最後載入的定位為準