【四万字总结】对于HTML5的一些总结与实践,Flutter中网络图片加载和缓存源码分析

26 阅读26分钟

判断

回到题目,如果你真想检验一个人的水平。第一步先考察一下基本的编程基础,问几个基本的编程问题,可以和前端相关也可以无关。比如垃圾收集大致是怎么做的,setTimeout 大致做了什么(说会在另一个线程里执行回调的直接毙掉)。

第二步考察一下知识面,问问http、tcp的基本知识,dns是怎么工作的,或者常用框架的实现原理,看看候选人是不是除了自己的一亩三分地什么都不关心。

第三步考察hold业务逻辑的能力,从一个简单的注册页,或者查询页开始,先让说下代码的基本架构,然后需求、性能、可靠性、安全层层加码,看看能不能很快的反馈出解决方案。能对答如流的要么做过,要么对他来说这种复杂度的东西是小case。

前三步都没问题,基本上说明候选人已经还行了,但是行到什么程度,不知道。如果想找比较厉害的,就增加个第四步,亮点项目考察。

总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了,我整理一套前端面试题分享给大家,希望对即将去面试的小伙伴们有帮助!

开源分享:docs.qq.com/doc/DSmRnRG…

nav 标签

<nav> 标签定义导航链接的部分:描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表。

例子:

注:并不是所有的链接都必须使用 <nav> 标签,它只用来将一些热门的链接放入导航栏。一个网页也可能含有多个 <nav> 标签,例如一个是网站内的导航列表,另一个是本页面内的导航列表。

header 标签

<header> 标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。

通常 header 标签至少包含一个标题标记(h1-h6),还可以包括 hgroup 标签,还可以包括表格内容、标识、搜索表单、nav 导航等。

例子:

网站标题

网站副标题

footer 标签

<footer> 标签定义 section 或 document 的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。 它和 header 标签使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入了 footer 标签,那么它就相当于该区段的页脚了。

例子:

Copyright @2013-2019 实验楼在线教育

aside 标签

<aside> 标签表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链接。

例子:

实验楼简介

一个在线学习的网站

废弃的元素

HTML5 中废除了一些纯表现的元素、只有部分浏览器支持的元素、一些会对可用性产生负面影响的元素。

纯表现元素

纯表现元素指的是可以用 CSS 代替的元素。例如:basefontbigcenterfontsstrikettu这些元素,他们的功能都是纯粹为页面展示服务的,html5 提倡把页面展示性功能放在 CSS 样式表中统一处理,所以将这些元素废除,用 CSS 样式进行替代。

对可用性产生负面影响的元素

对于 frameset 元素、frame 元素与 noframes 元素,由于 frame 框架对网页可用性存在负面影响,在 html5 中已不支持 frame 框架,只支持 iframe 框架,html5 中同时将 framesetframenoframes 这三个元素废除。

只有部分浏览器支持的元素

对于 appletbgsoundblinkmarquee 等元素,由于只有部分浏览器支持,特别是 bgsound 元素以及 marquee 元素,只被 IE 支持,所以在 html5 中被废除。其中 applet 元素可由 embed 元素或 object 元素替代,bgsound 元素可由 audio 元素替代,marquee 可以由 javascript 编程的方式替代。

表单

=================================================================

引言


表单是一个容器,用来收集客户端要提交到服务端的信息。本节中,我们将来学习 HTML5 的表单的特性,包括表单元素、表单属性以及表单输入类型等。

知识点

  • HTML5 表单元素

  • HTML5 表单属性

  • HTML5 输入类型

HTML5 的表单新增了许多特性,如表单的输入类型限定、表单的字段属性、表单的组织方式等,多加练习,合理运用它们,你页面的表单部分会变得更加合理化。

表单元素


datalist 元素

datalist 元素用于为文本框提供一个可供选择的列表,使用 datalist 元素来为表单小部件提供建议的、自动完成的值,并使用一些 option 子元素来指定要显示的值。然后使用 list 属性将数据列表绑定到一个文本域(通常是一个 <input> 元素)。

一旦数据列表与表单小部件相关联,它的选项用于自动完成用户输入的文本。通常,这是作为一个下拉框向用户展示的,在输入框中输入可能匹配的内容。

例子:

What's your favorite color?

black blue green red white yellow

也可以写成下面这样:

What's your favorite color?

运行效果为:

/images/HTML5Untitled2.png

新增属性


autocomplete 属性

autocomplete 属性规定表单是否应该启用自动完成功能:自动完成允许浏览器预测对字段的输入,当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。当 autocomplete 属性值为 on 时表示启用自动完成功能,为 off 时表示关闭。autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color

例子:

Name:

E-mail:

运行效果为:

/images/HTML5Untitled3.png

autofocus 属性

autofocus 属性规定在页面加载时,域自动地获得焦点。适用于所有 <input> 标签的类型。

例子:

Name:

运行效果为:

/images/HTML5Untitled4.png

注:大家可以把上面代码中 autofocus 属性删掉对比看看效果。

form 属性

form 属性规定输入域所属的一个或多个表单。form 属性适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id

例子:

First name:

下面的输入域在 form 元素之外,但仍然是表单的一部分, 也就是说提交按钮会把

first name 和 last name的值都提交。

Last name:

运行效果为:

/images/HTML5Untitled5.png

注:如需引用一个以上的表单,请使用空格分隔的列表。

multiple 属性

multiple 属性规定输入域中可选择多个值,适用于以下类型的 <input> 标签:emailfile

例子:

选择文件:

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 forminput 域。适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color

例子:

E-mail:

pattern 属性

pattern 属性规定用于验证 input 域的模式(pattern)。模式(pattern) 是正则表达式。pattern 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password

例子:

Name:

运行效果为:

/images/HTML5Untitled6.png

注:想要了解更多正则表达式的语法,请访问正则表达式手册

placeholder 属性

placeholder 属性提供一种提示(hint),描述输入域所期待的值。适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失。

例子:

实例:

/images/HTML5Untitled7.png

required 属性

required 属性规定必须在提交之前填写输入域(不能为空)。适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

例子:

运行效果为:

/images/HTML5Untitled8.png

输入类型


HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值。

例子:

E-mail:

运行效果为:

/images/HTML5Untitled9.png

Input 类型 - url

url 类型用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。

例子:

Url:

运行效果为:

/images/HTML5Untitled10.png

Input 类型 - number

number 类型用于应该包含数值的输入域。属性 max 设定允许输入的最大值,属性 min 设定允许输入的最小值,属性 value 设定默认值,属性 step 设定合法的数字间隔(比如 step 的值为 2,则合法的数字为 -2,0,2,4 等)。

例子:

number:<input

type="number"

name="points"

min="0"

max="10"

step="2"

value="2"

/>

运行效果为:

/images/HTML5Untitled11.png

Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。同样的 range 也有 maxminvaluestep 属性与上面所讲的 number 中的一致。

例子:

range:

<input

type="range"

name="points"

min="1"

max="10"

value="2"

step="2"

/>

运行效果为:

/images/HTML5Untitled12.png

Input 类型 - Date Pickers(日期选择器)

HTML5 拥有多个可供选取日期和时间的新输入类型:

  • date - 选取日、月、年

  • month - 选取月、年

  • week - 选取周和年

  • time - 选取时间(小时和分钟)

  • datetime - 选取时间、日、月、年(UTC 时间)注意:此类型已被弃用,目前大多数浏览器都不再支持。

  • datetime-local - 选取时间、日、月、年(本地时间)

例子:

Date:



Month:

运行效果为:

/images/HTML5Untitled13.png

Input 类型 - color

color 类型用于选择颜色。

例子:

运行效果为:

/images/HTML5Untitled14.png

Canvas API

=========================================================================

引言


HTML5 Canvas 是现代浏览器都支持的 HTML5 非插件绘图的功能,Canvas 就是一个画布,主要用于图形表示、图表绘制、游戏制作等。本小节我们将会学习如何一步一步使用 canvas 绘制图形。

知识点

  • Canvas 元素

  • 绘制简单图形

  • 直线绘制

  • 矩形绘制

  • 圆和椭圆的绘制

  • 填充和渐变

  • 文字绘制

  • 图片绘制

Canvas 是 HTML5 网页图形表示、图表绘制、游戏制作的基础,需要多次练习加以熟练掌握,只有这样在操作 HTML5 图形图表时才能得心应手。

Canvas 元素


canvas 元素的外观和 img 元素相似,但是没有 img 元素的 src 属性和 alt 属性。canvas 的 width 属性和 height 属性用来设置画布的宽和高,单位是 px。默认的画布的高度是 150px,宽度是 300px。

<canvas

id="myCanvas"

width="200"

height="100"

style="border:2px solid #000000;"

注意: 默认情况下 <canvas> 元素没有边框和内容,标签通常需要指定一个 id 属性 (脚本中经常引用)。

绘制简单图形


canvas 元素本身并不能实现图形绘制,所有的绘制工作必须要和 JavaScript 脚本结合起来。首先,给 canvas 元素添加一个 id 属性,这样能够让我们在 JavaScript 脚本中通过 id 属性找到对应的 canvas 元素。

<canvas

id="myCanvas"

width="200"

height="100"

style="border:2px solid #000000;"

添加了 id 属性后,找到对应的 canvas 元素:

var myCanvas = document.getElementById('myCanvas');

// 通过document.getElementById来找到id为myCanvas的元素

然后通过 canvas 元素的 getContext()方法获取上下文,即创建 Context 对象,以获取允许进行绘制的 2D 环境。

var ctx = myCanvas.getContext('2d');

最后通过 Context 对象的相关方法完成绘制,比如:fillStyle()等。

ctx.fillStyle = 'red';

//设置矩形的位置和尺寸(位置从 左上角原点坐标开始,尺寸为100*100的矩形)

ctx.fillRect(0, 0, 100, 100);

整体的代码:

对不起,你的浏览器不支持canvas

/images/HTML5Untitled15.png

注意

进行绘制时,需要指定确定的坐标位置,坐标原点(0,0)位于 canvas 的左上角,x 轴水平方向向右延伸,y 轴垂直向下延伸,如图:

/images/HTML5Untitled16.png

直线绘制


  • strokeStyle:设置或返回笔的颜色、渐变或模式。默认值为:#000000。

  • lineWidth:设置或返回当前的线条宽度 ,以像素计。

  • beginPath():起始一条路径,或重置当前路径。

  • closePath():创建从当前点回到起始点的路径。

  • moveTo():把路径移动到画布中的指定点,不创建线条。

  • lineTo():添加一个新点,然后在画布中创建从该点到最后指定点的线条。

  • stroke():绘制已定义的路径。

绘制一条直线例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled17.png

绘制三角形例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled18.png

矩形绘制


rect() 方法介绍

使用 rect() 方法创建矩形。语法为:

ctx.rect(x,y,width,height);

参数说明:

  • x 表示矩形左上角的 x 坐标。

  • y 表示矩形左上角的 y 坐标。

  • width 表示矩形的宽度,以像素计。

  • height 表示矩形的高度,以像素计。

注:使用 stroke()fill() 方法在画布上实际地绘制矩形。

例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled19.png

strokeRect() 方法介绍

使用 strokeRect() 方法绘制矩形(不填色)。笔触的默认颜色是黑色。语法为:

ctx.strokeRect(x, y, width, height);

注:参数与 rect() 方法一致,唯一的区别是这里不需要再加一句 stroke()fill() 方法。无法填色。

前面绘制矩形的例子也可以这样写:

对不起,你的浏览器不支持canvas

fillRect() 方法介绍

使用 fillRect() 方法创建实心矩形。语法为:

ctx.fillRect(x, y, width, height);

注:参数说明与前面一致,默认的填充颜色为黑色,可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled20.png

clearRect() 方法介绍

使用 clearRect() 方法清空给定矩形内的指定像素。语法为:

ctx.clearRect(x, y, width, height);

注:参数说明与前面一致。

例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled21.png

圆和扇的绘制


使用 arc() 方法绘制圆或者椭圆。语法为:

ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);

参数说明:

  • x 表示圆的中心的 x 坐标。

  • y 表示圆的中心的 y 坐标。

  • r 表示圆的半径。

  • sAngle 表示起始角,以弧度计(特别需要注意的是弧的圆形的三点钟位置是 0 度而不是常规以为的 90 度)。

  • eAngle 表示结束角,以弧度计。

  • counterclockwise 表示绘制圆的方向,值为 false 表示顺时针,为 true 表示逆时针。是一个可选值,默认值是 false。

例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled22.png

当然绘制扇形也很简单,只需要给定角度值小于 2 * Math.PI 再闭合一下就可以了,来看看例子。

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled23.png

填充和渐变


填充

使用 fillStyle 属性,设置或返回用于填充绘画的颜色、渐变或模式。语法为:

ctx.fillStyle = color | gradient | pattern;

参数说明:

  • color 表示绘图填充的颜色。默认值是 #000000

  • gradient 表示用于填充绘图的渐变对象(线性或放射性)。

  • pattern 表示用于填充绘图的 pattern 对象。

例子:

绘制实心矩形,填充颜色为红色。

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled24.png

渐变

使用 createLinearGradient() 方法创建线性渐变。语法为:

ctx.createLinearGradient(x0, y0, x1, y1);

参数说明:

  • x0 表示渐变开始点的 x 坐标。

  • y0 表示渐变开始点的 y 坐标。

  • x1 表示渐变结束点的 x 坐标。

  • y1 表示渐变结束点的 y 坐标。

使用 addColorStop() 方法规定渐变对象中的颜色和停止位置。语法为:

gradient.addColorStop(stop, color);

参数说明:

  • stop 表示渐变中开始与结束之间的位置。是介于 0.01.0 之间的值。

  • color 表示在结束位置显示的 CSS 颜色值。

注:addColorStop() 方法与 createLinearGradient()createRadialGradient() 一起使用。我们可以多次调用 addColorStop() 方法来改变渐变。如果我们不对 gradient 对象使用该方法,那么渐变将不可见。为了获得可见的渐变,至少需要创建一个色标。

例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled25.png

使用 createRadialGradient() 方法创建放射状/环形的渐变。语法为:

ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

参数说明:

  • x0 表示渐变的开始圆的 x 坐标。

  • y0 表示渐变的开始圆的 y 坐标。

  • r0 表示开始圆的半径。

  • x1 表示渐变的结束圆的 x 坐标。

  • y1 表示渐变的结束圆的 y 坐标。

  • r1 表示结束圆的半径。

例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled26.png

fill() 方法

使用 fill() 方法填充当前的图像(路径)。默认颜色是黑色。填充另一种颜色/渐变使用 fillStyle 属性。

语法为:

ctx.fill();

注:如果路径未关闭,那么 fill() 方法会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充该路径。

例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled27.png

文字绘制


fillText() 方法

使用 fillText() 方法在在画布上绘制实心文本。语法为:

ctx.fillText(text, x, y, maxWidth);

参数说明:

  • text 规定在画布上输出的文本。

  • x 表示开始绘制文本的 x 坐标位置(相对于画布)。

  • y 表示开始绘制文本的 y 坐标位置(相对于画布)。

  • maxWidth 表示允许的最大文本宽度,以像素计。可选。

例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled28.png

strokeText() 方法

使用 strokeText() 方法在画布上绘制空心文本。语法为:

ctx.strokeText(text, x, y, maxWidth);

注:参数说明与 fillText() 方法一致。

例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled29.png

font 属性

使用 font 属性设置或返回画布上文本内容的当前字体属性。font 属性使用的语法与 CSS font 属性相同。

textAlign 属性

使用 textAlign 属性设置或返回文本内容的当前对齐方式。语法为:

ctx.textAlign = 'center|end|left|right|start';

参数说明:

  • start 默认值,表示文本在指定的位置开始。

  • center 表示文本的中心被放置在指定的位置。

  • end 表示文本在指定的位置结束。

  • left 表示文本左对齐。

  • right 表示文本右对齐。

注:使用 fillText()strokeText() 方法在实际地在画布上绘制并定位文本。

例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled30.png

textBaseline 属性

textBaseline 属性设置或返回在绘制文本时的当前文本基线。语法为:

ctx.textBaseline = 'alphabetic|top|hanging|middle|ideographic|bottom';

参数说明:

  • alphabetic 表示文本基线是普通的字母基线。默认值。

  • top 表示文本基线是 em 方框的顶端。

  • hanging 表示文本基线是悬挂基线。

  • middle 表示文本基线是 em 方框的正中。

  • ideographic 表示文本基线是表意基线。

  • bottom 表示文本基线是 em 方框的底端。

例子:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled31.png

图片绘制


在 Terminal 输入以下命令获取图片绘制用到的图片:

wget labfile.oss.aliyuncs.com/courses/124…

使用 drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分,或增加或减少图像的尺寸。

canvas 绘制图片的基本格式为:

//创建一个图片对象

var image = new Image();

//设置图片的路径

image.src = 'xxx';

//当图片加载完成后

image.onload = function () {

//绘制图片

ctx.drawImage();

};

语法 1,在画布上定位图像:

ctx.drawImage(img, x, y);

语法 2,在画布上定位图像,并规定图像的宽度和高度:

ctx.drawImage(img, x, y, width, height);

语法 3,剪切图像,并在画布上定位被剪切的部分:

ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

参数说明:

  • img 规定要使用的图像、画布或视频。

  • sx 表示开始剪切的 x 坐标位置。可选值。

  • sy 表示开始剪切的 y 坐标位置。可选值。

  • swidth 表示被剪切图像的宽度。可选值。

  • sheight 表示被剪切图像的高度。可选值。

  • x 表示在画布上放置图像的 x 坐标位置。

  • y 表示在画布上放置图像的 y 坐标位置。

  • width 表示要使用的图像的宽度(伸展或缩小图像)。可选值。

  • height 表示要使用的图像的高度,(伸展或缩小图像)。可选值。

例子 1,在画布上定位图像并作出一个立体的效果:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled32.png

例子 2,在画布上定位图像,并规定图像的宽度和高度:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled33.png

例子 3,剪切图像,并在画布上定位被剪切的部分:

对不起,你的浏览器不支持canvas

运行效果为:

/images/HTML5Untitled34.png

视频音频与拖放

======================================================================

引言


在 HTML5 问世之前,如果我们想要在网页上面展示视频音频,经常会使用到的就是 Adobe Flash 这样的插件,很多人可能和我一样遇到过 Flash 插件崩溃的问题,让人相当烦躁,而在 HTML5 中,提供了音频和视频的标准接口使这一局面得到了改观,在这个实验中,我们将为大家介绍如何在网页中播放我们的视频音频文件。同时,我们也会学习 HTML5 对元素的拖放操作。

下面给大家一个在线的音频视频转换网站:cn.office-converter.com/

知识点

  • HTML5 视频介绍

  • HTML5 音频介绍

  • HTML5 拖放概述

  • HTML5 拖放使用

拖放操作可以很好的实现与用户的交互,拖放操作会带给用户全新的浏览体验,用户不再是只能对着网页滑动鼠标滚轮,而是可以根据设计,操作网页中的某些元素了。

视频介绍


标准

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式和浏览器支持如下所示:

/images/HTML5Untitled35.png

例子:

<source

src="labfile.oss.aliyuncs.com/courses/124…"

type="video/ogg"

/>

<source

src="labfile.oss.aliyuncs.com/courses/124…"

type="video/mp4"

/>

你的浏览器不支持video元素

注:<video></video> 之间插入的内容是供不支持 video 元素的浏览器显示的。video 元素允许多个 source 元素,source 元素可以链接不同的视频文件,浏览器将使用第一个可识别的格式。

引入单个文件也可以这样写:

<video

src="labfile.oss.aliyuncs.com/courses/124…"

width="320"

height="240"

controls="controls"

你的浏览器不支持video元素

video 标签的属性如下所示:

/images/HTML5Untitled36.png

这些属性设置都很简单,大家可以自行尝试体验一番。

字幕的简单使用

使用常用的 WebVtt 字幕格式,在 <video> 中使用 <track> 元素引入字幕。例如:

src="labfile.oss.aliyuncs.com/courses/124…"

srclang="zh"

kind="subtitles"

label="中文"

default

/>

src="labfile.oss.aliyuncs.com/courses/124…"

srclang="en"

kind="subtitles"

label="English"

/>

track 元素属性说明:

  • src:指定资源 url

  • srclang:资源的语言,例如:中文 zh,英文 en

  • kind:默认值是 subtitles 字幕,captions 标题、音效及其他音频信息,descriptions 视频的文本描述,chapters 章节导航,metadata 元数据。

  • label:选择字幕时候出现的文字。

  • default:default 指的是默认会显示的字幕。例如两个 <track> 元素,如果都没有 default 属性,那都不显示,需要用户手动调出。另外,default 只能出现在一个 <track> 元素上。

例子:

首先我们在终端中分别输入以下命令,获取所需字幕文件:

wget labfile.oss.aliyuncs.com/courses/124…

wget labfile.oss.aliyuncs.com/courses/124…

<video

src="labfile.oss.aliyuncs.com/courses/124…"

width="320"

height="240"

controls="controls"

你的浏览器不支持video元素

src="video_ch.vtt"

srclang="en"

kind="subtitles"

label="中文"

default

/>

video_ch.vtt 中的内容为:

WEBVTT 00:00:01.000 --> 00:00:04.000 不准在课堂上打游戏 00:00:05.000 -->

00:00:09.000 好好学习,天天向上!

video_en.vtt 中的内容为:

WEBVTT 00:00:01.000 --> 00:00:04.000 Don't play games in class! 00:00:05.000

--> 00:00:09.000 Study hard and make progress every day!

运行效果如下所示:

/images/HTML5Untitled37.png

通过上面的案例,我们了解了简单的视频制作以及为视频添加字幕和切换字幕。

音频介绍


HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

音频格式和浏览器支持如下所示:

/images/HTML5Untitled38.png

例子:

<source

src="labfile.oss.aliyuncs.com/courses/124…"

type="audio/ogg"

/>

<source

src="labfile.oss.aliyuncs.com/courses/124…"

type="audio/mpeg"

/>

你的浏览器不支持audio元素

注:<audio></audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。audio 元素允许多个 source 元素,source 元素可以链接不同的音频文件,浏览器将使用第一个可识别的格式。

引入单个文件也可以这样写:

<audio

src="labfile.oss.aliyuncs.com/courses/124…"

controls="controls"

最后

在面试前我花了三个月时间刷了很多大厂面试题,最近做了一个整理并分类,主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

  • HTML5新特性,语义化

  • 浏览器的标准模式和怪异模式

  • xhtml和html的区别

  • 使用data-的好处

  • meta标签

  • canvas

  • HTML废弃的标签

  • IE6 bug,和一些定位写法

  • css js放置位置和原因

  • 什么是渐进式渲染

  • html模板语言

  • meta viewport原理