2-面試題-HTML5+CSS3(前端常見面試題帶答案 )

阿新 • • 發佈：2019-01-06

HTML5+CSS3常見面試題目

1. （超文字標記語言），XML（可擴充套件標記語言）和HTML的之間有什麼關係？

SGML（標準通用標記語言）是一個標準，告訴我們怎麼去指定文件標記。他是隻描述文件標記應該是怎麼樣的元語言，HTML是被用SGML描述的標記語言。

因此利用SGML建立了HTML參照和必須共同遵守的DTD，你會經常在HTML頁面的頭部發現“DOCTYPE”屬性，用來定義用於解析目標DTD

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

現在解析SGML是一件痛苦的事情，所以建立了XML使事情更好。XML使用了SGML，例如：在SGML中你必須使用起始和結束標籤，但是在XML你可以有自動關閉的結束標籤。

XHTML創建於XML，他被使用在HTML4.0中。你可以參考下面程式碼片段中展示的XML DTD

總之，SGML是所有型別的父類，較舊的HTML利用SGML，HTML4.0使用派生自XML的XHTML

HTML5是最新的HTML標準，他的主要目標是提供所有內容而不需要任何的像flash，silverlight等的額外外掛，這些內容來自動畫，視訊，富GUI等

HTML5是全球資訊網聯盟（W3C）和網路超文字應用技術工作組（WHATWG）之間合作輸出的

HTML5沒有使用SGML或者XHTML，他是一個全新的東西，因此你不需要參考DTD，對於HTML5，你僅需放置下面的文件型別程式碼告訴瀏覽器識別這是HTML5文件

不會，瀏覽器將不能識別他是HTML文件，同時HTML5的標籤將不能正常工作

幾乎所有的瀏覽器Safari，Chrome，Firefox，Opera，IE都支援HTML5

一個典型的WEB頁面包含頭部，腳部，導航，中心區域，側邊欄。現在如果我們想在在HTML4的HTML區域中呈現這些內容，我們可能要使用DIV標籤。

但是在HTML5中通過為這些區域建立元素名稱使他們更加清晰，也使得你的HTML更加可讀

以下是形成頁面結構的HTML5

元素的更多細節：

· <header>：代表HTML的頭部資料

· <footer>：頁面的腳部區域

· <nav>：頁面導航元素

· <article>：自包含的內容

· <section>：使用內部article去定義區域或者把分組內容放到區域裡

· <aside>：代表頁面的側邊欄內容

9. （Scalable Vector Graphics可縮放向量圖形）？

SVG（Scalable Vector Graphics可縮放向量圖形）表示可縮放向量圖形。他是基於文字的圖形語言，使用文字，線條，點等來進行影象繪製，這使得他輕便，顯示更加迅速

Canvas是HTML中你可以繪製圖形的區域

14. 和HTML5中的SVG去畫一個矩形？

HTML5使用SVG繪製矩形的程式碼

<svgxmlns="http://www.w3.org/2000/svg" version="1.1">

<rectstyle="fill: rgb(0, 0, 255); stroke-width: 1px; stroke: rgb(0, 0,0);" height="[object SVGAnimatedLength]" width="[objectSVGAnimatedLength]">

</rect>

HTML5使用Canvas繪製矩形的程式碼

varc=document.getElementById("mycanvas");

varctx=c.getContext("2d");

ctx.rect(20,20,150,100);

ctx.stroke();

選擇器在你想應用一個樣式的時候，幫助你去選擇元素。舉例，下面是簡單的被命名為”instro”的樣式，他適用於HTML元素顯示紅色背景

<style>

.intro{

background-color:red;

}

</style>

應用上面的”intro”樣式給div，我們可以使用”class”選擇器，如下圖所示

<divclass="intro">

<p>Myname is Shivprasad koirala.</p>

<p>Iwrite interview questions.</p>

</div>

16. 值來應用一個CSS樣式？

假設，你有一個HTML段落標籤，使用id是”mytext”，就和下面的片段中顯示的那樣

<p id="mytext">This is HTML interview questions.</p>

你可以使用”#”選擇器和”id”的名字建立一種樣式，並把CSS值應用到段落標籤中，因此應用樣式到”mytext”元素，我們可以使用”#mytext”，如下所示

<style>

#mytext

{

background-color:yellow;

}

</style>

迅速修訂一些重要的選擇器

設定所有段落標籤背景色為黃色

divp

{

background-color:yellow;

}

設定所有div內部的段落標籤為黃色背景

divp

{

background-color:yellow;

}

設定所有含有“target”屬性的變為黃色背景

a[target]

{

background-color:yellow;

}

<ahref="http://www.questpond.com">ASP.NET interviewquestions</a>

<ahref="http://www.questpond.com" target="_blank">c#interview questions</a>

<ahref="http://www.questpond.org" target="_top">.NETinterview questions with answers</a>

當控制得到焦點的時候設定所有的元素為黃色背景

input:focus

{

background-color:yellow;

}

根據相關連線操作設定超連結樣式

a:link {color:green;}

a:visited {color:green;}

a:hover {color:red;}

a:active {color:yellow;}

以下是完整程式碼

<style>

.magazine

{

-moz-column-count:3;/* Firefox */

-webkit-column-count:3;/* Safari and Chrome */

column-count:3;

-moz-column-gap:40px;/* Firefox */

-webkit-column-gap:40px;/* Safari and Chrome */

column-gap:20px;

-moz-column-rule:4pxoutset #ff00ff; /* Firefox */

-webkit-column-rule:4pxoutset #ff00ff; /* Safari and Chrome */

column-rule:6pxoutset #ff00ff;

}

</style>

你可以使用class屬性來應用樣式到文字

<divclass="magazine">

Your textgoes here which you want to divide in to 3 columns.

</div>

CSS和模型是圍繞在HTML元素周圍的定義Border(邊界)，padding(內邊距)和margin(外邊距)的矩形空間
Border(邊界)：定義了元素包含的最大區域，我們能夠使邊界可見，不可見，定義高度和寬度等；
Padding(內邊距)：定義了邊界和內部元素的間距
Margin：定義了邊界和任何相鄰元素的間距

例如以下是簡單的CSS程式碼定義了盒子的邊界，內邊距和外邊距值

.box {

width: 200px;

border: 10pxsolid #99c;

padding: 20px;

margin: 50px;

}

現在如果我們應用了以上的CSS到一個如下顯示的DIV標籤，你輸出將會和下面圖形中顯示的那樣。我已經建立兩個測試“Some text”和“Some other text”，因此我們能看到多少margin(外邊距)的屬性功能

這裡面試官期待你回答兩個Css的文字效果，以下是兩種需要注意的效果

考慮以下會執行上百萬次的繁重的迴圈程式碼

functionSomeHeavyFunction()

{

for (i = 0; i < 10000000000000; i++)

{

x = i + x;

}

比方說上面的迴圈程式碼在HTML按鈕點選以後執行，現在這個方法執行是同步的，換句話說這個瀏覽器必須等到迴圈完成才能操作

Web worker執行緒不能修改HTML元素，全域性變數和Window.Location一類的視窗屬性。你可以自由使用Javascript資料型別，XMLHttpRequest呼叫等。

建立一個worker執行緒，我們需要通過Javascript檔名建立worker物件

varworker = newWorker("MyHeavyProcess.js");

我們需要使用“PostMessage”傳送資訊給worker物件，下面是相同的程式碼。

1	worker.postMessage();

當worker執行緒傳送資料的時候，我們在呼叫結束的時候，通過”onMessage”事件獲取

w.terminate();

網路世界的普遍需求是從伺服器更新。以一個股票應用為例，瀏覽器必須定期從伺服器更新最新的股票值。

現在實現這類需求開發者通常寫一些PULL的程式碼，到伺服器同時抓取某些區間資料。現在PULL的解決方案是很好的，但是這使得網路健談有很多的呼叫，同時增加了伺服器的負擔。

因此相比於PULL，如果我們能採用某種PUSH的解決方案那會是很棒的。簡而言之，當伺服器更新的時候，將會發送更新到瀏覽器客戶端，那可以被接受通過使用”SERVER SENT EVENT”

因此首要的是瀏覽器需要連線將會發送更新的伺服器資源，比方說我們有一個”stock.aspx”頁面會發送股票更新，因此連線該頁面，我們需要使用附加時間來源物件，如下所示：

varsource=newEventSource("stock.aspx");

當我們將要接受伺服器傳送的更新資訊時，我們需要附加功能。我們需要附加功能到”onmessage”事件就像以下顯示的那樣。

source.onmessage = function (event) {

document.getElementById("result").innerHTML += event.data + "<br>";

};

現在來自服務端，我們需要去傳送事件，下面是一些用命令需要從服務端傳送的重要事件列表

Response.Write("retry: 10000");

如果你想附加事件，我們需要使用“addEventListener”事件，如下程式碼所示：

source.addEventListener('message',function(e) {

console.log(e.data);

}, false);

來自伺服器端的以下資訊將會觸發Javascript的”message”方法

event: message

data : hello

很多時候我們會儲存使用者本地資訊到電腦上，例如：比方說使用者有一個填充了一半的長表格，然後突然網路連線斷開了，這樣使用者希望你能儲存這些資訊到本地，當網路恢復的時候，他想獲取這些資訊然後傳送到伺服器進行儲存現代瀏覽器擁有的儲存被叫做“Local Storage”,你可以儲存這些資訊。

資料新增到本地儲存採用鍵值對，以下示例顯示了城市資料”India”添加了鍵”Key001”

本地儲存沒有生命週期，它將保留知道使用者從瀏覽器清除或者使用Javascript程式碼移除。

28. （儲存在使用者本地終端上的資料）之間的區別是什麼？

會話儲存和本地儲存類似，但是資料在會話中有效，簡而言之資料在你關閉瀏覽器的時候就被刪除了。為了建立一個會話儲存你需要使用“sessionStorage.variablename.”在以下的程式碼我們建立了一個名為”clickcount”的變數；如果你重新整理瀏覽器則數目增加，但是如果你關閉瀏覽器，“clickcount”變數又會從0開始。

if(sessionStorage.clickcount)

{

sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;

}

else

{

sessionStorage.clickcount = 0;

}

本地儲存資料持續永久，但是會話在瀏覽器開啟時有效知道瀏覽器關閉時會話變數重置

WebSQL是一個在瀏覽器客戶端的結構關係資料庫，這是瀏覽器內的本地RDBMS(關係型資料庫系統)，你可以使用SQL查詢

不是，許多人把它標記為HTML5，但是他不是HTML5的規範的一部分，這個規範是基於SQLite的

第一步我們需要做的是使用如下所示的“OpenDatabase”方法開啟資料庫，第一個引數是資料庫的名字，接下來是版本，然後是簡單原文標題，最後是資料庫大小；

vardb=openDatabase('dbCustomer','1.0','Customer app’, 2 * 1024 * 1024);

為了執行SQL，我們需要使用“transaction”方法，並呼叫”executeSql”方法來使用SQL

db.transaction(function(tx)

{

tx.executeSql('CREATETABLE IF NOT EXISTS tblCust(id unique, customername)');

tx.executeSql('INSERTINTO tblcust (id, customername) VALUES(1, "shiv")');

tx.executeSql('INSERTINTO tblcust (id, customername) VALUES (2, "raju")');

}

萬一你要使用“select”查詢你會得到資料”result”集合，我們可以通過迴圈展示到HTML的使用者介面

db.transaction(function(tx)

{

tx.executeSql('SELECT* FROM tblcust', [], function (tx, results) {

for (i = 0; i < len; i++)

{

msg = "<p><b>" + results.rows.item(i).log +"</b></p>";

document.querySelector('#customer).innerHTML+= msg;

}

}, null);

});

一個最需要的事最終是使用者的離線瀏覽，換句話說，如果網路連線不可用時，頁面應該來自瀏覽器快取，離線應用快取可以幫助你達到這個目的應用快取可以幫助你指定哪些檔案需要快取，哪些不需要。

首先我們需要指定”manifest”檔案，“manifest”檔案幫助你定義你的快取如何工作。以下是”mainfest”檔案的結構

CACHEMANIFEST

# version1.0

CACHE :

· 所有manifest檔案都以“CACHE MANIFEST”語句開始.

· #（雜湊標籤）有助於提供快取檔案的版本.

· CACHE 命令指出哪些檔案需要被快取.

· Mainfest檔案的內容型別應是“text/cache-manifest”.

以下是如何在ASP.NET C#使用manifest快取

Response.ContentType= "text/cache-manifest";

Response.Write("CACHEMANIFEST \n");

Response.Write("#2012-02-21 v1.0.0 \n");

Response.Write("CACHE: \n");

Response.Write("Login.aspx\n");

Response.Flush();

Response.End();

建立一個快取manifest檔案以後，接下來的事情實在HTML頁面中提供mainfest連線，如下所示：

當以上檔案第一次執行，他會新增到瀏覽器應用快取中，在伺服器宕機時，頁面從應用快取中獲取

應用快取通過變更“#”標籤後的版本版本號而被移除，如下所示：

CACHEMANIFEST

# version2.0(new)

CACHE :

Aboutus.aspx

NETWORK :

Pages.aspx

應用快取中的回退幫助你指定在伺服器不可訪問的時候，將會顯示某檔案。例如在下面的manifest檔案中，我們說如果誰敲擊了”/home”同時伺服器不可到達的時候，”homeoffline.html”檔案應送達

FALLBACK:

/home/ /homeoffline.html

網路命令描述不需要快取的檔案，例如以下程式碼中，我們說”home.aspx”永遠都不應該被快取或者離線訪問。

1 2	NETWORK: home.aspx

39. 如何在 HTML5 頁面中嵌入音訊?

HTML5 支援 MP3、Wav 和 Ogg 格式的音訊，下面是在網頁中嵌入音訊的簡單示例：

<sourcesrc=”jamshed.mp3″ type=”audio/mpeg”>

Yourbrowser does’nt support audio embedding feature.

</audio>

40. 響應式佈局用什麼實現？

利用css3的media query媒體查詢功能或bootsrap框架

41. 如何在 HTML5 頁面中嵌入視訊？

42. <videosrc="foo.mp4"width="300"height="200" controls>

43. Your browser does not support the <video> element.

44. </video>

45. HTML5 有哪些不同型別的儲存？

localStorage 適用於長期儲存資料，瀏覽器關閉後資料不丟失

sessionStorage 儲存的資料在瀏覽器關閉後自動刪除

46. HTML5 引入什麼新的表單屬性？

47. HTML5 標準提供了哪些新的 API？

多媒體：video、audio、遊戲：canvas、webgl、儲存：localstorage、sessonstorage、websql、indexedDB
網路：websocket

48. HTML5的頁面結構

<!DOCTYPEhtml>

<html>

<head>

<title></title>

</head>

<body></body>

</html>

49. web storage和cookie的區別

"與Cookie相比，Web Storage存在不少的優勢，概括為以下幾點：
1. 儲存空間更大：能提供5MB的儲存空間（不同瀏覽器的提供的空間不同），Cookie僅4KB
2. 儲存內容不會發送到伺服器：當設定了Cookie後，Cookie的內容會隨著請求一併傳送的伺服器，這對於本地儲存的資料是一種頻寬浪費。而Web Storage中的資料則僅僅是存在本地，不會與伺服器發生任何互動。
3. 更多豐富易用的介面：Web Storage提供了一套更為豐富的介面，使得資料操作更為簡便。
4. 獨立的儲存空間：每個域（包括子域）有獨立的儲存空間，各個儲存空間是完全獨立的，因此不會造成資料混亂。

50. CSS中 link 和@import 的區別是？

1. 老祖宗的差別。link屬於XHTML標籤，而@import完全是CSS提供的一種方式。 link標籤除了可以載入CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連線屬性等，@import就只能載入CSS了。

2. 載入順序的差別。當一個頁面被載入的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被載入，而@import引用的CSS會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。

3. 相容性的差別。由於@import是CSS2.1提出的所以老的瀏覽器不支援，@import只有在IE5以上的才能識別，而link標籤無此問題。

4. 使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的。

51. CSS3有哪些新特性？

第 1 選擇器第 2 RGBA和透明度第 3 多欄佈局第 4 多背景圖第 5 Word Wrap第 6 文字陰影第 7 @font-face屬性第 8 圓角(邊框半徑)第 9 邊框圖片第 10 盒陰影第 11 盒子大小第 12 媒體查詢第 13 語音

52. HTML5中什麼是輸出元素？

output：定義不同的輸出型別，比如指令碼

2-面試題-HTML5+CSS3(前端常見面試題帶答案 )

2-面試題-HTML5+CSS3(前端常見面試題帶答案 )

1-面試題-html+css(前端常見面試題帶答案 )

web前端常見面試題匯總

web前端常見面試題

前端常見面試題--概念題

【面試題】JavaSE基礎常見面試題

前端常見面試題總結---第二篇

2018.3.21前端常見面試題

前端常見面試題html/css，js，ES6，Vue，前端工程化等等

前端常見面試題總結---第三篇

前端常見面試題（二）————前端

一些html5和css3的一些常見面試題

關於html5和css3的一些常見面試題

php常見面試題（2）

面試題:HTTP必知必會——常見面試題總結

java面試題之----HashMap常見面試題總結

常見面試題整理---前端（不論出處）

java常見面試題：Java程式設計師面試題（六）

c++STL常見面試題2

java常見面試題：Java程式設計師面試題（五）

2-面試題-HTML5+CSS3(前端常見面試題帶答案 )

相關推薦