牛客網前端練習

 

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

構成：結構層、表示層、行爲層

分別是：HTML、CSS、JavaScript

做用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。

2. 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如下瀏覽器幾乎全軍覆沒。

3. 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. 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. 你作的網頁在哪些瀏覽器測試過,這些瀏覽器的內核分別是什麼?

a、 IE: trident 內核

b、 Firefox ： gecko 內核

c、 Safari:webkit 內核

d、 Opera: 之前是 presto 內核， Opera 現已改用 Google Chrome 的 Blink 內核

e、 Chrome:Blink( 基於 webkit ， Google 與 Opera Software 共同開發 )

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

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

7. 說說你對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. 對WEB標準以及W3C的理解與認識?

標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外 鏈css和 js 腳本、結構行爲表現的分離、

文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，

容易維 護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性。

9. 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 元素被稱爲空元素 )

<br/> //換行

<hr> //分隔線

<input> //文本框等

<img> //圖片

<link> <meta>

10. 什麼是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. 請你描述一下 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. 說說你對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. 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： link 支持使用 Javascript 控制 DOM 去改變樣式；而 @import 不支持。

14. 說說你對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. 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. 說說超連接target屬性的取值和做用？

target這個屬性指定所連接的頁面在瀏覽器窗口中的打開方式。

它的參數值主要有：

a、 _blank ：在新瀏覽器窗口中打開連接文件

b、 _parent ：將連接的文件載入含有該連接框架的父框架集或父窗口中。若是含有該連接的框架不是嵌套的，則在瀏覽器全屏窗口中載入連接的文件，就象 _self 參數一。

c、 _self ：在同一框架或窗口中打開所連接的文檔。此參數爲默認值，一般不用指定。可是我不太理解。

d、 _top ：在當前的整個瀏覽器窗口中打開所連接的文檔，於是會刪除全部框架。

17. `data-`屬性的做用是什麼？

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

須要注意的是：`data-`以後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峯風格。 全部主流瀏覽器都支持 data-* 屬性。

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

18. 介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。

渲染引擎：負責取得網頁的內容（HTML、 XML 、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

JS引擎則：解析和執行 javascript 來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分的很明確，後來 JS 引擎愈來愈獨立，內核就傾向於只指渲染引擎。

19. 常見的瀏覽器內核有哪些？

view sourceprint?

1. Trident內核： IE,MaxThon,TT,The World,360, 搜狗瀏覽器等。 [ 又稱 MSHTML]

2. Gecko內核： Netscape6 及以上版本， FF,MozillaSuite/SeaMonkey 等

3. Presto內核： Opera7 及以上。 [Opera 內核原爲： Presto ，現爲： Blink;]

4. Webkit內核： Safari,Chrome 等。 [ Chrome 的： Blink （ WebKit 的分支） ]

20. Iframe有哪些缺點？

*iframe會阻塞主頁面的 Onload 事件；

*搜索引擎的檢索程序沒法解讀這種頁面，不利於 SEO;

*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用 iframe ，最好是經過 javascript

動態給iframe添加 src 屬性值，這樣能夠繞開以上兩個問題。

21. Label的做用是什麼，是怎麼用的？

label標籤來定義表單控制間的關係 , 當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。

<label for='Name'>Number:</label>

<input type=「 text 「 name='Name' id='Name'/>

<label>Date:<input type='text' name='B'/></label>

注意:label的for屬性值要與後面對應的input標籤id屬性值相同

<label for='Name'>Number:</label>

<input type=「 text 「 name='Name' id='Name'/>

22. 如何實現瀏覽器內多個標籤頁之間的通訊?

WebSocket、 SharedWorker ；

也能夠調用localstorage、 cookies 等本地存儲方式；

localstorage另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，

咱們經過監聽事件，控制它的值來進行頁面信息通訊；

注意quirks： Safari 在無痕模式下設置 localstorge 值時會拋出 QuotaExceededError 的異常；

23. 如何在頁面上實現一個圓形的可點擊區域？

a、 map+area 或者 svg

b、 border-radius

c、純 js 實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

24. 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. 實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果？

<divstyle="width:100%;height:1px;</div>

26. HTML5標籤的做用?(用途)

a、使Web頁面的內容更加有序和規範

b、使搜索引擎更加容易按照HTML5規則識別出有效的內容

c、使Web頁面更接近於一種數據字段和表

27. 簡述一下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. 談談你對canvas的理解？

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

29. 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 爲該屬性提供信息，一般當鼠標滑動到元素上的時候顯示

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

組成：表單標籤、表單域、表單按鈕

a、表單標籤：這裏麪包含了處理表單數據所用 CGI 程序的 URL, 以及數據提交到服務器的方法。

b、表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框、和文件上傳框等。

c、表單按鈕：包括提交按鈕，復位按鈕和通常按鈕；用於將數據傳送到服務器上的 CGI 腳本或者取消輸入，還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做。

主要用途：表單在網頁中主要負責數據採集的功能，和向服務器傳送數據。

32. 表單提交中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. HTML5 有哪些新增的表單元素？

HTML5 新增了不少表單元素讓開發者構建更優秀的 Web 應用程序，主要有：

datalist

keygen

output

34. HTML5 廢棄了哪些 HTML4 標籤？

HTML5 廢棄了一些過期的，不合理的HTML 標籤：

· frame

· frameset

· noframe

· applet

· big

· center

· basefront

35. 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. HTML5 存儲類型有什麼區別？

HTML5 可以本地存儲數據，在以前都是使用 cookies 使用的。 HTML5 提供了下面兩

種本地存儲方案：

· localStorage 用於持久化的本地存儲，數據永遠不會過時，關閉瀏覽器也不會丟失。

· sessionStorage 同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲

37. HTML5 應用程序緩存和瀏覽器緩存有什麼區別？

應用程序緩存是 HTML5 的重要特性之一，提供了離線使用的功能，讓應用程序能夠獲取本地的網站內容，例如 HTML 、 CSS 、圖片以及 JavaScript 。這個特性能夠提升網站性能，它的實現藉助於 manifest 文件，以下：

<!doctype html>

<html manifest=」example.appcache」>

…..

</html>

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

38. HTML5 Canvas 元素有什麼用？

Canvas 元素用於在網頁上繪製圖形，該元素標籤強大之處在於能夠直接在 HTML 上進行圖形操做，

<canvas id=」 canvas1 ″ width= 」 300 ″ height= 」 100 ″ >

</canvas>

39. 除了 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. 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. HTML5 中如何嵌入音頻？

HTML5 支持 MP3 、 Wav 和 Ogg 格式的音頻，下面是在網頁中嵌入音頻的簡單示例：

<audio controls>

<source src=」 jamshed.mp3 ″ type= 」 audio/mpeg 」 >

Your browser does’ nt support audio embedding feature.

</audio>

42. 新的 HTML5 文檔類型和字符集是？

HTML5 文檔類型很簡單：

<!doctype html>

HTML5 使用 UTF-8 編碼示例：

<meta charset=」 UTF-8 ″ >

43. 解釋一下CSS的盒子模型？

回答一： 
a、標準的css盒子模型：寬度=內容的寬度+邊框的寬度+加上內邊框的寬度
b、網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具有這些屬性。
c、這些屬性咱們能夠把它轉移到咱們平常生活中的盒子（箱子）上來理解，平常生活中所見的盒子也就是能裝東西的一種箱子，也具備這些屬性，因此叫它盒子模式。CSS盒子模型就是在網頁設計中常常用到的CSS技術所使用的一種思惟模型。

回答二：

標準的盒模型：width = content
IE盒模型：width = content+padding-Left+padding-right+border-left + border-right

44. 請你說說CSS選擇器的類型有哪些，並舉幾個例子說明其用法？

類型：基礎的選擇器、組合選擇器、屬性選擇器、僞類、僞元素

基礎的選擇器

組合選擇器

屬性選擇器

僞類

a:link {color: #FF0000} /* 未訪問的連接 */
a:visited {color: #00FF00} /* 已訪問的連接 */
a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
a:active {color: #0000FF} /* 選定的連接 */
l-v-h-a
提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。
提示：在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。

僞元素