2021年HTML5+CSS3面試題大全
時間：2023-09-15 01:30:01 | 來源：網(wǎng)站運營
時間：2023-09-15 01:30:01 來源：網(wǎng)站運營
2021年HTML5+CSS3面試題大全：
學以致用：HTML5專區(qū)
CSS3專區(qū)
HTML5 CSS3
1.CSS3有哪些新特性？
（1）. CSS3實現(xiàn)圓角（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新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
2.1.新特性：
（1）. 拖拽釋放(Drag and drop) API
（2）. 語義化更好的內(nèi)容標簽（header,nav,footer,aside,article,section）
（3）. 音頻、視頻API(audio,video)
（4）. 畫布(Canvas) API
（5）. 地理(Geolocation) API
（6）. 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失；
（7）. sessionStorage 的數(shù)據(jù)在瀏覽器關閉后自動刪除
（8）. 表單控件，calendar、date、time、email、url、search
（9）. 新的技術webworker, websocket, Geolocation
2.2.移除的元素：
（1）. 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
（2）. 對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；
2.3.支持HTML5新標簽：
IE8/IE7/IE6支持通過 document.createElement 方法產(chǎn)生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式（當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：
<!--[if lt IE 9]><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script><![endif]-->2.4.如何區(qū)分：
DOCTYPE聲明新增的結構元素、功能元素
3.本地存儲（Local Storage ）和cookies（儲存在用戶本地終端上的數(shù)據(jù)）之間的區(qū)別是什么？
Cookies:服務器和客戶端都可以訪問；大小只有4KB左右；有有效期，過期后將會刪除；
本地存儲：只有本地瀏覽器端可訪問數(shù)據(jù)，服務器不能訪問本地存儲直到故意通過POST或者GET的通道發(fā)送到服務器；每個域5MB；沒有過期數(shù)據(jù)，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除
4.如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信?
調用 localstorge、cookies 等本地存儲方式
5.你如何對網(wǎng)站的文件和資源進行優(yōu)化？
文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用
6.什么是響應式設計？
它是關于網(wǎng)頁制作的過程中讓不同的設備有不同的尺寸和不同的功能。響應式設計是讓所有的人能在這些設備上讓網(wǎng)站運行正常
7.新的 HTML5 文檔類型和字符集是？
HTML5文檔類型：<!doctype html>
HTML5使用的編碼<meta charset=”UTF-8”>
8.HTML5 Canvas 元素有什么用？
Canvas 元素用于在網(wǎng)頁上繪制圖形，該元素標簽強大之處在于可以直接在 HTML 上進行圖形操作。
9.HTML5 存儲類型有什么區(qū)別？
Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API
10.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 控制表單控件的禁用狀態(tài)。
:checked，單選框或復選框被選中。
11.html5/CSS3有哪些新特性、移除了那些元素？
11.1繪畫 canvas 元素
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關閉后自動刪除
語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
CSS3實現(xiàn)圓角，陰影，對文字加特效，增加了更多的CSS選擇器 多背景 rgba
新的技術webworker, websockt, Geolocation
11.2移除的元素
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；
* 是IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式：
* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script><![endif]-->12.你怎么來實現(xiàn)頁面設計圖，你認為前端應該如何高質量完成工作? 一個滿屏 品 字布局 如何設計?
* 首先劃分成頭部、body、腳部；。。。。。
* 實現(xiàn)效果圖是最基本的工作，精確到2px；
與設計師，產(chǎn)品經(jīng)理的溝通和項目的參與
做好的頁面結構，頁面重構和用戶體驗
處理hack，兼容、寫出優(yōu)美的代碼格式
針對服務器的優(yōu)化、擁抱 HTML5。
你能描述一下漸進增強和優(yōu)雅降級之間的不同嗎?
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區(qū)別：優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非?；A的，能夠起作用的版本開始，并不斷擴充，以適應未來環(huán)境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶?！?br>
“優(yōu)雅降級”觀點
“優(yōu)雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網(wǎng)站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點
“漸進增強”觀點則認為應關注于內(nèi)容本身。
內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至會包含以上的種種，但相同點是它們?nèi)忌婕暗絻?nèi)容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
那么問題了。現(xiàn)在產(chǎn)品經(jīng)理看到IE6,7,8網(wǎng)頁效果相對高版本現(xiàn)代瀏覽器少了很多圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？
13.為什么利用多個域名來存儲網(wǎng)站資源會更有效？
CDN緩存更方便
突破瀏覽器并發(fā)限制
節(jié)約cookie帶寬
節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應速度
防止不必要的安全問題
14.請談一下你對網(wǎng)頁標準和標準制定機構重要性的理解。
?。o標準答案）網(wǎng)頁標準和標準制定機構都是為了能讓web發(fā)展的更‘健康’，開發(fā)者遵循統(tǒng)一的標準，降低開發(fā)難度，開發(fā)成本，SEO也會更好做，也不會因為濫用代碼導致各種BUG、安全問題，最終提高網(wǎng)站易用性。
請描述一下cookies，sessionStorage和localStorage的區(qū)別？
sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的。
15.web storage和cookie的區(qū)別
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生。
16.知道css有個content屬性嗎？有什么作用？有什么應用？
知道。css的content屬性專門應用在 before/after 偽元素上，用來插入生成內(nèi)容。最常見的應用是利用偽類清除浮動。
//一種常見利用偽類清除浮動的代碼.clearfix:after { content:"."; //這里利用到了content屬性 display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1;}after偽元素通過 content 在元素的后面生成了內(nèi)容為一個點的塊級素，再利用clear:both清除浮動。
17.那么問題繼續(xù)還有，知道css計數(shù)器（序列數(shù)字字符自動遞增）嗎？如何通過css content屬性實現(xiàn)css計數(shù)器？
css計數(shù)器是通過設置counter-reset 、counter-increment 兩個屬性 、及 counter()/counters()一個方法配合after / before 偽類實現(xiàn)。
如何在 HTML5 頁面中嵌入音頻?
HTML 5 包含嵌入音頻文件的標準方式，支持的格式包括 MP3、Wav 和 Ogg：
<audio controls> <source src="jamshed.mp3" type="audio/mpeg"> Your browser does'nt support audio embedding feature. </audio>18.如何在 HTML5 頁面中嵌入視頻？
和音頻一樣，HTML5 定義了嵌入視頻的標準方法，支持的格式包括：MP4、WebM 和 Ogg：
<video width="450" height="340" controls> <source src="jamshed.mp4" type="video/mp4"> Your browser does'nt support video embedding feature. </video> 19.HTML5 引入什么新的表單屬性？
Datalist datetime output keygen date month week time number range emailurl
20.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 控制表單控件的禁用狀態(tài)。
:checked，單選框或復選框被選中。
21.(寫)描述一段語義的html代碼吧。
（HTML5中新增加的很多標簽（如：<article>、<nav>、<header>和<footer>等）
就是基于語義化設計原則）
< div id="header">
< h1>標題< /h1>
< h2>專注Web前端技術< /h2>
< /div>
語義 HTML 具有以下特性：
文字包裹在元素中，用以反映內(nèi)容。例如：
段落包含在 <p> 元素中。
順序表包含在<ol>元素中。
從其他來源引用的大型文字塊包含在<blockquote>元素中。
HTML 元素不能用作語義用途以外的其他目的。例如：
<h1>包含標題，但并非用于放大文本。
<blockquote>包含大段引述，但并非用于文本縮進。
空白段落元素 ( <p></p> ) 并非用于跳行。
文本并不直接包含任何樣式信息。例如：
不使用 <font> 或 <center> 等格式標記。
類或 ID 中不引用顏色或位置。
22.cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage區(qū)別
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；
23.html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
* 繪畫 canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關閉后自動刪除
語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
新的技術webworker, websockt, Geolocation
* 移除的元素
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；
支持HTML5新標簽：
* IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式：
* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script><![endif]-->24.如何區(qū)分： DOCTYPE聲明/新增的結構元素/功能元素
語義化的理解？
用正確的標簽做正確的事情！
html語義化就是讓頁面的內(nèi)容結構化，便于對瀏覽器、搜索引擎解析；
在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。
搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于 SEO。
使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。
25.HTML5的離線儲存？
localStorage 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失；
sessionStorage 數(shù)據(jù)在瀏覽器關閉后自動刪除。
26.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...;
在線咨詢
