HTML5與CSS基礎知識點（一）

1.瀏覽器頁面有哪三層構成，分別是什麼，做用是什麼？ 答：構成：結構層、表示層、行爲層； 分別是：HTML、CSS、Javascript 做用：HTML實現頁面結構，CSS完成頁面的表現與風格，Javascript實現一些客戶端的功能與業務。 2.HTML5的優勢與缺點？ 答：優勢：①網絡標準統1、H5自己是有W3C推薦出來的； ②多設備、跨平臺； ③即時更新； ④提升可用性和改進用戶的友好體驗； ⑤有幾個新的標籤，有助於開發人員定義重要的內容； ⑥能夠給站點帶來更多的多媒體元素（視頻和音頻）； ⑦能夠很好的代替Flash和Silverlight； ⑧涉及到網站的抓取和索引的時候，對於SEO很友好； ⑨被大量應用於移動應用程序和遊戲。 缺點：①安全：像以前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket這樣的功能很容易被黑客利用，來盜取用戶的信息和資料； ②完善性：許多特性個瀏覽器的支持程度不同； ③技術門檻：H5簡化開發者工做的同時表明了有許多新的屬性和API須要開發者學習，像web worker、web socket、web storage等新特性，後臺甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰； ④性能：某些品臺上的引擎問題致使H5性能低下； ⑤瀏覽器兼容性：最大缺點，IE9如下瀏覽器全軍覆沒。 3.Doctype做用？嚴格模式與混雜模式如何區分？它們有何意義？ 答：（1）聲明位於文檔中的最前面，處於標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。 （2）嚴格模式的排版和JS運做模式是以核瀏覽器支持的最高標準運行。 （3）在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。 （4）DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。 4.HTML5有哪些新特性、移除了哪些元素？ 答：H5新增了27個元素，廢棄了16個元素，根據現有的標準規範，把H5的元素按優先級定義爲結構性屬性、級塊性元素、行內語義性元素和交互性元素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：視頻元素，用於支持和實現視頻文件的直接播放，支持緩衝預載和多種視頻媒體格式。 autio: 音頻元素，用於支持和實現音頻文件的直接播放，支持緩衝預載和多種視頻媒體格式。 交互性元素主要用於功能性的內容表達，會有必定的內容和數據的關聯，是各類事件的基礎。 details：用來表示一段具體的內容，可是內容默承認能不顯示，經過某種手段（如單擊）與legend交互纔會顯示出來。 datagrid：用來控制客戶端數據與顯示，能夠由動態腳本及時更新。 menu：主要用於交互菜單（曾被廢棄又被從新啓用的元素）。 commend: 用來處理命令按鈕。 5.你作網頁在哪些瀏覽器測試過，這些瀏覽器的內核分別是什麼？ 答：IE: trident內核； Firefox: gecko內核； Safari: webkit內核； Opera: 之前是presto內核，Opera現已改用Google Chrome的Blink內核； Chrome: Blink（基於webkit,Google與Opera Software共同開發） 6.Doctype是幹什麼的？ 答：聲明位於文檔中的最前面的位置，在標籤以前。告知瀏覽器文檔使用哪些HTML或XHTML規範。 7.說說你對H5的認識？（是什麼？爲何？） 答：（是什麼）HTML5指的是包括HTML、CSS和JavaScript在內的一套技術組合。它但願可以減小網頁瀏覽器對於須要插件的豐富性網絡應用服務（RIA），H5是HTML最新版本，2014年10月由萬維網聯盟完成標準制定。目標是替換1999年所制定的HTML4.01和XHTML1.0標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到匹配當代的網絡需求。 （爲何）HTML4陳舊不能知足日益發展的互聯網須要，特別是移動互聯網。H5加強了瀏覽器的原生功能，符合H5規範的瀏覽器功能將更增強大，減小了Web應用對插件的依賴，讓用戶體驗更好，讓開發更加方便。 8.對WEB標準以及W3C的理解與認識？ 答：標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率，使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性。 9.H5行內元素有哪些，塊級元素有哪些，空元素有哪些？ 答：（1）行內元素 a--錨點 abbr--縮寫 acronym--首字母 b--粗體 big--大字體 br--換行 cite--引用 code--代碼 dfn--定義字段 em--強調 font--字體 i--斜體 img--圖片 input--輸入框 kbd--定義鍵盤文本 label--表格標籤 q--短引用 s--中劃線 samp--定義範例計算機代碼 span--內聯容器，定義文本內區塊 select--項目選擇 small--小字體 strike--中劃線 strong--粗體強調 sub--下標 sup--上標 textarea--多行文本輸入框 tt--電傳文本 u--下劃線 var--定義變量 （2）塊元素 address--地址 blockquote--塊引用 center--居中對齊塊 dir--目錄列表 div--塊級主要標籤 dl--定義列表 fieldset--form控制組 form--交互表單 h1,h2,h3,h4,h5,h6--各級標題 hr--水平分割線 menu--菜單列表 ol--排序列表 p--段落 pre--格式化文本 table--表格 ul--非排序列表 （3）可變元素 button--按鈕 del--刪除文本 iframe--inline frame ins--插入的文本 map--圖片區塊 object--object對象 script--客戶端腳本 （4）空元素
換行

---

分割線 文本框等 圖片 10.什麼是WebGL,它有什麼優勢？ 答：WebGL是一種3D繪圖標準，這種繪圖技術標準容許JavaScript和OpenGL ES2.0結合在一塊兒，經過增長OpenGL ES2.0的一個JavaScript綁定，WebGL能夠爲HTML5Canvas提供硬件3D加速渲染，這樣Web開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地顯示3D場景和模型了，還能建立複雜的導航和數據視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用於建立具備複雜3D結構的網站頁面，甚至能夠用來設計3D網頁遊戲等等。 WebGL完美地解決了現有的Web交互式三維動畫的兩個問題： 第一，它經過HTML腳本自己實現Web交互式三維動畫的製做，無需任何瀏覽器插件支持； 第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是經過統一的、標準的、跨平臺的OpenGL接口實現的。 通俗說WebGL中canvas繪圖中的3D版本。由於原生的WebGL很複雜，咱們常常會使用一些三方的庫，這些庫多數用於H5遊戲開發。 11.請描述一下cookies,sessionStorage和localStorage的區別？ 答：sessionStorage和localStorage是HTML5 Web Storage API提供的，能夠方便的在web請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。 sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage的概念很特別，引入了一個「瀏覽器窗口的概念」。sessionStorage是在同源的同學口中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。關閉窗口後，sessionStorage即被銷燬。同時「獨立」打開的不一樣窗口，即便是同一頁面，sessionStorage對象也是不一樣的。 cookies會發送到服務器端，其他兩個不會。 12.說說你對HTML語義化的理解？ 答：（1）什麼是HTML語義化？ 根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。 （2）爲何要語義化？ ①爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構； ②用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤活用； ③有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重； ④方便其餘設備解析以意義的方式來渲染網頁； ⑤便於團隊開發和維護，語義化更具可讀性，是下一步網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。 （3）語義化標籤 ：內容部分 :附屬部分 ：媒體元素，好比一些視頻、圖片等 ：選項列表，與input元素配合使用，來定義input可能的值。 ：用於描述文檔或者文檔某個部分的細節，默認屬性爲open。 13.link和@import的區別？ 答：寫法上： 二者都是外部引用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可縮放矢量圖形是基於可擴展標記語言（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全局屬性有哪些？ 答：accesskey：規定激活元素的快捷鍵； class：規定元素的一個或多個類名； contenteditable：規定元素內容是否可編輯； contextmenu：規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示； data-*：用於存儲頁面或應用程序的私有定製數據； dir：規定元素中內容的文本方向； draggable：規定元素是否可拖動。 dropzone：規定在拖動被拖動數據時是否進行復制、移動或連接。 hidden：樣式上致使元素不顯示，可是不能用這個屬性實現樣式； id：規定元素的惟一id； lang：規定元素內容的語言； spellcheck：規定是否對元素進行拼寫和語法檢查； style：規定元素的CSS行內元素； tabindex：規定元素的tab鍵次序； title：規定有關元素的額外信息； translate：規定是否應該翻譯元素內容。 16.說說超連接target屬性的取值和做用？ 答：target這個屬性制定所連接的頁面在瀏覽器窗口中的打開方式。 它的參數值主要有： _blank：在新瀏覽器窗口中打開連接文件； _parent：將連接的文件載入含有該連接框架的父框架集或父窗口中。若是還有該連接的框架不是嵌套的，則在瀏覽器全屏窗口中載入連接的文件，就像_self參數一； _self：在同一框架或窗口中打開所連接的文檔。此參數爲默認值，一般不用指定。 _top：在當前的整個瀏覽器窗口打開所連接的文檔，於是會刪除全部框架。 17.介紹一下你對瀏覽器內核的理解？ 答：主要分紅兩部分：渲染引擎和JS引擎。 渲染引擎：負責取得網頁的內容、整理訊息，以及計算網頁的顯示方式，而後會輸出顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其餘須要編輯、顯示網絡內容的應用程序都須要內核。 JS引擎：解析和執行javascript來實現網頁的動態效果。 最開始二者並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於指渲染引擎。 18.常見的瀏覽器內核有哪些？ 答：Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。 Gecko內核：Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等 Presto內核：Opera7及以上。（Operan內核原來使用的，現爲：Blink） Webkit內核：Safari,Chrome等。（Chrome:Blink,爲Webkit的分支） 19.iframe有哪些缺點？ 答：iframe會阻塞主頁面的Onload事件； 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO； iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好經過javascript。 動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。 20.Label的做用是什麼，是怎麼用的？ 答：label標籤來定義表單控制間的關係，當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。 注意：label的for屬性值要與後面對應的input標籤id屬性值相同。