1. 你做的頁(yè)面在哪些流覽器測(cè)試過(guò)?這些瀏覽器的內(nèi)核分別是什么? ?
Trident 內(nèi)核:IE 系列
Gecko 內(nèi)核:Firefox
Webkit 內(nèi)核:Safari
Blink 內(nèi)核:是基于 Webkit 內(nèi)核的子項(xiàng)目,使用的瀏覽器有:
Chrome/opera 等除 IE、Firefox、Safari 之外的幾乎所有瀏覽器
幾乎所有國(guó)產(chǎn)雙內(nèi)核瀏覽器(Trident/Blink)如 360、獵豹、qq、百度等
?2. 個(gè) 每個(gè) L HTML 文件里開頭都有個(gè)很重要的東西, Doctype ,知道這是干什么的
嗎?
文檔聲明。
聲明位于文檔中的最前面的位置,處于? 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用
哪種 HTML 或 XHTML 規(guī)范。(重點(diǎn):告訴瀏覽器按照何種規(guī)范解析頁(yè)面)
IE 下如不書寫文檔聲明會(huì)使用怪異模式解析網(wǎng)頁(yè)導(dǎo)致一系列 CSS 兼容性問(wèn)題。
?3. s div+css 的布局較 e table 布局有什么優(yōu)點(diǎn)?
正常場(chǎng)景一般都適用 div+CSS 布局,優(yōu)點(diǎn):
結(jié)構(gòu)與樣式分離
代碼語(yǔ)義性好
更符合 HTML 標(biāo)準(zhǔn)規(guī)范
SEO 友好
Table 布局的適用場(chǎng)景:
某種原因不方便加載外部 CSS 的場(chǎng)景,例如郵件正文,此時(shí)用 table 布局可以在無(wú) css 情況下保持頁(yè)面布
4. 你能描述一下漸進(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)行兼容。
5. 請(qǐng)談一下你對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。
網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓 web 發(fā)展的更‘健康’,開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn),降低開發(fā)難度,開發(fā)成本,SEO 也會(huì)更好做,也不會(huì)因?yàn)闉E用代碼導(dǎo)致各種 BUG、安全問(wèn)題,最終提高網(wǎng)站易用性。
6. 為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效?
CDN 緩存更方便
突破瀏覽器并發(fā)限制
節(jié)約 cookie 帶寬
節(jié)約主域名的連接數(shù),優(yōu)化頁(yè)面響應(yīng)速度
防止不必要的安全問(wèn)題
7.你如何理解 L HTML 結(jié)構(gòu)的語(yǔ)義化?
HTML 結(jié)構(gòu)語(yǔ)義化:
更符合 W3C 統(tǒng)一的規(guī)范標(biāo)準(zhǔn),是技術(shù)趨勢(shì)。
沒(méi)有樣式時(shí)瀏覽器的默認(rèn)樣式也能讓頁(yè)面結(jié)構(gòu)很清晰。
對(duì)功能障礙用戶友好。屏幕閱讀器(如果訪客有視障)會(huì)完全根據(jù)你的標(biāo)記來(lái)“讀”你的網(wǎng)頁(yè)。
對(duì)其他非主流終端設(shè)備友好。例如機(jī)頂盒、PDA、各種移動(dòng)終端。
對(duì) SEO 友好。
8.有哪項(xiàng)方式可以對(duì)一個(gè) DOM 設(shè)置它的CSS 樣式?
外部樣式表,引入一個(gè)外部 css 文件
內(nèi)部樣式表,將 css 代碼放在? 標(biāo)簽內(nèi)部
內(nèi)聯(lián)樣式,將 css 樣式直接定義在 HTML 元素內(nèi)部
9.CSS 中可以通過(guò)哪些屬性定義,使得一個(gè) DOM 元素不顯示在瀏覽器可視范
圍內(nèi)?
設(shè)置 display 屬性為 none,或者設(shè)置 visibility 屬性為 hidden
設(shè)置寬高為 0,設(shè)置透明度為 0,設(shè)置 z-index 位置在-1000em
設(shè)置 text-indent:-9999px;
10.超鏈接訪問(wèn)過(guò)后 r hover 樣式就不出現(xiàn)的問(wèn)題是什么?如何解決?
答案:被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不再具有 hover 和 active 了,解決方法是改變 CSS 屬性的排列順
序: L-V-H-A(link,visited,hover,active)
11.rgba()和 和 y opacity 的透明效果有什么不同?
rgba()和 opacity 都能實(shí)現(xiàn)透明效果,但最大的不同是 opacity 作用于元素,以及元素內(nèi)的所有內(nèi)容的透
明度,
而 rgba()只作用于元素的顏色或其背景色。(設(shè)置 rgba 透明的元素的子元素不會(huì)繼承透明效果?。?/p>
12. ?px 和 和 em 的區(qū)別。
px 和 em 都是長(zhǎng)度單位,區(qū)別是:
px 值固定,容易計(jì)算。
em 值不固定,是相對(duì)單位,其相對(duì)應(yīng)父級(jí)元素的字體大小會(huì)調(diào)整
13. display:none 與 ?visibility:hidden 的區(qū)別是什么?
display : 隱藏對(duì)應(yīng)的元素但不擠占該元素原來(lái)的空間。
visibility: 隱藏對(duì)應(yīng)的元素并且擠占該元素原來(lái)的空間。
14.行內(nèi)元素有哪些? 塊級(jí)元素有哪些??
答:塊級(jí)元素:div p h1 h2 h3 h4 form ul
行內(nèi)元素: a b br i span input select
15. CSS 的盒子模型?
(1)兩種, IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型;IE 的 content 部分包含了 border 和 pading;
(2)盒模型: 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)
16.CSS3 有哪些新特性?
(1) CSS3 實(shí)現(xiàn)圓角(border-radius),陰影(box-shadow),
(2) 對(duì)文字加特效(text-shadow、),線性漸變(gradient),旋轉(zhuǎn)(transform)
(3) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)
skew(-9deg,0deg);// 旋轉(zhuǎn),縮放,定位,傾斜
(4) 增加了更多的 CSS 選擇器 多背景 rgba
(5) 在 CSS3 中唯一引入的偽元素是 ::selection.
(6) 媒體查詢,多欄布局
(7) border-image
17.html5 有哪些新特性、 、理 移除了那些元素?如何處理 5 HTML5 新標(biāo)簽的瀏覽器兼
分 容問(wèn)題?如何區(qū)分 L HTML 和 和 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;
支持 HTML5 新標(biāo)簽:
1. IE8/IE7/IE6 支持通過(guò) document.createElement 方法產(chǎn)生的標(biāo)簽,可以利用這一特性
讓這些瀏覽器支持 HTML5 新標(biāo)簽,瀏覽器支持新標(biāo)簽后,還需要添加標(biāo)簽?zāi)J(rèn)的樣式(當(dāng)
然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架):
如何區(qū)分:
DOCTYPE 聲明新增的結(jié)構(gòu)元素、功能元素