【前端領域高頻筆試面試】—— Html5+CSS3相關

目錄

1.CSS3有哪些新特性？

2.html5有哪些新特性、移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

3.本地存儲（Local Storage ）和cookies（儲存在用戶本地終端上的數據）之間的區別是什么？

4.如何實現瀏覽器內多個標簽頁之間的通信?

5.你如何對網站的文件和資源進行優化？

6.什么是響應式設計？

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

8.HTML5 Canvas 元素有什么用？

9.CSS3新增偽類有哪些？

10.你怎么來實現頁面設計圖，你認為前端應該如何高質量完成工作? 一個滿屏 品 字布局如何設計?

11.描述一下漸進增強和優雅降級之間的不同

12.為什么利用多個域名來存儲網站資源會更有效？

13.css有個content屬性，有什么作用？有什么應用？

14.如何在HTML5頁面中嵌入音頻?

15.如何在HTML5頁面中嵌入視頻？

16.cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage區別

17.HTML5的離線儲存指

18.HTML5和CSS3的新標簽

19.描述一段語義的html代碼

20.自己對標簽語義化的理解

1.CSS3有哪些新特性？

（1）CSS3實現圓角(border-radius)，陰影(box-shadow)；

（2）對文字加特效(text-shadow)，線性漸變(gradient)、旋轉(transform)；

（3）transform:rotate(9deg)、scale(0.85,0.90)、translate(0px,-30px)、skew(-9deg,0deg)；旋轉,縮放,定位,傾斜；

（4）增加了更多的CSS選擇器、多背景、rgba；

（5）在CSS3中唯一引入的偽元素是::selection；

（6）媒體查詢，多欄布局；

（7）border-image。

2.html5有哪些新特性、移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

新特性：

（1）拖拽釋放(Drag and drop) API；

（2）語義化更好的內容標簽（header,nav,footer,aside,article,section）；

（3）音頻、視頻API(audio,video)；

（4）畫布(Canvas) API；

（5）地理(Geolocation) API；

（6）本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；

（7）sessionStorage 的數據在瀏覽器關閉后自動刪除；

（8）表單控件calendar、date、time、email、url、search；

（9）新的技術webworker, websocket, Geolocation。

移除的元素：

（1）純表現的元素：basefont，big，center，font, s，strike，tt，u；

（2）對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標簽：

IE8/IE7/IE6都支持通過 document.createElement 方法產生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式（當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架。

如何區分：

通過DOCTYPE聲明新增的結構元素、功能元素。

3.本地存儲（Local Storage ）和cookies（儲存在用戶本地終端上的數據）之間的區別是什么？

Cookies：服務器和客戶端都可以訪問，大小只有4KB左右，有效期過期后將會刪除；

Local Storage：只有本地瀏覽器端可訪問數據，服務器不能訪問本地存儲，除非通過POST或者GET的通道發送到服務器，每個域5MB。

4.如何實現瀏覽器內多個標簽頁之間的通信?

調用localstorge、cookies等本地存儲方式。

5.你如何對網站的文件和資源進行優化？

（1）文件合并；

（2）文件最小化/文件壓縮；

（3）使用CDN托管；

（4）緩存的使用。

6.什么是響應式設計？

它是關于網頁制作的過程中讓不同的設備有不同的尺寸和不同的功能，響應式設計是讓網站在所有的在設備上都能運行正常。

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

HTML5文檔類型為

HTML5使用的編碼為

8.HTML5 Canvas 元素有什么用？

Canvas元素用于在網頁上繪制圖形，該元素標簽強大之處在于可以直接在HTML上進行圖形操作。

9.CSS3新增偽類有哪些？

p:first-of-type 選擇屬于其父元素的首個

元素的每個

元素。

p:last-of-type ?選擇屬于其父元素的最后

元素的每個

元素。

p:only-of-type ?選擇屬于其父元素唯一的

元素的每個

元素。

p:only-child ? ?選擇屬于其父元素的唯一子元素的每個

元素。

p:nth-child(2) ?選擇屬于其父元素的第二個子元素的每個

元素。

:enabled、:disabled 控制表單控件的禁用狀態。

:checked，單選框或復選框被選中。

10.你怎么來實現頁面設計圖，你認為前端應該如何高質量完成工作? 一個滿屏 品 字布局如何設計?

（1）首先劃分成頭部、body、腳部；

（2）實現效果圖是最基本的工作，精確到2px；

（3）與設計師，產品經理的溝通和項目的參與；

（4）做好的頁面結構，頁面重構和用戶體驗；

（5）處理hack，兼容、寫出優美的代碼格式；

（6）針對服務器的優化、擁抱HTML5。

11.描述一下漸進增強和優雅降級之間的不同

漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。

“優雅降級”觀點

“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。

在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。

“漸進增強”觀點

“漸進增強”觀點則認為應關注于內容本身。內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

12.為什么利用多個域名來存儲網站資源會更有效？

（1）CDN緩存更方便；

（2）突破瀏覽器并發限制；

（3）節約cookie帶寬；

（4）節約主域名的連接數，優化頁面響應速度；

（5）防止不必要的安全問題。

13.css有個content屬性，有什么作用？有什么應用？

css的content屬性專門應用在before/after偽元素上，用來插入生成內容，最常見的應用是利用偽類清除浮動，如下：

after偽元素通過content在元素的后面生成了內容為一個點的塊級素，再利用clear:both來清除浮動。

補充：如何通過css content屬性實現css計數器？

css計數器是通過設置counter-reset、counter-increment兩個屬性 、及 counter()/counters()一個方法配合after / before偽類實現。

14.如何在HTML5頁面中嵌入音頻?

HTML5包含嵌入音頻文件的標準方式，支持的格式包括MP3、Wav和Ogg：

15.如何在HTML5頁面中嵌入視頻？

和音頻一樣，HTM5定義了嵌入視頻的標準方法，支持的格式包括：MP4、WebM和Ogg：

16.cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage區別

sessionStorage和localStorage的存儲空間更大；

sessionStorage和localStorage有更多豐富易用的接口；

sessionStorage和localStorage各自獨立的存儲空間。

17.HTML5的離線儲存指

localStorage，長期存儲數據，瀏覽器關閉后數據不丟失；

sessionStorage，數據在瀏覽器關閉后自動刪除。

18.HTML5和CSS3的新標簽

HTML5：nav, footer, header, section, hgroup, video, time, canvas, audio...

CSS3：rgba, opacity, text-shadow, box-shadow, border-radius, border-image,

border-color, transform...;

19.描述一段語義的html代碼

HTML5中新增加的很多標簽如：