照相机、留声机诞生，解决了人们记录影像、声音的需求以来，人们就不断地追求着在有限的条件下尽可能地提高这些记录的品质，而从模拟时代过渡到数字时代以后，这方面的追求有一部分变成了在尽可能小的空间中提供尽可能好的内容质量，这就催生出了一系列不断演进着的媒体压缩技术。

不过这期课堂的主题尚未来到媒体编码的历史，在讲音视频图像的压缩算法进化之路前，我们先来了解一下这些媒体内容的载体——容器格式的进化历程。

首先需要区分清楚的，就是容器格式与媒体编码格式。

何为容器（Container）

对于数字媒体数据来说，容器就是一个可以将多媒体数据混在一起存放的东西，就像是一个包装箱，它可以对音视频数据进行打包装箱，将原来的两块数据整合到一起，也可以单单只存放一种类型的媒体数据。它就像电影胶片一样，中央是一帧一帧的图像，而两旁则印有对应的音轨。

举个简单的例子，常见的MP4就是一种媒体容器格式而不是编码格式，它里面的视频编码可以是现在最常见的AVC/H.264，也可以是它的前任H.263或者下一任——HEVC，音频编码可以是常见的AAC也可以是AC-3。

另一个生僻点的例子：最常见的图片格式——JPEG，它其实只是一种压缩方式，而它的存放方式其实叫做JFIF（JPEG File Interchange Format），虽然在JPEG标准中定义了一种名为JIF（JPEG Interchange Format）的容器格式，但是因为其缺乏某些关键要素，造成了使用的不便而被后来第三方开发出来的JFIF容器给取代了，今天我们能够看到的JPEG文件几乎都是装在JFIF容器中的。

虽然今天我们能够直接拿到的MP4文件里面装的几乎都是AVC+AAC的组合，但还是不能混淆了两者的概念，容器就是个容器，它没得灵魂。

AVI： 老而弥坚

AVI可能是和笔者年龄相仿的朋友最早接触的一个格式。确实，它推出的时间相对较早，也是许久以前最为常见的一种容器格式。它全称叫做音频视频交错（ Audio Video Interleave），顾名思义，它就是简单地将视频与音频交错在一起，几帧视频之后就是对应的音频段，这样重复，直到结束。

AVI文件的结构示意图

它由三部分组成，头部、主体以及位于文件尾部的索引。头部中含有文件的元数据（metadata），比如视频的分辨率、码率总帧数等信息。主体部分是媒体数据的存放区，它使用了块（chunk）的概念，将原本的视频流和音频流分成块状进行交错放置，就是上面讲的一段视频一段音频交错放置，而尾部则是用来放置索引，它用来记录每个数据块在文件中的偏移位置。

红框标注为对轨道的标识

讲到AVI，还可以联动一下WAV和苹果那边的AIFF，这些容器格式其实是同源的，来自于EA（对，就是现在那个做游戏的EA）为了让不同公司开发出来的软件之间进行数据交换而在1985年开发出来的IFF（Interchange File Format）格式。苹果在IFF的基础上开发出了AIFF，而微软与IBM将IFF格式使用的大端序改成小端序就成了RIFF（Resource Interchange File Format），也就是AVI、WAV这两个容器的基本原型。

AVI虽然老，但是因为它以帧为单位把数据切成块来存放的特性，使得它几乎支持市面上几乎所有的音视频编码。而它的缺点也有很多，首先因为索引在文件尾部的关系，所以它并不适合用来流传输；另外在容器中也没有时间戳，只能通过帧数和帧率信息来进行计算，在索引里面并没有写明时间戳—媒体位置的数据，所以要在播放AVI时进行快速跳转还需要额外的技术手段；而媒体数据分块存放也使得它对很多使用运动预测特性的视频编码的支持并不是太好，因为这些帧，比如P帧和B帧，都是通过I帧进行计算得到的，这就需要访问当前帧以外的数据了。

MPEG-PS：VCD、DVD的功臣

用电脑播放过VCD的朋友一定还记得会在目录里寻找那个最大的.DAT文件来播放，而DVD则是找那个最大的.VOB。其实这两个格式都是MPEG-PS容器规范的一种，此PS非彼Photoshop，而是指Program Stream，是MPEG组织在1993年发布的一个容器标准，并且随后写入ISO/IEC国际标准，除了以上两种后缀名之外，还有.mpg也用的是这个标准。

MPEG-PS标准中引入了包的概念，整个文件由一个个包组成，每个包的大小并不相等，包里面含有这个包的时间码以及对应的音视频数据。

MPEG-PS已经随着时代的进步被废弃了，它只能存放MPEG-1、MPEG-2、MPEG-4这些出自同门的视频编码，限制性较大。但因为VCD和DVD的广泛流行，实际上它还是被用的相当多的。

MPEG-TS：专为流传输而生

MPEG组织不仅仅为音视频文件的存储制定了容器标准，还早早地顺应时代潮流，为它们的传输准备了相应的容器。我们的数字电视和IPTV用的就是MPEG组织在1995年制定的Transport Stream，也就是TS容器，当然它也并不限于这两个场景，在现在的低延时直播系统中，MPEG-TS仍然占据了绝对主流的地位，原因就是它的整个结构就是为了流传输而设计的。

从IP层到TS包内部的结构

一个TS文件中可以容纳多个TS流，不同的流上面可以带有不同的音视频数据，这样通过接收一个TS文件，用户方面可以自由地在这个TS文件中的多个子TS流之间进行切换，非常适合用于传输电视节目。而它同时针对复杂的传输环境进行了针对性的优化，TS流的基础单位是一个个大小仅为188字节的包，每个包都有自己的独立时基，并且由于采用了固定大小，所以在传输过程中即使遭遇丢包也很快就可以恢复正常播放。

发展到今天，TS仍然在网络流传输时代中发挥着自己重要的作用，在苹果主导的HLS（Http Live Streaming）协议中使用的就是TS流，它比MPEG-DASH更加通用，因为后者对于MP4文件进行了一定的修改，在老平台上面支持不太好，而HLS使用的TS仍然是规范中的，可以被大多数设备兼容。

不过也因为TS分包较多的特性，会产生一些数据冗余，所以在存储场景中一般不会使用TS作为容器。

M2TS：专为高清时代而生

M2TS多见于Blu-ray光盘和高清录像（AVCHD）中，它由MPEG-TS修改而来，加入了对于高清时代新的音视频编解码支持。

一张Blu-ray视频光盘中的M2TS

并且由于TS文件的特性，每一个小片上都有自己的独立时间戳，这使得文件中一部分数据即使遭到破坏也不会影响到其他部分的正常播放，而且可以从中随意的进行切片操作。

ASF：先进却早夭

见过ASF格式视频的朋友我想应该不会太多，但是见过WMV和WMA这两个微软以前主推的媒体编码格式的朋友肯定有很多。其实WMV和WMA就是存放在ASF容器之中的，它全称高级系统格式（Advanced Systems Format），微软原本计划是用它来作为AVI容器的后继者的，它具有诸多先进的特性，比如说它可以包含视频除了规格以外的元数据，如导演、电影名这些，它也可以提供数字版权管理（DRM），还有非常好的流传输支持——仅需要加载文件的最小部分即可开始播放，这点小编感受过一次。

ASF文件开头会用这32个字节来标识自己是个ASF文件

ASF身上的这些特性在当时还算是比较先进的，但不过这于事无补，微软建立它那套封闭媒体格式体系的做法并没有得到太多厂商和用户的支持，大家仍然更喜欢用其他更为开放一点的标准，比如MP3就是一个很好的例子。ASF容器也随着微软媒体格式的衰亡而渐渐消失了，我们今天已经几乎看不到WMV、WMA这两个曾经还很常见的格式的影子了。

RM：昔日王者，如今不见踪影

与ASF差不多同时代流行的就是RM和RMVB了，在那个AVC尚未开始普及，DivX和XviD应用较少的年代中，RMVB在国内的各大下载站中都占据了绝对主流的地位，很多视频站也大多使用RM来提供“网络视频点播”的服务。

RM容器的内部结构

不过RM容器本身并不出彩，索引仍然位于文件尾部，不过由于数据段里面有加入时间戳，所以在流传输时还是可以应付用户的跳转操作的。因为这个容器本身与RM编码息息相关的原因，它本身也只能容纳RM编码的视频流，所以在RM编码没落之后我们就很少再看到这些昔日王者了，一个容器格式想要长存，要么在设计上有其独到之处，要么就是要开放，在众多平台上面提供支持。而RM两个理由都不占，效果又比不过新兴的AVC，所以它的没落也是必然了。

FLV：前高清时代的宠儿

还记得十年前的土豆网吗？彼时它还被称为“国内的Youtube”，当时视频网站普遍都还在用Flash写播放器实现流视频播放，而自然而然地，Adobe制定的Flash Video格式就成了这些视频网站主要使用的容器格式，也就是我们熟知的FLV。

FLV格式是在Flash Player 6中引入的，当时更多的是被存放在SWF文件的内部，不过后来因为体积越来越大而直接独立了出来，它的结构相对而言比较简单，主要分为两块，位于文件头部的元数据信息和后面的音视频数据。不过在数据的存放上面，FLV是将数据分为多个标签进行存储的，每个标签都带有自己的时间戳，所以这就保证了流传输时的音画同步。

由于FLV结构简单但是功能足够用，并且被Flash Player天然支持，所以在当时的视频网站上面普遍都使用它作为容器，直到今天还有很多网站没有放弃它，虽然其中的视频编码早已升级，它也有衍生出来的F4V作为后继者，虽然后者的血统已经不是Flash家族的了。

F4V：换了血的继任者

小编还记得土豆网在2009、2010年左右在国内率先开始使用H.264编码，当时如果将清晰度切换到“高清”就会播放这些用H.264编码的视频。而用飞速土豆加速会缓存到一些.f4v扩展名的文件，乍一看还以为它就是FLV，但其实不然，F4V其实是MP4所在的ISO标准容器家族的，但也是Adobe搞出来的FLV的后继者。关于后者的详情，请往下看。

MOV：苹果向业界作出的贡献

MOV格式的正式名字叫QuickTime File Format。看到这个QuickTime第一反应肯定是“哦，这是苹果的东西”。确实，QuickTime File Format是由苹果在1998年推出的，它引入了原子（atom）的概念，在QTFF格式中，atom是基本的数据单元，它可以用来容纳实际的音视频数据，也可以放置元数据和字幕等文本信息，atom中所容纳的数据类型和大小在每个atom的头部进行描述，经过一层层的嵌套之后，整个数据文件呈现了一种树状的结构，并且保留了强大的可扩展性。

MOV和MP4这些ISO标准容器格式的开头都有一个ftyp用于标记格式

MOV作为苹果QuickTime编码的成员，在目前仍然被苹果设备广泛使用着，并且对于它的支持非常好。1998年推出QTFF的同时，苹果将这个格式交给了ISO组织，后者将它标准化为国际通用容器格式，而基于这个标准衍生出来的容器，又可以叫做ISO/IEC base media file format，同时被MPEG组织采纳，写入MPEG-4 Part 12标准中。

ISO标准容器格式

ISO标准容器格式是一个规范，它代表符合这个规范的容器类型，而不是特指某个格式。它是由苹果的QuickTime File Format发展而来的，在MPEG-4 Part 12中被最终确定并被ISO/IEC组织写入标准。它虽然没有具体实现，但是它定义了基于时间码的多媒体文件的通用结构，并由此成为了MP4、3GP等格式的基础。

3GP、MP4与ISO标准容器格式的关系

MP4：标准，泛用

MP4肯定是现在最通用最流行的媒体容器，甚至可以说没有之一。但其实现在的MP4和早期的并不是同一个标准，目前常见的MP4标准是在2003年完整的的MPEG-4 Part 14规范中制定的，到今天为止也经过了多次的修订。它其实与MOV之间并没有太大的区别，基本上就是把MOV的atom改了个名字，叫成box，然后加了一点别的佐料。

MP4的内部结构

苹果建立iTunes Store卖数字音乐的时候选择了AAC-LC作为他们的音频编码格式，而容器格式上面他们并没有选择与AAC-LC处于同一时代（MPEG-2）的ADTS，而是选择了比AAC-LC大一辈的MPEG-4标准容器，也就是MP4，不过因为它只含音频所以我们看到的扩展名就是.m4a，iTunes Store还卖一种只有视频没有音频的MV，它用的也是MP4，扩展名为.m4v，本质上它们就是同一种东西。

目前很多视频网站已经从FLV切换到MP4上面了，而且还有一种新的MPEG-DASH格式就是借助于MP4可分割的特性实现的，它将一整段视频切成许多段小块，方便浏览器进行加载，减少HTTP长连接对服务器的压力。

这里说一句题外话，当年某站刚上HTML5播放器的时候，因为他们原来的视频几乎全部都用的是FLV存储的，而HTML5标准并不支持它，所以要进行一个容器转换，某站当时一位非常年轻的程序员写出了一个在浏览器内实时将FLV文件转成MP4并喂给浏览器的媒体播放器的脚本，名为flv.js，这个脚本可能给某站省下了非常大的格式转换成本。不久之后这位程序员因为受不了某站的低薪而离职。这件事曾经引起了很多社区的热烈讨论，因为今天是程序员日所以特地写了这么一段。

3GP：精简小巧，手机最爱

3GP是MP4的同族兄弟，一样是基于ISO标准容器格式，用过3GP的兄弟肯定还记得这格式最多出现的地方是哪里——以诺基亚为代表的前智能手机时代，手机录像出来的文件大多都是3GP格式的。

3GP这个容器格式标准其实不是由以往的MPEG啊这类专注于多媒体编码的组织搞出来的，而是3GPP，对没错就是制定通信行业标准的那个组织制定的。它在容器支持的格式上进行了精简，只面向于手机可以进行的编码，比如MPEG-4 Visual、H.263这些比较老的视频编码和AMR、AAC这两种前智能手机时代使用较多的音频编码。

因为前智能手机时代的手机性能并不强大，一般也不需要支持很多种格式，不用像MP4那么全面，所以3GP最终成为了一种被广泛支持的格式，不过也因为它支持的格式过于有限，最终在智能手机时代被同门大哥MP4给取代了。

MPEG-DASH

面对时下流行的流媒体，MPEG组织对MP4文件进行了魔改，由于MP4天生可以进行无损切割的特性，DASH方式将原本媒体文件中完整的文件头的元数据信息和片段Box中的信息抽取出来单独写在一个文件（MPD）中，同时还包含了片段的URL等信息，播放器可以自适应选择需要的片段进行播放，在自适应程度上面比HLS更强一些。（其实MPEG-DASH也可以用TS作为容器，但用MP4更多一些）

目前MPEG-DASH已经成为了一项国际标准，人们比较熟悉的应用平台就是Youtube和Netflix，在这些平台上面你会发现浏览器在不断地加载一些小的视频文件，但是视频的播放是连续的。

MKV：强大无需多言，免费让它受爱

说到MKV，喜欢收藏高清电影的朋友肯定不会陌生，这种容器格式大概是和高清时代一起发展起来的，但其实它在2002年底就已经完成制定了，不过推广的很缓慢，到了高清时代和UHD时代人们才开始发现这种容器的强大，并用的越来越多，连微软都在Windows 10的初始版本中加入了对它的支持。

MKV的内部结构

MKV全名Matroska，它身上最大的特点就是开放标准、免费使用，而且它可能是目前地球上最强大的数字媒体容器格式，一个文件中可以放音频、视频、字幕、字体还有章节信息等等等等，前面东西都是不限数量任你放多少都可以吃得下的，而且它是目前唯一一个支持封装ASS字幕的格式。

值得一提的是，这玩意儿是俄罗斯组织матрёшка搞出来的，其实本身是用于盗版的，俄罗斯的网络情况跟我们挺像的，网络上盗版横行，而MKV也帮助了文件的传播，目前来看，MKV可能是众多容器格式里面最好用的，无论是编辑元数据还是抽取轨道重新封装都有GUI工具支持，不过可惜的是众多视频编辑剪辑软件还是没有提供对它的支持。

总结

其实读到最后你会发现，这些容器格式内部对于音视频数据的处理都是大同小异的，区别点其实并不大。更多的差距在于它们对于不同编码格式的支持程度、元数据的详细程度以及对于是否能够支持音视频以外的数据。

而发展到至今，MP4仍然够用，在互联网时代扮演着非常重要的角色；MKV在下载党那里被奉为圭臬；而TS格式仍然在数字电视系统中被广泛使用。但在他们之前的格式也不是说非常弱或者不好，只不过可能是他们支持的那些格式没落了顺带着把它们也带没了，真正像AVI那样确实在技术规格上落伍的容器并不多。

而对于各种容器之间无损互转的事情，小编这里推荐mp4box、mkvtoolnix和强大的ffmpeg这些工具。下一篇系列课堂，我们会转向在如今多媒体领域中扮演无可替代角色的视频编码的变迁史，并且会看一看未来的AV1和VVC这两种对于大众来说还很陌生的下一代视频编码。

TML5 是第五个且是当前的 HTML 版本，它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。 -- Palak Shah

本文导航

• -新标签和元素 …… 08%

• -HTML5 的高级功能 …… 16%

• -地理位置 …… 16%

• -网络存储 …… 33%

• -应用缓存（AppCache） …… 44%

• -视频 …… 50%

• -音频 …… 61%

• -画布（Canvas） …… 71%

• -HTML5 工具 …… 78%

编译自： http://opensourceforu.com/2017/06/introduction-to-html5/

作者： Palak Shah

译者： geekpi

HTML5 是第五个且是当前的 HTML 版本，它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。

HTML5 通过 W3C 和Web 超文本应用技术工作组Web Hypertext Application Technology Working Group之间的合作发展起来。它是一个更高版本的 HTML，它的许多新元素可以使你的页面更加语义化和动态。它是为所有人提供更好的 Web 体验而开发的。HTML5 提供了很多的功能，使 Web 更加动态和交互。

HTML5 的新功能是：

• 新标签，如 <header> 和 <section>

• 用于 2D 绘图的 <canvas> 元素

• 本地存储

• 新的表单控件，如日历、日期和时间

• 新媒体功能

• 地理位置

HTML5 还不是正式标准（LCTT 译注：HTML5 已于 2014 年成为“推荐标准”），因此，并不是所有的浏览器都支持它或其中一些功能。开发 HTML5 背后最重要的原因之一是防止用户下载并安装像 Silverlight 和 Flash 这样的多个插件。

新标签和元素

• 语义化元素： 图 1 展示了一些有用的语义化元素。

• 表单元素： HTML5 中的表单元素如图 2 所示。

• 图形元素： HTML5 中的图形元素如图 3 所示。

• 媒体元素： HTML5 中的新媒体元素如图 4 所示。

图 1：语义化元素

图 2：表单元素

图 3：图形元素

图 4：媒体元素

HTML5 的高级功能

地理位置

这是一个 HTML5 API，用于获取网站用户的地理位置，用户必须首先允许网站获取他或她的位置。这通常通过按钮和/或浏览器弹出窗口来实现。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

地理位置的一些用途是：

• 公共交通网站

• 出租车及其他运输网站

• 电子商务网站计算运费

• 旅行社网站

• 房地产网站

• 在附近播放的电影的电影院网站

• 在线游戏

• 网站首页提供本地标题和天气

• 工作职位可以自动计算通勤时间

工作原理： 地理位置通过扫描位置信息的常见源进行工作，其中包括以下：

• 全球定位系统（GPS）是最准确的

• 网络信号 - IP地址、RFID、Wi-Fi 和蓝牙 MAC地址

• GSM/CDMA 蜂窝 ID

• 用户输入

该 API 提供了非常方便的函数来检测浏览器中的地理位置支持：

if (navigator.geolocation) {

// do stuff

}

getCurrentPosition API 是使用地理位置的主要方法。它检索用户设备的当前地理位置。该位置被描述为一组地理坐标以及航向和速度。位置信息作为位置对象返回。

语法是：

getCurrentPosition(showLocation, ErrorHandler, options);

• showLocation：定义了检索位置信息的回调方法。

• ErrorHandler（可选）：定义了在处理异步调用时发生错误时调用的回调方法。

• options （可选）： 定义了一组用于检索位置信息的选项。

我们可以通过两种方式向用户提供位置信息：测地和民用。

1. 描述位置的测地方式直接指向纬度和经度。

2. 位置信息的民用表示法是人类可读的且容易理解。

如下表 1 所示，每个属性/参数都具有测地和民用表示。

图 5 包含了一个位置对象返回的属性集。

图5：位置对象属性

网络存储

在 HTML 中，为了在本机存储用户数据，我们需要使用 JavaScript cookie。为了避免这种情况，HTML5 已经引入了 Web 存储，网站利用它在本机上存储用户数据。

与 Cookie 相比，Web 存储的优点是：

• 更安全

• 更快

• 存储更多的数据

• 存储的数据不会随每个服务器请求一起发送。只有在被要求时才包括在内。这是 HTML5 Web 存储超过 Cookie 的一大优势。

有两种类型的 Web 存储对象：

1. 本地 - 存储没有到期日期的数据。

2. 会话 - 仅存储一个会话的数据。

如何工作： localStorage 和 sessionStorage 对象创建一个 key=value 对。比如： key="Name"， value="Palak"。

这些存储为字符串，但如果需要，可以使用 JavaScript 函数（如 parseInt() 和 parseFloat()）进行转换。

下面给出了使用 Web 存储对象的语法：

• 存储一个值：

• localStorage.setItem("key1", "value1");

• localStorage["key1"] = "value1";

• 得到一个值：

• alert(localStorage.getItem("key1"));

• alert(localStorage["key1"]);

• 删除一个值： -removeItem("key1");

• 删除所有值：

• localStorage.clear();

应用缓存（AppCache）

使用 HTML5 AppCache，我们可以使 Web 应用程序在没有 Internet 连接的情况下脱机工作。除 IE 之外，所有浏览器都可以使用 AppCache（截止至此时）。

应用缓存的优点是：

• 网页浏览可以脱机

• 页面加载速度更快

• 服务器负载更小

cache manifest 是一个简单的文本文件，其中列出了浏览器应缓存的资源以进行脱机访问。 manifest 属性可以包含在文档的 HTML 标签中，如下所示：

<html manifest="test.appcache">

...

</html>

它应该在你要缓存的所有页面上。

缓存的应用程序页面将一直保留，除非：

1. 用户清除它们

2. manifest 被修改

3. 缓存更新

视频

在 HTML5 发布之前，没有统一的标准来显示网页上的视频。大多数视频都是通过 Flash 等不同的插件显示的。但 HTML5 规定了使用 video 元素在网页上显示视频的标准方式。

目前，video 元素支持三种视频格式，如表 2 所示。

下面的例子展示了 video 元素的使用：

<! DOCTYPE HTML>

<html>

<body>

<video src=" vdeo.ogg" width="320" height="240" controls="controls">

This browser does not support the video element.

</video>

</body>

</html>

例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使视频在 Safari 和未来版本的 Chrome 中工作，我们必须添加一个 MPEG4 和 WebM 文件。

video 元素允许多个 source 元素。source 元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式，如下所示：

<video width="320" height="240" controls="controls">

<source src="vdeo.ogg" type="video/ogg" />

<source src=" vdeo.mp4" type="video/mp4" />

<source src=" vdeo.webm" type="video/webm" />

This browser does not support the video element.

</video>

图6：Canvas 的输出

音频

对于音频，情况类似于视频。在 HTML5 发布之前，在网页上播放音频没有统一的标准。大多数音频也通过 Flash 等不同的插件播放。但 HTML5 规定了通过使用音频元素在网页上播放音频的标准方式。音频元素用于播放声音文件和音频流。

目前，HTML5 audio 元素支持三种音频格式，如表 3 所示。

audio 元素的使用如下所示：

<! DOCTYPE HTML>

<html>

<body>

<audio src=" song.ogg" controls="controls">

This browser does not support the audio element.

</video>

</body>

</html>

此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未来版本中使 audio 工作，我们必须添加一个 MP3 和 Wav 文件。

audio 元素允许多个 source 元素，它可以链接到不同的音频文件。浏览器将使用第一个识别的格式，如下所示：

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

This browser does not support the audio element.

</audio>

画布（Canvas）

要在网页上创建图形，HTML5 使用 画布 API。我们可以用它绘制任何东西，并且它使用 JavaScript。它通过避免从网络下载图像而提高网站性能。使用画布，我们可以绘制形状和线条、弧线和文本、渐变和图案。此外，画布可以让我们操作图像中甚至视频中的像素。你可以将 canvas 元素添加到 HTML 页面，如下所示：

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

画布元素不具有绘制元素的功能。我们可以通过使用 JavaScript 来实现绘制。所有绘画应在 JavaScript 中。

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="blue";

cxt.storkeStyle = "red";

cxt.fillRect(10,10,100,100);

cxt.storkeRect(10,10,100,100);

</script>

以上脚本的输出如图 6 所示。

你可以绘制许多对象，如弧、圆、线/垂直梯度等。

HTML5 工具

为了有效操作，所有熟练的或业余的 Web 开发人员/设计人员都应该使用 HTML5 工具，当需要设置工作流/网站或执行重复任务时，这些工具非常有帮助。它们提高了网页设计的可用性。

以下是一些帮助创建很棒的网站的必要工具。

• HTML5 Maker： 用来在 HTML、JavaScript 和 CSS 的帮助下与网站内容交互。非常容易使用。它还允许我们开发幻灯片、滑块、HTML5 动画等。

• Liveweave： 用来测试代码。它减少了保存代码并将其加载到屏幕上所花费的时间。在编辑器中粘贴代码即可得到结果。它非常易于使用，并为一些代码提供自动完成功能，这使得开发和测试更快更容易。

• Font dragr： 在浏览器中预览定制的 Web 字体。它会直接载入该字体，以便你可以知道看起来是否正确。也提供了拖放界面，允许你拖动字形、Web 开放字体和矢量图形来马上测试。

• HTML5 Please： 可以让我们找到与 HTML5 相关的任何内容。如果你想知道如何使用任何一个功能，你可以在 HTML Please 中搜索。它提供了支持的浏览器和设备的有用资源的列表，语法，以及如何使用元素的一般建议等。

• Modernizr： 这是一个开源工具，用于给访问者浏览器提供最佳体验。使用此工具，你可以检测访问者的浏览器是否支持 HTML5 功能，并加载相应的脚本。

• Adobe Edge Animate： 这是必须处理交互式 HTML 动画的 HTML5 开发人员的有用工具。它用于数字出版、网络和广告领域。此工具允许用户创建无瑕疵的动画，可以跨多个设备运行。

• Video.js： 这是一款基于 JavaScript 的 HTML5 视频播放器。如果要将视频添加到你的网站，你应该使用此工具。它使视频看起来不错，并且是网站的一部分。

• The W3 Validator： W3 验证工具测试 HTML、XHTML、SMIL、MathML 等中的网站标记的有效性。要测试任何网站的标记有效性，你必须选择文档类型为 HTML5 并输入你网页的 URL。这样做之后，你的代码将被检查，并将提供所有错误和警告。

• HTML5 Reset： 此工具允许开发人员在 HTML5 中重写旧网站的代码。你可以使用这些工具为你网站的访问者提供一个良好的网络体验。

Palak Shah

作者是高级软件工程师。她喜欢探索新技术，学习创新概念。她也喜欢哲学。你可以通过 palak311@gmail.com[1] 联系她。

via: http://opensourceforu.com/2017/06/introduction-to-html5/

作者：Palak Shah[2] 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

点击“了解更多”可访问文内链接