HTML5 CSS3面試題

時間 2019-11-10

標籤 html5 html css3 css 面試欄目 HTML5 简体版

原文原文鏈接

一.CSS3有哪些新特性？css

1. CSS3實現圓角（border-radius），陰影（box-shadow），html

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）前端

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜html5

4. 增長了更多的CSS選擇器多背景 rgbaweb

5. 在CSS3中惟一引入的僞元素是 ::selection.算法

6. 媒體查詢，多欄佈局canvas

@media screen and (max-width: 300px) {
    body {
         margin: 0px; padding: 0px; color: rgb(170, 17, 17); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px;">lightblue;
    }
}跨域

7. border-image瀏覽器

二. 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新標籤：

1. IE8/IE7/IE6支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式（固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

<!--[if lt IE 9]>

<![endif]-->

如何區分HTML和HTML5：

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

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

Cookies:服務器和客戶端均可以訪問；大小隻有4KB左右；有有效期，過時後將會刪除；

本地存儲：只有本地瀏覽器端可訪問數據，服務器不能訪問本地存儲直到故意經過POST或者GET的通道發送到服務器；每一個域5MB；沒有過時數據，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除

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

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

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

文件合併

文件最小化/文件壓縮

使用CDN託管

緩存的使用

什麼是響應式設計？

它是關於網頁製做的過程當中讓不一樣的設備有不一樣的尺寸和不一樣的功能。響應式設計是讓全部的人能在這些設備上讓網站運行正常。

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

答：HTML5文檔類型：<!doctype html>

　　HTML5使用的編碼<meta charset=」UTF-8」>

HTML5 Canvas 元素有什麼用？

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

HTML5 存儲類型有什麼區別？

答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

用H5+CSS3解決下導航欄最後一項掉下來的問題

CSS3新增僞類有那些？

　　p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

　　p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

　　p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

　　p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

　　p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

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

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

請用CSS實現：一個矩形內容，有投影，有圓角，hover狀態慢慢變透明。

css屬性的熟練程度和實踐經驗

描述下CSS3裏實現元素動畫的方法

動畫相關屬性的熟悉程度

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

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，地理定位等功能的增長。

* 繪畫 canvas 元素

用於媒介回放的 video 和 audio 元素

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

sessionStorage 的數據在瀏覽器關閉後自動刪除

語意化更好的內容元素，好比 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

CSS3實現圓角，陰影，對文字加特效，增長了更多的CSS選擇器多背景 rgba

新的技術webworker, websockt, Geolocation

移除的元素

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

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

* 是IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<![endif]-->

你怎麼來實現頁面設計圖，你認爲前端應該如何高質量完成工做? 一個滿屏品字佈局如何設計?

* 首先劃分紅頭部、body、腳部；。。。。。

* 實現效果圖是最基本的工做，精確到2px；

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

作好的頁面結構，頁面重構和用戶體驗

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

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

你能描述一下漸進加強和優雅降級之間的不一樣嗎?

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

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

　　區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。　

　　「優雅降級」觀點

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

　　在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。

　　「漸進加強」觀點

　　「漸進加強」觀點則認爲應關注於內容自己。

　　內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。

　　那麼問題了。如今產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了不少圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？

爲何利用多個域名來存儲網站資源會更有效？

CDN緩存更方便

突破瀏覽器併發限制

節約cookie帶寬

節約主域名的鏈接數，優化頁面響應速度

防止沒必要要的安全問題

請談一下你對網頁標準和標準制定機構重要性的理解。

　　（無標準答案）網頁標準和標準制定機構都是爲了能讓web發展的更‘健康’，開發者遵循統一的標準，下降開發難度，開發成本，SEO也會更好作，也不會由於濫用代碼致使各類BUG、安全問題，最終提升網站易用性。

請描述一下cookies，sessionStorage和localStorage的區別？　　

　　sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

web storage和cookie的區別

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生。

知道css有個content屬性嗎？有什麼做用？有什麼應用？

知道。css的content屬性專門應用在 before/after 僞元素上，用來插入生成內容。最多見的應用是利用僞類清除浮動。

//一種常見利用僞類清除浮動的代碼

.clearfix:after {

content:"."; //這裏利用到了content屬性

display:block;

height:0;

visibility:hidden;

clear:both; }

.clearfix {

*zoom:1;

}

after僞元素經過 content 在元素的後面生成了內容爲一個點的塊級素，再利用clear:both清除浮動。

　　那麼問題繼續還有，知道css計數器（序列數字字符自動遞增）嗎？如何經過css content屬性實現css計數器？

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

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

HTML 5 包含嵌入音頻文件的標準方式，支持的格式包括 MP三、Wav 和 Ogg：

Your browser does'nt support audio embedding feature.

</audio>

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

和音頻同樣，HTML5 定義了嵌入視頻的標準方法，支持的格式包括：MP四、WebM 和 Ogg：

Your browser does'nt support video embedding feature.

</video>

HTML5 引入什麼新的表單屬性？

Datalist datetime output keygen date month week time number range emailurl

HTML5 爲何只須要寫 <!DOCTYPE HTML>？
答案解析：
HTML5不基於SGML，所以不須要對DTD進行引用，可是須要DOCTYPE來規範瀏覽器的行爲（讓瀏覽器按照他們應該的方式來運行）而HTML4.01基於SGML，因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

CSS3新增僞類有那些？

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

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

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

(寫)描述一段語義的html代碼吧。

（HTML5中新增長的不少標籤（如：<article>、<nav>、<header>和<footer>等）

就是基於語義化設計原則）

< div id="header">

< h1>標題< /h1>

< h2>專一Web前端技術< /h2>

< /div>

語義 HTML 具備如下特性：

文字包裹在元素中，用以反映內容。例如：

段落包含在 <p> 元素中。

順序表包含在<ol>元素中。

從其餘來源引用的大型文字塊包含在<blockquote>元素中。

HTML 元素不能用做語義用途之外的其餘目的。例如：

<h1>包含標題，但並不是用於放大文本。

<blockquote>包含大段引述，但並不是用於文本縮進。

空白段落元素 ( <p></p> ) 並不是用於跳行。

文本並不直接包含任何樣式信息。例如：

不使用 <font> 或 <center> 等格式標記。

類或 ID 中不引用顏色或位置。

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

sessionStorage和localStorage的存儲空間更大；

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

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

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

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

* 繪畫 canvas

用於媒介回放的 video 和 audio 元素

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

sessionStorage 的數據在瀏覽器關閉後自動刪除

語意化更好的內容元素，好比 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

新的技術webworker, websockt, Geolocation

* 移除的元素

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

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

支持HTML5新標籤：

* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<![endif]-->

如何實現瀏覽器內多個標籤頁之間的通訊？
答案解析：
調用localstorge、cookies等本地存儲方式

如何區分： DOCTYPE聲明\新增的結構元素\功能元素

答案解析：
1）用正確的標籤作正確的事情；
2）html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
3）在沒有樣式 CSS 狀況下也以一種文檔格式顯示，而且是容易閱讀的；
4）搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利用 SEO ；
5）使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3 新增僞類有哪些？
答案解析：
1）id 選擇器（#myid）
2）類選擇器（.myclassname）
3）標籤選擇器（div，h1，p）
4）相鄰選擇器（h1 + p）
5）子選擇器（ul > li）
6）後代選擇器（li a）
7）通配符選擇器（* ）
8）屬性選擇器（ a[rel = "external"]）
9）僞類選擇器（a: hover, li: nth - child）

可繼承的樣式： font-size font-family color, UL LI DL DD DT

不可繼承的樣式：border padding margin width height

優先級就近原則，同權重狀況下樣式定義最近者爲準

CSS3新增僞類舉例：
答案解析：
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素；
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素；
p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素；
p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素；
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素；
:enabled  :disabled 控制表單控件的禁用狀態；
:checked        單選框或複選框被選中。

什麼是盒子模型？

答案解析：

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一塊兒構成了css中元素的盒模型。

簡述同步和異步的區別

答案解析：

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；

異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

簡述一下src與href的區別

答案解析：

href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

語義化的理解？

用正確的標籤作正確的事情！

html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；

在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。

搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。

使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

HTML5的離線儲存？

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

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

寫出HTML5的文檔聲明方式

HTML5和CSS3的新標籤

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