當(dāng)前位置：首頁(yè) > 嵌入式培訓(xùn) > 嵌入式學(xué)習(xí) > 講師博文 > 推開HTML5的大門
推開HTML5的大門
時(shí)間：2018-09-26 來(lái)源：未知
隨著互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展，尤其是移動(dòng)互聯(lián)網(wǎng)正發(fā)生著日新月異的變化。HTML5作為連接傳統(tǒng)互聯(lián)網(wǎng)與移動(dòng)互聯(lián)網(wǎng)的橋梁，已經(jīng)成為未來(lái)互聯(lián)網(wǎng)發(fā)展的主流。要想學(xué)好HTML5，首先要知道以下幾點(diǎn)：
1.什么是HTML5？
要想深入學(xué)習(xí)一門語(yǔ)言，或者想要從事一種行業(yè)，首先要知道它是什么。HTML5是W3C（萬(wàn)維網(wǎng)聯(lián)盟）和WHATWG（網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作組）合作產(chǎn)生的，不是區(qū)別于HTML的，但它是新的HTML標(biāo)準(zhǔn)，它的目標(biāo)是提供所有內(nèi)容，而不是需要像falsh，silverlight等額外插件的支持。
2．既然HTML5是新的HTML標(biāo)準(zhǔn)，那它與前面的HTML標(biāo)準(zhǔn)有什么不同？
接觸過(guò)HTML的人都知道，一個(gè)典型的WEB頁(yè)面包含頭部，腳部，導(dǎo)航，中心區(qū)域，側(cè)邊欄。但是這些頁(yè)面結(jié)構(gòu)要想呈現(xiàn)出來(lái)，HTML4及其以前需要使用DIV標(biāo)簽，但是在HTML5中，這些DIV標(biāo)簽被元素名稱所取代，這就使得HTML更加可讀，形成頁(yè)面結(jié)構(gòu)的HTML5元素的名稱主要有：<header>：代表HTML的頭部數(shù)據(jù)，<footer>：頁(yè)面的腳部區(qū)域，<nav>：頁(yè)面導(dǎo)航元素，<article>：自包含的內(nèi)容，<section>：使用內(nèi)部article定義區(qū)域或者把分組內(nèi)容放到區(qū)域里，<aside>：代表頁(yè)面的側(cè)邊欄內(nèi)容；HTML4及其以前的頁(yè)面頭部會(huì)包含很長(zhǎng)的聲明，而HTML5只需要放入<!DOCTYPE HTML>，瀏覽器就能自動(dòng)識(shí)別它是HTML文檔，同時(shí)HTML5的標(biāo)簽也能夠正常使用，否則HTML5標(biāo)準(zhǔn)下，它無(wú)法正常工作；相對(duì)于HTML4及其以前版本，HTML5增加了多個(gè)元素標(biāo)簽，如對(duì)音視頻的支持等。
3．哪些瀏覽器支持HTML5？
現(xiàn)在的主流瀏覽器都支持，如Safari，F(xiàn)ireFox，Chrome，Opera，IE等。
4．剛才我們說(shuō)過(guò)HTML5增加了多個(gè)元素標(biāo)簽，那么HTML5中有哪些不同的新的表單元素類型？
Color：顯示顏色選擇對(duì)話框，如<input type=”color” name=”favcolor”>
Date：顯示日歷對(duì)話框，如<input type=”date” name=”dayq”>
Datetime-local：顯示含有本地時(shí)間的日歷，如<input type=”datetime-local” name=”daytimey”>
Email：創(chuàng)建含有email校驗(yàn)的HTML文本框，如<input type=”email” name=”email”>
Time：只能輸入時(shí)間，如<input type=”time” name=”timey”>
Url：設(shè)置URL的驗(yàn)證類型為url，如<input type=”url” name=”seturl”>
Range：顯示控制范圍，如<input type=”range” min=”0” max=”10” step=”2” value=”5>
Telephone：使用文本框接受電話號(hào)碼，如<input type=”tel” name=”tele”>
Number：使用文本顯示數(shù)字范圍，如<input type=”number” name=”quantity” min=”1” max=”8”>
Search：讓文本框作為搜索引擎，如<input type=”search” name=”engine”>
5．HTML5中的canvas是什么？以及如何使用Canvas來(lái)畫一條簡(jiǎn)單的線？
Canvas是HTML中你可以繪制圖形的區(qū)域。要想畫一條簡(jiǎn)單的線，要做3步：首先是定義Canvas區(qū)域，其次是獲取訪問canvas上下文區(qū)域，第三是繪制圖形。
定義Canvas區(qū)域：<canvas id=”mycanvas” width=”600” height=”400” style=”border:1px solid #000000”></canvas>
獲取訪問canvas上下文區(qū)域：var c=document.getElementById(“mycanvas”);
var ctx=c.getContext(“2d”);
繪制圖形：調(diào)用“move”方法并從一個(gè)點(diǎn)開始，使用線條方法繪制線條然后使用stroke方法結(jié)束。如：ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke();
6．CSS是什么？CSS中的選擇器是什么？以及如何使用ID值來(lái)應(yīng)用一個(gè)CSS樣式？
CSS的全稱為cascading style sheets，級(jí)聯(lián)樣式表，CSS的選擇器在我們想要應(yīng)用一個(gè)樣式的時(shí)候，幫助我們?nèi)ミx擇元素。如，簡(jiǎn)單的被命名為”instro”的樣式，他適用于HTML元素顯示紅色背景
<style>
.intro{
background-color:red;
}
</style>
應(yīng)用上面的”intro”樣式給div，我們可以使用”class”選擇器：
<div class="intro">
<p>My name is Shivprasad koirala.</p>
<p>I write interview questions.</p>
</div>
那么如何使用ID值來(lái)應(yīng)用一個(gè)CSS樣式呢？首先假設(shè)，你有一個(gè)HTML段落標(biāo)簽，使用id是”mytext”，就和下面的片段中顯示的那樣，
<p id="mytext">This is HTML interview questions.</p>
可以使用”#”選擇器和”id”的名字創(chuàng)建一種樣式，并把CSS值應(yīng)用到段落標(biāo)簽中，因此應(yīng)用樣式到”mytext”元素，我們可以使用”#mytext”，如下所示：
<style>
#mytext
{
background-color:yellow;
}
</style>
以上6點(diǎn)，只是推開了我們走向HTML開發(fā)的大門，要想深入了解HTML，還需要我們不斷的努力，去探索與實(shí)踐，才能在HTML的世界自由翱翔。
