公司簡介

        河南省華中食品有限公司始創于 1997 年,是以食品研發、生產、銷售為一體的工業企業,通過近二十年的發展,傳承創新,逐步形成具有一定規模的集團化現代型企業。地址位于鄭州市二七區馬寨工業園區明暉路 5 號,法人代表張新建,公司注冊資本 5000 萬元。公司始終站在休閑食品美味、健康領域的前沿,全力傳承發揚傳統美食文化,利用傳統工藝和現代科技,專注研發不同口味的休閑健康食品。

HTML5 中 40 個最重要的技術點
2014-10-18 13:27:57
管理員@華中食品
  • 訪問次數: 575
  • 注冊日期: 2014-06-26
  • 最后登錄: 2020-04-03

介紹

我是一個ASP.NET?MVC的開發者,最近在我找工作的時候被問到很多與HTML5相關的問題和新特性。所以以下40個重要的問題將幫助你復習HTML5相關的知識。

這些問題不是你得到工作的高效解決方案,但是可以在你想快速復習相關主題的時候有所幫助。

快樂地找工作。

SGML(標準通用標記語言)和HTML(超文本標記語言),XML(可擴展標記語言)和HTML的之間有什么關系?

SGML(標準通用標記語言)是一個標準,告訴我們怎么去指定文檔標記。他是只描述文檔標記應該是怎么樣的元語言,HTML是被用SGML描述的標記語言。

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

?
1
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?HTML?4.01//EN"?"

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

XHTML創建于XML,他被使用在HTML4.0中。你可以參考下面代碼片段中展示的XML?DTD

?
1
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"

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

什么是HTML5?

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

HTML5是萬維網聯盟(W3C)和網絡超文本應用技術工作組(WHATWG)之間合作輸出的

為什么HTML5里面我們不需要DTD(Document?Type?Definition文檔類型定義)?

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

如果我不放入<!?DOCTYPE?html>?,HTML5還會工作么?

不會,瀏覽器將不能識別他是HTML文檔,同時HTML5的標簽將不能正常工作

哪些瀏覽器支持HTML5?

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

HTML5的頁面結構同HTML4或者更前的HTML有什么區別?

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

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

以下是形成頁面結構的HTML5元素的更多細節:

  • <header>:代表HTML的頭部數據

  • <footer>:頁面的腳部區域

  • <nav>:頁面導航元素

  • <article>:自包含的內容

  • <section>:使用內部article去定義區域或者把分組內容放到區域里

  • <aside>:代表頁面的側邊欄內容

HTML5中的datalist是什么?

HTML5中的Datalist元素有助于提供文本框自動完成特性,如下圖所示:

以下是DataList功能的HTML代碼:

?
1
2
3
4
5
6
7
8
<input?list="Country">
<datalist?id="Country">
??<option?value="India">
??<option?value="Italy">
??<option?value="Iran">
??<option?value="Israel">
??<option?value="Indonesia">
</datalist>

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

這里有10個重要的新的表單元素在HTML5中被介紹

  1. Color

  2. Date

  3. Datetime-local

  4. Email

  5. Time

  6. Url

  7. Range

  8. Telephone

  9. Number

  10. Search

讓我們一步一步了解這10個元素

如果你想顯示顏色選擇對話框

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

如果你想顯示日歷對話框

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

如果你想顯示含有本地時間的日歷

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

如果你想創建一個含有email校驗的HTML文本框,我們可以設置類型為“email”

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

對于URL驗證設置類型為”url”,如下圖顯示的HTML代碼

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

如果你想用文本展示數字范圍,你可以設置類型為“number”

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

如果你想顯示范圍控制,你可以使用類型”range”

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

想讓文本框作為搜索引擎

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

想只能輸入時間

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

如果你想使用文本框接受電話號碼

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

HTML5中什么是輸出元素?

當你需要計算兩個輸入的和值到一個標簽中的時候你需要輸出元素。例如你有兩個文本框(如下圖),你想將來自這兩個輸入框中的數字求和并放到標簽中。

下面是如何在HTML5中使用輸出元素的代碼

?
1
2
3
4
5
<form?onsubmit="return?false"???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”。你同樣能在output元素中使用“for”使其更加可讀

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

什么是SVG(Scalable?Vector?Graphics可縮放矢量圖形)?

SVG(Scalable?Vector?Graphics可縮放矢量圖形)表示可縮放矢量圖形。他是基于文本的圖形語言,使用文本,線條,點等來進行圖像繪制,這使得他輕便,顯示更加迅速

我們能看到使用HTML5的SVG的簡單例子么?

比方說,我們希望使用HTML5?SVG去顯示以下簡單的線條

下面是HTML5代碼

HTML5中canvas是什么?

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

我們如何使用Canvas來畫一條簡單的線?

  • 定義Canvas區域

  • 獲取訪問canvas上下文區域

  • 繪制圖形

定義Canvas區域

定義Canvas區域你需要使用下面的HTML代碼,這定義了你能進行繪圖的區域

?
1
<canvas?id="mycanvas"?width="600"?height="500"?style="border:1px?solid?#000000;"></canvas>

獲取畫布區域的訪問

在畫布上進行繪圖我們首先需要獲取上下文區域的關聯,下面是獲取畫布區域的代碼。

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

繪制圖形

現在一旦你獲取了訪問上下文,我們就可以開始在上下文中繪制了。首先調用“move”方法并從一個點開始,使用線條方法繪制線條然后使用stroke方法結束。

?
1
2
3
ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();

以下是完整的代碼

?
1
2
3
4
5
6
7
8
9
10
11
12
<body??onload="DrawMe();">
<canvas?id="mycanvas"?width="600"?height="500"?style="border:1px?solid?#000000;"></canvas>
</body>
<script>
function?DrawMe()
{
var?c=document.getElementById("mycanvas");
var?ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();
}

你可以得到以下輸出

image14

?

Canvas和SVG圖形的區別是什么?

Note:-如果你看了之前的兩個的問題,Canvas和SVG都可以在瀏覽器上繪制圖形。因此在這個問題中,面試官想知道你在什么時候選用哪種方式。

SVG Canvas
這個就好像繪制和記憶,換句話說任何使用SVG 繪制的形狀都能被記憶和操作,瀏覽器可以再次顯示 Canvas 就像繪制和忘記,一旦繪制完成你不能訪問像素和操作它
SVG 對于創建圖形例如 CAD 軟件是良好的,一旦東西繪制,用戶就想去操作它 Canvas 在繪制和忘卻的場景例如動畫和游戲是良好的
因為為了之后的操作,需要記錄坐標,所以比較緩慢 因為沒有記住以后事情的意向,所以更快
我們可以用繪制對象的相關事件處理 我們不能使用繪制對象的相關事件處理,因為我們沒有他們的參考
分辨率無關 分辨率相關

如何使用Canvas和HTML5中的SVG去畫一個矩形?

HTML5使用SVG繪制矩形的代碼

HTML5使用Canvas繪制矩形的代碼

?
1
2
3
4
回貼
用手机看文章赚钱软件好