前端面試題

時間 2021-01-17

標籤 javascript html 前端 html5 java git github web 面試 canvas 欄目 JavaScript 简体版

原文原文鏈接

最近正在找前端工做，把面試中考官問的以及本身總結的問題及答案成列以下：javascript

HTML篇：html

頁面導入樣式時，使用link和@import有什麼區別？前端

本質上，這兩種方式都是爲了加載CSS文件，但仍是存在着細微的區別html5

1老祖宗的差別。連接屬於XHTML標籤，而@import徹底是CSS提供的一種方式。java

link標籤除了能夠加載CSS外，還能夠作不少其餘的事情，定義RSS，定義rel鏈接屬性等，@ import就只能加載CSS了。git

2加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），連接引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。github

3兼容性的差別。因爲@import是CSS2.1提出的因此老的瀏覽器不支持，@ import只有在IE5以上的能力識別，而連接標籤無此問題。web

4使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。面試

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？canvas

一，新增元素

內容元素：article、header，footer,section,nav,aside
表單元素：calendar，date，time，number,url,search;
多媒體：video,audio;
控件元素： websockt,webwork
繪畫：canvas;
存儲：localStorage;sessionStorage

二，移除元素

big font basefont,s,tt,u,frame.iframe

三，如何處理兼容性問題

1）IE6/IE7/IE8支持經過document.createElement方法產生的標籤，利用這一特性讓這些瀏覽器支持HTML5新標籤。瀏覽器支持新標籤後，還須要添加標籤默認的樣式；

請描述一下cookies，sessionStorage和localStorage的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：

cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間：

localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
頁面優化的方法?
重點：
（1）儘可能減小HTTP請求次數
（2）減小DNS查找次數
（3）減小DOM元素數量
（4）爲文件頭指定Expires或Cache-Control
（5） Gzip壓縮文件內容
（6）把樣式表置於頂部、把腳本置於頁面底部
（7）避免使用CSS表達式（Expression）
（8）使用外部JavaScript和CSS
（9）減小DOM訪問
簡述一下你對HTML語義化的理解？
用正確的標籤作正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即便在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
http的狀態碼？
200 - 請求成功
301 - 資源（網頁等）被永久轉移到其它URL
404 - 請求的資源（網頁等）不存在
500 - 內部服務器錯誤

1**	信息，服務器收到請求，須要請求者繼續執行操做
2**	成功，操做被成功接收並處理
3**	重定向，須要進一步的操做以完成請求
4**	客戶端錯誤，請求包含語法錯誤或沒法完成請求
5**	服務器錯誤，服務器在處理請求的過程當中發生了錯誤

具體的能夠參考https://www.runoob.com/http/http-status-codes.html

Doctype做用？嚴格模式與混雜模式如何區分？它們有何差別？
1、Doctype做用是什麼？聲明叫作文件類型定義（DTD），聲明的做用爲了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應該用哪一個規範來解析文檔。聲明必須在 HTML 文檔的第一行，這並非一個 HTML 標籤。 2、嚴格模式與混雜模式如何區分？它們有何意義？嚴格模式：又稱標準模式，是指瀏覽器按照 W3C 標準解析代碼。混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用本身的方式解析代碼。如何區分：瀏覽器解析時到底使用嚴格模式仍是混雜模式，與網頁中的 DTD 直接相關。一、若是文檔包含嚴格的 DOCTYPE ，那麼它通常以嚴格模式呈現。（嚴格 DTD ——嚴格模式）二、包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現，但有過渡 DTD 而沒有 URI （統一資源標識符，就是聲明最後的地址）會致使頁面以混雜模式呈現。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式）三、DOCTYPE 不存在或形式不正確會致使文檔以混雜模式呈現。（DTD不存在或者格式不正確——混雜模式）四、HTML5 沒有 DTD ，所以也就沒有嚴格模式與混雜模式的區別，HTML5 有相對寬鬆的語法，實現時，已經儘量大的實現了向後兼容。（ HTML5 沒有嚴格和混雜之分）意義：嚴格模式與混雜模式存在的意義與其來源密切相關，若是說只存在嚴格模式，那麼許多舊網站必然受到影響，若是隻存在混雜模式，那麼會回到當時瀏覽器大戰時的混亂，每一個瀏覽器都有本身的解析模式。
CSS篇
如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

https://www.cnblogs.com/xiaopo/p/14288987.html
1. 行內元素和塊級元素有哪些？
區別：
（1）塊級元素會獨佔一行，其寬度自動填滿其父元素寬度；行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裏，知道一行排不下，纔會換行，其寬度隨元素的內容而變化。
（2）塊級元素能夠設置 width, height屬性，行內元素設置width, height無效【注意：塊級元素即便設置了寬度，仍然是獨佔一行的】
（3）塊級元素能夠設置margin 和 padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，可是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。（水平方向有效，豎直方向無效 CSS的權重是怎樣的？
！important>內聯>id選擇器>claa選擇器>標籤選擇器>通配符
CSS中選擇器有那些？那些能夠繼承？

* 1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標籤選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul > li）

6.後代選擇器（li a）

7.通配符選擇器（ * ）

8.屬性選擇器（a[rel = "external"]）

9.僞類選擇器（a:hover, li:nth-child）

* 可繼承的樣式： font-size font-family color, UL LI DL DD DT;

* 不可繼承的樣式：border padding margin width height ;