天天看點

初識Html5

u html5的介紹和快速入門

html5 大緻是 (html+css3+javascript apis)

一句話: html5 支援了css3 的強大的選擇器和動畫等功能+ 支援javascript 很多新的函數,是以html5就很強大了.

1.       增加了<canvas> 标簽,這個标簽就是畫布,程式員可以再這裡繪制圖形,是以這個标簽在一定程度上可以替代flash, 在canvas 上畫出矩形

代碼: html5-1.html<!-- 告訴浏覽器這個一個html5的網頁-->

<!DOCTYPEhtml>

<html>

<head>

<!--網頁的編碼-->

<metacharset="utf-8"/>

</head>

<body>

<!--這是一個畫布标簽,我們這個這個區域繪制圖形.-->

<canvasid="can1" width="500px" height="400px"style="border: 1px solid red">

</canvas>

<scripttype="text/javascript">

       //我要在畫布畫出矩形.

       //1. 得到畫布

       varcanvas=document.getElementById("can1");

       //2. 得到上下文環境.,我們可以通過cxt這個對象來繪制圖形

       //你也可以簡單的了解,這個cxt就是畫筆,cxt提供了很多繪制圖形的方法

       //通過這些方法就可以繪制圖形

       varcxt=canvas.getContext("2d");

       //我們看看cxt是什麼類型

       //alert(cxt);

       //畫出一個矩形,預設是黑色

       //改變顔色-紅色

       cxt.fillStyle="#FF0000";

       cxt.fillRect(10,10,30,30);

</script>

</body>

</html>

2.       增加了<header> <footer> 标簽,做到内容和結構分離,利用seo

大家知道,我們很多網頁都有頭和尾

<header>網頁的頭部<header>

hello,world..

<footer>網頁的尾部</footer>

3.       增加<video> 和<audio>标簽,我們視訊和音頻嵌入變得非常容易.

<!-- 告訴浏覽器這個一個html5的網頁-->

<!--嵌入一段視訊-->

<videosrc="[HTML5教程].(HTML5.Tutorial).-.1.-.Introduction.mp4"controls="controls" width="300px"height="200px"></video>

本文轉自蓬萊仙羽51CTO部落格,原文連結:http://blog.51cto.com/dingxiaowei/1366605,如需轉載請自行聯系原作者

繼續閱讀