2018記一次前端面試筆試考題一

就從第一張圖開始吧

1.0 第一張圖

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

二者都是外部引用CSS的方式，可是存在必定的區別：

• 區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
• 區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
• 區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
• 區別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。

1.2 介紹一下你對瀏覽器內核的理解？

主要分紅兩個部分：渲染引擎(Render Engine)和JS引擎。

• 渲染引擎：負責取得網頁的內容(html,xml和圖像等)，整理訊息(例如假如css)，以及計算網頁的顯示方式，而後輸出到顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不一樣。全部網頁瀏覽器、電子郵件客戶端以及它須要編輯、顯示網絡內容的應用程序都須要內核。
• JS引擎：解析和執行JavaScript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向與只指渲染引擎。

1.3常見的瀏覽器內核有哪些？

• Trident內核：IE，360，搜過瀏覽器；
• Gecko內核：Netscape6及以上版本，
• Presto內核：Opera
• Blink內核：Opera；
• Webkit內核：Safari，Chrome

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

新特性

• 加強了圖形渲染（canvas）、影音（video，audio）、數據存儲（sessionStorage。lcoalStorage）、新的技術webworker(專用線程)、 websocketsocket通訊、Geolocation 地理定位
• 語意化更好的內容元素，好比article、footer、header、nav、section;
• 表單控件，calendar、date、time、email、url、search;

移除了哪些元素

純表現元素

  <basefont> 默認字體，不設置字體，以此渲染
  <font> 字體標籤
  <center> 水平居中
  <u> 下劃線
  <big> 大字體
  <strike> 中橫線
  <tt> 文本等寬

框架集
  <frameset>
  <noframes>
  <frame>

如何處理html5新標籤的兼容性

支持HTML5新標籤：

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

固然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

html5.js cdn 地址：點我

1.5 請描述一下cookie、sessionStorage和localStorage的區別？

相同點：都存儲在客戶端
不一樣點：

• 1.存儲大小

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

• 2.有效時間

  • localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
  • sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
  • cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

• 3.數據與服務器之間的交互方式

  • cookie的數據會自動的傳遞到服務器，服務器端也能夠寫cookie到客戶端
  • sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

1.6 實現不使用border畫出1px高的線。在不一樣瀏覽器Quirksmode和csscompat模式下都能保持同一效果

<div style="height:1px;overflow:hidden;background:red"></div>

1.7 網頁驗證碼是幹嗎的。是爲了解決什麼安全問題？

驗證碼是爲了防止一些人使用軟件惡意註冊、發帖等行爲而設的。

它的存在是爲了確保登錄網站的是一個坐在電腦面前的真人，而不是一個自動登錄的軟件。

1.8 title和h1的區別。b和strong的區別、i與em的區別

• title屬性沒有明確意義只表示是個標題， H1 則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
• strong是標明重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時：
• b會重讀，而 是展現強調內容。
• i內容展現爲斜體
• em 表示強調的文本；

1.9 介紹一下標準的css的盒子模型？與低版本ie的盒子模型有什麼不一樣？

CSS盒子模型：由四個屬性組成的外邊距(margin)、內邊距(padding)、邊界(border)、內容區(width和height);

標準的CSS盒子模型和低端IE CSS盒子模型不一樣：寬高不同

• 標準的css盒子模型寬高就是內容區寬高；
• 低端IE css盒子模型寬高 內邊距﹢邊界﹢內容區；

1.20 css選擇符有哪些？哪些屬性能夠繼承？

css選擇器

• 類型選擇符（body）、羣組選擇符（h1，h2，h3，span）、包含選擇符（h2 span）、ID選擇符（#id）、Class選擇符（.content）

哪些能夠繼承

• class屬性，僞類A標籤，列表ul、li、dl、dd、dt能夠繼承

拓展：css優先級

!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

更多技術分享歡迎關注微信公衆號：node前端