就從第一張圖開始吧

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;

移除了哪些元素

純表現元素

默認字體，不設置字體，以此渲染

字體標簽

水平居中

下劃線

大字體

中橫線

文本等寬

框架集

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

支持HTML5新標簽：

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，

可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

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

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模式下都能保持同一效果

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前端

總結

以上是生活随笔為你收集整理的html校验长度为9位,2018记一次前端面试笔试考题一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。