前言：
本人17年應屆畢業生，已入職，剛入職沒有太多事情于是整理了一下過去面試的筆記。很多人覺得前端不需要或者不會被面試到網絡的部分就跳過了，曾經我也是這樣，后來發現就算一些細小的點都會被問到，這里的題一是源自被問過，二是自我收集，一道一道看完肯定沒有壞處。也祝大家拿到心儀的offer。
系列文章：
HTML一些常考代碼：
FE-interview-questions，滿意點個star。
HTML前端面試（包含網絡）
1. 對web標準的理解是什么？
首先是html標簽上，標簽閉合，標簽小寫，不亂嵌套；使用語義化標簽，例如header，article，少用<b></b>這樣沒有語義的標簽，以提高搜索幾率；使用外部的css文件及js文件，使結構表現行為分離；減少文件數目，達到減少網絡請求次數，文件下載與頁面速度更流暢；內容能被更多的用戶及設備訪問，保證在版本較低的瀏覽器下能夠呈現完整內容，在版本高的瀏覽器上能夠展現更完美的視覺效果；代碼低耦合高內聚，易維護。
2. HTTP狀態碼及其含義？
- 100-119：接收成功，要求客戶端繼續提交下一次請求
- 200-299：接收成功且完整處理了整個過程。
- 300-399：客戶需要進一步細化：
- 302：重定向
- 304/307：拿緩存
- 400-499：請求出錯不能執行
- 404：請求資源沒在web服務器中
- 403：沒有權限，拒絕訪問
- 500-599：服務器端錯誤
- 503：由于臨時的服務器維護或者過載，服務器當前無法處理請求。
- 500：服務器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。一般來說，這個問題都會在服務器的程序碼出錯時出現。
3. 一級域名？二級域名是指什么？
- .com ：頂級域名
- baidu.com： 一級域名
- www.baidu.com／tieba.baidu.com： 二級域名
4. 瀏覽器解析url過程？
- 瀏覽器輸入地址
- 輸入baidu，瀏覽器自動添加.com
- baidu.com的時候，這是一級域名，給你重定向到www.baidu.com這樣的二級域名。
- 瀏覽器查看是否有緩存
- 瀏覽器緩存
- 系統緩存
- DNS緩存（路由器緩存）
- 請求終于來到了DNS服務器，DNS服務器將域名解析為ip地址
- 向isp分配的dns發起請求查詢www.baidu.com這個域名
- 檢查是否有緩存，有都話就返回。
- 沒有的話會從配置文件里讀取13個根域名服務器
- 然后向其中一臺發出請求
- 知道了是.com這個域下的，就返回com域中的NS記錄，一般來說是13臺主機和IP。
- 然后再向一臺發出請求，com域的服務器發現是baidu.com這個域的，返回給你。
- 然后再像baidu.com這個域的服務器發出請求，查到了www的這臺主機，就把ip返回
- ispdns拿到之后，將其返回給客戶端，并保存在高速緩存中
-
瀏覽器有了ip就可以找到服務器，兩者之間就可以建立tcp鏈接，服務器需要和瀏覽器建立tcp三次握手。
image- 客戶端發送SYN=1（表示請求連接），并發送一個seq（隨機碼）
- 服務器由于收到SYN=1，知道是請求連接，返回一個ACK=1（表示確認），并同返回一個請求連接SYN=1，然后返回一個ack=seq+1（客戶端隨機碼應答），且自己也返回一個seq（隨機碼）
- 客戶端收到服務器的ack后驗證，向服務器確認包發送ack=seq+1（服務器隨機碼應答）
- 服務器確認ack后建立連接，完成三次握手。
為什么非要三次握手 ？若只有兩次握手，假如客戶端發送了一個報文因為時延，久久沒有送到服務器端，故客戶端也沒有收到來自服務器端的確認，就把這次報文認定為“已失效的報文”，并且會再次發送一次報文。但是如果認定失效之后，失效報文正好通過阻塞送到了服務器，因為只有兩次握手，那么連接就建立了起來，但是這個連接是錯誤的，因為正確的報文已經重新發出了。如果三次握手的話，那么在服務器接受到失效報文再返回給客戶端確認時，由于客戶端校驗ack不正確，可以不用理會那個由于失效報文建立起的連接。
講了三次握手，這里也說下四次握手，與解析url無關
image
- 客戶端發送FIN=1（表示結束），并發送隨機碼seq=u
- 服務器端返回一個ACK=1（表示確認），并返回ack=u + 1，且也發生一個隨機碼seq=v
- 服務器再發出一個一個FIN=1，和seq=w，且重復發送上次內容
- 客戶端返回一個ACK=1，然后返回隨機碼等于上次隨機碼加一seq=u+1，再返回ack=w+1
- 服務器端收到后結束連接，客戶端也結束連接。
為什么非要四次握手？
因為當客戶端沒有東西發送給服務器了，就會發送FIN報文，但是服務器端收到FIN報文后未必就會馬上關閉socket，因為有可能服務器端還有一些信息要發送給客戶端，但是還沒有發完。服務器發送FIN報文和客戶端分開的，于是就有了四次握手。
為什么TIME_WAIT狀態還需要等2MSL后才能返回到CLOSED狀態？
并不能保證客戶端最后返回的ACK能正確送達，若未正確送達，在2MSL內，服務器還會重發FIN報文。
- 握手成功后，首先瀏覽器得向服務器發送http請求（如果是http協議）和請求數據包
- 請求方式
- 請求協議的版本
- 想到得到什么數據，數據是什么格式的
- 服務器收到了請求后進行處理，將需要的數據返回瀏覽器
- 瀏覽器收到http響應頭，此時就會讀取數據，進行瀏覽器渲染。
- 解析DOM樹
- 遇到圖片樣式表js文件啟動下載
- 顯示html頁面
5 .你所知道的HTTP請求方法？
- GET：請求指定頁面的信息，并返回實體主體。
- HEAD：類似于GET請求，只不過返回的響應沒有具體內容，用于獲取報頭
- POST：向指定資源提交數據請求處理（例如表單或上傳文件）。數據被包含在請求體中。POST請求可能導致新資源的建立/或已有資源的修改。
- PUT：從客戶端向服務器傳送的數據取代指定的文檔的內容。
- DELETE：請求服務器刪除指定的頁面。
- CONNECT：HTTP/1.1協議中預留給能夠將連接改為管道方式的代理服務器。
- OPTIONS：允許客戶端查看服務器的性能
- TRACE；回顯服務器收到的請求，主要用于測試或診斷
6.iframe的使用場景有哪些？
- 左側是功能樹，右側是具體功能。為了每一個功能單獨分離。
- 加載別的網站的內容。
- ajax上傳文件
- 在上傳圖片時，不使用flash實現無刷新。
- 跨域的時候作為中間人
7. 什么是置換元素？置換元素有哪些？
- CSS渲染模型并不考慮對此內容的渲染，且元素本身一般擁有固有尺寸。
- 瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。
- 他們可以設置width/height，如同設置了display:inline-block一般
- 有img,input,textarea,select,object
8. HTTP請求格式
下面是一個HTTP請求的數據：
POST /index.php HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: <a target=_blank href="http://localhost/" style="color: rgb(51, 102, 153); text-decoration: none;">http://localhost/</a>
Content-Length：25
Content-Type：application/x-www-form-urlencoded
username=aa&password=1234
- 請求行
請求的第一行是： 方法 URL 協議/版本（POST /index.php HTTP/1.1）
- 請求頭：每個頭域由一個域名，冒號（:），域值三部分組成，域值前可以添加任意個空白字符，頭域可以被擴展為多行，每行前至少有一個空格或制表符。
- Transport 頭域
- Connection：表示是否需要持久連接（長連接）。如果服務器看到這里的值是"Keep-Alive"，或者看到請求用的是HTTP1.1（默認持久連接），他就可以利用持久連接的優點。
-
Host：用于指定被請求資源的Internet主機號和端口號，通常從HTTP URL中提取出來。（
例如: Host: localhost這里缺省端口號80，若指定了端口號8080，則為 Host: localhost:8080）
- Client 頭域
-
Accept：瀏覽器可以接受的媒體類型。
例如：Accept: text/html，代表能夠接受html，如果服務器無法返回指定類型則返回406。通配符 * 代表任意類型。Accept: * / * 代表瀏覽器可以處理所有類型，(一般瀏覽器發給服務器都是發這個) -
Accept-Encoding：瀏覽器申明自己接收的編碼方式，通常指定是否支持壓縮，支持什么壓縮方法。
例如： Accept-Encoding: gzip, deflate。Server能夠向支持gzip/deflate的瀏覽器返回經gzip或者deflate編碼的HTML頁面。 許多情形下這可以減少5到10倍的下載時間，也節省帶寬。 -
Accept-Language：申明自己接收的語言。
例如： Accept-Language:zh-cn。沒有設置表示可以接收任何語言。 -
User-Agent：告訴服務器，客戶端使用的操作系統和瀏覽器的名稱和版本。
例如：User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2 - Accept-Charset：申明瀏覽器接收的字符集，如gb2312，utf-8。
-
Accept：瀏覽器可以接受的媒體類型。
- Cookie/Login 頭域
- Cookie：最重要的header，將cookie的值發送給HTTP服務器。
- Entity頭域
- Content-Length：發送給服務器數據的長度。
-
Content-Type：發送給服務器數據的類型。
例如：Content-Type：application/x-www-form-urlencoded
- Miscellaneous 頭域
-
Referer：告訴服務器我是從哪個頁面鏈接過來的。比如從我主頁上鏈接到一個朋友那里，他的服務器就能夠從HTTP Referer中統計出每天有多少用戶點擊我主頁上的鏈接訪問他的網站。
例如：Referer: <a target=_blank href="http://localhost/" style="color: rgb(51, 102, 153); text-decoration: none;">http://localhost/</a>
-
Referer：告訴服務器我是從哪個頁面鏈接過來的。比如從我主頁上鏈接到一個朋友那里，他的服務器就能夠從HTTP Referer中統計出每天有多少用戶點擊我主頁上的鏈接訪問他的網站。
- Cache 頭域
-
If-Modified-Since：把瀏覽器緩存的頁面的最后修改時間給服務器發送過去，服務器對比實際文件的最后修改時間。如果時間一致，那么返回304
例如：If-Modified-Since: Thu, 09 Feb 2012 09:07:57 GMT。 -
If-None-Match：和Etag一起工作，工作原理是在HTTP response中添加Etag信息。當用戶再次請求該資源時，將HTTP response中加入If-None-Match信息。如果服務器驗證資源的ETag沒有改變（該資源沒有更新），將返回一個304狀態告訴客戶端使用本地緩存文件。否則將返回200狀態和新的資源和Etag. 使用這樣的機制將提高網站的性能。
例如: If-None-Match: "03f2b33c0bfcc1:0" -
Pragma：作用： 防止頁面被緩存， 在HTTP/1.1版本中，它和Cache-Control:no-cache作用一模一樣
Pargma只有一個用法，例如： Pragma: no-cache
注意: 在HTTP/1.0版本中，只實現了Pragema:no-cache, 沒有實現Cache-Control。 - Cache-Control：非常重要！！，用來指定Response-Request遵循的緩存機制。
-
If-Modified-Since：把瀏覽器緩存的頁面的最后修改時間給服務器發送過去，服務器對比實際文件的最后修改時間。如果時間一致，那么返回304
//
Cache-Control：Public 可以被任何緩存所緩存。
Cache-Control: Private 內容只緩存到私有緩存中。
Cache-Control: no-cache 所有內容都不會被緩存。
9. HTTP響應格式
在接收和解釋請求后，服務器會返回一個HTTP響應消息。與HTTP請求類似，HTTP響應也分為三個部分，狀態行，信息報頭和響應正文，如：
HTTP/1.1 200 OK
Date: Sun, 17 Mar 2013 08:12:54 GMT
Server: Apache/2.2.8 (Win32) PHP/5.2.5
X-Powered-By: PHP/5.2.5
Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Length: 4393
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=utf-8</p><p>
<html>
<head>
<title>HTTP響應示例<title>
</head>
<body>
Hello HTTP!
</body>
</html></p><p> </p>
- 狀態行
狀態行由協議版本，數字形式的狀態代碼，及狀態描述組成，各元素以空格分開，結尾時換行符，格式如下：
HTTP-Version 表示服務器 HTTP 協議的版本，Status-Code 表示服務器發回的響應代碼，Reason-Phrase 表示狀態代碼的文本描述，CRLF 表示回車換行。例如 HTTP/1.1 200 OK（CRLF）
常見狀態代碼、狀態描述、說明：
200 OK //客戶端請求成功
400 Bad Request //客戶端請求有語法錯誤，不能被服務器所理解
401 Unauthorized //請求未經授權，這個狀態代碼必須和WWW-Authenticate報頭域一起使用
403 Forbidden //服務器收到請求，但是拒絕提供服務
404 Not Found //請求資源不存在，eg：輸入了錯誤的URL
500 Internal Server Error //服務器發生不可預期的錯誤
503 Server Unavailable //服務器當前不能處理客戶端的請求，一段時間后可能恢復正常
- 響應正文：服務器返回的資源主題，響應頭和正文之間必須用空行分割。如：
<html>
<head>
<title>HTTP響應示例<title>
</head>
<body>
Hello HTTP!
</body>
</html>
- 常見響應頭
- Cache域
-
Date：生成消息的具體時間和日期
例如： Date: Sun, 17 Mar 2013 08:12:54 GMT -
Expries：聲明了一個網頁或url地址不再被瀏覽器緩存的時間，一旦超過了這個時間，瀏覽器都應該聯系原始服務器。（要注意的是，HTTP/1.0有一個功能比較弱的緩存控制機制：Pragma，使用HTTP/1.0的緩存將忽略Expires和Cache-Control頭。）
例如: Expires: Thu, 19 Nov 1981 08:52:00 GMT -
Vary：用于列出一個響應字段列表，告訴緩存服務器遇到同一個 URL 對應著不同版本文檔的情況時，如何緩存和篩選合適的版本。
例如：Accept-Encoding
-
Date：生成消息的具體時間和日期
- Cookie/Login頭域
-
P3P：用于跨域設置Cookie，這樣可以解決iframe跨域訪問cookie的問題。
例如：P3P: CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR -
Set-Cookie：非常重要，用于把Cookie發送到客戶端，每寫入一個cookie都會生成一個Set-Cookie。
例如: Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/
-
P3P：用于跨域設置Cookie，這樣可以解決iframe跨域訪問cookie的問題。
- Entity頭域
-
ETag：和If-None-Match 配合使用。
例如：ETag: "03f2b33c0bfcc1:0" -
Last-Modified：用于指示資源的最后修改日期和時間。
例如：Last-Modified: Wed, 21 Dec 2011 09:09:10 GMT -
Content-Type：服務器告訴瀏覽器自己響應的對象的類型和字體符。
Content-Type:text/html;charset=GB2312 -
Content-Length：指明實體正文的長度，以字節存儲方式十進制數表示。
例如：Content-Length: 19847 -
Content-Encoding：文檔的編碼方式，一般指壓縮方式。利用gizp壓縮文檔能夠顯著地減少HTML的下載時間。
例如：Content-Encoding：gzip -
Content-Language：服務器告訴瀏覽器自己響應的對象的語言。
例如：Content-Language:da
-
ETag：和If-None-Match 配合使用。
- Miscellaneous 頭域
-
Server：指明HTTP服務器軟件信息。
例如:Apache/2.2.8 (Win32) PHP/5.2.5 -
X-Powered-By：表示服務器是用什么技術開發的。
例如：X-Powered-By: PHP/5.2.5
-
Server：指明HTTP服務器軟件信息。
- Transport 頭域
- Connection：和請求報頭一樣，是否開啟長連接。
- Location 頭域
- Location：用于重定向一個新的位置，包含新的URL地址。
10. HTTP長連接和短連接有什么區別？
- 在HTTP1.0中，默認使用的是短連接。也就是說，瀏覽器和服務器每進行一次HTTP操作，就會建立一次連接，但是任務結束就會中斷連接。例如，瀏覽器解析一個HTML的時候，如果包含其他資源，如js，css，每遇到一個這樣的web資源就會建立一個http對話。
- 在HTTP1.1中，默認使用長連接，使用HTTP長連接會在響應頭中加入這行代碼：
Connection:keep-alive
在使用長連接的情況下，當一個網頁打開后，客戶端和服務器之間用于傳輸HTTP數據的TCP不會關閉，如果客戶端再次訪問這個服務器上的頁面，會繼續使用這條已經建立的連接。
- HTTP協議上的長連接和短連接，實際上是TCP協議上的長短連接。
- Keep-Alive不會永久保持連接，它有一個保持時間，可以在不同服務器上設置。
11. 如何理解HTTP是無狀態的？
無狀態是HTTP協議的一個特點，就是指協議對事務沒有記憶功能，也就是說，我和服務器連續會話兩次，這兩次會話沒有任何聯系，完全不會記錄任何信息。
12. HTTP和HTTPS有什么區別？
- http和https是兩種完全不同的連接方式，端口不一樣前者是80，后者是443；
- HTTP和簡單是無狀態，無連接的。HTTPS是基于HTTP開發的，它使用安全套接字層（SSL）進行信息交換，簡單來說它是HTTP的安全版；
- 在網絡模型中，HTTP工作于應用層，HTTPS工作于傳輸層；
- HTTP無需加密，HTTPS會對傳輸的數據進行加密。
13. HTTP1.0和HTTP1.1的區別？
- HTTP1.1支持長連接
- HTTP1.1增加host字段，如果信息中沒有Host域，服務器講會返回一個400.而HTTP1.0默認每臺服務器都綁定一個唯一的IP地址。
- HTTP1.1加入了一個新的狀態碼100（continue）。允許客戶端在發request消息body之前先用request header試探一下server，看server要不要接收request body，再決定要不要發request body。目的是節約帶寬。
- HTTP1.1可以將發送的信息分割成若干個任意大小的數據塊，每個數據塊在發送時都會附上一個長度，以零數據塊作為結尾。這樣的方法允許對方只緩存一個片段，避免緩沖整個信息帶來的過載。
- HTTP1.1在cache上添加了一些新的特性，當緩存對象的Age超過expire時，不需要舍棄對象，而是與源服務器進行重激活。
14. 進程與線程的區別？
- 如何理解線程與進程？
- 計算機的CPU，就好比一個工廠。
- 工廠的電力有限，一次只能一個車間開工，開工時，其他車間就必須停工。意指CPU一次只能運行一個任務。
- 進程就好比工廠的每一個車間，CPU總是運行一個進程，其他進程就屬于非運行狀態。
- 一個車間里有很多人，大家協同完成一個任務，車間里的每一個人就好比一個線程。
- 車間里的空間是工人們共享的，許多房間是每個工人都可以進出的。象征一個進程的內存空間是共享的，每個線程都可以使用這些空間。
- 可是有些房間大小不同，有些房間只能容納一個人，比如廁所，里面有人的時候，其他人就不能進去。這代表某些線程在使用某些共享空間時，其他線程必須等他使用結束，才能使用這塊空間。
- 防止他人進入的方法就是在門口加一把鎖，鎖開了其他人才能進去。這就叫互斥鎖，防止多個線程同時讀寫某一塊內存。
- 有些房間很大可以容納n人，比如廚房，如果人數大于n，多出來的人就只能在外面等著。好比某些內存，只能給固定數目的線程使用。
- 解決這樣的問題，就是在門外掛n把鑰匙，沒進去一個人，就拿走一把鑰匙，出來時再把鑰匙掛回原處，有人看見沒有鑰匙了，就必須在門口等待。這種做法叫做信號量，保證多個線程不會沖突。
阮一峰：進程與線程的一個簡單解釋
- 區別：
- 調度：進程是系統分配調度的一個基本單位，至少擁有一個線程；線程是一個使用資源的基本單位。
- 資源：進程各自擁有獨立的地址空間，資源，共享復雜，同步簡單；線程共享進程資源，共享簡單。
- 占用內存：進程占用內存多，切換復雜cpu利用率低；線程占用內存少，切換簡單，CPU利用率高。
- 進程不會相互影響；線程一個掛掉可能導致整個進程掛掉。
15. TCP與UDP的區別？
- TCP是面向連接的（先撥號再建立連接）；UDP是無連接的。
- TCP提供可靠的傳輸服務，無差錯不丟失；UDP盡最大努力交付，不保證可靠交互。
- 每一條TCP是點到點的；UDP支持一對一，一對多，多對一和多對多的交互信息。
- TCP首部開銷小；UDP首部開銷大。
16. 如何提高網站的加載速度？
- 使用圖片地圖，如果一個導航欄是很多圖片組成，那每個選項就是一張圖片，無疑是增加了http請求書。我們為何不把多張圖片合成一張，圖片地圖允許在一個圖片上關聯多個url，根據你點的位置決定進入哪個url。
- CSS精靈，比如一個動態效果有多個狀態，每次切換一個效果就要更換一張圖片，那么可以選擇將多張圖片合成一張圖片減少字節數，通過指定css的backgroud-image和backgroud-position來顯示圖片。
- 合并腳本，利用打包多個js合并為一個，多個css合并成一個，減少請求次數。
- 當要在body上多次添加div的時候，使用DocumentFragment來代替直接appendChild。
var fragment = createDocumentFragment();
for(var i = 0; i < 10; i++ ){
var spanNode = document.createElement("span");
spanNode.innerHTML = "number:" + i;
fragment.appendChild(spanNode);
}
//add this DOM to body
document.body.appendChild(fragment);
- 改變類的樣式的時候不要一句一句改變，實現一次性改變。
// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top = top + "px";
// good
el.className += " theclassname";
// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
- 使用動畫幀(requestAnimationFrame)來優化setTimeout：
const square = document.getElementsByClassName('move')[0];
let progress = 0
let left = square.style.left;
let index = left.indexOf('p');
left = Math.floor(left.slice(0, index));
function move() {
square.style.left = ++left + 'px';
progress++
if (progress < 500) {
window.requestAnimationFrame(move);
}
}
move();
17.網頁的生成過程
- HTML代碼轉化為DOM。
- CSS代碼轉為CSSOM（CSS Object Model）。
- 結合DOM和CSSOM，生成一顆渲染樹（包括每個節點的視覺信息）。
- 生成布局，將所有渲染樹節點進行平面合成。
- 將布局繪制在屏幕上。
18.什么是重排和重繪？
以下三種情況，會導致網頁重新渲染
- 修改DOM
- 修改樣式表
- 用戶事件（頁面滾動，輸入框鍵入文字，改變窗口大小等等）
重新渲染，就需要重新生成布局和重新繪制。
前者就叫重排，后者就叫做重繪。
- 重繪不一定觸發重排，比如改變頁面某個元素的顏色，并沒有導致布局改變。
- 重排一定觸發重繪，比如改變了一個網頁元素的位置，就會觸發重排和重繪。
19. 頁面的性能指標詳解：
- 白屏時間（first Paint Time）：用戶從打開頁面開始到頁面開始有東西呈現為止。
- 首屏時間：瀏覽器呈現出所有內容所花費的時間。
- 用戶可操作時間（dom interactive）：用戶可以進行正常的點擊，輸入等操作，默認可以統計domready時間，因為通常會在這時候綁定事件操作。
- 總下載時間：頁面所有資源都加載完成并呈現出來所花的時間，即頁面 onload 的時間
20. web表單登錄中用到的圖形驗證碼的實現
- 服務器端生成驗證碼后，一方面通過圖片將驗證碼返回給客戶端，同時在服務器端保存文本的驗證碼，由服務器端驗證輸入的內容。
21. 在使用table表現數據時，有時候表現出來的會比自己實際設置的寬度要寬，為此需要設置下面哪些屬性值？
image
image
- 注意: 在HTML 4中 cellpadding 屬性已廢棄，HTML5 已不支持該屬性，可以使用 CSS 代替。
22. 各種瀏覽器的內核是什么？
- Trident(-ms-)：IE、傲游、世界之窗、騰訊TT、360、搜狗
- Gecko(-moz-)：FireFox
- Webkit(-webkit-)：Chrome、Safari
- Kestrel(-o-)：9.5版本以上Opera
- Presto(-o-)：9.5以前Opera
23.下列代碼是否合法？
<figure>
<figcaption>
<p>This is my self portrait.</p>
</figcaption>
</figure>
合法，figure標簽規定獨立的流內容（圖片，圖表，照片，代碼等等）。figure元素應該與主內容有關，但如果被刪除，不對文檔流產生影響，<figcaption> 元素為 figure 添加標題（caption）。
24. scope屬性有什么用？
<article>
<h1>Hello World</h1>
<style scoped>
p {
color: #FF0;
}
</style>
<p>This is my text</p>
</article>
<article>
<h1>This is awesome</h1>
<p>I am some other text</p>
</article>
scoped屬性是一個布爾值，如果使用該屬性，則樣式僅僅用在父元素及其子元素。
25. 用于預格式化的標簽是？
- <pre></pre> 預格式化指的是保留文字在源碼種到格式。
26. HTML5 新的表單元素：
- datalist 表示選項清單：
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
option表示選項。如果需要把datalist綁定到輸入域，則用datalist的id。option永遠都要設置value屬性。
Webpage: <input type="url" list="url_list" name="link" />
- keygen元素的作用是提供一種驗證用戶的可靠方法。
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
- output用于不同類型的輸出
<output id="result" onforminput="resCalc()"></output>
27. HTML5有哪些新的輸入類型？
- url
- number
- min 最小值
- max 最大值
- step 間隔
- range
- min 最小值
- max 最大值
- step 間隔
- search
- data-pickers
Date: <input type="date" name="user_date" />
type = month, week, time, datetime, datetime-local
- color
28. localStorage和sessionStorage的API
- 保存數據：localStorage.setItem(key, value);
- 讀取數據：localStorage.getItem(key);
- 刪除數據：localStorage.removeItem(key);
- 刪除所有數據：localStorage.clear();
- 得到某個索引的key：localStorage.key(index);
29. 表格？
- 格式
<table>
<tr><th></th></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
- 跨行(th,td)
- colspan ：跨列
- rowspan ：跨行
- table
- align對齊方式（不建議使用）
- bgcolor背景顏色（不建議使用）
- border表格邊框寬度
- cellpadding單元沿邊和內容的寬度
- cellspacing單元格之間的空白
- summary摘要
- width寬度(px,%)
- frame外邊框哪些部分可見
- rules那邊邊框哪個部分可見
- td
- valign垂直排列方式
- align水平對其方式
- scope定義將表頭數據與單元數據相關聯的方法。
- char根據哪個字符來對其
- 默認沒有任何屬性時，沒有內外邊框
30. 如何規定頁面加載使某個元素自動獲取焦點：
<input autofocus>
31. HTML5獲得地理位置：
- navigator.geolocation用于獲取基于瀏覽器的當前用戶地理位置，提供了三個方法：
// 獲取用戶當前位置
void getCurrentPosition(onSuccess,onError,options);
// 持續獲取用戶當前位置
int watchCurrentPosition(onSuccess,onError,options);
// 取消監控
void clearWatch(id) // id 為watchCurrentPosition返回的ID
- options
options = {
enableHighAccuracy, //boolean 是否要求高精度的地理信息
timeout, //表示等待響應的最大時間，默認是0毫秒，表示無窮時間
maximumAge //應用程序的緩存時間
}
32. 表單的enctype屬性：
-
application/x-www-form-urlencoded在發送前編碼所有字符（默認）（空格被編碼為’+’，特殊字符被編碼為ASCII十六進制字符） -
multipart/form-data不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。 -
text/plain空格轉換為 “+” 加號，但不對特殊字符編碼。
33.不同的字符編碼：
- utf-8：針對Unicode點可變長字符編碼，又稱萬國碼。UTF-8用1到6個字節編碼UNICODE字符。用在網頁上可以同一頁面顯示中文簡體繁體及其它語言（如英文，日文，韓文）。
- GBK：漢字編碼，表示簡體繁體。
- ISO8859-2：收集了東歐字符。
34. 位圖和矢量圖的區別？
- 位圖：由屏幕上的像素點組成，每個點用二進制數據來描述其顏色與亮度等信息，這些點是離散的類似于點陣，多個像素的色彩就形成了位圖。無限放大會失真（.bmp、.gif、.jpg、.png）
- 矢量圖：矢量圖像，也稱為面向對象的圖像或繪圖圖像，在數學上定義為一系列由線連接的點。無限放大不會失真
35. HTML常常應用的幾種圖片格式及其區別？
- jpg：適用于攝影圖片，以及色彩豐富的圖片。缺點：壓縮易失真。優點：相對于png來說同樣色彩豐富的圖片，jpg的大小更小。
- gif：支持有損壓縮。不支持全透明，支持半透明，支持動畫。
- png：無損壓縮方式；支持透明、半透明、不透明；不支持動畫；Png圖片如果色彩較多或復雜，則圖片生成后的格式是很大的，相比較jpg的放有5~6倍之多，所以沒特別要求不能以png替代jpg的使用。png8支持半透明。
- 總結：小圖片或網頁基本元素(如按鈕),考慮PNG-8或GIF.照片則考慮JPG
36. HTML全局屬性：
-
accesskey：設置元素獲得焦點快捷鍵（注釋：請使用Alt + accessKey (或者 Shift + Alt + accessKey) 來訪問帶有指定快捷鍵的元素。） -
class：類名 -
contenteditable：元素內容是否可編輯 -
contextmenu：對元素點擊右鍵彈出菜單框
<p contextmenu="supermenu">本段落擁有一個名為 "supermenu" 的上下文菜單。這個菜單會在用戶右鍵單擊該段落時出現。</p>
<menu id="supermenu">
<command label="Step 1: Write Tutorial" onclick="doSomething()">
<command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>
-
data-*：自定義屬性，通過el.dataset訪問數據
<div id="user" data-id="1234567890" data-name="愚人碼頭" data-date-of-birth>碼頭</div>
var el = document.querySelector('#user');
console.log(el.id); // 'user'
console.log(el.dataset);//一個DOMStringMap
console.log(el.dataset.id); // '1234567890'
console.log(el.dataset.name); // '愚人碼頭'
-
dir：元素中內容的文本方向 -
draggable：元素是否可以拖拽 -
dropzone：規定在元素上拖動數據時，是否拷貝、移動或鏈接被拖動數據。 -
hidden：元素是否被隱藏 -
lang：規定元素內容的語言 -
spellcheck：是否進行拼寫檢查 -
style：樣式 -
tabindex：tab鍵次序。設置后元素可以獲得焦點，但是又喜歡不影響tab次序表，則可以設置值為-1。
<div tabindex=-1></div>
-
title：描述 -
translate：yes|no，是否應該翻譯本段。
35. 如何定義可以在網頁上通過鏈接直接打開郵件客戶端發送郵件？（mailto:）
<a href="mailto:xiao@163.com"></a>
36. src和href的區別？
- src：通常應用在img，script，iframe上。加載并替換當前元素。當瀏覽器解析到這一句的時候會暫停其他資源的下載和處理，直到加載編譯執行完成。
- href：指向網絡資源所在位置，當為link時，會下載并且不會停止對當前文檔的處理
37. link和@import的區別？
- link除了加載css還可以做其他事情；而@import只能加載css。
- link加載css時可以隨頁面同時加載；@import需要頁面完全載入完之后加載。
- link無兼容問題，@import是css2.1的東西有兼容問題。
- link可以支持dom操作。
38. 短語元素有哪些？
-
<em>：表示強調 -
<strong>：表示語氣更強 -
<dfn>：定義一個定義項目 -
<code>：定義計算機代碼文本 -
<samp>：定義樣本文本 -
<kbd>：鍵盤文本，表示文本是從鍵盤上鍵入的 -
<var>：定義變量與code和pre配合使用 -
<cite>：定義應用，參考文獻之類
39. http和webSocket的區別？
- 相同點：
- 都是基于tcp協議基礎之上。
- 都需要經過request和response階段，webSocket發起請求的時候相當于借鑒了http的頭部格式，區別在于webSocket請求頭部新加了很多字段（upgrade:websocket最關鍵）
- 請求失敗成功返回的狀態碼都一樣
- 不同點：
- webSocket是一個持久化協議（實現真正的長鏈接），相對于HTTP是一個非持久化協議。
- HTTP中永遠是這樣，也就是說一個request只能有一個response。而且這個response也是被動的，不能主動發起。
- websocket解決的問題：實質的推送方式是服務器主動推送，只要有數據就推送到請求方。（變被動為主動）
40.mete的作用及用法
- 作用：
- 搜索引擎優化
- 定義頁面使用的語言
- 自動刷新并指向新的頁面
- 頁面轉換時的動態效果
- 控制頁面緩存
- 頁面描述
- 網頁顯示的窗口信息
- 用法：
- 語法：
<meta name="參數"content="具體的參數值">。，主要參數： - keywords（關鍵字）：用來告訴搜索引擎你的網頁關鍵字是什么。
<meta name="keywords"content="meta總結,html meta,meta屬性,meta跳轉"> - description（網站內容描述）：用來告訴搜索引擎引擎你的網站的主要內容。
<meta name="description"content="haorooms博客,html的meta總結，meta是html語言head區的一個輔助性標簽。"> - robots（機器人向導）：用來告訴哪些頁面需要索引。
<meta name="robots"content="none">- 參數為all：文件將被檢索，且頁面上的鏈接可以被查詢；
- 參數為none：文件不會被檢索，頁面上的鏈接不可以被查詢；
- 參數為index：文件將被檢索；
- 參數為follow：頁面上的鏈接可以被查詢。
- 參數為noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；
- 參數為nofollow：文件將被檢索，但頁面上的鏈接不可以被查詢；
- author（作者）：標注網頁的作者
<meta name="author"content="root,root@xxxx.com"> - generator：表示網站采用的什么軟件制作
- COPYRIGHT：說明網站版權信息
- revisit-after：代表網站重訪
<META name="revisit-after"CONTENT="7days">代表7天。
- 語法：
- http-equiv屬性：相當于http文件頭的作用，可以向瀏覽器傳回一些有用的信息
- Expires：設置網頁到期時間，一旦網頁到期，必須到服務器上重新傳輸。
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">注意時間使用的是GMT格式。 - Pragma：禁止瀏覽器從本地計算機的緩存中訪問頁面內容。
<meta http-equiv="Pragma"content="no-cache">。 - Refresh：自動刷新并指向新頁面。
<meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com"> //(注意后面的引號，分別在秒數的前面和網址的后面)。 - Set-Cookie：如果頁面過期，那么存盤的cookie將被刪除。
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> - Window-target(顯示窗口的設定)：用來防止別人在框架里調用自己頁面。
<meta http-equiv="Window-target"content="_top">強制頁面在當前窗口以獨立頁面顯示。 - content-Type(顯示字符集的設定)：設定頁面使用的字符集。
<meta http-equiv="content-Type"content="text/html;charset=gb2312">- GB2312：簡體中文
- BIG5：繁體中文
- iso-2022-jp：日文
- ks_c_5601：韓文
- ISO-8859-1：英文
- UTF-8：世界碼
- content-Language（顯示語言的設定）
<meta http-equiv="Content-Language"content="zh-cn"/> - Cache-Control指定請求和響應遵循的緩存機制。
- imagetoolbar：指定是否顯示圖片工具欄，當為false代表不顯示，當為true代表顯示。
<meta http-equiv="imagetoolbar"content="false"/> - Content-Script-Type：制定腳本類型
<Meta http-equiv="Content-Script-Type"Content="text/javascript">
- Expires：設置網頁到期時間，一旦網頁到期，必須到服務器上重新傳輸。
- 關于移動端的meta屬性：
- viewport屬性：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">- width：viewport的寬度
- height：viewport的高度
- initial-scale：初始的縮放比例
- minimum-scale：允許用戶縮放到的最小比例
- maximum-scale：允許用戶縮放到的最大比例
- user-scalable：用戶是否可以手動縮放
-
<meta name="apple-mobile-app-capable" content="yes">：是否啟用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單。 -
<meta name="apple-mobile-app-status-bar-style" content="black">：改變頂部狀態條的顏色。 -
<meta name="format-detection" content="telphone=no, email=no"/>：忽略頁面中的數字識別為電話，忽略email識別。
- viewport屬性：
41. 狀態碼302和301的區別？
- 301代表永久重定向：它告訴查找引擎，這個地址棄用了，永遠轉向一個新地址，可以轉移新域名的權重。
- 302代表臨時重定向：臨時重定向到一個地址。
- 為什么要使用301不使用302？因為302存在網址URL劫持。
假如a的地址很短，更加用戶友好，但是他做了一個302重定向到b，b的網址是一個亂七八糟的很長的url網址，然后由于瀏覽器并不能總是抓取目標地址，很自然的，a 網址更加用戶友好，而b 網址既難看，又不用戶友好。這時Google 很有可能會仍然顯示網址，但是內容卻仍然是b上的內容，這種情況就叫做網址劫持。而301永久重定向就不會出現這樣的情況。
42.
- CDN是什么？即內容分發網絡，其基本思路是盡可能避開互聯網有可能影響數據傳輸和穩定性的瓶頸和環境，是內容傳輸更穩定更快。
- 正向代理，反向代理是什么？
- 正向代理：a想找c借錢，但是a并不能直接找c借錢，那么a找b借錢，b找c借錢，那么a就得到了c的錢，但是c并不知道把錢借給了誰。比如科學上網，a訪問google訪問不了，但搭建在國外的b可以訪問google，那么讓他去請求google再把內容返回給a就好了。
- 反向代理：a訪問baidu，但是baidu背后有成千上萬臺服務器，a并不知道具體是哪臺給的服務，但你只需要知道代理服務器是www.baidu.com就好了，反向代理服務器會幫我們把請求發給真實的服務器。主要用來做負載均衡。
