关于HTML的面试题-html5/css3篇
- 1. html5 新增標(biāo)簽有哪些（或者新增的語義標(biāo)簽）？
- 2. HTML5 中有哪些新特性？
- 3. 視頻有哪幾種格式？這幾種格式有什么區(qū)別？
- 4. 寫出你知道的層級選擇符（結(jié)構(gòu)性偽類選擇器）
- 5. 什么是漸進(jìn)增強、優(yōu)雅降級？
- 6. opacity 與 rgba 的區(qū)別
- 7. 畫出標(biāo)準(zhǔn)盒模型和怪異盒模型，并寫出他們的寬。
- 8. 單詞換行
- 9. 彈性盒的居中方式怎么寫？
- 10. 怎么解決chrome瀏覽器不能顯示字體大小小于12px？
1. html5 新增標(biāo)簽有哪些（或者新增的語義標(biāo)簽）？
（1）<header> 頭標(biāo)簽；
（2）<nav> 導(dǎo)航標(biāo)簽；
（3）<section> 表示文檔的結(jié)構(gòu)、欄目；
（4）<footer> 頁腳；
（5）<article> 文章標(biāo)簽；
（6）<aside> 側(cè)邊欄導(dǎo)航；
（7）<mark> 凸顯文字；
（8）<figure> 用來表示網(wǎng)頁上一塊獨立的內(nèi)容。；
（9）<figcaption> 用來表示figure的標(biāo)題，作為第一個或最后一個元素；
（10）<output> 顯示表單元素結(jié)果；
2. HTML5 中有哪些新特性？
（1）用于繪畫的 canvas 元素；
（2）用于媒介回放的 video 和 audio 元素；
（3）對本地離線存儲的更好的支持；
（4）新的特殊內(nèi)容元素，比如 article、footer、header、nav、section；
（5）新的表單控件，比如 calendar、date、time、email、url、search；
3. 視頻有哪幾種格式？這幾種格式有什么區(qū)別？
張鑫旭-讓所有瀏覽器支持HTML5 video視頻標(biāo)簽
.mp4、.ogg 、.webM
主要區(qū)別是bai清晰度與容量大小du的問題，清晰度zhi分為普通的與dao高清的。一般越高清那視頻容量越大，占空間越大。
4. 寫出你知道的層級選擇符（結(jié)構(gòu)性偽類選擇器）
（1）:root{}，選擇根目錄；
:root{background:#ff0} ，相當(dāng)于給 html 標(biāo)簽設(shè)置樣式；
（2）:not(元素A){}，給 除了元素A 以外的所有元素設(shè)置樣式；
例如：body :not(p){background:#000}，給除了 元素p 以外的其他所有元素設(shè)置樣式。
（3）元素B:empty{}，選擇 元素B內(nèi)容為空 的元素設(shè)置樣式（換行和空格不算內(nèi)容為空）；
（4）:target{}，給 被錨點選中的元素 設(shè)置樣式（錨點切換時有坑，常用 js 去做，而不用偽類）；
（5）元素A:first-child{}，選擇第一個（子）元素；元素A作為第一個子元素；
（6）元素B:last-child{}，選擇最后一個（子）元素；
（7）元素C:nth-child(n){}，n 為數(shù)字，選擇第n個（子）元素（n 從 1 開始）；元素C并且該元素作為第n個子元素；
（8）元素D:nth-last-child(n){}，n 為數(shù)字，選擇倒數(shù)第n 個（子）元素；
（9）元素E:nth-child(odd){}，選擇奇數(shù)個（子）元素（從第 1 個開始）；
（10）元素F:nth-child(even){}，選擇偶數(shù)個（子）元素（從第 2 個開始）；
（11）元素G:nth-of-type(2){}，有關(guān)這個元素的第二個（子）元素；
（12）元素H:nth-last-of-type(2){}，有關(guān)這個元素的倒數(shù)第二個（子）元素；
（13）元素I:only-child{}，只有 I元素 是唯一一個個（子）元素才有效；
（14）元素A:nth-child(n+2){}，匹配從第二個元素開始（包括2）；
（15）元素B:nth-child(2n){}，匹配偶數(shù)；
（16）元素B:nth-child(2n+1){}，匹配奇數(shù)；
5. 什么是漸進(jìn)增強、優(yōu)雅降級？
（1）漸進(jìn)增強： 一開始就針對低版本瀏覽器進(jìn)行構(gòu)建頁面到高版本的變化；
漸進(jìn)增強（progressive enhancement）： 針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗。（從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害于基礎(chǔ)瀏覽器的額外樣式和功能。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。）
<!-- 漸進(jìn)增強寫法 --> <style> .transition{-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all .5s; } </style>（2）優(yōu)雅降級： 一開始就構(gòu)建網(wǎng)站針對高版本向低版本進(jìn)行兼容；
優(yōu)雅降級（graceful degradation）： 一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。（Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了，為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。）
<!-- 優(yōu)雅降級寫法 --> <style> .transition{ transition: all .5s;-o-transition: all .5s; -moz-transition: all .5s;-webkit-transition: all .5s; } </style>（3）漸進(jìn)增強和優(yōu)雅降級的區(qū)別
- ① 優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進(jìn)增強則是從一個非?；A(chǔ)的、能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。
- ② 漸進(jìn)增強的適用場景：漸進(jìn)增強觀點認(rèn)為應(yīng)該關(guān)注于內(nèi)容本身。內(nèi)容是我們建立網(wǎng)站的誘因，有的網(wǎng)站展示它，有的則收集它，有的尋求、有的操作，還有的網(wǎng)站甚至包含以上的種種，但相同點是他們?nèi)忌婕暗絻?nèi)容，這使得“漸進(jìn)增強”成為一種更為合理的設(shè)計范例。這也是它立即被Yahoo!所采納并用以構(gòu)建其“分級式瀏覽器支持（Graded Browser Support)“策略的原因所在。
- ③ 優(yōu)雅降級的適用場景：優(yōu)雅降級觀點認(rèn)為應(yīng)該針對那些最高級、最完善的瀏覽器來設(shè)計網(wǎng)站。而將那些被認(rèn)為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段，并把測試對象限定為主流瀏覽器（如IE、Mozilla等）的前一個版本。
在這種設(shè)計范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡陋卻無妨（poor,but passable)”的瀏覽體驗。你可以做一些小的調(diào)整來適應(yīng)某個特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點，因此除了修復(fù)較大的錯誤之外，其它的差異將被直接忽略。
6. opacity 與 rgba 的區(qū)別：
有 opacity 屬性的所有后代元素都會繼承 opacity 屬性，而RGBA后代元素不會繼承不透明屬性。
| 區(qū)別： | 有 opacity 屬性的所有后代元素都會繼承 opacity 屬性 | 而RGBA后代元素不會繼承不透明屬性。 |
7. 畫出標(biāo)準(zhǔn)盒模型和怪異盒模型，并寫出他們的寬。
css 中盒子模型分為兩種： w3c 標(biāo)準(zhǔn)（標(biāo)準(zhǔn)盒模型） 和 IE標(biāo)準(zhǔn)盒子模型（怪異盒模型）；
通過 box-sizing: content-box（默認(rèn)，標(biāo)準(zhǔn)盒模型）/border-box（怪異盒模型）; 來轉(zhuǎn)換。
- 大多數(shù)瀏覽器在采用 w3c 標(biāo)準(zhǔn)模型，而 IE 中采用 Microsoft 自己的標(biāo)準(zhǔn)；
- 怪異模型是“部分瀏覽器在支持 w3c 標(biāo)準(zhǔn)的同時還保留了原來的解析模式”，怪異模式主要表現(xiàn)在 IE 內(nèi)核的瀏覽器。
- 當(dāng)沒有 doctype 時（即沒有<!DOCTYPE html>聲明時），IE6 會觸發(fā)怪異模式；。
（1）在標(biāo)準(zhǔn)模式下，一個塊的總寬度 = width + margin(左右) + padding(左右) + border(左右)；
（2）在IE盒子模型下，一個塊的總寬度= width + margin(左右)（即width已經(jīng)包含了padding和border值）；
（3）示例：給 div標(biāo)簽 和 p標(biāo)簽 設(shè)置一樣的寬高，但是 div標(biāo)簽 有 border、padding 值。
8. 單詞換行
（1）word-bread:
- nomal，默認(rèn)；
- keep-all，只能在半角空格或連接字符處換行；
- bread-all;，寬度不夠，分割單詞換行；
（2）word-wrap:
- normal，默認(rèn)；
- break-word;，寬度不夠，整個單詞換行；
9. 彈性盒的居中方式怎么寫？
<style>ul{display:flex; justify-content:center; align-items: center;}/*align-self: center;設(shè)置在子元素上，讓子元素單獨布局*/ </style>10. 怎么解決chrome瀏覽器不能顯示字體大小小于12px？
答案來源
無論中文英文數(shù)字在網(wǎng)頁中CSS設(shè)置小于12px后各大瀏覽器均支持，在谷歌chrome瀏覽器不支持解決方法。
針對低版本chrome谷歌瀏覽器設(shè)置一個校準(zhǔn)字體大小樣式：-webkit-text-size-adjust:none。
（1）方法一：直接給 body 設(shè)置。
（2）方法二：在設(shè)置小于12px的選擇器對象里設(shè)置一個-webkit-text-size-adjust:none樣式：
<style>.abc{font-size:7px;-webkit-text-size-adjust:none} </style>高版本chrome谷歌瀏覽器不再支持小于12px的字體：
高版本chrome谷歌瀏覽器已經(jīng)不再支持-webkit-text-size-adjust樣式也就是不在支持小于12px以下字體，所以要使用時候慎用。為了兼容各大瀏覽器最好最小文字字體大小設(shè)置12px及12px以上。
DIVCSS5建議：
1、用圖片：如果是內(nèi)容固定不變情況下，使用將小于12px文字內(nèi)容切出做圖片，這樣不影響兼容也不影響美觀。
2、使用12px及12px以上字體大小：為了兼容各大主流瀏覽器，建議設(shè)計美工圖時候設(shè)置大于或等于12px的字體大小，如果是接單的這個時候就需要給客戶講解小于12px瀏覽器不兼容等事宜。
3、繼續(xù)使用小于12px字體大小樣式設(shè)置：如果不考慮chrome可以不用考慮兼容，同時在設(shè)置小于12px對象設(shè)置-webkit-text-size-adjust:none，做到最大兼容考慮。
4、使用12px以上字體：為了兼容、為了代碼更簡單 從新考慮權(quán)重下兼容性。
總結(jié)
以上是生活随笔為你收集整理的关于HTML的面试题-html5/css3篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于HTML的面试题-html4/css
- 下一篇： jquery笔记一：下载安装、语法、选择