App下載

html5+css3面試題合集

猿友 2021-01-15 09:58:39 瀏覽數(shù) (2833)
反饋

CSS3 的新特性

1.css3 實(shí)現(xiàn)圓角(border-radius),陰影(box-shadow),邊框圖片(border-image) 

2.對(duì)文字添加特效(text-shadow),線性漸變(gradient),旋轉(zhuǎn)(transform) 

3對(duì)背景圖尺寸修改(background-size) 

4. 增加了更多的CSS選擇器 多背景 rgba 

5. 在 CSS3 中唯一引入的偽元素是 ::selection,用于改變選中文本時(shí),文本的顏色和文本的背景顏色 

6. 媒體查詢,多欄布局

html5有哪些新特性、移除了那些元素?

新特性:

1.拖拽釋放(Drag and drop) API
2.語(yǔ)義化更好的內(nèi)容標(biāo)簽(header,nav,footer,aside,article,section) 

3. 音頻、視頻API(audio,video) 

4. 畫(huà)布(Canvas) API 

5. 地理(Geolocation) API 

6.本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失

7.sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除 

8. 表單控件,calendar、date、time、email、url、search 

9.新的技術(shù) webworker, websocket, Geolocation

移除的元素:

1.純表現(xiàn)的元素:basefont,big,center,font, s,strike,tt,u;

 2.對(duì)可用性產(chǎn)生負(fù)面影響的元素:frame,frameset,noframes;
本地存儲(chǔ)(Local Storage )和cookies(儲(chǔ)存在用戶本地終端上的數(shù)據(jù))之間的區(qū)別是什么?

Cookies:服務(wù)器和客戶端都可以訪問(wèn);大小只有 4KB左右;有有效期,過(guò)期后將會(huì)刪除; 

本地存儲(chǔ):只有本地瀏覽器端可訪問(wèn)數(shù)據(jù),服務(wù)器不能訪問(wèn)本地存儲(chǔ)直到通過(guò) POST 或者 GET 的通道發(fā)送到服務(wù)器;每個(gè)域 5MB;沒(méi)有過(guò)期數(shù)據(jù),它將一直保留直到用戶從瀏覽器清除或者使用 Javascript 代碼移除

如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?

調(diào)用 localstorge、cookies 等本地存儲(chǔ)方式

你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化?

文件合并 文件最小化/文件壓縮 使用CDN托管 緩存的使用


什么是響應(yīng)式設(shè)計(jì)?

它是關(guān)于網(wǎng)頁(yè)制作的過(guò)程中讓不同的設(shè)備有不同的尺寸和不同的功能。響應(yīng)式設(shè)計(jì)是讓所有的人能在這些設(shè)備上讓網(wǎng)站運(yùn)行正常


HTML5 Canvas 元素有什么用?

Canvas 元素用于在網(wǎng)頁(yè)上繪制圖形,該元素標(biāo)簽強(qiáng)大之處在于可以直接在 HTML 上進(jìn)行圖形操作。


請(qǐng)用CSS實(shí)現(xiàn):一個(gè)矩形內(nèi)容,有投影,有圓角,hover狀態(tài)慢慢變透明

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS實(shí)現(xiàn):一個(gè)矩形內(nèi)容,有投影,有圓角,hover狀態(tài)慢慢變透明</title>
  <style>
      body {
          margin: 0;
          padding: 0;
      }
?
      .a {
          width: 200px;
          height: 100px;
          border-radius: 10px;
          box-shadow: 10px 10px 5px #888888;
          background-color: aqua;
          transition: 2s;
      }
?
      .a:hover {
          opacity: 0;
      }
  </style>
</head>
<body>
<div class="a">
</div>
?
</body>
</html>

你怎么來(lái)實(shí)現(xiàn)頁(yè)面設(shè)計(jì)圖,你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作? 一個(gè)滿屏 “品”字布局 如何設(shè)計(jì)?

首先劃分成頭部、body、腳部… 實(shí)現(xiàn)效果圖是最基本的工作,精確到2px; 與設(shè)計(jì)師,產(chǎn)品經(jīng)理的溝通和項(xiàng)目的參與 做好的頁(yè)面結(jié)構(gòu),頁(yè)面重構(gòu)和用戶體驗(yàn) 處理hack,兼容、寫(xiě)出優(yōu)美的代碼格式

描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同

漸進(jìn)增強(qiáng) progressive enhancement:針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面,保證最基本的功能,然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí) graceful degradation:一開(kāi)始就構(gòu)建完整的功能,然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

區(qū)別:優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始,并試圖減少用戶體驗(yàn)的供給,而漸進(jìn)增強(qiáng)則是從一個(gè)非?;A(chǔ)的,能夠起作用的版本開(kāi)始,并不斷擴(kuò)充,以適應(yīng)未來(lái)環(huán)境的需要。降級(jí)(功能衰減)意味著往回看;而漸進(jìn)增強(qiáng)則意味著朝前看,同時(shí)保證其根基處于安全地帶。

為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效?

CDN 緩存更方便

突破瀏覽器并發(fā)限制

節(jié)約 cookie 帶寬

節(jié)約主域名的連接數(shù),優(yōu)化頁(yè)面響應(yīng)速度

防止不必要的安全問(wèn)題

請(qǐng)描述一下 cookies,sessionStorage 和 localStorage 的區(qū)別?    

sessionStorage 用于本地存儲(chǔ)一個(gè)會(huì)話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷(xiāo)毀。因此 sessionStorage 不是一種持久化的本地存儲(chǔ),僅僅是會(huì)話級(jí)別的存儲(chǔ)。而 localStorage 用于持久化的本地存儲(chǔ),除非主動(dòng)刪除數(shù)據(jù),否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的

web storage和cookie的區(qū)別

Web Storage 的概念和 cookie 相似,區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie 的大小是受限的,并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候 Cookie 都會(huì)被發(fā)送過(guò)去,這樣無(wú)形中浪費(fèi)了帶寬,另外 cookie 還需要指定作用域,不可以跨域調(diào)用。

除此之外,Web Storage 擁有 setItem,getItem,removeItem,clear 等方法,不像 cookie 需要前端開(kāi)發(fā)者自己封裝 setCookie,getCookie。但是 Cookie 也是不可或缺的:Cookie 的作用是與服務(wù)器進(jìn)行交互,作為 HTTP 規(guī)范的一部分而存在 ,而 Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。


1 人點(diǎn)贊