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

頁面導入外部樣式文件時，使用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(https://www.w3.org/TR/geolocation-API/)它可以容許瀏覽器（用戶容許的狀況下）檢測用戶的地理位置。

2.歷史管理API

它容許web應用保存和更新它們的狀態，以便當用戶點擊瀏覽器的後退與前進按鈕的時候，無需刷新頁面而當即作出響應。

3.跨文檔消息傳遞

Web Worker

單位與字體

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優先級算法如何計算？

同級權重，遵循就近原則

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

 

 

地址: http://www.javashuo.com/article/p-tcoqdyiw-w.html