09>一次關於HTML5的自我模擬面試(基礎)

HTML5

1. sessionStorage和localStorage的區別

答案:

sessionStorage用於本地儲存一個會話(session)中的資料,這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存,僅僅是會話級別的儲存。而localStorage用於持久化的本地儲存,除非主動刪除資料,否則資料是永遠不會過期的。

2. Canvas和SVG的區別是什麼

答案:

canvas繪製2d點陣圖svg繪製2d 向量圖

canvas透過js程式指令建立圖形,svg透過標籤建立圖形

canvas可以只能將事件繫結在畫布上,svg可以將事件繫結在任意元素上

canvas應用方向,網頁特效與小遊戲,svg建立統計圖與地圖應用

3.如果透過canvas路徑繪製一個圓心 250 200 半徑為100 描邊紅色的圓

提示:畫布id 為box 畫布寬高相同500px

var can = docuemnt。getElementById(“box”);

var ctx = can。getContext(“2d”);

ctx。beginPath();

ctx。arc(250,200,100,0,2*Math。PI);

ctx。stroke();

4.html5有哪些新特性舉五種

canvas 繪圖技術

svg 繪圖技術

webworker 新執行緒

websocket 網路協議

webstorage 客戶端儲存

5:html5表單中新input type 屬性值有哪些

Color

Date

Datetime

Email

Time

Url

Range

Tel

Number

Search

6:html5中如何建立一個worker執行緒,以及接收和傳送資料

var worker = new Worker(“1。js”);

worker。postMessage();

worker。onmessage = function (e)

{

e。data;

};

7:Local storage和cookies之間的區別是什麼?

①區別一:客戶端和服務端都能訪問資料。

Cookie的資料透過每一個請求傳送到服務端

Local storage只有本地瀏覽器端可訪問資料,

伺服器不能訪問本地儲存直到故意透過POST或者GET的通道傳送到伺服器

②區別二:大小

每個cookie有4095byte

Local storage每個域5MB

③區別三:過期

Cookies有有效期,所以在過期之後cookie和cookie資料會被刪除

Local storage有過期資料,如需刪除只能手工刪除

8、HTML5 中如何嵌入音訊?

HTML5 支援 MP3、Wav 和 Ogg 格式的音訊,下面是在網頁中嵌入音訊的簡單示例:

您的瀏覽器不支援音訊播放

9、HTML5 中如何嵌入影片?

HTML5 支援 MP4、WebM 和 Ogg 格式的影片,下面是簡單示例:

您的瀏覽器不支援影片播放

10、html5影片專用的css屬性有哪些

object-fit

fill: “填充” 預設值 將影片拉伸操作填滿空間

contain: “包含”保持原有尺寸比例,容器空白

cover: “覆蓋”保持原有尺寸比例,寬度或者高度

至少一個可以與父元素一致[裁切]

11、Html5 影片常用的方法和事件有哪些

-controls -是否顯示播放控制元件

-autoplay -是否自動播放

-loop -是否迴圈播放

-muted -是否是靜音播放

-poster -在播放影片之前廣告

-preload -預載入策略

auto:預載入一定時長影片與元資料

metadata:預載入元資料

none:不預載入資料

-volume:1 當前音量 (0~1)

-playbackRate 回放速率 大於1快放 小於1慢播

-paused:true 當前影片是否處理暫停狀態

-play() 播放影片

-pause() 暫停播放影片

-onplay 當前影片開始播放時觸發事件

-onpause 當前影片暫停播放時觸發事件

12、如何解決html5影片移動播放時同層播放問題

13、Canvas 繪圖技術常用路徑方法與屬性有哪些

ctx。beginPath():

ctx。closePath();

ctx。moveTo(x,y);

ctx。lineTo(x,y);

ctx。stroke();

ctx。fill();

ctx。arc(cx,cy,r,start,end);

14、Canvas 繪圖技術常用影象方法與屬性有哪些

var p3 = new Image();

p3。src = “x。png”

p3。onload = function(){。。}

ctx。drawImage(p3,x,y);

15、Canvas 繪圖技術常用變形方法與屬性有哪些

——rotate(deg)

-translate(x,y)

-save()

-restore();

16、Svg 繪圖技術例舉三個常用標籤

17、Canvas 繪圖技術如何繪製貝賽爾曲線

moveTo(x,y); 起點座標

quadraticCurveTo(cp1x,cp1y,x,y); 控制點和終點坐

18、Canvas 繪圖技術如何使用平滑動畫處理

window。requestAnimationFrame()

19、Html5拖放api提供哪些事件

-拖動源物件

dragstart 拖動開始

drag 拖動中

dragend 拖動結束

-拖動目標物件(不會動)

dragenter 拖動進入

dragover 拖動懸停

dragleave 拖動離開

drop 釋放

20、Html5 地於定位物件與方法有哪些

navigator。geolocation。getCurrentPosition

navigator。geolocation。watchPosition()

navigator。geolocation。clearWatch();

21說說HTML5,CSS3的新特性,使用過哪些?

答案:

H5新特性:

結構標記(header,footer,section,article,aside,nav),新表單元素(url,email,number,date,month,color等),canvas,audio,video,地理定位,拖放,web儲存,Web Workers,WebSocket等。

CSS3新特性:

複雜選擇器器(屬性選擇器,偽類選擇器,偽元素選擇器,兄弟選擇器等),邊框倒角,邊框陰影,漸變,轉換,過渡,動畫,彈性盒子,媒體查詢技術等。