面試總結：移動web設計與開發

（給達達前端加星標，提高前端技能）

​

1. 面試第一問：什麼是多媒體？

答：多媒體的定義，好比圖片格式，音頻格式，視頻格式等。

2. 面試第二問：HTML5的多媒體支持有哪些？

答：有audio標籤，video標籤，HTMLAudioElement和HTMLVideoElement，支持audio和video的事件。

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格式(末日黃花)。雅馬哈公司開發的音頻格式。

4.CD格式(天籟之音)。當今世界上音質最好的音頻格式。

5.APE格式(無損壓縮)。APE是目前流行的數字音樂文件格式之一。

MIDI格式它是一種在電子音樂設備之間傳送音樂信息的格式；WAVE文件格式是由微軟和IBM聯合開發的用於音頻數字存儲的標準。

8. 面試官問：有哪些視頻格式？

答：

一、MPEG/MPG/DAT

MPEG（運動圖像專家組）是Motion Picture Experts Group 的縮寫。這類格式包括了MPEG-1,MPEG-2和MPEG-4在內的多種視頻格式。

二、AVI

AVI，音頻視頻交錯(Audio Video Interleaved)的英文縮寫。AVI這個由微軟公司發佈的視頻格式，在視頻領域能夠說是最悠久的格式之一。

三、MOV

使用過Mac機的朋友應該多少接觸過QuickTime。QuickTime本來是Apple公司用於Mac計算機上的一種圖像視頻處理軟件。

9. 面試官問：你對HTML5的多媒體支持中audio標籤和video標籤瞭解嗎？

答：aduio是用來定義聲音的播放器，video是用來定義視頻的播放器。

​

src爲設置多媒體的文件路徑，controls爲設置是否使用播放控件。

​

autoplay爲表示音頻和視頻加載完成後自動播放，默認爲不設置；loop爲表示音頻和視頻播放完成後再次重複性播放，默認爲不設置；muted爲表示音頻輸出爲靜音；preload三種值，設置爲auto，表示預加載音頻和視頻，設置爲metadate，表示爲預加載音頻和視頻的元數據，如大小，時間等，設置爲none，表示爲不執行預加載。

video的專有屬性，poster爲設置視頻加載完成播放前顯示的圖片，屬性值爲圖片url，width爲設置視頻播放器的寬度，height爲設置視頻播放器的高度。可讓瀏覽器自動加載最合適的媒體源，HTML5提供了source元素來設置多個媒體源。

其中source元素的屬性src爲設置音頻和視頻的url，type屬性設置音頻和視頻的MIME類型。

​

10. 面試官問：HTMLAudioElement和HTMLVideoElement這兩個標籤

答：HTMLAudioElement 接口提供訪問audio元素的接口, 像方法一操做. 來源於 HTMLMediaElement 接口. 沒有特別的屬性，繼承於他的父元素, HTMLMediaElement, and from HTMLElement.沒有特別的方法，繼承於他的父元素 HTMLMediaElement, and from HTMLElement.

audio元素的構造器。返回對象的 preload 屬性 將會被設置成 auto ，而它的 src 屬性將會被設置爲 URLString. 瀏覽器返回 Audio 對象以前會開始異步的得到audio資源。

HTMLVideoElement 接口提供了用於操做視頻對象的特殊屬性和方法。它同時還繼承了HTMLMediaElement 和 HTMLElement 的屬性與方法。

在JavaScript中獲取audio元素的對象爲HTMLAudioElement，獲取video元素的對象爲HTMLVideoElement。

用方法來控制audio元素和video元素，就是HTMLAudioElement和HTMLVideoElement支持的方法：

play()，pause()，load()，canPlayType()。

play()方法用來播放音頻和視頻；pause()方法用來暫停音頻和視頻；load()方法用來從新加載音頻和視頻；canPlayType()方法用來判斷支持的type類型。

HTML 5 Audio/Video DOM canPlayType() 方法

定義和用法

canPlayType() 方法瀏覽器是否能播放指定的音頻/視頻類型。

​

​

點擊播放示例：

​

​

11. 面試官問：canvas元素怎麼用呢？

答：canvas是HTML5新增的元素，用來在HTML頁面上動態地繪製圖形。

​

​

lineWith表示爲設置或返回當前的線條寬度，fillStyle表示爲設置或返回用於填充路徑的模式，strokeStyle表示爲設置或返回繪製路徑的模式，lineCap表示爲設置或返回線條的結束端點樣式，lineJoin表示爲設置或返回兩條線相交時所建立的拐角類型，miterLimit設置或返回最大斜接長度。

繪製幾何圖形的方法，填充fillRect(float x, float y, float width, float height)，繪製strockeRect(float x, float y, float width, float height)。

​

CanvasRenderingContext2D提供了一系列方法來繪製路徑。

moveTo(float x, float y)，從當前位置移動到座標(x,y)；lineTo(float x, float y)，從當前位置向座標(x,y)畫一條直線路徑；stroke()，對當前路徑中的線段或曲線進行描邊。

繪製曲線

arcXXX()圓弧曲線和XXXCurveTo()貝濟埃曲線

​

清除繪製內容

​

繪製陰影的4個屬性：

shadowColor，shadowBlur，shadowOffsetX，shadowOffsetY

​

變形的方法4種：

translate()，scale()，rotate()，transform()

12. 面試官問：說一說什麼是svg？

答：SVG能夠算是目前最最火熱的圖像文件格式了，它的英文全稱爲Scalable Vector Graphics，意思爲可縮放的矢量圖形。它是基於XML（Extensible Markup Language），由World Wide Web Consortium（W3C）聯盟進行開發的。嚴格來講應該是一種開放標準的矢量圖形語言，可以讓你設計激動人心的、高分辨率的Web圖形頁面。用戶能夠直接用代碼來描繪圖像，能夠用任何文字處理工具打開SVG圖像，經過改變部分代碼來使圖像具備交互功能，並能夠隨時插入到HTML中經過瀏覽器來觀看。

SVG是什麼？SVG有什麼用？爲何要使用SVG？

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

SVG 用來定義用於網絡的基於矢量的圖形

SVG 使用 XML 格式定義圖形

SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失

SVG 是萬維網聯盟的標準

SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體

SVG是一種基於XML的矢量圖形格式，用於在Web和其餘環境中顯示各類圖形；它容許咱們編寫可縮放的二維圖形，並可經過CSS或JavaScript進行操做。

SVG最可以響應當前Web開發對可伸縮性，響應性，交互性，可編程性，性能和可訪問性的要求。

​

SVG 是 W3C 推薦標準

SVG 於 2003 年 1 月 14 日成爲 W3C 推薦標準。

在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新增的主體元素

article：定義頁面獨立的內容區域。

p：定義文檔中的節。

nav: 定義導航連接的部分。

aside: 定義頁面的側邊欄內容。

time: 定義日期或時間。

header:定義了文檔的頭部區域。

footer：定義 p 或 document 的頁腳。

hgroup：被用來對標題元素進行分組。

adderss：定義文檔做者/全部者的聯繫信息。

結構化語義元素，article文章，aside側邊，header頭部，footer尾部，nav導航，p小節。多媒體元素audio音頻，video視頻，source資源標籤，canvas繪圖。其餘元素，meter計數器，progress進度條，mark標記，time時間，bdi文本方向。

input增長的類型：

color，time，datetime，date，month，week，email，search，number，range，tel，url等類型。

contenteditable設置元素是否能夠編輯，designmode等同於全局性的contenteditable，hidden設置元素是否隱藏，spellcheck設置是否對用戶輸入的內容進行拼寫檢查。

14. 面試官問：什麼是web storage?

答：Web Storage實際上由兩部分組成：sessionStorage與localStorage 

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。 

localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

存儲空間

存儲空間 更大：IE8下每一個獨立的存儲空間爲10M，其餘瀏覽器實現略有不一樣，但都比Cookie要大不少。

服務器

存儲內容不會發送到服務器：當設置了Cookie後，Cookie的內容會隨着請求一併發送的服務器，這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。

接口

更多豐富易用的接口：Web Storage提供了一套更爲豐富的接口，使得數據操做更爲簡便。

存儲空間

獨立的存儲空間：每一個域（包括子域）有獨立的存儲空間，各個存儲空間是徹底獨立的，所以不會形成數據混亂。

​

Web Storage用來解決一些問題，它提供了兩種客戶端存儲數據的方法：

sessionStorage和localStorage

​

​

​

15. 面試官問：你瞭解Less嗎，說一說你的使用？

答：首先，less是什麼呢？Less是一種CSS的擴展和動態樣式表語言，CSS預處理器，能夠在客戶端或服務器端運行。Less是一種開源語言，是跨瀏覽器兼容的語言。

它是一門css預處理語言，增長了變量，嵌套，混合，繼承，函數，導入等功能。它的安裝分服務器端和客戶端，在客戶端使用或者是在服務器端使用。

​

使用less

​

​

​

​

​

​

​

​

px：絕對單位，頁面按精確像素展現

em：相對單位，

rem：相對單位，可理解爲」root em」, 相對根節點html的字體大小來計算，CSS3新加屬性。

%：% 百分比，相對長度單位，相對於父元素的百分比值

vw、vh、vmin、vmax 主要用於頁面視口大小布局

vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。

vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。

vmin：vw和vh中較小的那個。

vmax：vw和vh中較大的那個。

多媒體（Multimedia）是多種媒體的綜合，通常包括文本、聲音、音樂、圖像、動畫、視頻等媒體形式。多媒體以多種方式存在。

​

​

svg內部標籤

​

web Storage方法：

​

​

陪伴你的365天

從此也請你多多關照

推薦閱讀  點擊標題可跳轉

【面試Vue全家桶】vue前端交互模式-es7的語法結構？async/await

【面試須要-Vue全家桶】一文帶你看透Vue前端路由

【面試須要】掌握JavaScript中的this，call，apply的原理

2019年的每一天日更只爲等待她的出現，好好過餘生，慶餘年 | 掘金年度徵文

進來就是一家人【達達前端技術社羣⑥】

以爲本文對你有幫助？請分享給更多人

關注「達達前端」加星標，提高前端技能

在博客平臺裏，將來的路還很長，也但願本身之後的文章你們能多多支持，多多批評指正，咱們一塊兒進步，一塊兒走花路。

很是感謝讀者能看到這裏，若是這個文章寫得還不錯，以爲「達達」我有點東西的話，以爲我可以堅持的學習，以爲此人能夠交朋友的話， 求點贊，求關注，求分享，對暖男我來講真的

很是有用！！！

感謝閱讀，原創不易，喜歡就點個[在看] or [轉發朋友圈]，這是我寫做最大的動力。

意見反饋

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

這是一個有質量，有態度的公衆號

點關注，有好運

​

​