Web前端必備基礎知識點有哪些

這篇文章主要介紹“Web前端必備基礎知識點有哪些”，在日常操作中，相信很多人在Web前端必備基礎知識點有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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 h2-h7 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( https://www.w3.org/TR/geolocation-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優先級算法如何計算？

同級權重，遵循就近原則

載入樣式以最后載入的定位為

到此，關于“Web前端必備基礎知識點有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！