前端HTML+CSS筆試題面試題

前言

前端的面試和學習都是不可或缺的事情，在這里收集一些高頻面試題，供自己現在和以后查閱和查缺補漏的同時，也希望對小伙伴有所幫助。

目錄:

前端HTML+CSS筆試題面試題

前端JS筆試題面試題

前端Vue筆試題面試題

前端小程序筆試題面試題

HTML

1、HTML語義化的理解

1、用正確的標簽做正確的事情！

2、HTML語義化就是讓頁面的內容結構化，便于對瀏覽器、搜索引擎解析；

3、在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的。

4、搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于 SEO。

5、使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解

2、HTML5有哪些新特性、移除了那些元素？

HTML5現在已經不是 <font color='red'>SGML</font> 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加

  • 繪畫 canvas
  • 用于媒介回放的 <font color='red'>video</font> 和 <font color='red'>audio</font> 元素
  • 本地離線存儲 <font color='red'>localStorage</font> 長期存儲數據，瀏覽器關閉后數據不丟失
  • <font color='red'>sessionStorage</font> 的數據在瀏覽器關閉后自動刪除
  • 語意化更好的內容元素，比如<font color='red'>article、footer、header、nav、section</font>
  • 表單控件，<font color='red'>calendar、date、time、email、url、search</font>
  • 新的技術<font color='red'>webworker、 websocket、 Geolocation</font>

移除的元素：

  • 純表現的元素：<font color='red'>basefont、big、center、font、s、strike、 tt、u</font>
  • 對可用性產生負面影響的元素：<font color='red'>frame、frameset、noframes</font>

支持HTML5新標簽：

  • <font color='red'>IE8/IE7/IE6</font>支持通過<font color='red'>document.createElement</font>方法產生的標簽
  • 可以利用這一特性讓這些瀏覽器支持<font color='red'>HTML5</font>新標簽
  • 瀏覽器支持新標簽后，還需要添加標簽默認的樣式
  • 當然也可以直接使用成熟的框架、比如<font color='red'>html5shim</font>

3、<img>的title和alt有什么區別

  • alt是圖片加載失敗時，顯示在網頁上的替代文字；
  • title是鼠標放上面時顯示的文字。
  • alt是img必要的屬性，而title不是。

4、從瀏覽器地址欄輸入url到顯示頁面的步驟

  • 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
  • 服務器交給后臺處理完成后返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
  • 瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部數據結構（如HTML的DOM）；
  • 載入解析到的資源文件，渲染頁面，完成。

5、HTML全局屬性(global attribute)有哪些

  • class:為元素設置類標識
  • data-*: 為元素增加自定義屬性
  • draggable: 設置元素是否可拖拽
  • id: 元素id，文檔內唯一
  • lang: 元素內容的的語言
  • style: 行內css樣式
  • title: 元素相關的建議信息

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

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核

JS引擎則：解析和執行javascript來實現網頁的動態效果

最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎

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

cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）

cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞

sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

存儲大小：

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

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

8、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素和塊級元素有什么區別？

  • 行內元素有：a b span img input select strong
  • 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
  • 空元素：<br> <hr> <img> <input> <link> <meta>
  • 行內元素不可以設置寬高，不獨占一行
  • 塊級元素可以設置寬高，獨占一行

9、如何在頁面上實現一個圓形的可點擊區域？

  • svg
  • border-radius
  • 純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

10、HTTP狀態碼及其含義

  • 1XX：信息狀態碼
  • 2XX：成功狀態碼
  • 3XX：重定向
  • 4XX：客戶端錯誤
  • 5XX: 服務器錯誤

11、你能描述一下漸進增強和優雅降級之間的不同嗎

漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

12、渲染優化

1、使用CSS3代碼代替JS動畫（盡可能避免重繪重排以及回流）

2、頁面中空的href和 src會阻塞頁面其他資源的加載 (阻塞下載進程)

3、用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能

4、當需要設置的樣式很多時設置className而不是直接操作style

5、少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作

6、圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳

13、如何進行網站性能優化

1、減少HTTP請求：合并文件、CSS精靈、inline Image

2、將樣式表放到頁面頂部

3、不使用CSS表達式

4、使用<link>不使用@import

5、將腳本放到頁面底部

6、將javascript和css從外部引入

7、壓縮javascript和css

CSS

1、盒子模型

盒模型分為兩類: IE盒模型和標準盒模型。 兩者的區別在于:

  • IE盒模型的width/height = content + border + padding
  • 標準盒模型的width/height = content

2、CSS優先級算法如何計算？

  • 優先級就近原則，同權重情況下樣式定義最近者為準
  • 載入樣式以最后載入的定位為準
  • 優先級為: !important > id > class > tag; !important比 內聯優先級高

3、CSS3有哪些新特性

  • 新增各種css選擇器
  • 圓角 border-radius
  • 多列布局
  • 陰影和反射
  • 文字特效text-shadow
  • 線性漸變
  • 旋轉transform

CSS3新增偽類有那些？

  • :after在元素之前添加內容,也可以用來做清除浮動。
  • :before在元素之后添加內容。
  • :enabled已啟用的表單元素。
  • :disabled已禁用的表單元素。
  • :checked單選框或復選框被選中。

4、CSS常用選擇器

通配符：*
ID選擇器：#ID
類選擇器：.class
元素選擇器：p、a    等
后代選擇器：p span、div a   等
偽類選擇器：a:hover 等
屬性選擇器：input[type="text"]  等

5、link與@import的區別

  • link是HTML方式，@import是CSS方式
  • link最大限度支持并行下載，@import過多嵌套導致串行下載，出現FOUC(文檔樣式短暫失效)
  • link可以通過rel="alternate stylesheet"指定候選樣式
  • 瀏覽器對link支持早于@import，可以使用@import對老瀏覽器隱藏樣式
  • @import必須在樣式規則之前，可以在css文件中引用其他文件
  • 總體來說：link優于@import

6、如何創建塊級格式化上下文(block formatting context),BFC有什么用

什么是BFC?

  • BFC格式化上下文，它是一個獨立的渲染區域，讓處于 BFC內部的元素和外部的元素相互隔離，使內外元素的定位不會相互影響

如何產生BFC?

  • display: inline-block
  • position: absolute/fixed

BFC作用

  • BFC最大的一個作用就是：在頁面上有一個獨立隔離容器，容器內的元素和容器外的元素布局不會相互影響
解決上外邊距重疊;重疊的兩個box都開啟bfc;
解決浮動引起高度塌陷;容器盒子開啟bfc
解決文字環繞圖片;左邊圖片div,右邊文字容器p,將p容器開啟bfc

7、絕對定位和相對定位的區別

position: absolute

絕對定位：是相對于元素最近的已定位的祖先元素

position: relative

相對定位：相對定位是相對于元素在文檔中的初始位置

8、display:inline-block什么時候不會顯示間隙？

  • 移除空格
  • 使用margin負值
  • 使用font-size:0
  • letter-spacing
  • word-spacing

9、清除浮動的幾種方式，各自的優缺點

  • 父級div定義height
  • 結尾處加空div標簽clear:both
  • 父級div定義偽類:after和zoom
  • 父級div定義overflow:hidden
  • 父級div也浮動，需要定義寬度
  • 結尾處加br標簽clear:both
  • 比較好的是第3種方式，好多網站都這么用

10、為什么要初始化CSS樣式?

  • 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
  • 當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化

11、自適應布局

思路：

  • 左側浮動或者絕對定位，然后右側margin撐開
  • 使<div>包含，然后靠負margin形成bfc
  • 使用flex

12、position有哪些值？有什么作用？

  • static。默認值，不脫離文檔流，top，right，bottom，left等屬性不生效。
  • relative。不脫離文檔流，依據自身位置進行偏離，當子元素設置absolute，將依據它進行偏離。
  • absolute。脫離文檔流，依據top，right，bottom，left等屬性在正常文檔流中偏移位置。
  • fixed。通過瀏覽器窗口進行定位，出現滾動條的時候，不會隨之滾動。

13、垂直居中有哪些方法？

  • 單行文本的話可以使用height和line-height設置同一高度。
  • position+margin：設置父元素:position: relative;，子元素height: 100px;position:absolute;top: 50%; margin: -50px 0 0 0;（定高）
  • position+transform：設置父元素position:relative,子元素：position: absolute;top: 50%;transform: translate(0, -50%);（不定高）
  • 百搭flex布局(ie10+)，設置父元素display:flex;align-items: center;（不定高）

14、水平居中的方法

  • 元素為行內元素，設置父元素text-align:center
  • 如果元素寬度固定，可以設置左右margin為auto;
  • 如果元素為絕對定位，設置父元素position為relative，元素設left:0;right:0;margin:auto;
  • 使用flex-box布局，指定justify-content屬性為center
    display設置為tabel-ceil

15、Flex布局

display: flex  //設置Flex模式
flex-direction: column  //決定元素是橫排還是豎著排
flex-wrap: wrap     //決定元素換行格式
justify-content: space-between  //同一排下對齊方式，空格如何隔開各個元素
align-items: center     //同一排下元素如何對齊
align-content: space-between    //多行對齊方式

16、stylus/sass/less區別

  • 均具有“變量”、“混合”、“嵌套”、“繼承”、“顏色混合”五大基本特性
  • Scss和LESS語法較為嚴謹，LESS要求一定要使用大括號“{}”，Scss和Stylus可以通過縮進表示層次與嵌套關系
  • Scss無全局變量的概念，LESS和Stylus有類似于其它語言的作用域概念
  • Sass是基于Ruby語言的，而LESS和Stylus可以基于NodeJS NPM下載相應庫后進行編譯；

20、知道css有個content屬性嗎？有什么作用？有什么應用？

css的content屬性專門應用在 before/after偽元素上，用于來插入生成內容。最常見的應用是利用偽類清除浮動。

21、CSS在性能優化方面的實踐

  • css壓縮與合并、Gzip壓縮
  • css文件放在head里、不要用@import
  • 盡量用縮寫、避免用濾鏡、合理使用選擇器

22、CSS3動畫（簡單動畫的實現，如旋轉等）

  • 依靠CSS3中提出的三個屬性：transition、transform、animation
  • transition：定義了元素在變化過程中是怎么樣的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
  • transform：定義元素的變化結果，包含rotate、scale、skew、translate。
  • animation：動畫定義了動作的每一幀（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 本文由我收集總結了一些前端面試題，初學者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識...
    王鈺峰閱讀 492評論 0贊 2
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什么? ...
    Simon_s閱讀 2,228評論 0贊 8
  • 一、理論基礎知識部分 1.1、講講輸入完網址按下回車，到看到網頁這個過程中發生了什么 a. 域名解析 b. 發起T...
    我家媳婦蠢蠢噠閱讀 3,164評論 2贊 106
  • 1.行內元素和塊級元素?img算什么?行內元素怎么轉化為塊級元素? 行內元素：和有他元素都在一行上，高度、行高及外...
    極樂君閱讀 2,453評論 0贊 20
  • 請參看我github中的wiki，不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,186評論 2贊 19