史上最精闢的web前端面試題之HTML&CSS
img的alt和title的異同?
**alt **是圖片載入失敗時,顯示在網頁上的替代文字;
**title **是滑鼠放上面時顯示的文字,title是對圖片的描述與進一步說明;
這些都是表面上的區別,alt是img必要的屬性,而title不是。
對於網站seo優化來說,title與alt還有最重要的一點:
搜尋引擎對圖片意思的判斷,主要靠alt屬性。所以在圖片alt屬性中以簡要文字說明,同時包含關鍵詞,也是頁面優化的一部分。條件允許的話,可以在title屬性裡,進一步對圖片說明。
簡述一下src與href的區別
href 是指向網路資源所在位置,建立和當前元素(錨點)或當前文件(連結)之間的連結,用於超連結。
src是指向外部資源的位置,指向的內容將會嵌入到文件中當前標籤所在位置;在請求src資源時會將其指向的資源下載並應用到文件內,例如js指令碼,img圖片和frame等元素。當瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源載入、編譯、執行完畢,圖片和框架等元素也如此,類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。
html5新元素?
HTML5 中一些有趣的新特性:
①用於繪畫的 canvas 元素;
②用於媒介回放的 video 和 audio 元素;
③對本地離線儲存的更好的支援;
④新的特殊內容元素,比如 article、footer、header、nav、section;
⑤新的表單控制元件,比如 calendar、date、time、email、url、search"
以上是w3c上的原話,簡單說就是更符合標準,提供更多功能支援;更加規範,可讀性更強,效能有提升,實現功能更加簡單方便,就像手機一樣,高版本的功能多一些。
更詳細請看html5新元素
CSS層疊是什麼?介紹一下
CSS就是層疊式樣式表(Cascading Style Sheets)的簡稱,CSS中層疊的意思就是在HTML文件樹結構中的子標記能夠繼承所有父標記定義的樣式,還可以多次定義自己的樣式,全部樣式按照從外到內、由先到後的順序疊加起來,如果不發生衝突,則全部樣式都有效,重複定義衝突時按照內層優先、後定義優先的原則進行覆蓋,即內層子元素覆蓋父元素樣式、後定義的覆蓋先定義的樣式。
CSS實現垂直和水平居中
這是一道經典的問題,實現方法也有很多種,以下是其中一種實現:
具體方案說明:
①使用絕對定位left:50%與margin-left取寬度值一半的複數形式設定水平居中。
②使用絕對定位top:50%與margin-top取高度值一半的複數形式設定垂直居中
HTML結構:
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,widthmargin-left:-100px; }
下面是小編整理的一整套系統的 web前端 學習教程,加群即可免費領取!
自己整理了一份最全面前端學習資料,從最基礎的HTML+CSS+JS [炫酷特效,遊戲,外掛封裝,設計模式]到移動端 HTML5 的專案實戰的學習資料都有整理,送給每一位前端小夥伴, 有想學習 web前端 的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入學習。
加Q 裙:853597293(招募中)
什麼是CSS Hack?
針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。
詳情請看以下連結
你知道哪些CSS瀏覽器相容性問題。
px和em的區別
px和em都是長度單位,區別是,px的值是固定的,是絕對單位,類似的還有pt(磅,1pt=1/72英寸)、pc(皮卡,1pc=12pt)、mm(毫米)、cm(釐米)、in(英寸)絕對單位指定是多少就是多少,計算比較容易。
em的值不是固定的,它是相對單位,em是指當前預設字號大小(繼承父元素預設字號)的倍數,可根據父元素字號的改變而自動調整。例如2em是當前字號的2倍,若父元素或預設字號為12pt,則2em就是24pt。類似的還有ex,ex是當前字號高度值(通常是字型尺寸一半)的倍數。
瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em
HTML5離線儲存
localStorage 長期儲存資料,瀏覽器關閉後資料不丟失;
sessionStorage 資料在瀏覽器關閉後自動刪除。
說說你對語義化的理解
①去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構;
②有利於SEO:和搜尋引擎建立良好溝通,有助於爬蟲抓取更多的有效資訊:爬蟲依賴於標籤來確定上下文和各個關鍵字的權重;
③方便其他裝置解析(如螢幕閱讀器、盲人閱讀器、移動裝置)以意義的方式來渲染網頁;
④便於團隊開發和維護,語義化更具可讀性,是下一步吧網頁的重要動向,遵循W3C標準的團隊都遵循這個標準,可以減少差異化。
描述一段語義的HTML程式碼
(HTML5中新增加的很多標籤(如:<article>、<nav>、<header>和<footer>等)就是基於語義化設計原則)
標題< /h1>
專注Web前端技術< /h2>< /div>
給div設定一個寬度,然後新增margin:0 auto屬性
div{width:200px; margin:0 auto; }
列出display的值,說明他們的作用。position的值, relative和absolute定位原點是?
①
block 像塊型別元素一樣顯示。
none 預設值。像行內元素型別一樣顯示。
inline-block 像行內元素一樣顯示,但其內容像塊型別元素一樣顯示。
**list-item **像塊型別元素一樣顯示,並新增樣式列表標記。
②
absolute
absolute 生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位,若父元素都沒有定位則相對於html的根元素(瀏覽器視窗)定位。
fixed
fixed (老IE不支援)生成絕對定位的元素,相對於瀏覽器視窗進行定位。
relative
relative生成相對定位的元素,相對於其原來所在的文件流中的位置進行定位。
static
static 預設值。沒有定位,元素出現在正常的流中 (忽略 top, bottom, left, right z-index 宣告)
對BFC規範的理解
BFC,塊級格式化上下文,一個建立了新的BFC的盒子是獨立佈局的,盒子裡面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向(和佈局方向有關係)的margin會發生摺疊。
(W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。)
描述CSS Reset的作用和用途。
Reset重置瀏覽器的css預設屬性瀏覽器的品種不同,樣式不同,然後重置,讓他們統一。
最簡化的CSS Reset
*{outline:0;padding:0;margin:0;border:0;}
CSS定義的權重
CSS有自己的優先順序計算公式,而不僅僅是行間>內部>外部樣式;ID>class>元素。
理解選擇器的特殊性很重要,特別是在修復bug的時候,但是要儘量避免使用。
CSS定位方式有哪些?position屬性的值有哪些?他們之間的區別是什麼?
在CSS中關於定位的內容是:position:relative | absolute | static | fixed
• static 自動定位,自動定位就是元素在頁面普通文件流中由HTML自動定位,普通文件裡中的元素也稱為流動元素。不能通過z-index進行層次分級。
• relative 相對定位,相對定位不脫離文件流,參考其在原來文件流中的位置,通過 top,bottom,left,right 定位,並且可以通過z-index進行層次分級。
• absolute 絕對定位,絕對定位脫離文件流,依據最近的已經定位(絕對、相對或固定定位)的父元素,通過 top,bottom,left,right 定位。當父級 position 為 static 時,absolute元素將依據body根元素(瀏覽器視窗)進行定位,可以通過z-index進行層次分級。
• fixed 固定定位,固定定位與父元素無關(無論父元素是否定位),直接根據瀏覽器視窗定位,且不隨滾動條拖動頁面而滾動,可通過z-index進行層次分級。
CSS中margin和padding的區別
margin是外邊距,屬於元素之外,相鄰元素的margin可以融合。
padding是內邊距,在元素之內,相鄰元素的padding不可融合。
使用CSS前處理器嗎?喜歡哪個?