問答題1 /72
瀏覽器頁面有哪三層構成，分別是什么，作用是什么?
參考答案
構成：結構層、表示層、行為層
分別是：HTML、CSS、JavaScript
作用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。

問答題2 /72
HTML5的優點與缺點？
參考答案
優點：
a、網絡標準統一、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以下瀏覽器幾乎全軍覆沒。

問答題3 /72
Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
參考答案
回答1：
（1）、 聲明位于文檔中的最前面，處于標簽之前。告知瀏覽器的解析器，用什么文檔類型 規范來解析這個文檔。
（2）、嚴格模式的排版和JS 運作模式是以該瀏覽器支持的最高標準運行。
（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

回答2： doctype聲明指出閱讀程序應該用什么規則集來解釋文檔中的標記。在Web文檔的情況下，“閱讀程序”通常是瀏覽器或者校驗器這樣的一個程序，“規則”則是W3C所發布的一個文檔類型定義（DTD）中包含的規則。
(1) 聲明位于文檔中的最前面的位置，處于標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的HTML 文檔。
(2)所謂的標準模式是指，瀏覽器按 W3C 標準解析執行代碼；怪異模式則是使用瀏覽器自己的方式解析執行代碼，因為不同瀏覽器解析執行的方式不一樣，所以我們稱之為怪異模式。 嚴格模式是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的語法，如
。嚴格模式的排版和JS 運作模式是以該瀏覽器支持的最高標準運行混雜模式則是一種向后兼容的解析方法，說的透明點就是可以實現IE5.5以下版本瀏覽器的渲染模式。
(3)瀏覽器解析時到底使用標準模式還是怪異模式，與你網頁中的 DTD 聲明直接相關， DTD 聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁并顯示，忽略 DTD 聲明 ,將使網頁進入怪異模式。

問答題4 /72
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：用來處理命令按鈕。

問答題5 /72
你做的網頁在哪些流覽器測試過,這些瀏覽器的內核分別是什么?
參考答案
a、 IE: trident 內核
b、 Firefox ： gecko 內核
c、 Safari:webkit 內核
d、 Opera: 以前是 presto 內核， Opera 現已改用 Google Chrome 的 Blink 內核
e、 Chrome:Blink( 基于 webkit ， Google 與 Opera Software 共同開發 )

問答題6 /72
每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？
參考答案
聲明位于文檔中的最前面的位置，處于標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。（重點：告訴瀏覽器按照何種規范解析頁面）

問答題7 /72
說說你對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 的變化很小，這并不符合一個好產品的演進規則。

問答題8 /72
對WEB標準以及W3C的理解與認識?
參考答案
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和 js 腳本、結構行為表現的分離、
文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，
容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性。

問答題9 /72
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 - 交互表單
* h3 - 大標題
* h4 - 副標題
* 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 元素被稱為空元素 )
<br/> //換行
<hr> //分隔線
<input> //文本框等
<img> //圖片
<link> <meta>

什么是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 游戲開發。

問答題11 /72
請你描述一下 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 內有效
• 存儲量更大（推薦沒有限制，但是實際上各瀏覽器也不同）

問答題12 /72
說說你對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 一起使用

問答題13 /72
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 不支持。

問答題14 /72
說說你對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 瀏覽器，這是免費提供的。

問答題15 /72
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: 元素和子孫節點內容是否需要本地化

問答題16 /72
說說超鏈接target屬性的取值和作用？
參考答案
target這個屬性指定所鏈接的頁面在瀏覽器窗口中的打開方式。
它的參數值主要有：
a、 _blank ：在新瀏覽器窗口中打開鏈接文件
b、 _parent ：將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的，則在瀏覽器全屏窗口中載入鏈接的文件，就象 _self 參數一。
c、 _self ：在同一框架或窗口中打開所鏈接的文檔。此參數為默認值，通常不用指定。但是我不太理解。
d、 _top ：在當前的整個瀏覽器窗口中打開所鏈接的文檔，因而會刪除所有框架。

問答題17 /72
data-屬性的作用是什么？
參考答案
data-為前端開發者提供自定義的屬性，這些屬性集可以通過對象的 dataset 屬性獲取，不支持該屬性的瀏覽器可以通過 getAttribute 方法獲取:

需要注意的是：data-之后的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峰風格。并不是所有的瀏覽器都支持 .dataset 屬性，測試的瀏覽器中只有 Chrome 和 Opera 支持。
即：當沒有合適的屬性和元素時，自定義的 data 屬性是能夠存儲頁面或 App 的私有的自定義數據。

問答題18 /72
介紹一下你對瀏覽器內核的理解？
參考答案
主要分成兩部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
渲染引擎：負責取得網頁的內容（HTML、 XML 、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎則：解析和執行 javascript 來實現網頁的動態效果。
最開始渲染引擎和JS引擎并沒有區分的很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。

問答題19 /72
常見的瀏覽器內核有哪些？
參考答案
view sourceprint?

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 /72
iframe有那些缺點？
參考答案
*iframe會阻塞主頁面的 Onload 事件；
*搜索引擎的檢索程序無法解讀這種頁面，不利于 SEO;
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用 iframe ，最好是通過 javascript
動態給iframe添加 src 屬性值，這樣可以繞開以上兩個問題。

問答題21 /72
Label的作用是什么，是怎么用的？
參考答案
label標簽來定義表單控制間的關系 , 當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
<label for='Name'>Number:</label>
<input type=“ text “ name='Name' id='Name'/>
<label>Date:<input type='text' name='B'/></label>

問答題22 /72
如何實現瀏覽器內多個標簽頁之間的通信?
參考答案
WebSocket、 SharedWorker ；
也可以調用localstorge、 cookies 等本地存儲方式；
localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面信息通信；
注意quirks： Safari 在無痕模式下設置 localstorge 值時會拋出 QuotaExceededError 的異常；

問答題23 /72
如何在頁面上實現一個圓形的可點擊區域？
參考答案
a、 map+area 或者 svg
b、 border-radius
c、純 js 實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

問答題24 /72
title與h3的區別、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
應該準確使用語義樣式標簽, 但不能濫用 , 如果不能確定時首選使用自然樣式標簽。

問答題25 /72
實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果？
參考答案
view sourceprint?

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

問答題26 /72
HTML5標簽的作用?(用途)
參考答案
a、使Web頁面的內容更加有序和規范
b、使搜索引擎更加容易按照HTML5規則識別出有效的內容
c、使Web頁面更接近于一種數據字段和表

問答題27 /72
簡述一下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 方式。

問答題28 /72
談談你對canvas的理解？
參考答案
canvas是HTML5中新增一個HTML5標簽與操作canvas的javascript API，它可以實現在網頁中完成動態的2D與3D圖像技術。標記和 SVG以及 VML 之間的一個重要的不同是，有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。 canvas可以完成動畫、游戲、圖表、圖像處理等原來需要Flash完成的一些功能。

問答題29 /72
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 /72
img的title和alt有什么區別？
參考答案
Alt 用于圖片無法加載時顯示 Title 為該屬性提供信息，通常當鼠標滑動到元素上的時候顯示

問答題31 /72
表單的基本組成部分有哪些，表單的主要用途是什么？
參考答案
組成：表單標簽、表單域、表單按鈕
a、表單標簽：這里面包含了處理表單數據所用 CGI 程序的 URL, 以及數據提交到服務器的方法。
b、表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框、和文件上傳框等。
c、表單按鈕：包括提交按鈕，復位按鈕和一般按鈕；用于將數據傳送到服務器上的 CGI 腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
主要用途：表單在網頁中主要負責數據采集的功能，和向服務器傳送數據。

問答題32 /72
表單提交中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 安全性較高。

問答題33 /72
HTML5 有哪些新增的表單元素？
參考答案
HTML5 新增了很多表單元素讓開發者構建更優秀的 Web 應用程序。
? datalist
? datetime
? output
? keygen
? date
? month
? week
? time
? color
? number
? range
? email
? Url

問答題34 /72
HTML5 廢棄了哪些 HTML4 標簽？
參考答案
HTML5 廢棄了一些過時的，不合理的HTML 標簽：
? frame
? frameset
? noframe
? applet
? big
? center
? basefront

問答題35 /72
HTML5 標準提供了哪些新的 API？
參考答案
HTML5 提供的應用程序 API 主要有：
? Media API
? Text Track API
? Application Cache API
? User Interaction
? Data Transfer API
? Command API
? Constraint Validation API
? History API

問答題36 /72
HTML5 存儲類型有什么區別？
參考答案
HTML5 能夠本地存儲數據，在之前都是使用 cookies 使用的。 HTML5 提供了下面兩種本地存儲方案：
? localStorage 用于持久化的本地存儲，數據永遠不會過期，關閉瀏覽器也不會丟失。
? sessionStorage 同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲

問答題37 /72
HTML5 應用程序緩存和瀏覽器緩存有什么區別？
參考答案
應用程序緩存是 HTML5 的重要特性之一，提供了離線使用的功能，讓應用程序可以獲取本地的網站內容，例如 HTML 、 CSS 、圖片以及 JavaScript 。這個特性可以提高網站性能，它的實現借助于 manifest 文件，如下：
<!doctype html>
<html manifest=”example.appcache”>
…..
</html>

與傳統瀏覽器緩存相比，它不強制用戶訪問的網站內容被緩存。

問答題38 /72
HTML5 Canvas 元素有什么用？
參考答案
Canvas 元素用于在網頁上繪制圖形，該元素標簽強大之處在于可以直接在 HTML 上進行圖形操作，

<canvas id=” canvas1 ″ width= ” 300 ″ height= ” 100 ″ >
</canvas>

39
問答題39 /72
除了 audio 和 video，HTML5 還有哪些媒體標簽？
參考答案
HTML5 對于多媒體提供了強有力的支持，除了 audio 和 video 標簽外，還支持以下標簽：

<embed> 標簽定義嵌入的內容，比如插件。

<embed type=” video/quicktime ” src= ” Fishing.mov ” >
<source> 對于定義多個數據源很有用。

<video width=” 450 ″ height= ” 340 ″ controls>
<source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >
<source src=” jamshed.ogg ” type= ” video/ogg ” >
</video>
<track> 標簽為諸如 video 元素之類的媒介規定外部文本軌道。 用于規定字幕文件或其他包含文本的文件，當媒介播放時，這些文件是可見的。

<video width=” 450 ″ height= ” 340 ″ controls>
<source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >
<source src=” jamshed.ogg ” type= ” video/ogg ” >
<track kind=” subtitles ” label= ” English ” src= ” jamshed_en.vtt ” srclang= ” en ” default></track>
<track kind=” subtitles ” label= ” Arabic ” src= ” jamshed_ar.vtt ” srclang= ” ar ” ></track>
</video>
據源很有用。標簽為諸如 video 元素之類的媒介規定外部文本軌道。 用于規定字幕文件或其他包含文本的文件，當媒介播放時，這些文件是可見的。

問答題40 /72
HTML5 中如何嵌入視頻？
參考答案
和音頻類似，HTML5 支持 MP4 、 WebM 和 Ogg 格式的視頻，下面是簡單示例：

<video width=” 450 ″ height= ” 340 ″ controls>
<source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >
Your browser does’ nt support video embedding feature.
</video>

問答題41 /72
HTML5 中如何嵌入音頻？
參考答案
HTML5 支持 MP3 、 Wav 和 Ogg 格式的音頻，下面是在網頁中嵌入音頻的簡單示例：

<audio controls>
<source src=” jamshed.mp3 ″ type= ” audio/mpeg ” >
Your browser does’ nt support audio embedding feature.
</audio>

問答題42 /72
新的 HTML5 文檔類型和字符集是？
參考答案

HTML5 文檔類型很簡單：

<!doctype html>
HTML5 使用 UTF-8 編碼示例：

<meta charset=” UTF-8 ″ >

問答題43 /72
解釋一下CSS的盒子模型？
參考答案
回答一：
a、標準的css盒子模型：寬度=內容的寬度+邊框的寬度+加上內邊具的寬度
b、網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
c、這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
回答二：
盒子模型也有人稱為框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型，加上了doctype聲明，讓所有瀏覽器都會采用標準 w3c 盒子模型去解釋你的盒子。
糾錯收藏

問答題44 /72
請你說說CSS選擇器的類型有哪些，并舉幾個例子說明其用法？
參考答案
類型：基礎的選擇器、組合選擇器、屬性選擇器、偽類、偽元素
基礎的選擇器

組合選擇器

屬性選擇器

偽類

偽元素

問答題45 /72
請你說說CSS有什么特殊性?（優先級、計算特殊值）
參考答案
優先級
(1)、同類型，同級別的樣式后者先于前者
(2))、ID > 類樣式 > 標簽 > *
(3)、內聯>ID選擇器>偽類>屬性選擇器>類選擇器>標簽選擇器>通用選擇器(*)>繼承的樣式

(4)、具體 > 泛化的，特殊性即css優先級
(5)、近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)
??內嵌樣式：內嵌在元素中，<span style="color:red">span</span>
??內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式
外聯樣式表：單獨存在一個css文件中，通過link引入或import導入的樣式
(6)、!important 權重最高，比 inline style 還要高
計算特殊性值
important > 內嵌 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符
權重、特殊性計算法：
CSS樣式選擇器分為4個等級，a、b、c、d
(1)、如果樣式是行內樣式（通過Style=“”定義），那么a=1，1,0,0,0
(2)、b為ID選擇器的總數 0,1,0,0
(3)、c為屬性選擇器，偽類選擇器和class類選擇器的數量。0,0,1,0
(4)、d為標簽、偽元素選擇器的數量 0,0,0,1
(5)、!important 權重最高，比 inline style 還要高
比如結果為：1093比1100，按位比較，從左到右，只要一位高于則立即勝出，否則繼續比較。

問答題46 /72
要動態改變層中內容可以使用的方法？
參考答案
innerHTML，innerText