1. 程式人生 > >前端面試套路之HTML,CSS,JS

前端面試套路之HTML,CSS,JS

HTML相關問題:
1.doctype(文件型別) 的作用是什麼?
2.瀏覽器標準模式 (standards mode) 、幾乎標準模式(almost standards mode)和怪異模式 (quirks mode) 之間的區別是什麼?
3.HTML 和 XHTML 有什麼區別?
4.如果頁面使用 ‘application/xhtml+xml’ 會有什麼問題嗎?
5.如果網頁內容需要支援多語言,你會怎麼做?
6.在設計和開發多語言網站時,有哪些問題你必須要考慮?
7.使用 data- 屬性的好處是什麼?
8.如果把 HTML5 看作做一個開放平臺,那它的構建模組有哪些?
9.請描述 cookies、sessionStorage 和 localStorage 的區別。
10.請解釋 script、script async 和 script defer 的區別。
11.為什麼通常推薦將 CSS link 放置在 head之間,而將 JS script 放置在 body 之前?你知道有哪些例外嗎?
12.什麼是漸進式渲染 (progressive rendering)?
13.你用過哪些不同的 HTML 模板語言?

CSS 相關問題:
1.CSS 中類 (classes) 和 ID 的區別。
2.請問 “resetting” 和 “normalizing” CSS 之間的區別?你會如何選擇,為什麼?
3.請解釋浮動 (Floats) 及其工作原理。
4.描述z-index和疊加上下文是如何形成的。
5.請描述 BFC(Block Formatting Context) 及其如何工作。
6.列舉不同的清除浮動的技巧,並指出它們各自適用的使用場景。
7.請解釋 CSS sprites,以及你要如何在頁面或網站中實現它。
8.你最喜歡的圖片替換方法是什麼,你如何選擇使用。
9.你會如何解決特定瀏覽器的樣式問題?
10.如何為有功能限制的瀏覽器提供網頁?你會使用哪些技術和處理方法?
11.有哪些的隱藏內容的方法 (如果同時還要保證螢幕閱讀器可用呢)?
12.你用過柵格系統 (grid system) 嗎?如果使用過,你最喜歡哪種?
13.你用過媒體查詢,或針對移動端的佈局/CSS 嗎?
14.你熟悉 SVG 樣式的書寫嗎?
15.如何優化網頁的列印樣式?
16.在書寫高效 CSS 時會有哪些問題需要考慮?
17.使用 CSS 前處理器的優缺點有哪些?請描述你曾經使用過的 CSS 前處理器的優缺點。
18.如果設計中使用了非標準的字型,你該如何去實現?
19.請解釋瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器?
20.請描述偽元素 (pseudo-elements) 及其用途。
21.請解釋你對盒模型的理解,以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的佈局。
22.請解釋 * { box-sizing: border-box; } 的作用, 並且說明使用它有什麼好處?
23.請羅列出你所知道的 display 屬性的全部值
24.請解釋 inline 和 inline-block 的區別?
25.請解釋 relative、fixed、absolute 和 static 元素的區別
26.CSS 中字母 ‘C’ 的意思是疊層 (Cascading)。請問在確定樣式的過程中優先順序是如何決定的 (請舉例)?如何有效使用此係統?
27.你在開發或生產環境中使用過哪些 CSS 框架?你覺得應該如何改善他們?
28.請問你有嘗試過 CSS Flexbox 或者 Grid 標準規格嗎?
29.為什麼響應式設計 (responsive design) 和自適應設計 (adaptive design) 不同?
30.你有相容 retina 螢幕的經歷嗎?如果有,在什麼地方使用了何種技術?
31.請問為何要使用 translate() 而非 absolute positioning,或反之的理由?為什麼?

JS 相關問題:
1.請解釋事件代理 (event delegation)。
2.請解釋 JavaScript 中 this 是如何工作的。
3.請解釋原型繼承 (prototypal inheritance) 的原理。
4.你怎麼看 AMD vs. CommonJS?
5.請解釋為什麼接下來這段程式碼不是 IIFE (立即呼叫的函式表示式):function foo(){ }();要做哪些改動使它變成 IIFE?
6.描述以下變數的區別:null,undefined 或 undeclared?該如何檢測它們?
7.什麼是閉包 (closure),如何使用它,為什麼要使用它?
8.請舉出一個匿名函式的典型用例?
9.你是如何組織自己的程式碼?是使用模組模式,還是使用經典繼承的方法?
10.請指出 JavaScript 宿主物件 (host objects) 和原生物件 (native objects) 的區別?
11.請指出以下程式碼的區別:function Person(){}、var person = Person()、var person = new Person()?
12..call 和 .apply 的區別是什麼?
13.請解釋 Function.prototype.bind?
14.在什麼時候你會使用 document.write()?
15.請指出瀏覽器特性檢測,特性推斷和瀏覽器 UA 字串嗅探的區別?
16.請儘可能詳盡的解釋 Ajax 的工作原理。
17.使用 Ajax 都有哪些優劣?
18.請解釋 JSONP 的工作原理,以及它為什麼不是真正的 Ajax。
19.你使用過 JavaScript 模板系統嗎?如有使用過,請談談你都使用過哪些庫?
20.請解釋變數宣告提升 (hoisting)。
21.請描述事件冒泡機制 (event bubbling)。
22.”attribute” 和 “property” 的區別是什麼?
23.為什麼擴充套件 JavaScript 內建物件不是好的做法?
24.請指出 document load 和 document DOMContentLoaded 兩個事件的區別。
25.== 和 === 有什麼不同?
26.請解釋 JavaScript 的同源策略 (same-origin policy)。
27.如何實現下列程式碼:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
28.什麼是三元表示式 (Ternary expression)?“三元 (Ternary)” 表示什麼意思?
29.什麼是 “use strict”; ? 使用它的好處和壞處分別是什麼?
30.請實現一個遍歷至 100 的 for loop 迴圈,在能被 3 整除時輸出 “fizz”,在能被 5 整除時輸出 “buzz”,在能同時被 3 和 5 整除時輸出 “fizzbuzz”。
31.為何通常會認為保留網站現有的全域性作用域 (global scope) 不去改變它,是較好的選擇?
32.為何你會使用 load 之類的事件 (event)?此事件有缺點嗎?你是否知道其他替代品,以及為何使用它們?
33.請解釋什麼是單頁應用 (single page app), 以及如何使其對搜尋引擎友好 (SEO-friendly)。
34.你使用過 Promises 及其 polyfills 嗎? 請寫出 Promise 的基本用法(ES6)。
35.使用 Promises 而非回撥 (callbacks) 優缺點是什麼?
36.使用一種可以編譯成 JavaScript 的語言來寫 JavaScript 程式碼有哪些優缺點?
37.你使用哪些工具和技術來除錯 JavaScript 程式碼?
38.你會使用怎樣的語言結構來遍歷物件屬性 (object properties) 和陣列內容?
39.請解釋可變 (mutable) 和不變 (immutable) 物件的區別。
請舉出 JavaScript 中一個不變性物件 (immutable object) 的例子?
不變性 (immutability) 有哪些優缺點?
如何用你自己的程式碼來實現不變性 (immutability)?
40.請解釋同步 (synchronous) 和非同步 (asynchronous) 函式的區別。
41.什麼是事件迴圈 (event loop)?
請問呼叫棧 (call stack) 和任務佇列 (task queue) 的區別是什麼?
42.解釋 function foo() {} 與 var foo = function() {} 用法的區別

相關推薦

前端面試套路HTML,CSS,JS

HTML相關問題: 1.doctype(文件型別) 的作用是什麼? 2.瀏覽器標準模式 (standards mode) 、幾乎標準模式(almost standards mode)和怪異模式 (quirks mode) 之間的區別是什麼? 3.HTML

前端面試套路HTML,CSS,JS(二)

HTML相關相關: 1.Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義? 2.行內元素有哪些?塊級元素有哪些? 空(void)元素有那些? 3.介紹一下你對瀏覽器核心的理解? 4.常見的瀏覽器核心有哪些? 5.HTML5的離線儲存怎麼使用

前端最佳實踐HTML+CSSJS

一些前端的最佳實踐,包括 html,css,javascript HTML   語義 HTML5為我們提供大量的語義元素的目的就是為了準確地描述內容,確保你受益於其豐富的詞彙。 確保你瞭解你使用的語義元素。錯誤的使用語義元素是很糟糕的。 簡

利用前端三大件(html+css+js)開發一個簡單的“todolist”專案

一、介紹   todolist,即待辦事項。在windows android ios上參考微軟家出的那個To-Do應用,大概就是那樣的。我這個更簡單,功能只有“待辦” “已完成”兩項,並且是在瀏覽器開啟的。 二、介面和檔案結構這些...   實際在瀏覽器中的網頁如下:    在subline中的檔案結

三劍客HTML,CSS,JS

各種媒體 (1)每個網頁必須圖文並茂; (2)媒體格式統一使用常見格式; (3)所有圖片、媒體在網頁中都能正常顯示; (4)在素材資料夾中不存在網頁中沒有使用的各種媒體素材; (5)文字應用使用CSS設定; (6)文字清晰明瞭,與背景要有一定反差。 對於小白的我來說,實在是。。。但答應別人的還是要盡力去做到,

前端面試套路常見問題

1.你在昨天/本週學到了什麼? 2.編寫程式碼的哪些方面能夠使你興奮或感興趣? 3.你最近遇到 過什麼技術挑戰? 4.是在製作一個網頁應用或網站的過程中,你是如何考慮其UI,安全性,高效

[HTML/CSS面試題]--BAT三年面試集錦HTML/CSS面試(你一定會遇到)

本文集錦自面試過程中常遇到的問題,都是大家實際遇到的,都是平常收集的,如果你正在求職看一看肯定會幫助很大,如果在工作中也可以讀一讀鞏固基礎以查漏補缺. 辛苦整理希望只對大家有幫助! 很多面試題是我自己面試BAT親身經歷碰到的。整理分享出來希望更多的前端er共同進

前端基礎(HTML+CSS+JS)-day12

轉載 xhtml 規範 pla desc 響應狀態 pos 怪異 splay 寫在前面 上課第12天,打卡:     理想三旬; 前言 HTTP協議: 短連接:因為服務器的鏈接數是有限的。 如果一直維持一個長鏈接,那麽資源會很快就被耗盡;

我的IT夢——web前端開發HTML,CSS(一)

jpg 標記語言 方便 add body 前端 input cti 列表 HTML HTML全稱HyperText Markup Language(超文本標記語言) 標簽成對出現 <!DOCTYPE html> 文檔類型定義 < > 標

前端學習html css js

content insert 超鏈接 getc ret js面向對象 css語法 jsonp 代理模式 html 第一章 :HTML模板 HTML是什麽(超文本標記語言) HTML網頁主體結構 doctype標簽 head標簽 meat標簽 title標簽 body標簽

前端HTML/CSS/JS)-JavaScript編碼規範

resource htm 容易 blog 語境 asc 也有 命名方式 分享 1. 變量命名 (1)變量名不應以短巧為榮 左邊的變量名都不太清楚,代碼的擴展性不好,一旦代碼需要加功能的話,就容易出現obj1、obj2、obj3這種很抽象的命名方式。所以一開始就要把變

Python第五周前端學習HTML5/ CSS / JS

oct 我不 strong 描述 列表 rap arch center string <!-- html/head/body 文本 - h1-h6 p / br / hr / sub / sup / strong / b / em / del / i

Web前端開發HTML+CSS基礎入門(框架)

AR 網頁 html 表單提交 pos 部分加載 selected area pin HTML框架詳解與框架布局? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 1)什麽是框架 框架將瀏覽器劃分成不同的部分,每一部分加載不同的網頁,實現在同一

Web前端開發HTML+CSS基礎入門(使用CSS樣式的方式)

AD 層疊樣 b前端開發 col In 基於 允許 ML 語言 1) HTML<!DOCTYPE> 聲明標簽 a.定義和用法 <!DOCTYPE> 聲明必須是 HTML 文檔的第一行,位於 <html> 標簽之前。 <!DOCTYP

前端html+css+js面試題

HTML&CSS: 對Web標準的理解(結構、表現、行為)、瀏覽器核心、渲染原理、依賴管理、相容性、CSS語法、層次關係,常用屬性、佈局、選擇器、權重、盒模型、 Hack、CSS前處理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、H

前端面試指南js

JavaScript JavaScript的組成 JavaScript 由以下三部分組成: ECMAScript(核心):JavaScript 語言基礎 DOM(文件物件模型):規定了訪問HTML和XML的介面 BOM(瀏覽器物件模

前端H5基礎HTMLCSS的關係

學習web前端開發基礎技術需要掌握:HTML、CSS、JavaScript語言 1. HTML是網頁內容的載體 內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊,可以包含文字、圖片、視訊等。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊,可以包含文字、圖片、視訊等。

web前端時鐘(css+js)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>時鐘</title> <style type="te

web前端基礎教學視訊分享(一)html+css+js基礎教學(附淘寶網站開發教程)

路漫漫其修遠兮 吾將上下而求索 路很長,未來是你們的!獻給每位正在奮鬥的孩紙們。 【寫在前面】15年剛接觸前端的時候,覺得很有魅力,就好像自己能夠控制整個世界似的。 那個時候也不知道怎麼學習怎麼入門,很是苦惱,所以就在淘網上花了20元買了些教程,既然自己踩過坑,就不希望還有人像我這樣繼續

Web前端HTML+CSS基礎(二)

CSS Cascading Style Sheets  疊層樣式表 隨著HTML的成長,為了滿足頁面設計者的要求,HTML添加了很多顯示功能。但是隨著這些功能的增加,HTML變的越來越雜亂,而且HTML頁面也越來越臃腫。於是CSS便誕生了。 CSS不僅可以靜態地修飾網頁