H5 經常使用標籤梳理

時間 2019-11-29

標籤 h5 經常使用標籤梳理简体版

原文原文鏈接

H5功能很強大，僅僅經過一些標籤就能夠實現音樂播放，視頻播放等功能，或者是畫圖，拖拽等，今天咱們來梳理一下這些簡單卻又高大上的標籤：javascript

一、video元素css

video 元素容許多個 source 元素。source 元素能夠連接不一樣的視頻文件，其中vedio標籤之間插入的內容是供不支持 video 元素的瀏覽器顯示的html

<!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>

二、audio元素
audio元素實如今瀏覽器中播放音頻，<audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示的，音頻文件最好是MP3 或 Wav 類型：html5

<!DOCTYPE HTML>
<html>
<body>

<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

三、draggable，經過draggable屬性和ondragstart 和 setData()方法實現拖拽java

<!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")
把被拖元素追加到放置元素（目標元素）中

四、Canvas元素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>

五、svg元素app

與其餘圖像格式相比（好比 JPEG 和 GIF），使用 SVG 的優點在於：編輯器

SVG 圖像可經過文本編輯器來建立和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不降低的狀況下被放大

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
 
</body>
</html>

六、未完待續ide

參考W3C規範：http://www.w3school.com.cn/html5/html_5_video.asp

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。