HTML5基礎小結（二）——標籤小例，html5基礎小結標籤
隨篇部落格的思維導圖，繼續：
二，看下標籤的使用，這裡看幾個小例子（不再給出）：
1，結構標籤的使用，這裡來看一個頁面的布局：
<!doctype html><html><head><style>/* *{border:1px solid red;height:20px}所有的HTML5結構標籤本質上來說就是一個div標籤，只不過有意義*//*頁面頭部 header*/header{height:150px;background:#ABCDEF}nav{height:30px;background:#ff9900;margin-top:100px}nav ul li{width:100px;height:30px;float:left;line-height:30px}/*頁面中間 div */div{margin-top:10px;height:1000px;}section{height:1000px;background:#ABCDEF;width:70%;float:left}article{background:#F90;width:500px;margin:0 auto;text-align:center}aside{height:1000px;background:#ABCDEF;width:28%;float:right}/*頁面底部 footer*/footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}</style></head><body><header><p>這是一個header標籤</p><nav><ul><li>首頁</li><li>起夜</li><li>論壇</li><li>商城</li><li>社區</li></ul></nav></header><div><section><p>這是一個section標籤</p><article><h2>春曉</h2><p>春眠不覺曉，<br />處處蚊子咬，<br />打上敵敵畏，<br />不至死多少。<br /></p></article><hr /><article><h2>上學歌</h2><p>太陽當空照，<br />花兒對我笑，<br />小鳥說早早早，你為什麼背上小書包?<br />我要炸學校老師不知道，一拉線，趕快跑，<br />轟的一聲，學校炸沒了。<br /></p></article><hr /><figure><figcaption>UFO</figcaption><p>不明飛行物 Unknown Flying Object</p></figure><figure> <dt>DDS</dt> <dd>nihaome </dd></figure><hr /><dialog><dt>唐僧:悟空，你又調皮了，觀音姐姐的月光寶盒怎麼能亂扔呢？</dt><dd>悟空:...(看著)</dd><dt>唐僧:亂扔是不對的，砸到小朋友怎麼辦？就算砸不到小朋友，砸到花花草草也是不好的嘛</dt><dd>悟空:...(糾結)</dd><dt>唐僧:悟空你想要嗎？想要你就告訴我呀，你不告訴我怎麼知道你想要呢？。。。。</dt><dd>悟空:我靠!(一棍子掄上去！)</dd></dialog><hr /><menu><li>點擊</li><li>按右鍵</li></menu><hr /><span contextmenu="candan">按右鍵我試試</span><menu type="context" id="candan"><menuitem label="菜單一" onclick="alert('我是一個寂寞')" icon="http://www.baidu.com/img/bdlogo.gif"></menuitem></menu><hr /><meter min="0" max="10" value="5" low="3" high="7" ></meter><progress max="100" value="0" id="pro"></progress><script>var pro =document.getElementById('pro');setInterval(function(){pro.value+=1;},100);</script><hr /><details><dt>這是一個問題？</dt><dd>to be or not to be</dd><dt>這是一個問題？</dt><dd>to be or not to be</dd></details><hr /><ruby>翰<rp>(</rp><rt>han</rt><rp>)</rp></ruby><hr />女人<mark>最喜歡做的事情</mark>就是逛街。。。吃零食。。逛街。。吃零食，偶爾還會嗚嗚的哭，於是總結了下女人:逛吃逛吃逛吃逛吃。。。嗚嗚嗚~·</section><aside><p>這是一個aside標籤</p><hgroup><h3>大家好才是真的好</h3><h3>大家好才是真的好</h3><h3>大家好才是真的好</h3><h3>大家好才是真的好</h3></hgroup></aside></div><footer><p>這是一個footer標籤</p><hr /><small>法律條文</small><small>聯絡我們</small><small>客戶心聲</small><small>商戶合作</small></footer></body></html>
2，Canvas畫布，可以在這個上邊進行畫圖，例如直線，折線，圓，矩形等，這個要是學好了發揮的控制項特別大，這裡主要是JS來調用它的一些方法和屬性：
a，畫直線：
<!DOCTYPE html><html><head><title>Learning the basic of canvas</title><meta charset="utf-8" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">$(document).ready(function(){var canvas =$("#myCanvas");var context =canvas.get(0).getContext("2d");context.beginPath();context.moveTo(40,40);context.lineTo(340,340);context.closePath();context.stroke();});</script></head><body><canvas id="myCanvas" width="500" height="500">該瀏覽器不支援HTML5</canvas></body></html>
<!DOCTYPE html><html><head><title>Learning the basic of canvas</title><meta charset="utf-8" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">$(document).ready(function(){var canvas =$("#myCanvas");var context =canvas.get(0).getContext("2d");context.fillRect(40,40,100,100);context.strokeRect(100,100,120,120);});</script></head><body><canvas id="myCanvas" width="500" height="500">該瀏覽器不支援HTML5</canvas></body></html>
c,畫圓（弧等）：
<!DOCTYPE html><html><head><title>Learning the basic of canvas</title><meta charset="utf-8" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">$(document).ready(function(){var canvas =$("#myCanvas");var context =canvas.get(0).getContext("2d");context.beginPath();var degrees=10;var radians=degrees*(Math.PI/180);//context.arc(230,90,50,0,Math.PI*2,false);context.arc(230,90,50,0,Math.PI*0.5,false);context.closePath();//context.fillStyle="rgb(255,255,0)";//context.fill();context.strokeStyle="rgb(255,0,255)";context.stroke();});</script></head><body><canvas id="myCanvas" width="500" height="500">該瀏覽器不支援HTML5</canvas></body></html>
d，對文字樣式的設定：
<!DOCTYPE html><html><head><title>Learning the basic of canvas</title><meta charset="utf-8" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">$(document).ready(function(){var canvas =$("#myCanvas");var context =canvas.get(0).getContext("2d");var text="Hello,World";context.font="italic 30px serif";context.fillText(text,40,40);});</script></head><body><canvas id="myCanvas" width="500" height="500">該瀏覽器不支援HTML5</canvas></body></html>
3,Video/Audio使用
<!doctype html><html><head></head><body><!-- <video src="movie.webm" controls="controls">您的破瀏覽器都是古董早該換了，不然休想看我們的激情小電影。</video>--><hr />多資源的視頻播放<video width="1000" height="1000" poster="PLMM.jpg"></video><video controls="controls" width="1000" height="1000" autoplay="autoplay" loop="loop" poster="PLMM.jpg"><source src="movie.webm" type="video/webm" /><source src="movie.ogg" type="video/ogg" />您的瀏覽器不可使用視訊標籤，還不趕快升級。</video> <hr />使用以下VIDEO標籤的API<br /><video src="movie.ogg" controls="controls" id="video">您的破瀏覽器都是古董早該換了，不然休想看我們的激情小電影。</video><br /><button onclick="bofang()">播放</button><button onclick="zanting()">暫停</button><button onclick="kuaijin()">快進10秒</button><button onclick="kuaitui()">快退10秒</button><button onclick="shutup(this)">閉嘴</button><button onclick="soso()">加速播放</button><button onclick="yu()">減速播放</button><button onclick="normal()">正常播放</button><button onclick="upper()">提高嗓門</button><button onclick="lower()">降低嗓門</button><script>//擷取對應的video標籤var video=document.getElementById('video');//播放方法function bofang(){video.play();}//暫停方法function zanting(){video.pause();}//快進10秒function kuaijin(){video.currentTime+=10;//相當於video.currentTime=video.currentTime+10}//快退10秒function kuaitui(){video.currentTime-=10;}//靜音按鍵function shutup(obj){if(video.muted){obj.innerHTML="閉嘴";video.muted=false;}else{obj.innerHTML="張嘴";video.muted=true;}}//加速播放(3倍速度)function soso(){video.playbackRate=3;}//慢速播放(慢三倍)function yu(){video.playbackRate=1/3;}//正常倍速function normal(){video.playbackRate=1;//預設的播放倍速是1}//調高聲音function upper(){video.volume+=0.2;//聲音值的範圍是0-1}//調低聲音function lower(){video.volume-=0.2;}</script><hr />音頻標籤的使用<br /><audio src="a.mp3" controls="controls">您的老牛已經拉不動破車了，趕緊換了吧，想聽中國好聲音嗎？</audio><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image();img.src="PLMM.jpg";cxt.drawImage(img,0,0);</script></body></html>
4,智能表單的簡單一實例：
<!doctype html><html><head></head><body><form action="http://localhost/test.php" method="post" id="register"></form><input type="text" name="user" value="" form="register" /><input type="password" name="pwd" value="" form="register" /><select name="year" form="register"><option value="1970">1970</option><option value="1980">1980</option><option value="1990">1990</option></select><input type="submit" value="註冊" form="register" /><hr />預設值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的預設值" form="register" /><br />郵箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />URL：<input type="url" name="url" value="" form="register" /><br />DATE:<input type="date" name="riqi" value="" form="register" /><br />TIME：<input type="time" name="shijian" value="" form="register" /><br />Month：<input type="month" name="yue" value="" form="register" /><br />WEEK：<input type="week" name="zhou" value="" form="register" /><br />數字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />滑動條：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />搜尋：<input type="search" name="sousuo" value="" form="register" results="n" /><br />顏色：<input type="color" name="yanse" value="" form="register" /><br /><hr />自動填滿表單<br /><input type="text" name="auto" value="" list="movie" /><datalist id="movie"><option>人在囧途</option><option>車在囧途</option><option>泰囧</option></datalist><hr />輸出表單output<br /><form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)"><input type="number" name="no1" value="" /><input type="number" name="no2" value="" /><output name="result"></output></form></body></html>
以上為標籤的一些簡單例子，通過例子來學習這些表單，挺快的，這裡推薦W3CSCHOOL網站:http://www.w3school.com.cn/html5/,結合理論來學習，很不錯的。下篇簡單小結一下HTML5一些擴充。
這不是HTML的問題，無論是HTML5還是HTML4基本規則都是一樣的，只是標籤和瀏覽器的解釋不通。自訂標籤叫XML，可延伸標記語言 (XML)。
關於HTML5，你可以看一下。HTML5中文網，有教程和手冊，應該可以驗證我的說法。還有一些比較精彩的DEMO。
還有如果你想要自訂標籤的話，意義是什嗎？你想要瀏覽器怎麼解釋它？
當然，如果你只是想在CSS或JS裡當做標記用的話是沒有問題的，但是不符合W3C標準，也沒有很大的意義。
哈韓國際服飾
我是一個零基礎的菜鳥，想系統的學html5，想要找到html5的所有標籤與屬性的列表或資料
如果你是沒有HTML基礎你還是先看看HTML4.0+CSS2 吧。HTML5、CSS3是在這個基礎上擴充了一些新的標籤，屬性。 這裡可以帶你入門、www.w3school.com.cn/index.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
