10個常見的HTML5 面試問題及答案

介紹

via我是一個ASP.NET MVC開發人員。最近當我找工作的時候,我發現很多問題都是圍繞HTML 5和它的新功能展開的。所以,下面我將列出40個有助于你提高相關HTML 5知識的重要問題。

這些問題并不能保證你一定能找到工作,但可以肯定的是,如果你想提升自己關于這個主題的素養,那么它們一定是有用的。

祝你求職成功。

原文鏈接://caibaojian.com/40-html5-interview.html

SGML、HTML、XML和XHTML之間的關系?

香港彩票透码 www.kptln.icu SGML(標準通用標記語言)是一種指定文檔標記的標準,是一種描述了文檔標記應該如何的元語言。 HTML是描述使用SGML的標記語言。

通過SGML,每一個HTML頁面都需要在相同的地方創建并附加一個DTD(文檔類型定義)節點。所以,你總是可以在HTML頁面的頂部發現DTD用于解析目的的“DOCTYPE”屬性。

 <!--!doctype-->

由于解析SGML是一種痛苦,所以創建了XML。 XML使用SGML。例如,在SGML,你必須擁有成對的開始和結束標簽,但在XML中,你可以使用自動關閉的標簽。

XHTML源自于使用HTML 4.0的XML。你可以參考XML DTD如以下所示的代碼片段。

 <!--!doctype--><!--!doctype-->

什么是HTML 5?

HTML 5是HTML的新標準,其主要目標是無需任何額外的插件如Flash、Silverlight等,就可以傳輸所有內容。它囊括了動畫、視頻、豐富的圖形用戶界面等。

HTML5是由萬維網聯盟(W3C)和Web Hypertext Application Technology Working Group (Web超文本應用技術工作組—WHATWG)合作創建的HTML新版本。

如果我不輸入<!DOCTYPE HTML>,HTML 5能工作嗎?

No,瀏覽器將無法識別HTML文件,并且HTML 5標簽將無法正常工作。

哪些瀏覽器支持HTML 5?

幾乎所有的瀏覽器都支持HTML 5,例如Safari,Chrome,火狐,Opera,IE等。

HTML 5的頁面結構和HTML 4或早先的HTML有什么不同?

一個典型的Web頁面有頁眉(header),頁腳(footer),導航(navigation),正文(central area)和側欄(side bar)。現在如果是在HTML 4中,HTML部分中的上述這些專用名詞需要使用DIV標簽來描述。

但是,如果是在HTML 5,可以專門為這些區域創建特定的元素名,讓HTML更具可讀性。

8c3fa8196ef3e2c81e88d4c24d6b7c061

via以下是形成頁面結構的HTML 5元素的更多細節。

  • <header>:表現HTML的標題數據。

  • <footer>:頁面的頁腳部分。

  • <nav>:頁面中的導航元素。

  • <article>:正文內容。

  • <section>:用在正文中定義section或區段內容。

  • <aside>:表現頁面側邊欄內容。

HTML 5中的DataList是什么?

HTML 5中的DataList控件元素有助于提供自動完成功能的文本框,如下圖所示。

3bfa569280f763df385e8ba9b5502dd41

下面是DataList控件功能的HTML代碼:

//code from //caibaojian.com/40-html5-interview.html<input list="Country"><datalist id="Country"><option value="India"><option value="Italy"><option value="Iran"><option value="Israel"><option value="Indonesia"></datalist>

HTML 5中不同的新表單元素類型是什么?

HTML 5推出了10個重要的新的表單元素:

  1. Color.

  2. Date

  3. Datetime-local

  4. Email

  5. Time

  6. Url

  7. Range

  8. Telephone

  9. Number

  10. Search

讓我們一步一步來了解這些元素。

如果你想顯示拾色器對話框。

<input type="color" name="favcolor">

5f01b70e5fc11f9aa2abf83d466cb4821

如果你想顯示日歷對話框。

<input type="date" name="bday">

490f17474880c2c900a57a1c6932436d1

如果你想用本地時間顯示日歷。

<input type="datetime-local" name="bdaytime">

5f9d3d8ac309fc2105a615fd57a6e1c01

如果你想用電子郵件驗證創建一個HTML文本,那么我們可以設置類型為“email”。

<input type="email" name="email">

e0a5afb4889a5219cdef6b2c5eb5fd241

對于URL驗證設置類型為“url”,如下面的HTML代碼所示。

<input type="url" name="sitename">

44e002fceac5b190cb8a6e95aefcd5fd1

如果你想用文本框顯示號碼范圍,您可以將設置類型為number。

<input type="number" name="quantity" min="1" max="5">

06502cae73f3c50507665afddb73b92c1

如果你想顯示范圍調整控件,那么你可以使用range作為類型。

<input type="range" min="0" max="10" step="2" value="6">

原文來自//caibaojian.com/40-html5-interview.html

讓文本框作為搜索引擎框。

<input type="search" name="googleengine">

只需要輸入時間。

<input type="time" name="usr_time">

想要文本框接受電話號碼。

<input type="tel" name="mytel">

HTML 5中的輸出元素是什么?

當你需要計算兩個輸入的結果并將結果放到一個標簽里的時候,就需要輸出元素了。比如你有兩個文本框(參見下圖),你想要讓這些文本框數字相加,然后輸出給標簽。

08a5dbeda246094be00a87cb6cdd18e21

下面就是如何使用HTML 5代碼輸出元素。

<form onsubmit="return false"  &ouml;ninput="o.value = parseInt(a.value) + parseInt(b.value)"><input name="a" type="number"> +<input name="b" type="number"> =<output name="o" /></form>

為了簡單起見,你也可以用“valueAsNumber”替換“parseInt”。為了更具可讀性,你也可以在輸出元素中使用“for”。

<output name="o" for="a b"></output>

SVG是什么?

SVG表示(scalable vector graphics)可縮放矢量圖形。這是一個基于文本的圖形語言,它可以繪制使用文本、線、點等的圖形,因此可以輕巧又快速地渲染。

能否使用HTML 5舉個簡單的SVG例子?

比方說,我們想要使用HTML 5 SVG顯示下面簡單的線條。

a733473e4b6d70648e6d13a72e9e4b031

下面是HTML 5代碼,你可以看到SVG標簽封閉了多邊形標簽用來顯示星星圖形。

<svg id="svgelem" height="[object SVGAnimatedLength]" xmlns="//www.w3.org/2000/svg"><line style="stroke: rgb(255, 0, 0); stroke-width: 2px;" y2="[object SVGAnimatedLength]" x2="[object SVGAnimatedLength]" y1="[object SVGAnimatedLength]" x1="[object SVGAnimatedLength]"></line>

HTML 5中的Canvas畫布是什么?

畫布是一個可以在其上繪制圖形的HTML區域。

訪問畫布區域

要在畫布區域上繪制圖形,我們首先需要獲取上下文的引用部分。下面就是用于畫布部分的代碼。

var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");

繪制圖形

一旦你可以使用上下文對象,就可以開始上下文繪制。所以首先調用“move”方法,從一個點開始,使用線方法畫線,然后敲擊鍵盤應用結束。

<a name="WhatisthedifferencebetweenCanvasandSVGgraphics">What is the difference between Canvas and SVG graphics? </a>

注: 從前面的兩個問題中我們可以看到畫布和SVG都可以在瀏覽器上繪制圖形。所以在這個問題上面試官可能會要你回答什么時候用哪個。

SVGCanvas
繪制并記憶?;瘓浠八稻褪?,通過使用SVG繪制的任意形狀都可以被記住和操作,并且瀏覽器可以再次渲染它。
SVG可以很好地用于創建如CAD軟件的圖形,繪制之后允許用戶操作。
這是一個緩慢的過程,因為它需要記住坐標以便于后續操作。
我們可以有與圖形對象相關聯的事件處理程序。
分辨率獨立。
畫布則是繪制然后遺忘。一旦繪制完成,你就不能訪問和處理像素。
Canvas則用于繪制和遺忘類似動漫和游戲的場畫。
它就快多了,因為沒有必要記住后面的東西。我們不需要將事件處理程序與圖形對象關聯,因為我們不需要引用它們。
分辨率依賴。

來源:前端技術博客

上一篇: 23條前端性能優化,看懂就夠了!

下一篇: 割裂的前端工程師--- 2017年前端生態窺探

分享到: 更多
花开棋牌下载 女篮世界杯2019决赛 五星棋牌代理 360北京pk10走势图 波波视频下载一软件 3d组选包胆技巧 欢乐二人雀神手机版下载 pk10两期6码倍投盈利计算 公式单双怎么算大发快三 凤凰③肖默认论坛 三期必開一肖 掘金北京pk拾计划软件苹果手机版 时时彩平台 北京pk赛车直播开奖视频 新时时彩下载 彩名堂手机版