HTML5常见的基础标签（6）表单标签的使用

、表单标签Form

1. 什么是表单

表单在网页中负责数据采集功能的。表单是有3部分组成：

（1）表单标签 <form></form>

（2）表单域

（3）表单按钮

2. Form标签、

语法格式：

</form>

数字视频的多彩世界里，视频封装格式扮演着至关重要的角色。它们类似于书籍的封面，将视频的音轨、字幕、章节等信息“封装”在一起，便于播放和传输。MP4、MKV、WEBM是当前最为流行的三种视频封装格式，它们各自有着独特的特点和应用场景。

MP4：主流之选

MP4，全称为MPEG-4 Part 14，是一种基于MPEG-4标准的视频封装格式。由于其良好的兼容性和高效的压缩算法支持，MP4格式已经成为互联网和移动设备上最常用的视频格式之一。

技术特点：

兼容性：MP4格式得到了几乎所有现代播放器和操作系统的支持，包括各种智能手机、平板电脑和电视盒子。
压缩效率：MP4支持多种视频和音频编码标准，如H.264/AVC和AAC，能够在保持较高视频质量的同时实现较好的压缩效率。
流媒体支持：MP4格式非常适合用于流媒体传输，被广泛应用于在线视频平台。

应用场景：

视频分享：由于其广泛的兼容性，MP4是社交媒体和在线视频平台的首选格式。
移动设备：MP4文件在智能手机和平板电脑上播放效果良好，是移动设备录制和播放视频的常见格式。

MKV：自由的容器

Matroska Video（MKV）是一种开放源代码的多媒体容器格式，以其极高的灵活性和自由性著称。MKV可以容纳多种不同的视频和音频编码，甚至可以将多个音轨、字幕和章节信息整合在一个文件中。

技术特点：

开放性：MKV格式是完全开放的，没有任何专利或版税的限制。
包容性：MKV可以容纳高至无损压缩的多种编码格式，支持多音轨和多字幕流。
章节信息：MKV文件可以包含章节划分信息，类似于DVD中的不同场景选择。

应用场景：

高质量视频发布：由于MKV支持高码率编码和多音轨，它常被用于发布高质量的电影和视频。
字幕与多语言：对于需要多种语言字幕和音轨的视频内容，MKV是一个理想的选择。

WEBM：网络新贵

WEBM是WebM Project开发的一种视频封装格式，支持VP8和VP9视频编码以及Vorbis音频编码。作为一种为现代网络环境优化的格式，WEBM在处理高压缩率视频内容方面表现出色。

技术特点：

网络优化：WEBM专为网络流式传输设计，具有很好的压缩性能，适合在线播放。
开源免费：WEBM格式完全开源，使用中不需要担心专利或版税问题。
HTML5支持：WEBM得到HTML5规范的支持，可以在不使用插件的情况下直接在现代浏览器中播放。

应用场景：

在线视频：WEBM由于其良好的压缩率和流式传输特性，非常适合用于YouTube等在线视频平台。
浏览器兼容：由于HTML5的支持，WEBM格式在网页中的视频播放上具有优势。

格式对比与选择

选择哪种视频封装格式，通常取决于视频的用途、目标观众和播放设备。以下是一些考量因素：

兼容性：如果你需要确保视频能够在大多数设备和平台上播放，MP4可能是最佳选择。
质量与压缩：如果你追求最高的视频质量，并且不介意文件大小，MKV可以提供更多的灵活性和更好的音质。
网络优化：如果你主要关注网络播放，并且希望提供较小体积的视频文件，WEBM是一个不错的选择。

未来趋势

随着技术的发展，视频封装格式也在不断进化。以下是一些可能的未来趋势：

自适应流媒体：随着自适应流媒体技术的普及，视频封装格式需要更好地支持动态码率调整和低延迟传输。
4K与8K视频：随着4K和8K视频的兴起，封装格式需要更高效的压缩技术来应对日益增长的数据量。
沉浸式视频体验：虚拟现实（VR）和增强现实（AR）等沉浸式视频体验对封装格式提出了新的要求。

结语

视频封装格式是数字视频生态系统中的基础构件。了解MP4、MKV、WEBM等格式的特点和适用场景，可以帮助我们更好地处理和分享视频内容。随着技术的进步和用户需求的变化，我们期待未来会出现更多创新和优化的视频封装格式，以满足日益增长的高质量视频体验需求。

、什么是 HTML5？

HTML5 是最新的 HTML 标准；
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件；
HTML5 拥有新的语义、图形以及多媒体元素；
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建；
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行；

二、HTML5的一些新特性

用于绘画的 canvas 元素；
用于媒介回放的 video 和 audio 元素；
对本地离线存储的更好的支持；
新的特殊内容元素，比如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：要播放的视频的 URL；
width：设置视频播放器的宽度；
height：设置视频播放器的高度；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件，比如播放按钮；
loop：循环播放；
preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

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：要播放的音频的 URL；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件；
loop：循环播放；
preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

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();

演示图

图1

七、使用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>

演示图

图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

在线咨询

上一篇：学习网页制作并不难，HTML菜鸟教程，从这里开始第一课学习
下一篇：回到页面指定位置的三种方式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5常见的基础标签（6）表单标签的使用

MP4：主流之选

MKV：自由的容器

WEBM：网络新贵

格式对比与选择

未来趋势

结语

、什么是 HTML5？

二、HTML5的一些新特性

三、video 元素

四、audio元素

五、canvas 元素

六、绘制三角形

七、使用Canvas绘制一个空心圆

八、绘制一个实心圆

九、绘制一个空心矩形

十、绘制一个实心的矩形

您的项目需求