web前端常見面試題整理 HTML CSS

2021-10-06 14:54:04 字數 3027 閱讀 3660

1.標籤語義化的理解

去掉或丟失樣式的時候讓頁面顯示清晰的結構

有利於seo,有利於爬蟲讀取有效資訊,爬蟲依賴於標籤來確定上下文和各個關鍵字的權重

方便其它裝置(螢幕閱讀器,盲人閱讀器,移動裝置)解析渲染網頁

更便於開發和維護

2.doctype作用? doctype文件型別? 嚴格模式與混雜模式如何區分?它們有何意義?

doctype宣告在文件最前面,告知瀏覽器以何種方式來渲染文件

標籤可宣告三種 dtd 型別,分別表示嚴格版本、過渡版本以及基於框架的 html 文件。

嚴格模式的排版和js運作模式是以瀏覽器支援的最高標準執行

混雜模式,頁面向後相容,模擬老式瀏覽器的行為防止站點無法工作

doctype不存在或格式不正確會導致文件已混雜模式顯示

3.html和xhtml的區別

xhtml必須正確的巢狀,元素必須被關閉,標籤名必須小寫,文件必須有根元素

4.html5新特性

5.iframe的優缺點

優點:能夠原封不動的把頁面顯示出來;可重用性高;方便修改;如果有載入緩慢的第三方內容,如 圖示廣告等適合用iframe

缺點:會產生很多頁面,不容易管理;相容性差;會增加伺服器的http請求,對於大型**不可取

6.常用瀏覽器核心

7.cookies,sessionstorage和localstorage

共同點:都是儲存在瀏覽器端,且是同源的

8.get方式和post方式提交資料的區別

9.html5的檔案離線儲存怎麼使用,工作原理是什麼?

10.乙個頁面從輸入 url 到頁面載入顯示完成,這個過程中都發生了什麼

輸入url,瀏覽器先檢視瀏覽器快取-系統快取-路由器快取,如果快取裡有,直接顯示頁面內容;dns解析,獲取相應的ip位址,瀏覽器向伺服器發起tcp連線,進行三次握手;握手成功後,瀏覽器向伺服器傳送http請求,伺服器處理請求,返回資料給瀏覽器;瀏覽器收到響應,讀取頁面內容,瀏覽器渲染,解析html原始碼,生成dom樹,解析css樣式,js互動

1.標準的css的盒子模型?與低版本ie的盒子模型有什麼不同的?

標準盒子模型:寬度=內容的寬度(content)+ border + padding + margin

低版本ie盒子模型:寬度=內容寬度(content+border+padding)+ margin

2.box-sizing屬性

用來控制元素的盒子模型的解析模式,預設為content-box

context-box:w3c的標準盒子模型,設定元素的 height/width 屬性指的是content部分的高/寬

border-box:ie傳統盒子模型。設定元素的height/width屬性指的是border + padding + content部分的 高/寬

3.清除浮動的方法

4.css選擇器

5.css偽類與css偽物件的區別

根本區別在於是否創造了新的元素

偽類一開始用來表示一些元素的動態狀態,隨後css2標準擴充套件了其概念範圍,使其成為了所有邏輯 上存在但在文件樹中卻無須標識的「幽靈」分類

偽物件表示某個元素的子元素,邏輯上存在但實際上不存在在dom樹中

6.css的權重規則

乙個行內樣式+1000,乙個id+100,乙個屬性選擇器/class類/偽類選擇器+10,乙個元素名/偽物件選 擇器+1。關係選擇器將拆分為兩個選擇器再計算.

7.css中 link 和@import 的區別

8.px、em、rem的區別

9. css3有哪些新特性

css3實現圓角(border-radius),陰影(box-shadow),對文字加特效(text-shadow),線性漸變(gradient), 變形(transform)增加了更多的css選擇器 多背景 rgba,在css3中唯一引入的偽元素是::selection, **查詢,多欄布局

10.css sprites原理,優缺點

css sprites其實就是把網頁中一些背景整合到一張檔案中,再利用css的 「background-image」,「background- repeat」,「background-position」的組合進行背景定位,

background-position可以用數字精確的定位出背景的位置。

優點:減少網頁的http請求,減少的位元組,方便更換風格

缺點:在寬屏,高解析度的螢幕下的自適應頁面,你的如果不夠寬,很容易出現背景斷裂;要確 定精確位置,不易修改

11.瀏覽器相容性有哪些?如何解決?

12.css屬性content有什麼作用?有什麼應用?

css的content屬性專門應用在 before/after 偽元素上,用於來插入生成內容。

可以配合自定義字型顯示特殊符號。

13. rgba()和opacity的透明效果有什麼不同?

opacity作用於元素,以及元素內的所有內容的透明度,rgba()只作用於元素的顏色或其背景色。

設定rgba透明的元素的子元素不會繼承透明效果!

14.flex布局

15.聖杯布局 雙飛翼布局

用flex 實現聖杯布局display:flex; flex:1;

16.less

less (leaner style sheets 的縮寫) 是一門向後相容的 css 擴充套件語言。

less主要語法:

17.sass scss

sass 是一款強化 css 的輔助工具,scss 是 sass 3 引入新的語法

區別:sass 是以嚴格的縮排式語法規則來書寫,不帶大括號({})和分號,而 scss 的語法書寫和我們的 css 語法書寫方式非常類似。scss 對空白符號不敏感

sass 主要語法:

18.less和sass的異同

相同:二者在語法上有共性

不同:

常見面試題整理

題目 如下為型別cmystring的宣告,請為該型別新增賦值運算子函式。class cmystring 注意點 1.返回值是否為該型別的引用。如果為該型別引用則可連續賦值。如果返回void,則無法通過編譯 2.傳入引數是否宣告為常量引用。如果傳入引數不是常量引用,則會有一次非必要的拷貝構造函式呼叫 ...

常見面試題整理1

面試題整理1 相同點 都是繼承collection介面 不同點 1.list 元素存放有順序,元素可重複 set 元素存放無順序,元素不可重複 2.list 支援for迴圈,也可以用迭代器 set 只能用迭代器,因為它是無序的,無法通過下標獲取元素 3.list和陣列相似,查詢元素效率高,插入刪除元...

C 常見面試題整理

最小堆pop最小的,最大堆pop最大的 設計乙個演算法,找出陣列中最小的k個數。以任意順序返回這k個數均可 最大堆 class solution while maxheap.empty return out 在未排序的陣列中找到第k個最大的元素。請注意,你需要找的是陣列排序後的第 k 個最大的元素,...