初級前端知識點整合-HTML+網絡部分

時間 2020-03-10

標籤初級前端知識整合 html 網絡部分欄目 HTML 简体版

原文原文鏈接

各位大佬以爲不錯能夠點個贊收藏謝謝一塊兒加油吧！！css

1.HTML優化：
避免html中寫css樣式，難以維護；
使用viewport加速頁面渲染；
使用語義化標籤，減小css代碼，加強可讀性和SEO；
優化DOM結構；
避免空src、href等屬性值，空的也會發起HTTP請求；
減小DNS的查詢次數；html

2.SEO：搜索引擎優化
<1>合理的title、description、keywords，搜索對這三項的權重逐漸減少，不一樣的頁面要有不一樣的title和description，keywords列舉重要的關鍵詞；
<2>語義化HTML代碼，讓搜索引擎更容易理解網頁；
<3>重要內容HTML代碼放前面，由於搜索引擎抓取HTML順序是從上到下；
<4>重要的內容不要用JS動態輸出，由於爬蟲不會執行JS獲取內容；
<5>少用iframe，由於搜索引擎不會抓取iframe中的內容；
<6>非裝飾圖片必定要加alt屬性，由於當圖片沒法顯示的時候還能有文字提示。web

3.<img>的title屬性和alt屬性的區別：
通俗的來講title屬性用於當鼠標置於圖片上方時顯示文字提示，而alt則是用於當圖片沒法顯示時能夠用alt中的文字代替。canvas

4.從瀏覽器地址欄輸入URL到顯示頁面的步驟：
DNS解析URL找到真實的IP-->向服務器發送請求-->服務器處理請求返回數據-->瀏覽器接收資源（HTMLCSSJS圖片等）-->瀏覽器解析資源,創建內部結構DOM等-->載入解析完成的文件，渲染頁面。瀏覽器

5.網站性能優化：
<1>content方面：減小請求（使用雪碧圖、合併文件等）；減小DNS查詢（DNS緩存等）；減小DOM元素數量；
<2>server方面：使用CDN；對組件使用GZip壓縮。
<3>Cookie方面：減少Cookie大小。
<4>css方面：將樣式表放到頁面頂部；不適用行內樣式；使用<link>避免使用@import。緩存

6.語義化HTML的理解：
HTML語義化就是讓頁面的內容結構化，便於搜索引擎、瀏覽器解析；在沒有CSS樣式的狀況下也能以一種文檔的格式顯示，便於閱讀；搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於SEO；提升可維護性。安全

7.瀏覽器內核：
主要分紅兩部分，渲染引擎和JS引擎。
渲染引擎用於取得網頁的內容（HTML、XML和圖片等）、整理訊息（CSS等），以及計算網頁的顯示方式。
JS引擎用於解析和執行JS來實現網頁的動態效果。性能優化

8.HTML新特性以及移除的元素：
HTML新特性：繪畫canvas、本地離線存儲localstorage、sessionstorage、語義化標籤（header、mainfooter、article、nav、section等）、表單控件（calendar、email、url、date、time、search）、新技術（websocket、webworker、Geolocation）服務器

HTML移除的元素：big、center、font、s、basefont、frame、frameset、noframes等websocket

9.HTML離線存儲用法及工做原理：
<1>離線存儲的工做原理：HTML離線存儲是基於一個新建的.appcache文件的緩存機制，經過這個文件上的解析清單去離線存儲資源，這些資源就會像Cookie同樣被存儲先來。當網絡出於離線狀態下時，瀏覽器會經過被離線存儲的資源進行頁面展現。

<2>離線存儲的用法：
頁面頭部加入一個manifest屬性，而後在cache.manifest文件中編寫須要離線存儲的資源，在離線狀態時經過window.applicationCache進行需求實現。

//頭部加入manifest屬性
<html manifest="demo.appcache">

//manifest文件編寫
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resource/logo.png
FALLBACK:
/ /offline.html

9.瀏覽器是怎麼對HTML5的離線存儲資源進行管理和加載的呢
在線的狀況下，瀏覽器解析html標籤發現manifest屬性時，它就會請求manifest文件(名字後綴爲.appcache的文件)，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件中的內容下載相應的資源並離線存儲。
若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面。而後瀏覽器會對比新的manifest文件和舊的manifest文件，若是未發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載manifest文件中的資源並離線存儲。

10.Cookies、localstorage和sessionstorage之間的區別
<1>cookie數據始終在同源http請求中攜帶，會在瀏覽器和服務器之間來回傳遞。而sessionstorage和localstorage不會主動把數據發送到服務器，僅在本地保存。
<2>cookie數據大小不能超過4k，而sessionstorage和localstorage能夠達到5M或更大；
<3>cookie在設定的有效期內有效，即便窗口或瀏覽器關閉；
sessionstorage則在瀏覽器關閉前有效；
localstorage長期有效的持久數據，除非主動刪除。

11.Doctype的做用：
<!Doctype>聲明位於文檔的最前面，用於告知瀏覽器額解析器，用什麼文檔類型規範來解析這個文檔。

12.行內元素、塊級元素、空元素
<1>行內元素：<span><img> <input> <select> <strong> <a><b>
<2>塊級元素：<div> <ul> <ol> <li> <p> <dl> <dt> <dd> <h1>
<3>空元素：<br/> <img/> <hr/> <input/> <link/> <meta/>

13.

網絡協議部分：

1.Http狀態碼的含義：
100，200-202,301-304,400-404（缺402），500,503
如下只寫大概含義，詳情可百度，不寫的那麼嚴謹
100：繼續，在post請求發送完頭部信息以後服務器端返回此信息。
200：返回信息成功
201：請求發送成功
202：接收請求成功
301：網頁已永久移動到一個新位置
302：臨時重定向
303：臨時重定向，且老是使用GET請求信的URI
304：網頁自上次請求後未修改過
400：服務器沒法理解請求的格式
401：未受權
403：禁止訪問
404：找不到與URI匹配的資源
500：常見的服務器端錯誤
503：服務器端暫時沒法處理請求（過載之類的）

2.網絡分層：OSI模型和TCP/IP模型
<1>OSI模型:
應用層
表示層
會話層
傳輸層
網絡層
數據鏈路層
物理層
<2>TCP/IP模型：
應用層
傳輸層
互聯網層
網絡接口層

3.HTTP/HTTPS：
Http的鏈接很簡單，是無狀態的；Https協議是有SSL+HTTP構建的可進行加密傳輸、身份認證的網絡協議，比Http協議更安全。

4.HTTP的幾種請求方法用途：
<1>GET：發送請求來獲取服務器上的某一資源；
<2>POST：向URL指定的資源提交數據或附加新的數據；
<3>PUT：和POST同樣用於提交數據。可是PUT指定了資源在服務器上的位置，而POST沒有；
<4>HEAD：只請求頁面的首部；
<5>DELETE：刪除服務器上的某一資源；
<6>OPTIONS：用於獲取當前URL支持的方法。若是請求成功，會有一個Allow的頭包含相似「GET，POST」這樣的信息；
<7>TRACE: 用於激發一個遠程的，應用層的請求消息迴路；
<8>CONNECT：把請求鏈接轉換到透明的TCP/IP通道。