2019秋招h5前端知識簡要整理，來源于牛客題后評論區等。
C05新增內容
-$51 CSS3新增屬性
-$52 html5新增
C06語義化與設計模式
-$61語義化
-$62 DTD文檔類型聲明
-$63設計模式
C07瀏覽器、通信與緩存
-$71瀏覽器內核
-$72瀏覽器屬性
-$73請求與顯示
-$74臨時存儲
-$75 ?AJAX
C08細節雜項
-$81 ?bootstrap
-$82 ?CSS引用
-$83 ?head與body
-$84 ?DOM操作
-$85其他
-C05新增內容
$51 CSS3新增屬性
*1- ?box-shadow(陰影效果) ?支持: FF3.5, Safari 4, Chrome 3
使用:
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
*2- ?border-colors(為邊框設置多種顏色) ?支持: FF3+
使用:
???border: 10px solid #000;
???-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
???-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
???-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
???-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
說明:
顏色值數量不固定,且FF的私有寫法不支持縮寫: -moz-border-colors: #333 #444 #555;
*3- ?boder-image(圖片邊框) ?支持: FF 3.5, Safari 4, Chrome 3
使用:
????-moz-border-image: url(exam.png) 20 20 20 20 repeat;
???-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
說明:
(1). 20 20 20 20 --->邊框的寬度, 分別對應top, right, bottom, left邊框, 改變寬度可以實現不同的效果;
(2).邊框圖片效果(目前僅實現了兩種):
repeat ---邊框圖片會平鋪, 類似于背景重復;
stretch ---邊框圖片會以拉伸的方式來鋪滿整個邊框;
(3).必須將元素的邊框厚度設置為非0非auto值.
*4- ?text-shadow(文本陰影) ?支持: FF 3.5, Opera 10, Safari 4, Chrome 3
使用:
text-shadow: [<顏色><水平偏移><縱向偏移><模糊半徑>] || [<水平偏移><縱向偏移><模糊半徑><顏色>];
說明:
(1) <顏色>和<模糊半徑>是可選的, 當<顏色>未指定時, 將使用文本顏色; 當<模糊半徑>未指定時, 半徑值為0;
(2) shadow可以是逗號分隔的列表, 如:
???text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3)陰影效果會按照shadow list中指定的順序應用到元素上;
(4)這些陰影效果有可能相互重疊, 但不會疊加文本本身;
(5)陰影可能會跑到容器的邊界之外, 但不會影響容器的大小.
*5- ?text-overflow(文本截斷) ?支持: IE6+, Safari4, Chrome3, Opera10
使用:
????text-overflow: inherit | ellipsis | clip ;
???-o-text-overflow: inherit | ellipsis | clip;
說明:
還有一個屬性ellipsis-word,但各瀏覽器均不支持.
*6- ?word-wrap(自動換行) ?支持: IE6+, FF 3.5, Safari 4, Chrome 3
使用:
????word-wrap: normal | break-word;
*7- ?border-radius(圓角邊框) ?支持: FF 3+, Safari 4, Chrome 3
使用:
????-moz-border-radius: 5px;
-webkit-border-radius: 5px;
*8- ?opacity(不透明度) ??支持: all
使用:
???opacity: 0.5;
???filter: alpha(opacity=50); /* for IE6, 7 */
???-ms-filter(opacity=50); /* for IE8 */
*9- ?box-sizing(控制盒模型的組成模式) ?支持: FF3+, Opera 10, Safari 4, Chrome 3
使用:
???box-sizing: content-box | border-box; // for opera
???-moz-box-sizing: content-box | border-box;
???-webkit-box-sizing: content-box | border-box;
說明:
???1. content-box:
使用此值時,盒模型的組成模式是, 元素寬度 = content + padding + border;
???2. border-box:
使用此值時,盒模型的組成模式是, 元素寬度 = content(即使設置了padding和border,元素的寬度也不會變).
*10-換行相關屬性
<> work-break是css3屬性自動換行法則；設置white-space為nowrap，文本不會換行，文本會在同一行上繼續，直到遇到<br>標簽為止
<> word-break:break-all,用于處理單詞折斷。
<> white-space:no-wrap用于處理元素內的空白，只在一行內顯示。
##通過使用 word-break 屬性，可以讓瀏覽器實現在任意位置的換行。
值 描述
normal 使用瀏覽器默認的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。
## white-space屬性設置如何處理元素內的空白。
值 描述
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似HTML中的 <pre> 標簽。
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到
標簽為止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合并空白符序列，但是保留換行符。
inherit 規定應該從父元素繼承white-space屬性的值。
$52 html5新增
*1- ?H5新增標簽：
article:標簽定義外部的內容。
aside:標簽定義 article 以外的內容。
audio:h5新增音頻標簽。沒有高寬屬性。
canvas:h5新增畫布標簽。
command:定義命令按鈕(未測試)
datalist：標簽定義選項列表。
datalist及其選項不會被想顯示出來，它僅僅是合法的輸入值列表。
details：標簽用于描述文檔或文檔某個部分的細節。
figure：標簽用于對元素進行組合。
figcaption：定義 figure 元素的標題。
footer：定義 section 或 document 的頁腳。
header：定義 section 或 document 的頁眉。
hgroup：用于對網頁或區段（section）的標題進行組合。
keygen:標簽規定用于表單的密鑰對生成器字段
mark：標簽定義帶有記號的文本。
meter：通過min="0" max="20"的方式定義度量衡。僅用于已知最大和最小值的度量。
nav：定義document或section或article的導航。
output：定義不同的輸出類型，比如腳本。
progress：定義任何類型的任務的進度。
rp:定義若瀏覽器不支持 ruby 元素顯示的內容
rt：定義 ruby 注釋的解釋
ruby：定義 ruby 注釋
section：標簽定義文檔中的節、區段。比如章節、頁眉、頁腳或文檔中的其他部分。
source:audio和video的屬性之一。為audio和video定義媒介源。
summary:為details定義標題。
time:定義日期或時間。
video：h5新增視頻標簽。具有高寬屬性。
#辨析
《audio》 標簽定義聲音，比如音樂或其他音頻流。
《canvas》標簽只是圖形容器，您必須使用腳本來繪制圖形。
《article》標簽定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內容。
《menu》標簽定義命令的列表或菜單。《menu》 標簽用于上下文菜單、工具欄以及用于列出表單控件和命令。
command元素表示用戶能夠調用的命令。《command》 標簽可以定義命令按鈕，比如單選按鈕、復選框或按鈕。只有當 command 元素位于 menu 元素內時，該元素才是可見的。否則不會顯示這個元素，但是可以用它規定鍵盤快捷鍵。
標簽定義聲音，比如音樂或其他音頻流。 標簽定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內容。標簽定義命令的列表或菜單。<menu> 標簽用于上下文菜單、工具欄以及用于列出表單控件和命令。
command元素表示用戶能夠調用的命令。<command> 標簽可以定義命令按鈕，比如單選按鈕、復選框或按鈕。只有當 command 元素位于 menu 元素內時，該元素才是可見的。否則不會顯示這個元素，但是可以用它規定鍵盤快捷鍵。
*2-新表單元素
datalist元素規定輸入域的選項列表。 keygen 元素的作用是提供一種驗證用戶的可靠方法。 output 元素用于不同類型的輸出
*3- ?SVG標簽
SVG即 Scalable Vector Graphics，是一種用來繪制 矢量圖 的 HTML5 標簽。你只需定義好XML屬性，就能獲得一致的圖像元素。
*4- ?H5廢棄標簽
<noframes>,<frameset>,<frame>,<applet>,<acronym>,<basefont>,<tt>,<strike>,<big>,<blink>,<s>,<font>, <center>, 《dir》
*5 ?HTML5中的二進制大對象Blob
## Blob是什么？
在計算機中，BLOB常常是數據庫中用來存儲 二進制文件 的字段類型。這里說的是一種 JavaScript 的對象類型。MYSQL中的BLOB類型就只是個二進制數據容器。而HTML5中的Blob對象除了存放二進制數據外還可以設置這個數據的MIME類型，這相當于對文件的儲存。一個Blob對象就是一個包含有只讀原始數據的類文件對象。
##創建Blob 對象
在新的方法中直接可以通過Blob()的構造函數來創建了。構造函數，接受兩個參數：
第一個為一個數據序列，可以是任意格式的值，例如，任意數量的字符串，Blobs以及 ArrayBuffers。第二個參數，是一個包含了兩個屬性的對象，其兩個屬性分別是：
（1）type -- MIME 的類型。
（2）endings -- 決定 append() 的數據格式，
????<script>
????var blob = new Blob([ "Hello World!" ],{type: "text/plain" });
????</script>
-C06語義化與設計模式
$61語義化
*1-什么是HTML語義化？
<基本上都是圍繞著幾個主要的標簽，像標題（H1~H6）、列表（li）、強調（strong em）等等>
根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
常見語義化標簽：
《blockquote》 標簽定義塊引用。《h1》 - 《h6》 標簽可定義標題。 <st rong> 標簽和 <e m> 標簽一樣，用于強調文本，但它強調的程度更強一些。 <a>標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。 <p >標簽定義段落。 <sec tion> 標簽定義文檔中的節（section、區段）。 <n av> 標簽定義導航鏈接的部分。 <u l> 標簽定義無序列表。 <o l> 標簽定義有序列表。
*2-為什么要語義化？
<>為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構:為了裸奔時好看；
<>用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；
<>有利于SEO ：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息： 爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
<>方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
<>便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
*3-寫HTML代碼時應注意什么？
<>盡可能少的使用無語義的標簽div和span；
<>在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
<>不要使用純樣式標簽，如：b、font、u等，改用css設置。
<>需要強調的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
<>使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
<>表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；
<>每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。
<>關于標題，H1不是隨便用的，H1有利于SEO優化，一般來說一個頁面里只有一個。
$62 ?dtd文檔類型聲明
*1-定義
<>在所有 HTML 文檔中規定 doctype 是非常重要的，這樣瀏覽器就能了解預期的文檔類型。<!DOCTYPE> 聲明必須位于 HTML5 文檔中的第一行，也就是位于 <html> 標簽之前。該標簽告知瀏覽器文檔使用哪種html或者xhtml規范
<> doctype聲明不屬于 HTML 標簽；tag; 它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。不同文檔模式主要影響CSS內容的呈現，尤其是瀏覽器對盒模型的解析
<>瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。HTML 4.01 中的 doctype 需要對 DTD 進行引用，因為 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要對 DTD 進行引用，但是需要 doctype 來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。
*2- hack技術 混雜模式
--不同瀏覽器在混雜模式下的行為差異非常大，如果不使用某些hack技術，跨瀏覽器的行為根本就沒有一致性可言。
--hack技術主要是為了某些瀏覽器特定設置的，寫在css中，里面可以嵌套style和html代碼，不可以寫在style中。如果在文檔開始處沒有文檔類型聲明，則瀏覽器會開啟混雜模式
---在標準模式中，瀏覽器根據規范呈現頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示
$63設計模式
*1- ?MVC模型 ?model view controller
Model（模型）是應用程序中用于處理應用程序數據邏輯的部分。
通常模型對象負責在數據庫中存取數據。
View（視圖）是應用程序中處理數據顯示的部分。
通常視圖是依據模型數據創建的。
Controller（控制器）是應用程序中處理用戶交互的部分。
通常控制器負責從視圖讀取數據，控制用戶輸入，并向模型發送數據。
MVC模型：是一種架構型的模式，本身不引入新功能，只是幫助我們將開發的結構組織的更加合理，使展示與模型分離、流程控制邏輯、業務邏輯調用與展示邏輯分離。 首先讓我們了解下MVC（Model-View-Controller）三元組的概念： Model（模型）：數據模型，提供要展示的數據，因此包含數據和行為，可以認為是領域模型或JavaBean組件（包含數據和行為），不過現在一般都分離開來：Value Object（數據） 和 服務層（行為）。也就是模型提供了模型數據查詢和模型數據的狀態更新等功能，包括數據和業務。 View（視圖）：負責進行模型的展示，一般就是我們見到的用戶界面，客戶想看到的東西。 Controller（控制器）：接收用戶請求，委托給模型進行處理（狀態改變），處理完畢后把返回的模型數據返回給視圖，由視圖負責展示。 也就是說控制器做了個調度員的工作，。 在標準的MVC中模型能主動推數據給視圖進行更新（觀察者設計模式，在模型上注冊視圖，當模型更新時自動更新視圖），但在Web開發中模型是無法主動推給視圖（無法主動更新用戶界面），因為在Web開發是請求-響應模型。 那接下來我們看一下在Web里MVC是什么樣子，我們稱其為 Web MVC 來區別標準的MVC。
*2- ?DHTML
DHTML指動態 HTML（Dynamic HTML）。 DHTML 不是由萬維網聯盟（W3C）規定的標準。DHTML 是一個營銷術語 - 被網景公司（Netscape）和微軟公司用來描述 4.x 代瀏覽器應當支持的新技術。 DHTML 是一種用來創建動態站點的技術組合物。 對大多數人來說，DHTML 意味著 HTML 4.0、樣式表以及 JavaScript 的結合物。 W3C 曾講過：“動態HTML是一個被某些廠商用來描述可使文檔動態性更強的HTML、樣式表以及腳本的結合物的術語。”
使網頁作者改變內容的外部特征而不強制用戶再次下載全部內容
DHTML將 HTML、JavaScript、DOM 以及 CSS 組合在一起，用于創造動態性更強的網頁。
通過JavaScript和 HTML DOM，能夠動態地改變 HTML 元素的樣式。
DHTML實現了網頁從Web服務器下載后無需再經過服務的處理，而在瀏覽器中直接動態地更新網頁的內容、排版樣式和動畫的功能。例如，當鼠標指針移到文章段落中時，段落能夠變成藍色，或者當鼠標指針移到一個超級鏈接上時，會自動生成一個下拉式子鏈接目錄等。
*3- ?CSS Sprites
##簡介
CSS Sprites在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中， 利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位， 訪問頁面時避免圖片載入緩慢的現象。
##優點
（1）CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
（2）CSS Sprites能減少圖片的字節；
（3）CSS Sprites解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片命名，不需要對每一個小圖片進行命名，從而提高了網頁制作效率。
（4）CSS Sprites只需要修改一張或少張圖片的顏色或樣式來改變整個網頁的風格。
##缺點
（1）圖片合并麻煩：圖片合并時，需要把多張圖片有序的合理的合并成一張圖片，并留好足夠的空間防止版塊出現不必要的背景。
（2）圖片適應性差：在高分辨的屏幕下自適應頁面，若圖片不夠寬會出現背景斷裂。
（3）圖片定位繁瑣：開發時需要通過工具測量計算每個背景單元的精確位置。
（4）可維護性差：頁面背景需要少許改動，可能要修改部分或整張已合并的圖片，進而要改動css。在避免改動圖片的前提下，又只能（最好）往下追加圖片，但這樣增加了圖片字節。
-C07瀏覽器、通信與緩存
$71瀏覽器內核
*1- ?IE內核 Trident
Trident內核代表產品Internet Explorer，又稱其為IE內核。Trident（又稱為MSHTML），是微軟開發的一種排版引擎。使用Trident渲染引擎的瀏覽器包括：IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。 -IE6/7/8不支持事件捕獲。
*2- ?Gecko內核
代表作品Mozilla FirefoxGecko是一套開放源代碼的、以C++編寫的網頁排版引擎。Gecko是最流行的排版引擎之一，僅次于Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9。 *3- ?WebKit內核
代表作品Safari、Chromewebkit。是一個開源項目，包含了來自KDE項目和蘋果公司的一些組件，主要用于Mac OS系統，它的特點在于源碼結構清晰、渲染速度極快。缺點是對網頁代碼的兼容性不高，導致一些編寫不標準的網頁無法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome。
*4- ?Presto內核
代表作品OperaPresto是由Opera Software開發的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動態功能，例如網頁或其部分可隨著DOM及Script語法的事件而重新排版。
$72瀏覽器屬性
#瀏覽器私有屬性
-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome、safari私有屬性
#邊框屬性
Internet Explorer 9+支持 border-radius 和 box-shadow 屬性。
Firefox、 Chrome 以及 Safari 支持所有新的邊框屬性。
注釋：對于border-image， Safari 5 以及更老的版本需要前綴 -webkit- 。
Opera支持 border-radius 和 box-shadow 屬性，但是對于 border-image 需要前綴 -o-
#渲染與圖層
在Blink和WebKit的瀏覽器中，某個元素具有3D或透視變換（perspective transform）的CSS屬性，會讓瀏覽器創建單獨的圖層。
我們平常會使用left和top屬性來修改元素的位置，但left和top會觸發重布局，取而代之的更好方法是使用translate，這個不會觸發重布局。
移動端要想動畫性能流暢，應該使用3D硬件加速，因此最好給頁面中的元素盡量添加translate3d或者translateZ(0)來觸發3D硬件加速？錯誤，不能濫用3D加速。
解決瀏覽器渲染的性能問題時，首要目標就是要避免層的重繪和重排。
$73請求與顯示
*1-加載優先級
html文檔加載是從上到下加載，只與標簽的上下順序有關，與標簽選用無關。 ?
優先顯示和優先級還是不一樣的，優先顯示是HTML文檔加載時從上到下加載，只與標簽的上下順序有關，與標簽的選用無關，優先級是幀元素比表單元素優先，表單元素比非表單元素優先。link標簽是同時加載的，script標簽才會加載完一個再加載另一個。
*2-圖片的請求
1.只要是img src引用的都會請求；
2. background: url()所屬樣式如果掛靠在某個元素上，就一定會請求；單獨寫了這么一個樣式并不請求。
3*- HTTP協議request 請求頭/response響應頭。
GET表示獲取資源，POST表示新增一個資源，PUT表示更新資源,DELETE 表示刪除資源等等
狀態碼304表示：如果客戶端發送了一個帶條件的 GET 請求且該請求已被允許，而文檔的內容（自上次訪問以來或者根據請求的條件）并沒有改變，則服務器應當返回這個狀態碼。307表示臨時重定向。
*4- GET與POST的區別
a》GET請求的數據會附在URL之后（就是把數據放置在HTTP協議頭中），以?分割URL和傳輸數據，參數之間以&相連，如
login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果數據是英文字母/數字，原樣發送，如果是空格，轉換為+，如果是中文/其他字符，則直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX為該符號以16進制表示的ASCII。
而POST則把提交的數據放置在HTTP包的包體中。
b》‘&’形式的GET方式提交的數據最多只能是1024字節，理論上POST沒有限制，可傳較大量的數據，IIS4中最大為80KB，IIS5中為100KB。
c》在ASP中，服務端獲取GET請求參數用Request.QueryString，獲取POST請求參數用Request.Form。在JSP中，用request.getParameter(\&quot;XXXX\&quot;)來獲取，雖然jsp中也有request.getQueryString()方法，但使用起來比較麻煩，比如：傳一個test.jsp?name=hyddd&amp;password=hyddd，用request.getQueryString()得到的是：name=hyddd&amp;password=hyddd。在PHP中，可以用$_GET和$_POST分別獲取GET和POST中的數據，而$_REQUEST則可以獲取GET和POST兩種請求中的數據。
值得注意的是，JSP中使用request和PHP中使用$_REQUEST都會有隱患。
d》POST的安全性要比GET的安全性高。注意：這里所說的安全性和上面GET提到的“安全”不是同個概念。上面“安全”的含義僅僅是不作數據修改，而這里安全的含義是真正的Security的含義，比如：通過GET提交數據，用戶名和密碼將明文出現在URL上，因為(1)登錄頁面有可能被瀏覽器緩存，(2)其他人查看瀏覽器的歷史紀錄，那么別人就可以拿到你的賬號和密碼了，除此之外，使用GET提交數據還可能會造成Cross-site request forgery攻擊。
*5- ?onload事件
onload事件觸發時，頁面上所有的DOM，樣式表，腳本，圖片，flash都已經加載完成了，domContentLoaded事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash。
$74臨時存儲
*1- ?http無狀態協議
摘錄自博客http://blog.sina.com.cn/s/blog_93b45b0f0101a4ix.html
##無狀態的含義：
無狀態是指協議對于事務處理沒有記憶功能。缺少狀態意味著，假如后面的處理需要前面的信息，則前面的信息必須重傳，這樣可能導致每次連接傳送的數據量增大。另一方面，在服務器不需要前面信息時，應答就較快。直觀地說，就是每個請求都是獨立的，與前面的請求和后面的請求都是沒有直接聯系的。
##實際中的使用情況：
在web應用中，我們使用http協議，但是我們需要的web是有狀態的，因此加入了cookie、session等機制實現有狀態的的web。即，web=http協議+狀態機制+其他機制
##為什么不改進http協議使之有狀態：
最初的http協議只是用來瀏覽靜態文件的，無狀態協議已經足夠，這樣實現的負擔也很輕（相對來說，實現有狀態的代價是很高的，要維護狀態，根據狀態來操作。）。隨著web的發展，它需要變得有狀態，但是不是就要修改http協議使之有狀態呢？是不需要的。因為我們經常長時間逗留在某一個網頁，然后才進入到另一個網頁，如果在這兩個頁面之間維持狀態，代價是很高的。其次，歷史讓http無狀態，但是現在對http提出了新的要求，按照軟件領域的通常做法是，保留歷史經驗，在http協議上再加上一層實現我們的目的（“再加上一層，你可以做任何事”）。所以引入了其他機制來實現這種有狀態的連接。
##哪些方法可以實現有狀態連接：
cookies, session, application
##實例解析
有人將web應用中有無狀態的情況，比著顧客逛商店的情景。
顧客：瀏覽器訪問方；商店：web服務器；一次購買：一次http訪問
我們知道，上一次顧客購買，并不代表顧客下一個小時一定會買（當然也不能代表不會）。也就是說同一個顧客的不同購買之間的關系是不定的。所以說實在的，這種情況下，讓商店保存所有的顧客購買的信息，等到下一次購買可以知道這個顧客以前購買的內容代價非常大的。所以商店為了避免這個代價，索性就認為每次的購買都是一次獨立的新的購買。淺臺詞：商店不區分對待老顧客和新過客。這就是無狀態的。
但是，商店為了提高收益。她是想鼓勵顧客購買的。所以告訴你，只要你在一個月內購買了５瓶以上的啤酒，就送你一個酒杯。
我們看看這種情況我們怎么去實現呢？A,給顧客發放一個磁卡，里面放有顧客過去的購買信息。這樣商店就可以知道了。這就是cookie.B,給顧客發放一個唯一號碼，號碼制定的顧客的消費信息，存儲在商店的服務器中。這就是session。最后，商店可以全局的決定，是５瓶為送酒杯還是6瓶。這就是application。
其實，這些機制都是在無狀態的傳統購買過程中加入了一點東西，使整個過程變得有狀態。Web應用就是這樣的。
*2-主流方案
瀏覽器端：cookie, WebStorage(localStorage、sessionStorage), userData, indexedDB
服務器端：session
cookie是靠譜的瀏覽器都支持；localStorge 比 cookie 存的更多，獲取更方便，而且存儲內容不會隨請求發送給服務器；session 雖然需要 cookie 支持（通常存放加密過的 sessionId），但是不在瀏覽器端存放主要信息，排除；IE 支持 userData 存儲數據，但是基本很少使用到，除非有很強的瀏覽器兼容需求。
*3- ?cookie機制與缺陷
正統的cookie分發是通過擴展HTTP協議來實現的，服務器通過在HTTP的響應頭中加上一行特殊的指示以提示瀏覽器按照指示生成相應的cookie。然而純粹的客戶端腳本如JavaScript或者VBScript也可以生成cookie。而cookie的使用是由瀏覽器按照一定的原則在后臺自動發送給服務器的。瀏覽器檢查所有存儲的cookie，如果某個cookie所聲明的作用范圍大于等于將要請求的資源所在的位置，則把該cookie附在請求資源的HTTP請求頭上發送給服務器。 因為JS運行在瀏覽器中，是單線程的，每個window一個JS線程，既然是單線程的，在某個特定的時刻只有特定的代碼能夠被執行，并阻塞其它的代碼。而瀏覽器是事件驅動的（Event driven），瀏覽器中很多行為是異步（Asynchronized）的，會創建事件并放入執行隊列中。javascript引擎是單線程處理它的任務隊列，你可以理解成就是普通函數和回調函數構成的隊列。當異步事件發生時，如mouse click, a timer firing, or an XMLHttpRequest completing（鼠標點擊事件發生、定時器觸發事件發生、XMLHttpRequest完成回調觸發等），將他們放入執行隊列，等待當前代碼執行完成。
HTML5提供了兩種在客戶端存儲數據的新方法： localStorage - 沒有時間限制的數據存儲，sessionStorage - 針對一個 session 的數據存儲。但在這之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
*4- ?Cookie基本功能辨析
記錄訪問者信息----訪問者的信息一般都可以處理成 kv 鍵值對的形式，故可以保存在 Cookie 中。
在頁面之間傳遞信息----通過設置 Cookie 的 path 等屬性，可以在特定域名或 URI 下共享 Cookie 信息。
自動識別用戶-----通過在 Cookie 中保存用戶uid、服務器會話sid等方法，可以記錄用戶登錄狀態。
*不能對數據庫進行操作----Cookie 是保存在用戶瀏覽器上的小文本文件，不是數據庫，也沒有提供操作數據庫的 API。
*5- ?web storage
在HTML5中，本地存儲是一個window的屬性，即web storage，包括有以下幾種對象：
sessionStorage：存儲特定于某個會話的數據，該數據只保留到瀏覽器關閉。
globalStorage：目的是跨越會話存儲數據，不過要指定哪些域可以訪問該數據。如果不使用 removeItem() 或 delete 刪除，或者用戶未清除瀏覽器緩存，存儲在globalStorage上的數據會一直保留在磁盤上。所以globalStorage非常適合在客戶端存儲文檔或長期保留用戶偏好設置。
localStorage：在HTML5中作為持久保持客戶端數據的方案取代了globalStorage。它不能被指定訪問規則，要訪問localStorage，頁面必須來自同一個域名，使用同一種協議，在同一個端口上。它的數據也保留到通過JavaScript刪除或用戶清除瀏覽器緩存，cookie會被Http請求攜帶，但 loaclstorage不會。
HTML5本地存儲只能存字符串，任何格式存儲的時候都會被自動轉為字符串，所以讀取的時候，需要自己進行類型的轉換。是永久性存儲，當然用戶可以通過瀏覽器設置來刪除。localStorage和sessionStorage都具有相同的操作方法，例如setItem()、getItem()和removeItem()示例，用setItem將value存儲到key字段 .setItem( key, value)。
# localStorage寫入字段有三種方式：
localStorage["a"]=1;
localStorage.b=1;
localStorage.setItem("c",3);
# localStorage讀取字段也有三種方式：
var a= localStorage.a;
var b= localStorage["b"];
var c= localStorage.getItem("c");
*6- ?cookie/localStorage/sessionStorage辨析
共同點：都是保存在瀏覽器端，且同源的。
不同點：
##數據的生命期
Cookie一般由服務器生成，可設置失效時間，如果在瀏覽器端生成Cookie，默認是關閉瀏覽器后失效；localStorage除非被清除，否則永久保存；sessionStorage僅在當前會話(當前瀏覽器窗口)下有效，關閉頁面或瀏覽器后被清除。
##作用域
cookie是在所有同源窗口中都是共享的；localStorage在所有同源窗口中都是共享的；sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面。
##存放數據大小
cookie為4K左右，適合保存小數據，如會話標識。webStorage一般為5MB（或更大）
##與服務器端通信
cookie數據始終在同源的http請求(http頭)中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。如果使用cookie保存過多數據會帶來性能問題。 cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。
webStorage僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。
##易用性
Cookie需要程序員自己封裝，原生的Cookie接口不友好；webStorage原生接口可以接受，亦可再次封裝來對Object和Array有更好的支持Web Storage支持事件通知機制，可以將數據更新的通知發送給監聽者。
$75 Ajax
*1-支持的數據類型
dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
????"xml": ???"html": ????"script": ????"json": ???"jsonp": ???"text":
*2- ?Ajax與flash對比
<> Ajax的優勢：1.可搜索性 2.開放性 3.費用 4.易用性 5.易于開發。
<> Flash的優勢：1.多媒體處理 2.兼容性 3.矢量圖形 4.客戶端資源調度
<> Ajax的劣勢：1.它可能破壞瀏覽器的后退功能 ??2.使用動態頁面更新使得用戶難于將某個特定的狀態保存到收藏夾中 ，不過這些都有相關方法解決。
<> Flash的劣勢：1.二進制格式 2.格式私有 3.flash 文件經常會很大，用戶第一次使用的時候需要忍耐較長的等待時間 ?4.性能問題
## Ajax
#可搜索性
普通的文本網頁會更有利于SEO。文本內容是搜索引擎容易檢索的，而繁瑣的swf字節碼卻是搜索引擎不愿觸及的。雖然Google等一些大型的搜索引擎可以檢索SWF內部的內容，但是仍然有很多麻煩存在。
#開放性
Flash常年以來被Macromedia看的很死。包括Flex、FMS等輔佐技術一直都需要昂貴的安裝、維護費用。而JS則沒有這樣的麻煩。沒有人愿意承擔法律和版權的風險。
#費用
Flash開發是很昂貴的，因為FlashIDE等環境都是要收費的．而Ajax則不同．雖然有一些便宜的生成swf的工具，但是他們的工能實在無法滿足復雜需求。
#易用性
Ajax程序有更好的易用性。由于中間有一層Flashplayer代理層，因此許多輔助功能無法被Flash靈活利用。而且Flash在一些方面有著不好的口碑。比如彈出廣告、比如惡意代碼。
（awflasher.com個人認為這八成是亂上xx網站造成的）
#易于開發
人們開發復雜的Ajax和Flash應用程序時，都會借助一些高級的開發工具。普遍來說，Ajax的開發包比Flash簡便、容易。
## Flash
#多媒體處理
Flash在音頻、視頻等多媒體領域相比HTML有絕對的優勢。現在幾乎所有的網站都包含有Flash內容。
#兼容性
兼容性好：由于通過了唯一的FlashPlayer“代理”。人們不必像調試JS那樣，在不同的瀏覽器中調試程序。
#矢量圖型
這是Flash最大的優勢，同樣處在這一領域的SVG、Canvas element以及Direct完全不能與Flash相比。
#客戶端資源調度
Flash能夠更容易的調用瀏覽器以外的外部資源。比如攝像頭、麥克風等。然而這是普通的HTML無法完成的。但是這也許是一個缺點
-C08細節雜項
$81 bootstrap
*1-柵格系統尺寸
bootstrap3.x使用了四種柵格選項來形成柵格系統,來適合不同尺寸的設備，以前綴命名這四種柵格選項，他們分別是col-xs、col-sm、col-md、col-lg，我們懂英文的就知道，lg是large的縮寫，md是mid的縮寫，sm是small的縮寫，xs適合超小屏幕設備（手機）。
- .col-xs-超小屏幕 手機 <768px
- .col-sm-小屏幕 平板 ?>=768px
- .col-md-中等屏幕 ?>=992px
- .col-lg-大屏幕 ?>1200px (一說1170px)
*2- ?v2與v3的區別
v3沒有分 fluid 和 non-fluid ，所以移除了 .container-fluid 和 .row-fluid 兩個大框架容器，所有都是 fluid。
例如做nesting column時，大的 grid 裡面某一塊要包小 grid ，v2.x 裡面一層得寫 .row-fluid，才能在小區塊內使用12欄 grid；但 v3 只要 .row > .row > .row…… 一層層包下去就行了。
*3-輔助類
.text-muted:文字的顏色換成灰色
.text-primary:文字的顏色變成藍色
.text-success:文字的顏色變成綠色
.text-info:文字的顏色變成暗藍色
.text-warning:文字顏色變成暗黃色
.text-danger：文字的顏色變成紅色
## bootstrap哪些可以給文字加上背景？
主要藍（bg-primary）、成功綠（bg-success）、信息藍（bg-info）、警告黃（bg-warning）、危險紅（bg-danger）
*4- ?btn按鈕類
.btn-group該class用于形成基本的按鈕組；可以嵌套使用
.btn-toolbar該 class 有助于把幾組 <div class="btn-group"> 結合到一個 <div class="btn-toolbar"> 中，一般獲得更復雜的組件。
btn-group-lg, .btn-group-sm, .btn-group-xs這些 class 可應用到整個按鈕組的大小調整，而不需要對每個按鈕進行大小調整。
*5- ?Bootstrap table類
.table 為任意添加基本樣式 (只有橫向分隔線)
.table-striped 在內添加斑馬線形式的條紋 ( IE8 不支持)
.table-bordered 為所有表格的單元格添加邊框
.table-hover 在內的任一行啟用鼠標懸停狀態
.table-condensed 讓表格更加緊湊
*6-其他類的使用補充
# input
在bootstrap中為了在input兩側添加額外元素,
--使用input-group來封裝控件
--使用input-group-addon來添加前置元素
--必須為input添加form-control類
$82 ?CSS引用
導入樣式：在.css文件中使用@import url("...")來引入另一個css樣式表
外鏈樣式
<link href="cc.css" type="text/css" rel="stylesheet" />
行內樣式
<div style="border:solid 1px red;"></div>
內鏈樣式
<style type="text/css">
border:solid 1px red;
</style>
$83 ?head與body
*1- ?JS的加載自執行與script標簽
要想js在頁面加載的時候自執行，script 就只能插入在 body 內。
head標簽是設計用于一些靜態資源的預加載，與“解析”沒有任何關系，瀏覽器會先加載 head 標簽內的靜態資源（css 和 js），這時候的 js 并沒有執行，而是被 UI 線程阻塞了，然后瀏覽器會開始構建 DOM Tree，然后開始構建 CSSOM Tree（即題目說的加載頁面），最后才會執行 head 中加載的 js。
然后要注意的是，瀏覽器在解析body內的樣式以及 script 標簽的時候是串行的，就是說你的 script 標簽內的代碼會即時執行，然后再去解析下面標簽的內聯樣式（這也是為什么內聯樣式的優先級會比引用的高）
*2- JS的執行順序
如果JavaScript是外部腳本，不是嵌入腳本，放在head里，會在頁面加載之時就被執行，也就是文件要被下載，執行之后才會呈現頁面內容；放在body底部，在解析js代碼之前，頁面的內容就會完全呈現在瀏覽器中。所以，在body里的js應該是在頁面加載之后執行的吧。
之所以把js放在body之后，是為了預防外部js文件過多時，瀏覽器呈現頁面出現延遲，延遲期間瀏覽器的窗口一片空白。
在HTML body部分中的JavaScripts會在頁面加載的時候被執行。
在HTML head部分中的JavaScripts會在被調用的時候才執行。
head部分中的腳本: 需調用才執行的腳本或事件觸發執行的腳本放在HTML的head部分中。當你把腳本放在head部分中時，可以保證腳本在任何調用之前被加載。
body部分中的腳本: 當頁面被加載時執行的腳本放在HTML的body部分。放在body部分的腳本通常被用來生成頁面的內容。
*1- ?標簽
標簽用于定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。
下面這些標簽可用在head部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
定義文檔的標題，它是 head 部分中唯一必需的元素。
## title是否是必需的？
按照標準來說《title》是必須需要的標簽，但是瀏覽器因為很多前端編碼并不規范，所以在沒有的情況下有時并不影響，或者是再刪除《title》之后，只是加載之前的緩存界面；但是《meta》是編碼說明，刪去會有很大麻煩，但是理論上來說，你如果是按照該瀏覽器默認的編碼方式的文檔，則不會有錯。
所以僅僅是理論上來說，《title》是必要的。html4.01下的head中必須有title。
是必要的。html4.01下的head中必須有title。
$84 ?DOM操作
*1- DOM元素獲取
<> document.querySelectorALL()方法
返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節點數組)
該方法接受三種類型的參數：id(#)，class(.)，標簽 ?
示例document.querySelectorAll('.file')[0]
<> getElementById()方法是返回對擁有指定 ID 的第一個對象的引用 并不是一個數組
<> getElementByTagName()返回帶有指定標簽名的對象集合 file不是標簽名_(:з」∠)_
<> getElementSByClassName()返回特定類名的對象集合（IE8好像不適用）
*2-辨析
# test.innerHTML:
也就是從對象的起始位置到終止位置的全部內容,包括Html標簽。
test.innerHTML的值的形式形如“<span style="color:red">test1</span> test2 ”。
# test.innerText:
從起始位置到終止位置的內容,但它去除Html標簽
上例中的text.innerTest的值也就是形如“test1 test2”, 其中span標簽去除了。
# test.outerHTML:
除了包含innerHTML的全部內容外, 還包含對象標簽本身。
上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
$85其他
*1-字符集
UTF-8（8-bit Unicode Transformation Format）是一種針對Unicode的可變長度字符編碼，又稱萬國碼。UTF-8用1到6個字節編碼UNICODE字符。用在網頁上可以同一頁面顯示中文簡體繁體及其它語言（如英文，日文，韓文）。
GBK是漢字編碼，是雙字節碼，可表示繁體字和簡體字。
ISO8859-2字符集，也稱為 Latin-2，收集了東歐字符。
*2- ?http302狀態碼
HTTP狀態碼302表示被請求的資源暫時轉移(Moved temporatily)，然后會給出一個轉移后的URL，而瀏覽器在處理服務器返回的302錯誤時，原則上會重新建立一個TCP連接，然后再取重定向后的URL的頁面；但是如果頁面存在于緩存中，則不重新獲取；
