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


網上有這套題的答案,版本也很多,我做了很多參考。本文就當個小筆記,可能有錯誤,還望指正~

 

第1章  Html篇

1. 你做的網頁在哪些瀏覽器測試過?這些瀏覽器的內核分別是什么?

瀏覽器類型

內核

Firefox

Gecko

搜狗、谷歌chrome

WebKit

360

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模式下,一個元素的高度是由其包含的內容來決定的,如果父元素沒有設置百分比的高度,子元素設置—個百分比的高度是無效的。

margin0 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。

alttitle的相同點:

同屬於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的區別。

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

 pxem的區別
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的原因:
1、Sass也是成熟的CSS預處理器之一,而且有一個穩定,強大的團隊在維護
2、Sass對於我來說參考的教程多
3、Sass有一些成熟穩定的框架,特別是Compass,新秀還有Foundation之類
4、還有一個原因是國外討論Sass的同行要多於LESS

10. display:none與visibility:hidden 的區別是什么?

  • display : 隱藏對應的元素但不擠占該元素原來的空間。
  • visibility: 隱藏對應的元素並且擠占該元素原來的空間。

   即是,使用CSS display:none屬性后,HTML元素(對象)的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性后,HTML元素(對象)僅僅是在視覺上看不見(完全透明),而它所占據的空間位置仍然存在。

 

第3章  Javascript:

 1. JavaScrip的數據類型都有什么?

基本數據類型:String,boolean,Number,Undefined, Null

  引用數據類型:Object(Array,Date,RegExp,Function)

2. 己知ID的Input輸入框,希望獲取這個輸入框的輸入值,怎么做?(不使用第三方框架)

document.getElementById(“ID”).value

3. 希望獲取到頁面中所有的checkbox怎么做?(不使用第三方框架)

 

4. 當一個DOM節點被點擊時候,我們希望能夠執行一個函數,應該怎么做?

 

5. 什么是Ajax和JSON,它們的優缺點。

 

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

6. 看下列代碼輸出為何?解釋原因。

var a;

alert(typeof(a));

alert(b);

 

  解釋:Undefined是一個只有一個值的數據類型,這個值就是“undefined”,在使用var聲明變量但並未對其賦值進行初始化時,這個變量的值就是undefined。而b由於未聲明將報錯。注意未申明的變量和聲明了未賦值的是不一樣的。

7. 看下列代碼,輸出什么?解釋原因。

var a = new Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.vaIue);

輸出2.

8. 說出以下函數的作用是?空白區域應該填寫什么?

 

9. (設計題)想實現一個對頁面某個節點的拖曳?如何做?(使用原生JS)回答出基本概念和過程即可。

a)       給需要拖拽的節點綁定mousedown, mousemove, mouseup事件

b)      mousedown事件觸發后,開始拖拽

c)       mousemove時,需要通過event.clientX和clientY獲取拖拽位置,並實時更新位置

d)      mouseup時,拖拽結束

e)       需要注意瀏覽器邊界的情況

 10.原生 JS 的 window.onload 與 Jquery 的$(document).ready(function(){})有什么不同?如何用原生JS實現Jq的ready方法?

window.onload()方法是必須等到頁面內包括圖片的所有元素加載完畢后才能執行。

$(document).ready()是DOM結構繪制完畢后就執行,不必等到加載完畢。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM