免費(fèi)AI編程助手
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. 畫布(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ù)器和客戶端都可以訪問；大小只有 4KB左右；有有效期，過期后將會(huì)刪除；
本地存儲(chǔ)：只有本地瀏覽器端可訪問數(shù)據(jù)，服務(wù)器不能訪問本地存儲(chǔ)直到通過 POST 或者 GET 的通道發(fā)送到服務(wù)器；每個(gè)域 5MB；沒有過期數(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è)制作的過程中讓不同的設(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>
你怎么來實(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，兼容、寫出優(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：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。
為什么利用多個(gè)域名來存儲(chǔ)網(wǎng)站資源會(huì)更有效？
CDN 緩存更方便
突破瀏覽器并發(fā)限制
節(jié)約 cookie 帶寬
節(jié)約主域名的連接數(shù)，優(yōu)化頁(yè)面響應(yīng)速度
防止不必要的安全問題
請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
sessionStorage 用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此 sessionStorage 不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。而 localStorage 用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的
web storage和cookie的區(qū)別
Web Storage 的概念和 cookie 相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie 的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候 Cookie 都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外 cookie 還需要指定作用域，不可以跨域調(diào)用。
除此之外，Web Storage 擁有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端開發(fā)者自己封裝 setCookie，getCookie。但是 Cookie 也是不可或缺的：Cookie 的作用是與服務(wù)器進(jìn)行交互，作為 HTTP 規(guī)范的一部分而存在 ，而 Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。
