HTML

1. img标记属于什么类型元素？

答案：属于行内元素

2.结构标记有哪些？他们与div有什么相同之处，又有什么不同之处？

答案：header，nav，section，aside，footer，article
都是用来做布局的，但结构标记提高了语义性和可读性

3. 默认情况下，使用P标记会形成什么效果？

答案：开始新的一行，形成段落文字，并有默认外边距

4. meta标签的主要作用

答案：name属性主要用于描述网页

5. 标签和标签的区别

答案：标签是有加粗效果的，一般用于表格标题的加重效果。标签列标签，没有特殊的样式。

6.
和
  • 的区别？

    • 答：

    是列表项的标题，其中不能包裹文字外的内容，
  • 都是列表项可以包裹标签和文字

    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新特性：
    复杂选择器器（属性选择器，伪类选择器，伪元素选择器，兄弟选择器等），边框倒角，边框阴影，渐变，转换，过渡，动画，弹性盒子，媒体查询技术等。