、表單標簽Form
1. 什么是表單
表單在網頁中負責數據采集功能的。表單是有3部分組成:
(1)表單標簽 <form></form>
(2)表單域
(3)表單按鈕
2. Form標簽、
語法格式:
<form action=”url” method=”get|post”>
</form>
數字視頻的多彩世界里,視頻封裝格式扮演著至關重要的角色。它們類似于書籍的封面,將視頻的音軌、字幕、章節等信息“封裝”在一起,便于播放和傳輸。MP4、MKV、WEBM是當前最為流行的三種視頻封裝格式,它們各自有著獨特的特點和應用場景。
MP4,全稱為MPEG-4 Part 14,是一種基于MPEG-4標準的視頻封裝格式。由于其良好的兼容性和高效的壓縮算法支持,MP4格式已經成為互聯網和移動設備上最常用的視頻格式之一。
技術特點:
應用場景:
Matroska Video(MKV)是一種開放源代碼的多媒體容器格式,以其極高的靈活性和自由性著稱。MKV可以容納多種不同的視頻和音頻編碼,甚至可以將多個音軌、字幕和章節信息整合在一個文件中。
技術特點:
應用場景:
WEBM是WebM Project開發的一種視頻封裝格式,支持VP8和VP9視頻編碼以及Vorbis音頻編碼。作為一種為現代網絡環境優化的格式,WEBM在處理高壓縮率視頻內容方面表現出色。
技術特點:
應用場景:
選擇哪種視頻封裝格式,通常取決于視頻的用途、目標觀眾和播放設備。以下是一些考量因素:
隨著技術的發展,視頻封裝格式也在不斷進化。以下是一些可能的未來趨勢:
視頻封裝格式是數字視頻生態系統中的基礎構件。了解MP4、MKV、WEBM等格式的特點和適用場景,可以幫助我們更好地處理和分享視頻內容。隨著技術的進步和用戶需求的變化,我們期待未來會出現更多創新和優化的視頻封裝格式,以滿足日益增長的高質量視頻體驗需求。
video 元素的三種視頻格式:
video 元素的屬性:
video 元素的方法:
audio元素的三種音頻格式:
audio元素的屬性:
audio元素的方法:
什么是 Canvas?
<canvas id="myCanvas" width="200" height="100"></canvas>
Canvas在HTML5 中的新屬性有:
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();
演示圖
圖1
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>
演示圖
圖2
<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>
演示圖
圖3
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>
演示圖
圖4
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>
演示圖
圖5
*請認真填寫需求信息,我們會在24小時內與您取得聯系。