【經驗之談】前端面試知識點總結（HTML相關）——附答案

時間 2019-11-11

標籤經驗之談前端面試知識總結 html 相關答案欄目快樂工作简体版

原文原文鏈接

目錄javascript

1、HTML部分

1、HTML部分

一、瀏覽器頁面有哪三層構成，分別是什麼，做用是什麼?

構成：結構層、表示層、行爲層
分別是：HTML、CSS、JavaScript
做用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。css

二、HTML5的優勢與缺點？

優勢：
a、網絡標準統1、HTML5自己是由W3C推薦出來的。
b、多設備、跨平臺
c、即時更新。
d、提升可用性和改進用戶的友好體驗；
e、有幾個新的標籤，這將有助於開發人員定義重要的內容；
f、能夠給站點帶來更多的多媒體元素(視頻和音頻)；
g、能夠很好的替代Flash和Silverlight；
h、涉及到網站的抓取和索引的時候，對於SEO很友好；
i、被大量應用於移動應用程序和遊戲。
缺點：
a、安全：像以前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。
b、完善性：許多特性各瀏覽器的支持程度也不同。
c、技術門檻：HTML5簡化開發者工做的同時表明了有許多新的屬性和API須要開發者學習，像web worker、web socket、web storage 等新特性，後臺甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰
d、性能：某些平臺上的引擎問題致使HTML5性能低下。
e、瀏覽器兼容性：最大缺點，IE9如下瀏覽器幾乎全軍覆沒。html

三、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

回答1：前端

（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。
（2）、嚴格模式的排版和JS 運做模式是以該瀏覽器支持的最高標準運行。
（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。java

回答2：git

doctype聲明指出閱讀程序應該用什麼規則集來解釋文檔中的標記。在Web文檔的狀況下，「閱讀程序」一般是瀏覽器或者校驗器這樣的一個程序，「規則」則是W3C所發佈的一個文檔類型定義（DTD）中包含的規則。
(1)<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的HTML 文檔。
(2)所謂的標準模式是指，瀏覽器按 W3C 標準解析執行代碼；怪異模式則是使用瀏覽器本身的方式解析執行代碼，由於不一樣瀏覽器解析執行的方式不同，因此咱們稱之爲怪異模式。
嚴格模式是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不容許使用任何表現層的語法，如<br/>。嚴格模式的排版和JS 運做模式是以該瀏覽器支持的最高標準運行混雜模式則是一種向後兼容的解析方法，說的透明點就是能夠實現IE5.5如下版本瀏覽器的渲染模式。
(3)瀏覽器解析時到底使用標準模式仍是怪異模式，與你網頁中的 DTD 聲明直接相關， DTD 聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略 DTD 聲明 ,將使網頁進入怪異模式。github

四、HTML5有哪些新特性、移除了哪些元素？

Html5 又新增了哪些元素廢棄了哪些元素
Html5新增了27個元素，廢棄了16個元素，根據現有的標準規範，把HTML5的元素按優先級定義爲結構性屬性、級塊性元素、行內語義性元素和交互性元素4大類。
結構性元素主要負責web上下文結構的定義
section：在web頁面應用中，該元素也能夠用於區域的章節描述。
header：頁面主體上的頭部，header元素每每在一對body元素中。
footer：頁面的底部（頁腳），一般會標出網站的相關信息。
nav：專門用於菜單導航、連接導航的元素，是navigator的縮寫。
article：用於表現一篇文章的主體內容，通常爲文字集中顯示的區域。
級塊性元素主要完成web頁面區域的劃分，確保內容的有效分割。
aside：用於表達註記、貼士、側欄、摘要、插入的引用等做爲補充主體的內容。
figure：是對多個元素進行組合並展現的元素，一般與ficaption聯合使用。
code：表示一段代碼塊。
dialog：用於表達人與人之間的對話，該元素包含dt和dd這兩個組合元素，dt用於表示說話者，而dd用來表示說話內容。
行內語義性元素主要完成web頁面具體內容的引用和描述，是豐富內容展現的基礎。
meter：表示特定範圍內的數值，可用於工資、數量、百分比等。
time：表示時間值。
progress：用來表示進度條，可經過對其max、min、step等屬性進行控制，完成對進度的表示和監事。
video：視頻元素，用於支持和實現視頻文件的直接播放，支持緩衝預載和多種視頻媒體格式。
audio：音頻元素，用於支持和實現音頻文件的直接播放，支持緩衝預載和多種音頻媒體格式。
交互性元素主要用於功能性的內容表達，會有必定的內容和數據的關聯，是各類事件的基礎。
details：用來表示一段具體的內容，可是內容默承認能不顯示，經過某種手段（如單擊）與legend交互纔會顯示出來。
datagrid：用來控制客戶端數據與顯示，能夠由動態腳本及時更新。
menu：主要用於交互菜單（曾被廢棄又被從新啓用的元素）。
command：用來處理命令按鈕。web

五、你作的網頁在哪些流覽器測試過,這些瀏覽器的內核分別是什麼?

a、IE: trident內核
b、Firefox：gecko內核
c、Safari:webkit內核
d、Opera:之前是presto內核，Opera現已改用Google Chrome的Blink內核
e、Chrome:Blink(基於webkit，Google與Opera Software共同開發)面試

六、每一個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？

<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）算法

七、說說你對HTML5認識?（是什麼,爲何）

是什麼：

HTML5指的是包括HTML、CSS和JavaScript在內的一套技術組合。它但願可以減小網頁瀏覽器對於須要插件的豐富性網絡應用服務（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight與Oracle JavaFX的需求，而且提供更多能有效增強網絡應用的標準集。HTML5是HTML最新版本，2014年10月由萬維網聯盟（W3C）完成標準制定。目標是替換1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到匹配當代的網絡需求。

爲何：

HTML4陳舊不能知足日益發展的互聯網須要，特別是移動互聯網。爲了加強瀏覽器功能Flash被普遍使用，但安全與穩定堪憂，不適合在移動端使用（耗電、觸摸、不開放）。
HTML5加強了瀏覽器的原生功能，符合HTML5規範的瀏覽器功能將更增強大，減小了Web應用對插件的依賴，讓用戶體驗更好，讓開發更加方便，另外W3C從推出HTML4.0到5.0之間共經歷了17年，HTML的變化很小，這並不符合一個好產品的演進規則。

八、對WEB標準以及W3C的理解與認識?

標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈css和js腳本、結構行爲表現的分離、
文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，
容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性。

九、HTML5行內元素有哪些,塊級元素有哪些, 空元素有哪些?

(1)行內元素

a - 錨點
* abbr - 縮寫
* acronym - 首字
* b - 粗體(不推薦)
* bdo - bidi override
* big - 大字體
* br - 換行
* cite - 引用
* code - 計算機代碼(在引用源碼的時候須要)
* dfn - 定義字段
* em - 強調
* font - 字體設定(不推薦)
* i - 斜體
* img - 圖片
* input - 輸入框
* kbd - 定義鍵盤文本
* label - 表格標籤
* q - 短引用
* s - 中劃線(不推薦)
* samp - 定義範例計算機代碼
* select - 項目選擇
* small - 小字體文本
* span - 經常使用內聯容器，定義文本內區塊
* strike - 中劃線
* strong - 粗體強調
* sub - 下標
* sup - 上標
* textarea - 多行文本輸入框
* tt - 電傳文本
* u - 下劃線
* var - 定義變量

(2)塊元素(block element)

* address - 地址
* blockquote - 塊引用
* center - 舉中對齊塊
* dir - 目錄列表
* div - 經常使用塊級容易，也是css layout的主要標籤
* dl - 定義列表
* fieldset - form控制組
* form - 交互表單
* h1 - 大標題
* h2 - 副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr - 水平分隔線
* isindex - input prompt
* menu - 菜單列表
* noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
* noscript - ）可選腳本內容（對於不支持script的瀏覽器顯示此內容）
* ol - 排序表單
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
可變元素
可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素。
* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區塊(map)
* object - object對象
* script - 客戶端腳本

(3)空元素(在HTML[1] 元素中，沒有內容的 HTML 元素被稱爲空元素)

十、什麼是WebGL,它有什麼優勢?

WebGL（全寫Web Graphics Library）是一種3D繪圖標準，這種繪圖技術標準容許把JavaScript和OpenGL ES 2.0結合在一塊兒，經過增長OpenGL ES 2.0的一個JavaScript綁定，WebGL能夠爲HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現3D場景和模型了，還能建立複雜的導航和數據視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用於建立具備複雜3D結構的網站頁面，甚至能夠用來設計3D網頁遊戲等等。

WebGL完美地解決了現有的Web交互式三維動畫的兩個問題：
第一，它經過HTML腳本自己實現Web交互式三維動畫的製做，無需任何瀏覽器插件支持;
第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是經過統一的、標準的、跨平臺的OpenGL接口實現的。

通俗說WebGL中canvas繪圖中的3D版本。由於原生的WebGL很複雜，咱們常常會使用一些三方的庫，如three.js等，這些庫多數用於HTML5遊戲開發。

十一、請你描述一下 cookies，sessionStorage 和 localStorage 的區別?

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，能夠方便的在web請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。

sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage 的概念很特別，引入了一個「瀏覽器窗口」的概念。sessionStorage 是在同源的同學口（或tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。關閉窗口後，sessionStorage 即被銷燬。同時「獨立」打開的不一樣窗口，即便是同一頁面，sessionStorage 對象也是不一樣的

cookies會發送到服務器端。其他兩個不會。

Microsoft 指出 Internet Explorer 8 增長cookie 限制爲每一個域名50個，但IE7 彷佛也容許每一個域名50個cookie。Firefox 每一個域名cookie 限制爲50個。Opera每一個域名cookie 限制爲30個。Firefox 和Safari 容許cookie 多達4097個字節，包括名（name）、值（value）和等號。Opera 許cookie 多達4096個字節，包括：名（name）、值（value）和等號。Internet Explorer 容許cookie 多達4095個字節，包括：名（name）、值（value）和等號。

區別：

- Cookie
+ 每一個域名存儲量比較小（各瀏覽器不一樣，大體4K）
+ 全部域名的存儲量有限制（各瀏覽器不一樣，大體4K）
+ 有個數限制（各瀏覽器不一樣）
+ 會隨請求發送到服務器
- LocalStorage
+ 永久存儲
+ 單個域名存儲量比較大（推薦5MB，各瀏覽器不一樣）
+ 整體數量無限制
- SessionStorage
+ 只在 Session 內有效
+ 存儲量更大（推薦沒有限制，可是實際上各瀏覽器也不一樣）

十二、說說你對HTML語義化的理解?

(1)什麼是HTML語義化？
<基本上都是圍繞着幾個主要的標籤，像標題（H1~H6）、列表（li）、強調（strong em）等等>
　　根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
(2)爲何要語義化？
爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構:爲了裸奔時好看；
用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用；
有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。
(3) 語義化標籤
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article> SM:用來在頁面中表示一套結構完整且獨立的內容部分
<aslde></aside> SM:主題的附屬信息(用途很廣，主要就是一個附屬內容)，若是article裏面爲一篇文章的話，那麼文章的做者以及信息內容就是這篇文章的附屬內容了
<figure></figure>SM:媒體元素，好比一些視頻，圖片啊等等
<datalist></datalist>
SM:選項列表，與input元素配合使用，來定義input可能的值
<details></details>
SM:用於描述文檔或者文檔某個部分的細節~ 默認屬性爲open~
ps:配合summary一塊兒使用

1三、link和@import的區別?

XML/HTML代碼
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代碼
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
二者都是外部引用CSS的方式，可是存在必定的區別：
　　區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
　　區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
　　區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
　　區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

1四、說說你對SVG理解?

SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯網標準組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。SVG嚴格聽從XML語法，並用文本格式的描述性語言來描述圖像內容，所以是一種和圖像分辨率無關的矢量圖形格式。SVG於2003年1月14日成爲 W3C 推薦標準。
特色：
(1)任意放縮
用戶能夠任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
(2)文本獨立
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即便沒有安裝某一字體，也會看到和他們製做時徹底相同的畫面。
(3)較小文件
整體來說，SVG文件比那些GIF和JPEG格式的文件要小不少，於是下載也很快。
(4)超強顯示效果
SVG圖像在屏幕上老是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。
(5)超級顏色控制
SVG圖像提供一個1600萬種顏色的調色板，支持ICC顏色描述文件標準、RGB、線X填充、漸變和蒙版。
(6)交互X和智能化。SVG面臨的主要問題一個是如何和已經佔有重要市場份額的矢量圖形格式Flash競爭的問題，另外一個問題就是SVG的本地運行環境下的廠家支持程度。
瀏覽器支持：
Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。
IE8和早期版本都須要一個插件 - 如Adobe SVG瀏覽器，這是免費提供的。

1五、HTML全局屬性(global attribute)有哪些?

參考資料：MDN: html global attribute或者W3C HTML global-attributes

accesskey:設置快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a可激活元素
class:爲元素設置類標識，多個類名用空格分開，CSS和javascript可經過class屬性獲取元素
contenteditable: 指定元素內容是否可編輯
contextmenu: 自定義鼠標右鍵彈出菜單內容
data-*: 爲元素增長自定義屬性
dir: 設置元素文本方向
draggable: 設置元素是否可拖拽
dropzone: 設置元素拖放類型： copy, move, link
hidden: 表示一個元素是否與文檔。樣式上會致使元素不顯示，可是不能用這個屬性實現樣式效果
id: 元素id，文檔內惟一
lang: 元素內容的的語言
spellcheck: 是否啓動拼寫和語法檢查
style: 行內css樣式
tabindex: 設置元素能夠得到焦點，經過tab能夠導航
title: 元素相關的建議信息
translate: 元素和子孫節點內容是否須要本地化

1六、說說超連接target屬性的取值和做用？

target這個屬性指定所連接的頁面在瀏覽器窗口中的打開方式。
它的參數值主要有：
a、_blank：在新瀏覽器窗口中打開連接文件
b、_parent：將連接的文件載入含有該連接框架的父框架集或父窗口中。若是含有該連接的框架不是嵌套的，則在瀏覽器全屏窗口中載入連接的文件，就象_self參數一。
c、_self：在同一框架或窗口中打開所連接的文檔。此參數爲默認值，一般不用指定。可是我不太理解。
d、_top：在當前的整個瀏覽器窗口中打開所連接的文檔，於是會刪除全部框架。

1七、`data-`屬性的做用是什麼？

`data-`爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的`dataset`屬性獲取，不支持該屬性的瀏覽器能夠經過`getAttribute`方法獲取:

`<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>`

`div.dataset.commentNum; // 10`

須要注意的是：`data-`以後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峯風格。並非全部的瀏覽器都支持.`dataset`屬性，測試的瀏覽器中只有Chrome 和Opera 支持。

即：當沒有合適的屬性和元素時，自定義的 data 屬性是可以存儲頁面或 App 的私有的自定義數據。

1八、介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

1九、常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。      [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]

20、iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

2一、Label的做用是什麼，是怎麼用的？

label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
<label for="Name">Number:</label>
<input type=「text「name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

2二、如何實現瀏覽器內多個標籤頁之間的通訊?

WebSocket、SharedWorker；
也能夠調用localstorge、cookies等本地存儲方式；
localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
咱們經過監聽事件，控制它的值來進行頁面信息通訊；
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；

2三、如何在頁面上實現一個圓形的可點擊區域？

a、map+area或者svg
b、border-radius
c、純js實現須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

2四、title與h1的區別、b與strong的區別、i與em的區別？

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；

strong是標明重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展現強調內容。

i內容展現爲斜體，em表示強調的文本；

Physical Style Elements -- 天然樣式標籤
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標籤
strong, em, ins, del, code
應該準確使用語義樣式標籤, 但不能濫用, 若是不能肯定時首選使用天然樣式標籤。

2五、實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果？

<div style="height:1px;overflow:hidden;background:red"></div>

2六、HTML5標籤的做用?(用途)

a、使Web頁面的內容更加有序和規範
b、使搜索引擎更加容易按照HTML5規則識別出有效的內容
c、使Web頁面更接近於一種數據字段和表

2七、簡述一下src與href的區別？

src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。
<script src ="js.js"></script>
當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加
<link href="common.css" rel="stylesheet"/>
那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css，而不是使用@import方式。

2八、談談你對canvas的理解？

canvas是HTML5中新增一個HTML5標籤與操做canvas的javascript API，它能夠實如今網頁中完成動態的2D與3D圖像技術。<canvas> 標記和 SVG以及 VML 之間的一個重要的不一樣是，<canvas> 有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。

canvas能夠完成動畫、遊戲、圖表、圖像處理等原來須要Flash完成的一些功能。

2九、WebSocket與消息推送？

B/S架構的系統多使用HTTP協議，HTTP協議的特色：

1 無狀態協議
2 用於經過 Internet 發送請求消息和響應消息
3 使用端口接收和發送消息，默認爲80端口
底層通訊仍是使用Socket完成。

HTTP協議決定了服務器與客戶端之間的鏈接方式，沒法直接實現消息推送（F5已壞）,一些變相的解決辦法：

雙向通訊與消息推送

輪詢：客戶端定時向服務器發送Ajax請求，服務器接到請求後立刻返回響應信息並關閉鏈接。優勢：後端程序編寫比較容易。缺點：請求中有大半是無用，浪費帶寬和服務器資源。實例：適於小型應用。

長輪詢：客戶端向服務器發送Ajax請求，服務器接到請求後hold住鏈接，直到有新消息才返回響應信息並關閉鏈接，客戶端處理完響應信息後再向服務器發送新的請求。優勢：在無消息的狀況下不會頻繁的請求，耗費資小。缺點：服務器hold鏈接會消耗資源，返回數據順序無保證，難於管理維護。 Comet異步的ashx，實例：WebQQ、Hi網頁版、Facebook IM。

長鏈接：在頁面裏嵌入一個隱蔵iframe，將這個隱蔵iframe的src屬性設爲對一個長鏈接的請求或是採用xhr請求，服務器端就能源源不斷地往客戶端輸入數據。優勢：消息即時到達，不發無用請求；管理起來也相對便。缺點：服務器維護一個長鏈接會增長開銷。實例：Gmail聊天

Flash Socket：在頁面中內嵌入一個使用了Socket類的 Flash 程序JavaScript經過調用此Flash程序提供的Socket接口與服務器端的Socket接口進行通訊，JavaScript在收到服務器端傳送的信息後控制頁面的顯示。優勢：實現真正的即時通訊，而不是僞即時。缺點：客戶端必須安裝Flash插件；非HTTP協議，沒法自動穿越防火牆。實例：網絡互動遊戲。

Websocket:
WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通信的網絡技術。依靠這種技術能夠實現客戶端和服務器端的長鏈接，雙向實時通訊。
特色:
a、事件驅動
b、異步
c、使用ws或者wss協議的客戶端socket

d、可以實現真正意義上的推送功能

缺點：少部分瀏覽器不支持，瀏覽器支持的程度與方式有區別。

30、`img`的`title`和`alt`有什麼區別？

Alt 用於圖片沒法加載時顯示
Title 爲該屬性提供信息，一般當鼠標滑動到元素上的時候顯示

3一、表單的基本組成部分有哪些，表單的主要用途是什麼？

組成：表單標籤、表單域、表單按鈕
a、表單標籤：這裏麪包含了處理表單數據所用CGI程序的URL,以及數據提交到服務器的方法。
b、表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框、和文件上傳框等。
c、表單按鈕：包括提交按鈕，復位按鈕和通常按鈕；用於將數據傳送到服務器上的CGI腳本或者取消輸入，還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做。
主要用途：表單在網頁中主要負責數據採集的功能，和向服務器傳送數據。

3二、表單提交中Get和Post方式的區別？

(1)、get是從服務器上獲取數據，post是向服務器傳送數據。
(2)、get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中能夠看到。post是經過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一塊兒傳送到ACTION屬性所指的URL地址,用戶看不到這個過程。
(3)、對於get方式，服務器端用Request.QueryString獲取變量的值，對於post方式，服務器端用Request.Form獲取提交的數據。
(4)、get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，通常被默認爲不受限制。但理論上，IIS4中最大量爲80KB，IIS5中爲100KB。
(5)、get安全性很是低，post安全性較高。

3三、請你談談Cookie的弊端?

cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但仍是有不少侷限性的。
(1)、每一個特定的域名下最多生成20個cookie
a、IE6或更低版本最多20個cookie
b、IE7和以後的版本最後能夠有50個cookie。
c、Firefox最多50個cookie
d、chrome和Safari沒有作硬性限制
(2)、IE和Opera會清理近期最少使用的cookie，Firefox會隨機清理cookie。
(3)、cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。
(4)、IE提供了一種存儲能夠持久化用戶數據，叫作`userdata`，從`IE5.0`就開始支持。每一個數據最多128K，每一個域名下最多1M。這個持久化數據放在緩存中，若是緩存沒有清理，那麼會一直存在。
優勢：極高的擴展性和可用性
a、經過良好的編程，控制保存在cookie中的session對象的大小。
b、經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。
c、只在cookie中存放不敏感數據，即便被盜也不會有重大損失。
d、控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。
缺點：
a、Cookie數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。
b、安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。
c、有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

3四、請你說說cookie 和session 的區別?

(1)、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
(2)、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
(3)、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能
考慮到減輕服務器性能方面，應當使用COOKIE。
(4)、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。
因此我的建議：
將登錄信息等重要信息存放爲session中。
其餘信息若是須要保留，能夠放在Cookie中。

博客數據來源聲明：本博客大部分數據來源於各大網站的收集整理改編，主要有GitHub(https://github.com)、題來了(http://www.tilaile.com)、牛客網(https://www.nowcoder.com)、一些英文網站，還有一些論壇、博客、IT招聘等網站。還有少部分數據時來源於本人本身整理添加，添加的內容主要是本人認爲比較重要知識點，面試時可能會問到的題目，本身整理題目以及參考答案，答案僅供參考，答案可能存有錯誤或不足，歡迎你們批評指正或補充更好的答案。好讓我及時更正，以避免誤導其餘人。本博客僅提供參考做用。