一個小公司的前端筆試HTML CSS JS

時間 2019-11-30

標籤一個公司前端筆試 html css 欄目快樂工作简体版

原文原文鏈接

網上有這套題的答案，版本也不少，我作了不少參考。本文就當個小筆記，可能有錯誤，還望指正~css

第1章 Html篇html

1. 你作的網頁在哪些瀏覽器測試過？這些瀏覽器的內核分別是什麼？前端

瀏覽器類型web	內核chrome
Firefoxapi	Gecko瀏覽器
搜狗、谷歌chrome緩存	WebKit服務器
360cookie	Chromium+Trident

2.每一個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DOCTYPE標籤是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記語言解析器，它應該使用什麼樣的文檔類型定義（DTD）來解析文檔。

3. Quirks模式是什麼？它和Standards模式有什麼區別？

quirks和standards的區別不少均可以歸爲IE5和IE6的區別。

盒模型的高寬包含內補丁和邊框：在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks模式下，I E的寬度和高度還包含了 padding和border。IE5.5及如下的瀏覽器即便在Standards模式下，也會有這個問題。

能夠設置行內元素的高寬：在Standards模式下，給span等行內元素設置width和height都不會生效，而在quirks模式下，則會生效。

可設罝百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置—個百分比的高度是無效的。

用margin：0 auto設罝水平居中在IE下會失效：使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下卻會失效。Quirks模式下的解決辦法，用text-align屬性。

設罝圖片的padding會失效。

Table中的字體屬性不能繼承上層的設罝

white-space: pre會失效

http://blog.sina.com.cn/s/blog_675e54810101ce0b.html

4. img的alt與title有何異同？ strong與em的異同？

img 元素向網頁中嵌入一幅圖像，img標籤有兩個屬性分別爲alt和title。

alt和title的相同點:

同屬於img的屬性，能夠替代圖片顯示爲文本。

不一樣點：alt是圖片在沒法正確顯示的時候起到文本替代的做用，title在鼠標滑過期顯示的文字提示。

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

共同點：都是保存在瀏覽器端，且同源的。

區別：

①cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。

② 存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

③ 數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。

④ 做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

⑤ Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。

⑥ Web Storage 的 api 接口使用更方便。

6. 簡述一下src與href的區別。

src和href之間存在區別，能混淆使用。src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。

<script src ="js.js"></script>

當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加

<link href="common.css" rel="stylesheet"/>

那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css，而不是使用@import方式。

7. 知道什麼是微格式嗎？談談理解。在前端構建中應該考慮微格式嗎？

微格式（Microformats）是一種讓機器可讀的語義化XHTML詞彙的集合，是結構化數據的開放標準。是爲特殊應用而制定的特殊格式。

優勢：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面能夠顯示額外的提示

8. 在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，—次js請求通常狀況下有哪些地方會有緩存處理？

dns緩存，cdn緩存，瀏覽器緩存，服務器緩存。

9. —個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。
若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。
若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。
若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

10. 談談從前端角度出發作好SEO須要考慮什麼？

瞭解搜索引擎如何抓取網頁和如何索引網頁

　　你須要知道一些搜索引擎的基本工做原理，各個搜索引擎之間的區別，搜索機器人（SE robot 或叫 web crawler）如何進行工做，搜索引擎如何對搜索結果進行排序等等。

Meta標籤優化

　　主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字好比Author（做者），Category（目錄），Language（編碼語種）等。

如何選取關鍵詞並在網頁中放置關鍵詞

　　搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工做之一。首先要給網站肯定主關鍵詞（通常在5個上下），而後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。

瞭解主要的搜索引擎

　　雖然搜索引擎有不少，可是對網站流量起決定做用的就那麼幾個。好比英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不一樣的搜索引擎對頁面的抓取和索引、排序的規則都不同。還要了解各搜索門戶和搜索引擎之間的關係，好比AOL網頁搜索用的是Google的搜索技術，MSN用的是Bing的技術。

　　Open Directory自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別是網站內容的收集方式不一樣。目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集的，除了主頁外還抓取大量的內容頁面。

按點擊付費的搜索引擎

　　搜索引擎也須要生存，隨着互聯網商務的愈來愈成熟，收費的搜索引擎也開始大行其道。最典型的有Overture和百度，固然也包括Google的廣告項目Google Adwords。愈來愈多的人經過搜索引擎的點擊廣告來定位商業網站，這裏面也大有優化和排名的學問，你得學會用最少的廣告投入得到最多的點擊。

搜索引擎登陸

　　網站作完了之後，別躺在那裏等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交（submit）到搜索引擎。若是你的是商業網站，主要的搜索引擎和目錄都會要求你付費來得到收錄（好比Yahoo要299美圓），可是好消息是（至少到目前爲止）最大的搜索引擎Google目前仍是免費，並且它主宰着60％以上的搜索市場。

連接交換和連接普遍度（Link Popularity）

　　網頁內容都是以超文本（Hypertext）的方式來互相連接的，網站之間也是如此。除了搜索引擎之外，人們也天天經過不一樣網站之間的連接來Surfing（「衝浪」）。其它網站到你的網站的連接越多，你也就會得到更多的訪問量。更重要的是，你的網站的外部連接數越多，會被搜索引擎認爲它的重要性越大，從而給你更高的排名。

合理的標籤使用

第2章 Css篇:

1. CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？

最基本的：設置display：none，或者visibility：hidden

技巧性：設置寬高爲0，設置透明度爲0，設置z-index位置在-1000

2. 超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？

被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

3. 什麼是Css Hack? ie6,7,8的hack分別是什麼？

針對不一樣的瀏覽器寫不一樣的CSS code的過程，就叫CSS hack。

4. 行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？

塊級元素(block)特性：

老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

　　內聯元素(inline)特性：

和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是能夠設置的），就是裏面文字或圖片的大小。

　　那麼問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

　　答案：<input> 、<img> 、<button> 、<textarea> 、<label>。

5. Rgba（）和opacity的透明效果有什麼不一樣？

rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，

而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

6. css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

　　垂直方向：line-height

水平方向：letter-spacing

　 那麼問題來了，關於letter-spacing的妙用知道有哪些麼？

　　答案:能夠用於消除inline-block元素間的換行符空格間隙問題。

7. px和em的區別。

什麼是px和em
px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。(引自CSS2.0手冊);em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊);px和em的用法px.是絕對長度單位多咱們會將它用於設置頁面的寬度和高度等一些絕對的佈局和定上，而em則用之來設置字體的大小等一些相對定位；

px和em的區別
1.IE沒法調整那些使用px做爲單位字體的大小；
2.國外的大部分網站可以調整字體大小的緣由在於其使用了em做爲字體單位；
3.Firefox可以調整px和em，在我國可是96%以上網民使用IE瀏覽器(或內核)。

1em=16px

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。

8. 描述一個「reset」的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣處？

不一樣的瀏覽器對一些元素有不一樣的默認樣式，Normalize.css 和 Reset CSS都是用來重置瀏覽器默認樣式。

最主要的區別是Normalize.css保留不一樣瀏覽器同標籤相同的默認值，只重置不一樣默認樣式的差別，能夠說css reset的高級版。

相對於普通的css reset，Normalize的的瀏覽器的兼容性更好，畢竟是專業人士通過不一樣版本瀏覽器測試打造的css文件，看看它的兼容性就知道多強悍：Google Chrome (latest)、Mozilla Firefox (latest)、Mozilla Firefox ESR、Opera (latest)、Apple Safari 6+、Internet Explorer 8+

9. Sass、LESS是什麼？你們爲何要使用他們？

相同點：二者都是CSS預處理器，都具備相同的功能，能夠幫助咱們快速編譯代碼，幫助咱們更好的維護咱們的樣式代碼或者說維護項目吧。
不一樣點：語法規則不一樣，固然功能或許略有差異
我選擇Sass的緣由：
一、Sass也是成熟的CSS預處理器之一，並且有一個穩定，強大的團隊在維護
二、Sass對於我來講參考的教程多
三、Sass有一些成熟穩定的框架，特別是Compass，新秀還有Foundation之類
四、還有一個緣由是國外討論Sass的同行要多於LESS

10. display:none與visibility:hidden 的區別是什麼？