HTML5基礎知識

HTML5 · 發表 2019-03-14 17:51:49

摘要：一、什麼是 HTML5？ HTML5 是最新的 HTML 標準； HTML5 是專門為承載豐富的 web 內容而設計的，並且無需額外外掛； HTML5 擁有新的語義、圖形以及多媒體元素； HTML5 提供的新元素和新的 API 簡化了 web 應用程式的搭建； ...

一、什麼是 HTML5？

HTML5 是最新的 HTML 標準；
HTML5 是專門為承載豐富的 web 內容而設計的，並且無需額外外掛；
HTML5 擁有新的語義、圖形以及多媒體元素；
HTML5 提供的新元素和新的 API 簡化了 web 應用程式的搭建；
HTML5 是跨平臺的，被設計為在不同型別的硬體（PC、平板、手機、電視機等等）之上執行；

二、HTML5的一些新特性

 article、footer、header、nav、section
calendar、date、time、email、url、search

三、video 元素

<video> 元素提供了播放、暫停和音量控制元件來控制視訊；
<video> 元素也提供了 width 和 height 屬性控制視訊的尺寸；
<video> 與</video> 標籤之間插入的內容是提供給不支援 video 元素的瀏覽器顯示的；

video 元素的三種視訊格式：

Ogg：帶有 Theora 視訊編碼和 Vorbis 音訊編碼的 Ogg 檔案；
MPEG4：帶有 H.264 視訊編碼和 AAC 音訊編碼的 MPEG 4 檔案；
WebM：帶有 VP8 視訊編碼和 Vorbis 音訊編碼的 WebM 檔案；

video 元素的屬性：

src
width
height
autoplay
controls
loop
preload

video 元素的方法：

pause()
play()
load()
canPlayType()
addTextTrack()

四、audio元素

HTML5 規定了在網頁上嵌入音訊元素的標準，即使用 <audio> 元素；
<audio>元素能夠播放聲音檔案或者音訊流；

audio元素的三種音訊格式：

MP3：適用於Internet Explorer、Chrome、Safari 等瀏覽器；
Wav：適用於Firefox、Opera等瀏覽器；
Ogg：適用於Firefox、IE9、Chrome 瀏覽器；

audio元素的屬性：

src
autoplay
controls
loop
preload

audio元素的方法：

pause()
play()
load()

五、canvas 元素

什麼是 Canvas？

HTML5 的 canvas 元素通過 JavaScript 在網頁上繪製圖像，元素本身並沒有繪製能力，它只是圖形容器，必須使用指令碼來繪製圖形；
canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法；
建立一個畫布

<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas在HTML5 中的新屬性有：

height：設定 canvas 的高度；
width：設定 canvas 的寬度；

六、繪製三角形

getElementById()：可返回對擁有指定 ID 的第一個物件的引用；

getContext()：返回一個用於在畫布上繪圖的環境，2d表示二維繪圖；

beginPath()：開始一條路徑，或重置當前的路徑；

moveTo()：把路徑移動到畫布中的指定點，不建立線條。

lineTo()：新增一個新點，然後建立從該點到畫布中最後指定點的線條（該方法並不會建立線條）；

closePath()：建立從當前點到開始點的路徑；

strokeStyle屬性：設定或返回用於筆觸的顏色、漸變或模式；

stroke()：會實際地繪製出路徑；

fillStyle屬性：設定或返回用於填充繪畫的顏色、漸變或模式；

fill()：填充當前的影象（路徑），預設顏色是黑色；

//空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或閉合 需要先閉合路徑才能畫
cxt.strokeStyle="red";
cxt.stroke();

//實心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

演示圖

七、使用Canvas繪製一個空心圓

arc()：建立弧或曲線（用於建立圓或部分圓）；

<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas") 
var ctx=can.getContext("2d");//建立context物件
ctx.beginPath();//標誌開始一個路徑
ctx.arc(100,100,50,0,2*Math.PI);//在canvas中繪製圓形
ctx.stroke()
 </script>

演示圖

八、繪製一個實心圓

<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.fillStyle="#deffff";
ctx.fill();
ctx.strokeStyle="red"
ctx.stroke();
 </script>

演示圖

九、繪製一個空心矩形

strokeRect()：繪製矩形（不填色），筆觸的預設顏色是黑色；

<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//獲得畫板資料
var ctx=can.getContext('2d');//獲得筆刷
ctx.strokeStyle="blue";//設定線條顏色
ctx.strokeRect(100,100,100,100);//線條畫矩形
 </script>

演示圖

十、繪製一個實心的矩形

fillRect()：繪製“已填色”的矩形，預設的填充顏色是黑色；

<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//獲得畫板資料
var ctx=can.getContext('2d');//獲得筆刷
ctx.strokeStyle="blue";//設定線條顏色
ctx.fillStyle="#ddedee";//填充矩形
ctx.fillRect(100,100,100,100);
ctx.strokeRect(100,100,100,100);//線條畫矩形
 </script>

演示圖