web前端面試題整理(HTML篇)

需要web前端課程工具和電子書,可以加: 33羣105601600; 22羣120342833
1. h5的改進:
新元素
畫布canvas: HTML5<canvas> 元素用於圖形的繪製,通過腳本 (通常是JavaScript)來完成
音頻audio
視頻video
語義性: article,  nav,  footer, section, aside, hgroup等.
時間time

新屬性
拖放: draggable  <img draggable="true">
可編輯: contenteditable

新事件
拖放 ondrag ondrop
關閉頁面 onunload
窗口大小改變 onresize
取消了一些元素: font center等
新的DOCTYPE聲明  <!DOCTYPEhtml> 
完全支持CSS3
Video和Audio
2D/3D製圖
本地存儲
本地SQL數據
Web應用


2. 什麼是語義化的html?
what?
根據內容的結構(內容語義化),選擇合適的標籤(代碼語義化)便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

why?
爲了在沒有CSS的情況下,頁面也能呈現出很好地內容結構、代碼結構:爲了裸奔時好看;
用戶體驗:例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用;
有利於SEO:和搜索引擎建立良好溝通,有助於爬蟲抓取更多的有效信息:爬蟲依賴於標籤來確定上下文和各個關鍵字的權重
方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)以意義的方式來渲染網頁;
便於團隊開發和維護,語義化更具可讀性,是下一步吧網頁的重要動向,遵循W3C標準的團隊都遵循這個標準,可以減少差異化。

how?
儘可能少的使用無語義的標籤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關聯起來。


3. 從前端角度出發談談做好seo需要考慮什麼?
語義化html標籤
合理的title, description,keywords;
重要的html代碼放前面
少用iframe, 搜索引擎不會抓取iframe中的內容
圖片加上alt


4. 文檔類型(DOCTYPE)
作用: 
doctype聲明位於文檔中最前面的位置,處於標籤之前,告知瀏覽器使用的是哪種規範。
類型:
三種: Strict、Transitional 以及 Frameset 
如果不聲明: 不寫doctype,瀏覽器會進入quirks mode (混雜模式)。即,如果不聲明doctype,瀏覽器不引入w3c的標準,那麼早期的瀏覽器會按照自己的解析方式渲染頁面。瀏覽器採用自身方式解析頁面的行爲稱爲"quirksmode(混雜模式也稱怪異模式)";採用w3c方式解析就是"strict mode(標準模式)"。如果完全採用strictmode就不會出任何的差錯,但這樣會降低程序的容錯率,加重開發人員的難度

用哪種: 
沒有doctype聲明的採用quirks mode解析
對於有doctype的大多數採用standard mord。

特殊情況:
對於那些瀏覽器不能識別的doctype,瀏覽器採用quirksmode;
沒有聲明DTD或者html版本聲明低於4.0採用quirks mode,其他使用standard mode;
ie6中,如果在doctype聲明前有一個xml聲明(比如:<?xmlversion="1.0" encoding="iso-8859-1"?>),則採用quirks mode解析

標準模式與怪異模式的區別:
標準模式:瀏覽器根據規範呈現頁面
混雜模式(怪異模式):頁面以一種比較寬鬆的兼容方式顯示。
他們最大的不同是對盒模型的解析。
在strict mode中:width是內容寬度,也就是說,元素真正的寬度 = margin-left +border-left-width + padding-left + width + padding-right + border-right- width+  margin-right;
在quirks mode中:width則是元素的實際寬度,內容寬度 = width - (margin-left +margin-right + padding-left + padding-right + border-left-width + border-right-width)


5.使用XHTML的侷限有哪些?
XHTML較爲嚴格,標籤必須閉合,必須要body,head等
如果頁面使用 'application/xhtml+xml' 一些老的瀏覽器並不兼容


6. 如果網頁內容需要多語言,要怎麼做?

採用統一編碼utf-8模式

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章