前端高頻筆試題之HTML/CSS部分

kkkylie發表於2019-04-14
前端筆試HTMLCSS

大佬略過(๑•ᴗ•๑)，有問題歡迎指出在下及時更改~感謝~

前端高頻筆試題之HTML/CSS部分
大家也知道 筆試總是偶爾會考些奇奇怪怪的東西~（還不是因為你cai） 進入正題啦~

1.什麼是html？

HTML並不是真正的的程式語言，他是一種 標 記 語 言 ，用來結構化和含義化你想要放 在web 網站上的那些內容。它由一系列的元素（elements）所組成，這些元素可以用來 封裝你的內容中擔任不同工作的各部分和各個角色。

2.簡述一下你對HTML語義化的理解？

  1. HTML語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析；
  2. 即使在沒有樣式CSS 的情況下也能以一種文件格式顯示，並且是容易閱讀的；
  3. 搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，有利於SEO；
  4. 使閱讀原始碼的人更容易將網站分塊，便於閱讀、維護和理解；

3.DOCTYPE的作用？

  1. 宣告位於文件中的最前面，處於 標籤之前。告知瀏覽器以何種模式來渲染文件。
  2. 嚴格模式的排版和 JS 運作模式是以該瀏覽器支援的最高標準執行。
  3. 在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站 點無法工作。
  4. DOCTYPE 不存在或格式不正確會導致文件以混雜模式呈現。

4.介紹一下你對瀏覽器核心的理解？

要或者說核心的部分是“Rendering Engine”，可大概譯為“渲染引擎”，不過我們 一般習慣將之稱為“瀏覽器核心”。負責對網頁語法的解釋（如標準通用標記語言下的一個 應用 HTML、JavaScript）並渲染（顯示）網頁。 所以，通常所謂的瀏覽器核心也就是瀏 覽器所採用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊。 不同的瀏覽器核心對網頁編寫語法的解釋也有不同，因此同一網頁在不同的核心的瀏覽器裡 的渲染（顯示）效果也可能不同，這也是網頁編寫者需要在不同核心的瀏覽器中測試網頁顯 示效果的原因。 常見瀏覽器核心： Trident 核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱 MSHTML] Gecko核心：Netscape6 及以上版本，FF,MozillaSuite/SeaMonkey 等。 Presto 核心：Opera7及以上。 [Opera核心原為：Presto，現為、Blink;] Webkit 核心：Safari,Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）] EdgeHTML核心：Microsoft Edge。 [此核心其實是從 MSHTML fork 而來，刪掉了幾 乎所有的 IE私有特性

5.對WEB標準以及W3C的理解與認識？

  1. 標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外鏈 css 和 js 腳 本、結構行為表現的分離，
  2. 檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所 訪問、更少的程式碼和元件，
  3. 容易維護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提 高網站易用性。

6.CSS中優雅降級和漸進增強有什麼區別？

優雅降級和漸進增強印象中是隨著css3 流出來的一個概念。由於低階瀏覽器不支援 css3，但 css3 的效果又太優秀不忍放棄，所以在高階瀏覽中使用 css3 而低階瀏覽器只保證最基本的功能。咋一看兩個概念差不多，都是在關注不同瀏覽器下的不同體驗，關鍵的區別是他們所側重的內容，以及這種不同造成的工作流程的差異。“優雅降級”觀點認為應該針對那些最高階、最完善的瀏覽器來設計網站。“漸進增強”觀點則認為應關注於內容本身。

7.對BFC規範的理解有哪些？

  1. 定義： BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域， 只有 Block-level box 參與，它規定了內部的Block-level Box 如何佈局，並且與這個區域 外部毫不相干。 佈局規則： A. 內部的Box 會在垂直方向，一個接一個地放置。 B. Box垂直方向的距離由 margin決定。屬於同一個 BFC的兩個相鄰 Box的 margin 會發 生重疊。 C. 每個元素的 margin box 的左邊，與包含塊border box 的左邊相接觸(對於從左往右的 格式化，否則相反)。即使存在浮動也是如此。 D. BFC 的區域不會與 float box 重疊。 E. BFC 就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反 之也如此。 F. 計算 BFC 的高度時，浮動元素也參與計算。
  2. 哪些元素會生成 BFC： A. 根元素 B. float 屬性不為 none C. position為 absolute 或 fixed D. display為inline-block， table-cell， table-caption， flex， inline-flex F. overflow 不為 visible

8.Rgba() 和 Opacity 設定透明度的區別是什麼？

rgba()和opacity都能實現透明效果，但最大的不同是opacity作用於元素，以及元素內的所有內容的透明度，而rgba()只作用於元素的顏色或其背景色。（設定rgba透明的元素的子元素不會繼承透明效果！）

9. 描述一個"reset"的CSS檔案並如何使用它。知道normalize.css嗎？你瞭解他們的不同之處嗎？

重置樣式非常多，凡是一個前端開發人員肯定有一個常用的重置CSS檔案並知道如何使用它們。他們是盲目的在做還是知道為什麼這麼做呢？原因是不同的瀏覽器對一些元素有不同的預設樣式，如果你不處理，在不同的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。你可能會用Normalize來代替你的重置樣式檔案。它沒有重置所有的樣式風格，但僅提供了一套合理的預設樣式值。既能讓眾多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗體的標題）。在這一方面，無法做每一個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。

10. 請談一下你對網頁標準和標準制定機構重要性的理解。

網頁標準和標準制定機構都是為了能讓web發展的更‘健康’，開發者遵循統一的標準，降低開發難度，開發成本，SEO也會更好做，也不會因為濫用程式碼導致各種BUG、安全問題，最終提高網站易用性。（無標準答案-.-）

11.為什麼利用多個域名來儲存網站資源會更有效？

CDN快取更方便，突破瀏覽器併發限制，節約cookie頻寬，節約主域名的連線數，優化頁面響應速度，防止不必要的安全問題。

12 怎樣實現三欄佈局，兩邊寬度固定，中間自適應？

聖盃佈局，雙飛翼佈局（因為涉及很多程式碼 貼個連結寫的很詳細）

。。。

未完待續。。。(๑•ᴗ•๑)

相關文章