（明星达达前端，提升前端技能）1.面试第一题：什么是多媒体？答：多媒体的定义，如图片格式、音频格式、视频格式等。2、第二个面试题：HTML5的多媒体支持有哪些？答：有音频标签、视频标签、HTMLAudioElement和HTMLVideoElement，支持音频和视频事件。3、面试第三个问题：HTML5的绘图支持有哪些？答：有canvas元素、绘制图形、绘制几何、绘制路径、绘制字符串、清除绘制内容、绘制阴影、绘制位图、变形等。4.面试第四题：你需要掌握什么才能学会svg？答：需要掌握HTML5中svg的使用，svg的基本语法，svg标签的使用，svg内部标签，几何标签，路径标签，文本标签等。5.面试官问：什么是多媒体？答：“多媒体是多种媒体的结合，一般包括文字、声音和图像等媒体形式。在计算机系统中，多媒体是指结合两种或两种以上媒体的人机交互信息交换和传播。所使用的媒体包括文字、图片、照片、声音、动画和视频，以及程序提供的交互功能。”而我们接触到的多媒体主要有：文字、图片、音频、视频等。6、面试官问：常见的图片格式有哪些？答：“常见的图片格式有bmp、jpg、png、tif、gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp等。”BMP格式是一种与硬件设备无关的图像文件格式.使用的存储格式是位图存储格式，不能压缩，占用空间大JPEG格式是目前最常用的图像格式之一，是一种有损压缩，可以将图像压缩到GIP格式是一种基于LZW算法的连续色调无损压缩格式，一般压缩率在50%左右。GIP的优点是可以保存多张彩色图片.PNG格式，是程序开发中常用的图片格式之一。7、面试官问：什么是音频格式，常见的格式有哪些？答：音频格式就是音乐格式。音频格式是指音频文件在计算机中播放或处理时经过数模转换的过程。音频格式最大带宽为20KHZ，码率在40~50KHZ之间。它采用线性脉冲编码调制PCM，每个量化步长相等。1.AU格式。为UNIX系统开发的一种音频格式。2.AIFF格式。苹果公司开发的音频格式3.VQF格式（末日黄花）。YamahaCorporation开发的一种音频格式。4.CD格式（天籁之音）。当今世界上音质最好的音频格式。5.APE格式（无损压缩）。APE是目前流行的数字音乐文件格式之一。MIDI格式是电子音乐设备之间传输音乐信息的一种格式；WAVE文件格式是微软和IBM联合开发的音频数字存储标准。8.面试官问：有哪些视频格式？答：1、MPEG/MPG/DATMPEG（MotionPictureExpertsGroup）是MotionPictureExpertsGroup的简称。这些格式包括多种视频格式，包括MPEG-1、MPEG-2和MPEG-4。2.AVIAVI，AudioVideoInterleaved的缩写。AVI是微软公司发布的一种视频格式，可以说是视频领域最古老的格式之一。3.MOV用过Mac机的朋友应该对QuickTime有一定的体会。QuickTime最初是苹果公司在Mac电脑上使用的图像和视频处理软件。9、面试官问：你知道HTML5多媒体支持中的audio标签和video标签吗？答：aduio是用来定义声音的播放器，video是用来定义视频的播放器。src是设置多媒体的文件路径，controls是设置是否使用播放控件。autoplay表示音视频加载后自动播放，默认不设置；loop表示音视频播放完成后重复播放，默认不设置；muted表示音频输出静音；preload三个值，如果设置为auto，表示预加载音视频。如果设置为metadata，表示预加载音视频元数据，如大小，时间等，如果设置为none，则表示不进行预加载。video的专属属性，poster是设置视频加载播放前显示的图片，属性值是图片url，width是设置视频播放器的宽度，height是设置视频的高度播放器。允许浏览器自动加载最合适的媒体源，HTML5提供了source元素来设置多个媒体源。source元素的属性src是设置音视频的url，type属性是设置音视频的MIME类型。10.面试官问：HTMLAudioElement和HTMLVideoElement是两个标签。答：HTMLAudioElement接口提供了访问音频元素的接口，同方法一操作。它来自HTMLMediaElement接口。它没有特殊属性，并且继承自其父元素HTMLMediaElement和HTMLElement。没有特别的方法，继承自它的父元素HTMLMediaElement，以及来自HTMLElement.audio元素的构造函数。返回对象的preload属性将设置为auto，其src属性将设置为URLString。浏览器会在返回Audio对象之前开始异步获取音频资源。HTMLVideoElement接口提供了用于操作视频对象的特殊属性和方法。它还继承了HTMLMediaElement和HTMLElement的属性和方法。在JavaScript中，获取音频元素的对象是HTMLAudioElement，获取视频元素的对象是HTMLVideoElement。使用方法控制音频元素和视频元素，是HTMLAudioElement和HTMLVideoElement支持的方法：play()、pause()、load()、canPlayType()。play()方法用于播放音频和视频；pause()方法用于暂停音频和视频；load()方法用于重新加载音频和视频；canPlayType()方法用于确定支持的类??型。HTML5Audio/VideoDOMcanPlayType()方法定义和使用canPlayType()方法浏览器是否可以播放指定的音频/视频类型。点击播放示例：11.面试官问：如何使用canvas元素？答：canvas是HTML5中的一个新元素，用于在HTML页面上动态绘制图形。lineWith表示设置或返回当前线宽，fillStyle表示设置或返回用于填充路径的模式，strokeStyle表示设置或返回绘制路径的模式，lineCap表示设置或返回结束线的点样式，lineJoin表示设置或返回两条线相交时创建的角的类型，miterLimit设置或返回最大斜接长度。绘制几何图形的方法，fillfillRect(floatx,floaty,floatwidth,floatheight),drawstrockeRect(floatx,floaty,floatwidth,floatheight)。CanvasRenderingContext2D提供了一系列绘制路径的方法。moveTo(floatx,floaty)，从当前位置移动到坐标(x,y)；lineTo(floatx,floaty)，绘制一条从当前位置到坐标(x,y)的直线路径；stroke()，对当前路径中的直线或曲线进行描边。绘制曲线arcXXX()圆弧曲线和XXXCurveTo()贝塞尔曲线清除绘制内容绘制阴影的4个属性：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY变形的四种方法：translate()、scale()、rotate()、transform()12.面试官问：什么是svg？答：SVG可以说是目前最流行的图像文件格式。它的英文全称是ScalableVectorGraphics，意思是可缩放的矢量图形。它基于XML（可扩展标记语言），由万维网联盟(W3C)联盟开发。严格来说，它应该是一种开放标准的矢量图形语言，可以让你设计出令人兴奋的、高分辨率的网页图形页面。用户可以直接用代码绘制图像，用任何文字处理工具打开SVG图像，通过改变一些代码使图像具有交互性，并随时插入到HTML中通过浏览器查看。什么是SVG？SVG有什么用？为什么使用SVG？SVG指可缩放矢量图形（ScalableVectorGraphics）SVG用于为网络定义基于矢量的图形。SVG使用XML格式来定义图形。SVG图像在放大或调整大小时不会失去其图形质量。SVG是万维网联盟的标准SVG与DOM和XSL等W3C标准相集成SVG是一种基于XML的矢量图形格式，用于在Web和其他环境中显示各种图形；它允许我们编写可缩放的二维图形，并且可以通过CSS或JavaScript进行操作。SVG最能满足当前Web开发对可伸缩性、响应性、交互性、可编程性、性能和可访问性的要求。SVGisaW3CRecommendationSVG于2003年1月14日成为W3CRecommendation。在HTML5中使用svg：svg标签的属性，width表示控制svg视图的宽度，height表示控制svg视图的高度，而viewBox的意思是定义用户视野的位置和大小。13、面试官问：HTML5有哪些新元素？答：表单控件：color、calendar、date、datetime、datetime-local、time、mouth、week、email、url、search、range、tel。新的表单元素：datalist、keygen、output。html5新的主元素文章：定义了页面的独立内容区域。p：定义文档中的一个部分。nav：定义导航链接的部分。aside：定义页面的侧边栏内容。时间：定义日期或时间。header：定义文档的头部区域。footer：定义p或文档的页脚。hgroup：用于对标题元素进行分组。adderss：定义文档作者/所有者的联系信息。结构语义元素，文章article，asideside，headerhead，footertail，navnavigation，psubsection。多媒体元素音频音频、视频视频、源资源标签、画布绘图。其他元素，计米器，progress进度条，mark标记，time时间，bdi文字方向。新增输入类型：color,time,datetime,date,month,week,email,search,number,range,tel,url等contenteditable设置元素是否可编辑，designmode相当于全局contenteditable,hiddensets元素是否隐藏，spellcheck设置是否对用户输入的内容进行拼写检查。14.面试官问：什么是webstorage？答：WebStorage实际上由两部分组成：sessionStorage和localStoragesessionStorage用于在本地存储一个session（会话）中的数据，这些数据只能被同一个session访问的页面保存，session结束时数据被销毁.因此，sessionStorage并不是一个持久化的本地存储，而只是一个会话级的存储。localStorage用于持久本地存储。除非主动删除数据，否则数据永远不会过期。存储空间更大的存储空间：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比cookies大很多。存储在服务器上的内容不会发送到服务器：当设置cookie时，cookie的内容会随着请求发送到服务器，对于本地存储的数据来说是一种带宽浪费。WebStorage中的数据只存储在本地，不与服务器进行任何交互。更丰富易用的接口：WebStorage提供了更丰富的接口，让数据操作更简单。存储空间独立存储空间：每个域（包括子域）都有独立的存储空间，每个存储空间完全独立，不会出现数据混乱。WebStorage是用来解决一些问题的。它为客户端提供了两种存储数据的方法：sessionStorage和localStorage15。面试官问：你知道Less吗，说说你的用途？A：首先，什么是少？Less是CSS的扩展，是一种动态样式表语言，一种CSS预处理器，可以运行在客户端或服务器端。Less是一种开源语言，并且是跨浏览器兼容的。它是一种css预处理语言，添加了变量、嵌套、混合、继承、函数和导入等功能。它的安装分为服务器端和客户端，可以在客户端使用，也可以在服务器端使用。少用px：绝对单位，页面以精确像素显示em：相对单位，rem：相对单位，可以理解为“根em”，相对于字体计算根节点的大小html,CSS3添加新属性。%:%百分比，相对长度单位，相对于父元素的百分比值vw,vh,vmin,vmax主要用于页面视口尺寸布局vw：视点宽度，窗口宽度，1vw等于窗口的1%宽度。vh：viewpointheight，窗口的高度，1vh等于窗口高度的1%。vmin：vw和vh中较小的一个。vmax：vw和vh中较大的一个。多媒体（Multimedia）是多种媒体的组合，一般包括文字、声音、音乐、图像、动画、视频等媒体形式。多媒体以多种方式存在。svginternaltagweb存储方式：和你在一起365天后请多多关照推荐阅读点击标题跳转【专访Vue全家桶】Vue前端交互模式-es7语法结构？async/await【面试必备-Vue全家桶】本文带你玩转Vue前端路由【面试必备】掌握this的原理，在JavaScript中调用，应用。2019的每一天，只等她出现，余生，庆余年|掘金年度征文一家人来袭【达达前端技术社区⑥】觉得这篇文章对你有帮助？请分享给更多人关注“达达前端”，加star提升前端技能。在博客平台上，未来还有很长的路要走。也希望大家多多支持和批评我以后的文章。让我们一起进步。一起走花路吧。非常感谢阅读本文的读者。如果这篇文章写得好，如果你觉得“达达”有什么，如果你觉得我可以坚持学习，如果你觉得这个人可以交到朋友，请点赞关注分享，对暖暖我真的很有用！！！感谢阅读，原创不易，喜欢就??点【在看】或【转发朋友圈】，这是我写作最大的动力。意见反馈如果本账号内容有问题（例如：涉及版权或其他问题），请及时联系我们进行整改，我们会尽快处理。这是一种品质，态度公众号关注，祝你好运
