當前位置：
首頁 >
H5 常用标签梳理
發布時間：2024/4/17
40
豆豆
H5功能很強大，僅僅通過一些標簽就可以實現音樂播放，視頻播放等功能，或者是畫圖，拖拽等，今天我們來梳理一下這些簡單卻又高大上的標簽：
1、video元素
?video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件，其中vedio標簽之間插入的內容是供不支持 video 元素的瀏覽器顯示的
<!DOCTYPE html> <html> <body> <div style="text-align:center;"><button onclick="playPause()">播放/暫停</button> <button onclick="makeBig()">大</button><button onclick="makeNormal()">中</button><button onclick="makeSmall()">小</button><br /> <video id="video1" width="420" style="margin-top:15px;"><source src="/example/html5/mov_bbb.mp4" type="video/mp4" /><source src="/example/html5/mov_bbb.ogg" type="video/ogg" />Your browser does not support HTML5 video.</video> </div> <script type="text/javascript"> var myVideo=document.getElementById("video1");function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>?
2、audio元素
audio元素實現在瀏覽器中播放音頻，<audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示的，音頻文件最好是MP3 或 Wav 類型：
3、draggable，通過draggable屬性和ondragstart 和 setData()方法實現拖拽
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); }function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body><p>請把 W3School 的圖片拖放到矩形中：</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" /></body> </html>- 調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
- 通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
- 被拖數據是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目標元素）中
4、Canvas元素
通過js代碼將繪制的東西呈現到canvas元素中，可以實現劃線，畫圓，畫圖片到畫布上：
<!DOCTYPE HTML> <html> <body><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="/i/eg_flower.png" cxt.drawImage(img,0,0);</script></body> </html>5、svg元素
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在于：
- SVG 圖像可通過文本編輯器來創建和修改
- SVG 圖像可被搜索、索引、腳本化或壓縮
- SVG 是可伸縮的
- SVG 圖像可在任何的分辨率下被高質量地打印
- SVG 可在圖像質量不下降的情況下被放大
?6、未完待續
?
參考W3C規范：http://www.w3school.com.cn/html5/html_5_video.asp
轉載于:https://www.cnblogs.com/guo-eric/p/9040201.html
總結
- 上一篇： Jmeter连接SqlServer数据库
- 下一篇： （十一）Json文件配置