作者：櫻桃小丸子兒

鏈接：https://www.jianshu.com/p/abadcc84e2a4

HTML&CSS

img的alt和title的異同？

**alt **是圖片加載失敗時(shí)，顯示在網(wǎng)頁上的替代文字；

**title **是鼠標(biāo)放上面時(shí)顯示的文字,title是對圖片的描述與進(jìn)一步說明;

這些都是表面上的區(qū)別，alt是img必要的屬性，而title不是。

對于網(wǎng)站seo優(yōu)化來說，title與alt還有最重要的一點(diǎn)：

搜索引擎對圖片意思的判斷，主要靠alt屬性。所以在圖片alt屬性中以簡要文字說明，同時(shí)包含關(guān)鍵詞，也是頁面優(yōu)化的一部分。條件允許的話，可以在title屬性里，進(jìn)一步對圖片說明。

簡述一下src與href的區(qū)別

href 是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素(錨點(diǎn))或當(dāng)前文檔(鏈接)之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請求src資源時(shí)會將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時(shí)，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

html5新元素？

HTML5 中一些有趣的新特性：

①用于繪畫的 canvas 元素；

②用于媒介回放的 video 和 audio 元素；

③對本地離線存儲的更好的支持；

④新的特殊內(nèi)容元素，比如 article、footer、header、nav、section；

⑤新的表單控件，比如 calendar、date、time、email、url、search"

以上是w3c上的原話，簡單說就是更符合標(biāo)準(zhǔn)，提供更多功能支持；更加規(guī)范，可讀性更強(qiáng)，性能有提升，實(shí)現(xiàn)功能更加簡單方便，就像手機(jī)一樣，高版本的功能多一些。

更詳細(xì)請看html5新元素

CSS層疊是什么？介紹一下

CSS就是層疊式樣式表(Cascading Style Sheets)的簡稱,CSS中層疊的意思就是在HTML文檔樹結(jié)構(gòu)中的子標(biāo)記能夠繼承所有父標(biāo)記定義的樣式，還可以多次定義自己的樣式，全部樣式按照從外到內(nèi)、由先到后的順序疊加起來，如果不發(fā)生沖突，則全部樣式都有效，重復(fù)定義沖突時(shí)按照內(nèi)層優(yōu)先、后定義優(yōu)先的原則進(jìn)行覆蓋，即內(nèi)層子元素覆蓋父元素樣式、后定義的覆蓋先定義的樣式。

CSS實(shí)現(xiàn)垂直和水平居中

這是一道經(jīng)典的問題，實(shí)現(xiàn)方法也有很多種，以下是其中一種實(shí)現(xiàn)：

具體方案說明：

①使用絕對定位left:50%與margin-left取寬度值一半的復(fù)數(shù)形式設(shè)置水平居中。

②使用絕對定位top:50%與margin-top取高度值一半的復(fù)數(shù)形式設(shè)置垂直居中

HTML結(jié)構(gòu)：

CSS代碼：

.box1 { position: relative; width: 600px; height: 600px; background-color: red; } .content{ background-color:pink; width:200px; height:200px; position: absolute; //父元素相對定位,使子元素相對父元素定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height，width margin-left: -100px; }

什么是CSS Hack?

針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。

詳情請看以下鏈接

CSS hack大全&詳解(什么是CSS hack)

你知道哪些CSS瀏覽器兼容性問題。

CSS 多瀏覽器兼容性問題及解決方案

px和em的區(qū)別

px和em都是長度單位，區(qū)別是，px的值是固定的，是絕對單位，類似的還有pt(磅，1pt=1/72英寸)、pc(皮卡，1pc=12pt)、mm(毫米)、cm(厘米)、in(英寸)絕對單位指定是多少就是多少，計(jì)算比較容易。

em的值不是固定的，它是相對單位，em是指當(dāng)前默認(rèn)字號大小(繼承父元素默認(rèn)字號)的倍數(shù)，可根據(jù)父元素字號的改變而自動調(diào)整。例如2em是當(dāng)前字號的2倍，若父元素或默認(rèn)字號為12pt,則2em就是24pt。類似的還有ex,ex是當(dāng)前字號高度值(通常是字體尺寸一半)的倍數(shù)。

瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

HTML5離線存儲

localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；

sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除。

說說你對語義化的理解

①去掉或者丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)；

②有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重；

③方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動設(shè)備)以意義的方式來渲染網(wǎng)頁；

④便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

描述一段語義的HTML代碼

(HTML5中新增加的很多標(biāo)簽(如：、、和等)就是基于語義化設(shè)計(jì)原則)

< div id="header"> < h1>標(biāo)題< /h1> < h2>專注Web前端技術(shù)< /h2> < /div>

如何居中div？

給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性

div{width:200px; margin:0 auto; }

列出display的值，說明他們的作用。position的值， relative和absolute定位原點(diǎn)是？

①

block 像塊類型元素一樣顯示。

none 缺省值。像行內(nèi)元素類型一樣顯示。

inline-block 像行內(nèi)元素一樣顯示，但其內(nèi)容像塊類型元素一樣顯示。

**list-item **像塊類型元素一樣顯示，并添加樣式列表標(biāo)記。

②

absolute

absolute 生成絕對定位的元素，相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位，若父元素都沒有定位則相對于html的根元素(瀏覽器窗口)定位。

fixed

fixed (老IE不支持)生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。

relative

relative生成相對定位的元素，相對于其原來所在的文檔流中的位置進(jìn)行定位。

static

static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中 (忽略 top, bottom, left, right z-index 聲明)

對BFC規(guī)范的理解

BFC，塊級格式化上下文，一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個(gè)BFC中的兩個(gè)毗鄰的塊級盒在垂直方向(和布局方向有關(guān)系)的margin會發(fā)生折疊。

(W3C CSS 2.1 規(guī)范中的一個(gè)概念,它決定了元素如何對其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用。)

描述CSS Reset的作用和用途。

Reset重置瀏覽器的css默認(rèn)屬性瀏覽器的品種不同，樣式不同，然后重置，讓他們統(tǒng)一。

最簡化的CSS Reset

*{outline:0;padding:0;margin:0;border:0;}

CSS定義的權(quán)重

CSS有自己的優(yōu)先級計(jì)算公式，而不僅僅是行間>內(nèi)部>外部樣式；ID>class>元素。

理解選擇器的特殊性很重要，特別是在修復(fù)bug的時(shí)候，但是要盡量避免使用。

CSS選擇器的權(quán)重與優(yōu)先規(guī)則

CSS定位方式有哪些?position屬性的值有哪些?他們之間的區(qū)別是什么?

在CSS中關(guān)于定位的內(nèi)容是：position:relative | absolute | static | fixed

? static 自動定位，自動定位就是元素在頁面普通文檔流中由HTML自動定位，普通文檔里中的元素也稱為流動元素。不能通過z-index進(jìn)行層次分級。

? relative 相對定位，相對定位不脫離文檔流，參考其在原來文檔流中的位置，通過 top,bottom,left,right 定位，并且可以通過z-index進(jìn)行層次分級。

? absolute 絕對定位，絕對定位脫離文檔流，依據(jù)最近的已經(jīng)定位(絕對、相對或固定定位)的父元素，通過 top,bottom,left,right 定位。當(dāng)父級 position 為 static 時(shí)，absolute元素將依據(jù)body根元素(瀏覽器窗口)進(jìn)行定位，可以通過z-index進(jìn)行層次分級。

? fixed 固定定位，固定定位與父元素?zé)o關(guān)(無論父元素是否定位)，直接根據(jù)瀏覽器窗口定位，且不隨滾動條拖動頁面而滾動，可通過z-index進(jìn)行層次分級。

CSS中margin和padding的區(qū)別

margin是外邊距，屬于元素之外，相鄰元素的margin可以融合。

padding是內(nèi)邊距，在元素之內(nèi)，相鄰元素的padding不可融合。

總結(jié)

以上是生活随笔為你收集整理的html权重值_史上最全的web前端面试题汇总及答案HtmlCss（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。