2019 HTML5 面试题

刺骨的言语ヽ痛彻心扉 2024-04-19 11:12 39阅读 0赞

# HTML5 #

*  **sessionStorage和localStorage的区别？**  
    答：sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
 *  **Canvas和SVG的区别是什么？**

1.  canvas绘制2d位图svg绘制2d 矢量图
2.  canvas通过js程序指令创建图形，svg通过标签创建图形
3.  canvas可以只能将事件绑定在画布上，svg可以将事件绑定在任意元素上
4.  canvas应用方向，网页特效与小游戏，svg创建统计图与地图应用

*  **如何通过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();

*  **html5有哪些新特性举五种？**

1.  canvas 绘图技术
2.  svg 绘图技术
3.  webworker 新线程
4.  websocket 网络协议
5.  webstorage 客户端存储

*  **html5表单中新input type 属性值有哪些？**

<table> 
 <thead> 
  <tr> 
   <th>Color</th> 
   <th>Date</th> 
   <th>Datetime</th> 
   <th>Email</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Time</td> 
   <td>Url</td> 
   <td>Range</td> 
   <td>Tel</td> 
  </tr> 
  <tr> 
   <td>Number</td> 
   <td>Search</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

*  **html5中如何创建一个worker线程,以及接收和发送数据？**

var worker = new Worker("1.js");
    		worker.postMessage();
    		worker.onmessage = function (e){ 
    			e.data;
    		};

*  **Local storage和cookies之间的区别是什么？**

1.  区别一:客户端和服务端都能访问数据。  
    Cookie的数据通过每一个请求发送到服务端  
    Local storage只有本地浏览器端可访问数据，  
    服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器
2.  区别二:大小  
    每个cookie有4095byte  
    Local storage每个域5MB
3.  区别三:过期  
    Cookies有有效期，所以在过期之后cookie和cookie数据会被删除  
    Local storage有过期数据，如需删除只能手工删除

*  **HTML5 中如何嵌入音频？**  
    HTML5 支持 MP3、Wav 和 Ogg 格式的音频，下面是在网页中嵌入音频的简单示例：

<audio controls>
        		<source src=”jamshed.mp3″ type=”audio/mpeg”>
        		您的浏览器不支持音频播放
    		</audio>

*  **HTML5 中如何嵌入视频？**  
    HTML5 支持 MP4、WebM 和 Ogg 格式的视频，下面是简单示例：

<video width=”450″ height=”340″ controls>
      			<source src=”jamshed.mp4″ type=”video/mp4″>
    			您的浏览器不支持视频播放
    		</video>

*  **html5视频专用的css属性有哪些？**  
    object-fit  
    fill: “填充” 默认值 将视频拉伸操作填满空间  
    contain: "包含"保持原有尺寸比例，容器空白  
    cover: "覆盖"保持原有尺寸比例,宽度或者高度  
    至少一个可以与父元素一致\[裁切\]
 *  **Html5 视频常用的方法和事件有哪些？**

<table> 
 <thead> 
  <tr> 
   <th>常用的方法</th> 
   <th>事件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>controls</td> 
   <td>是否显示播放控件</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>是否自动播放</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>是否循环播放</td> 
  </tr> 
  <tr> 
   <td>muted</td> 
   <td>-是否是静音播放</td> 
  </tr> 
  <tr> 
   <td>poster</td> 
   <td>-在播放视频之前广告</td> 
  </tr> 
  <tr> 
   <td>preload</td> 
   <td>预加载策略 – <strong>auto</strong>:预加载一定时长视频与元数据 –<strong>metadata</strong>:预加载元数据 – <strong>none</strong>:不预加载数据</td> 
  </tr> 
  <tr> 
   <td>volume:1</td> 
   <td>当前音量 (0~1)</td> 
  </tr> 
  <tr> 
   <td>playbackRate</td> 
   <td>回放速率 大于1快放 小于1慢播</td> 
  </tr> 
  <tr> 
   <td>paused:true</td> 
   <td>当前视频是否处理暂停状态</td> 
  </tr> 
  <tr> 
   <td>play()</td> 
   <td>播放视频</td> 
  </tr> 
  <tr> 
   <td>pause()</td> 
   <td>暂停播放视频</td> 
  </tr> 
  <tr> 
   <td>onplay</td> 
   <td>当前视频开始播放时触发事件</td> 
  </tr> 
  <tr> 
   <td>onpause</td> 
   <td>当前视频暂停播放时触发事件</td> 
  </tr> 
 </tbody> 
</table>

*  **如何解决html5视频移动播放时同层播放问题？**

*  **Canvas 绘图技术常用路径方法与属性有哪些？**

<table> 
 <thead> 
  <tr> 
   <th>ctx.beginPath()</th> 
   <th>ctx.closePath()</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ctx.moveTo(x,y)</td> 
   <td>ctx.lineTo(x,y)</td> 
  </tr> 
  <tr> 
   <td>ctx.stroke();</td> 
   <td>ctx.fill()</td> 
  </tr> 
  <tr> 
   <td>ctx.arc(cx,cy,r,start,end)</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

*  **Canvas 绘图技术常用图像方法与属性有哪些？**

var p3 = new Image();
       		p3.src = "x.png"
      		p3.onload = function(){ ..}
      		ctx.drawImage(p3,x,y);

*  **Canvas 绘图技术常用变形方法与属性有哪些？**

<table> 
 <thead> 
  <tr> 
   <th>-rotate(deg)</th> 
   <th>-translate(x,y)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>-save()</td> 
   <td>-restore();</td> 
  </tr> 
 </tbody> 
</table>

*  **Svg 绘图技术例举三个常用标签？**

*  **Canvas 绘图技术如何绘制贝赛尔曲线？**

moveTo(x,y); 起点坐标 
    	quadraticCurveTo(cp1x,cp1y,x,y); 控制点和终点坐

*  **Canvas 绘图技术如何使用平滑动画处理？**

window.requestAnimationFrame()

*  **Html5拖放api提供哪些事件？**

<table> 
 <thead> 
  <tr> 
   <th>拖动对象</th> 
   <th>拖动目标对象(不会动)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>dragstart 拖动开始</td> 
   <td>dragenter 拖动进入</td> 
  </tr> 
  <tr> 
   <td>drag 拖动中</td> 
   <td>dragover 拖动悬停</td> 
  </tr> 
  <tr> 
   <td>dragend 拖动结束</td> 
   <td>dragleave 拖动离开</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>drop 释放</td> 
  </tr> 
 </tbody> 
</table>

*  **Html5 基于定位对象与方法有哪些？**

<table> 
 <thead> 
  <tr> 
   <th>常用的有以下三种</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigator.geolocation.getCurrentPosition</td> 
  </tr> 
  <tr> 
   <td>navigator.geolocation.watchPosition()</td> 
  </tr> 
  <tr> 
   <td>navigator.geolocation.clearWatch()</td> 
  </tr> 
 </tbody> 
</table>

*  **说说 HTML5 的新特性，使用过哪些？**  
    答：结构标记（header，footer，section，article，aside，nav），新表单元素（url，email，number，date，month，color等），canvas，audio，video，地理定位，拖放，web存储，Web Workers，WebSocket等。
 *  **说说 CSS3 的新特性，使用过哪些？**  
    答：复杂选择器器（属性选择器，伪类选择器，伪元素选择器，兄弟选择器等），边框倒角，边框阴影，渐变，转换，过渡，动画，弹性盒子，媒体查询技术等。