web前端的學習旅程一之HTML

1.  主流的瀏覽器都有哪些？內核分別是什么？

答：（1）瀏覽器：谷歌（chrome），火狐（Firefox），IE，歐朋（opera），蘋果（safari）

（2）內 核：blink(谷歌/歐朋)，gecko（火狐），trident（IE），webkit（蘋果）

注：(1)2013年4月3日，谷歌對外宣布，停止使用webkit作為chrome瀏覽器的渲染引擎，但是webkit并不會被馬上淘汰，而是作為全新渲染引擎”blink”的后臺技術。Blink對于webkit來說，精簡了代碼，在針對DOM框架上更友善，安全性也有所提升。（webkit由谷歌，蘋果，Adobe共同開發推動，blink是webkit的升級版）

(2)瀏覽器內核分為兩個部分：1渲染引擎：負責生成DOM樹，render，repaint等工作；2js引擎：負責js的解釋執行。（渲染引擎是兼容性出現的根本原因）。

2.  前端頁面由哪三層構成？其作用分別是什么？

答：（1）結構層（html/超文本標記語言）：從語義的角度搭建網頁結構；

（2）表示層（css/層疊式樣式表）： 從裝飾的角度美化頁面；

（3）行為層（javascript）：從交互的角度描述我們的頁面行為。

注：什么是web語義化：用含有語義的標簽來描述頁面結構。

3.  為什么要語義化？基于此，在寫頁面結構的時候要注意什么？

答：3.1(1)在沒有css代碼時也可呈現出很好的內容結構，代碼結構清晰既可以提高用戶體驗，也更方便機器讀懂代碼；

(2)方便其他設備解析（如屏幕閱讀器、盲人閱讀器等以語義的方式渲染頁面；

(3)利于SEO優化，語義能和搜索引擎建立良好的聯系，有利于爬蟲獲取信息；

4)便于團隊開發和維護（可以讓開發者快速的熟悉代碼，使得工作交接更方便），語義化更具有可讀性（遵循W3C標準規范化）；

3.2

(1)盡可能少的使用沒有語義的（如div）元素;

(2)在對語義要求不明顯時，盡量使用有語義的標簽（div和p時，盡量使用p，因為p有默認樣式，可以兼容不同終端）;

(3)不要使用純樣式標簽（如b，font等），要用css設置樣式;

(4)使用表格時，標題要用caption，表頭thead，等;

4.  Html5骨架

gbk(中文)-->

web前端

注：html版本：(1)strict：嚴格版，不允許使用廢棄標簽;

(2)transitional：過度版，可以使用一些廢棄標簽b,u,i來制作css里的鉤子 (標簽必須小寫，屬性值必須用雙引號包裹，結束標簽必須有”/”);

(3)frameset:框架 。

5.  DOCTYPE是什么，有什么作用？

答：(1)DOCTYPE：Document Type Declaration（文檔類型聲明，縮寫 DTD）。一般位于一個HTML文檔的最前面（根元素的起始標簽）之前。(2)用來確定當前文檔的類型，以決定需要采用的渲染模式（不同的渲染模式會影響到瀏覽器對于css甚至jsjavaScript腳本的解析）。DOCTYPE不存在或形式不正確會導致HTML文檔以混雜模式呈現(混雜模式不可取，完全沒有兼容可言)。

6.   HTML5為什么只需要寫 ？

答：(1)HTML5不基于SGML（Standard Generalized Markup Language 標準通用標記語言），因此不需要對DTD（DTD 文檔類型定義）進行引用，但是需要DOCTYPE來規范瀏覽器行為。

(2)HTML4.01基于SGML，所以需要引用DTD。才能告知瀏覽器文檔所使用的文檔類型，如下：

7.  HTML5有哪些新特性,移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？

答：新增元素：

(1)canvas

(2)用于媒介回放的video和audio元素

(3)本地離線存儲。localStorage長期存儲數據，瀏覽器關閉后數據不丟失;sessionStorage的數據在瀏覽器關閉后自動刪除

(4)語意化更好的內容元素，比如 article footer header nav section

(5)位置API：Geolocation

(6)表單控件，calendar date time email url search

(7)新的技術：web worker(web worker是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續做任何愿意做的事情：點擊、選取內容等等，而此時 web worker 在后臺運行) web socket

(8)拖放API：drag、drop

移除的元素：

純表現的元素：basefont 、big 、center 、font 、s 、strike、tt、u

性能較差元素：frame、 frameset 、noframes

8.關于meta標簽的seo優化：

答：(1)    查找關鍵字：

(2)    網頁描述：