HTML5前端面试重点：新特性、canvas与浏览器兼容

"这篇资源是关于高级前端工程师面试题目的整理，主要涵盖了HTML5新特性、浏览器兼容性处理、CSS3以及canvas等知识点。" 在前端开发领域，面试时经常会遇到一些技术性的问题，旨在测试候选人的专业技能和对新技术的理解。以下是针对题目中的关键点的详细解释： 1. HTML5的新特性： - **绘画canvas**：HTML5引入了canvas元素，允许通过JavaScript动态绘制图形，提供了一种在网页上进行2D图形绘制的方法。 - **video和audio元素**：内建的多媒体支持，使得无需插件就能在网页中播放音频和视频。 - **localStorage和sessionStorage**：提供了本地存储机制，其中localStorage用于持久化的数据存储，而sessionStorage的数据只在当前会话中有效。 - **语义化元素**：如article、footer、header、nav、section等，增强了文档结构的语义化，有助于SEO和无障碍访问。 - **新表单控件**：如calendar、date、time、email、url、search等，提供更丰富的输入类型。 - **webworker、websocket、Geolocation**：webworker实现后台多线程处理，websocket提供实时双向通信，Geolocation用于获取用户地理位置。 2. HTML5新标签的浏览器兼容性处理： - **document.createElement**：可以通过这种方法在所有浏览器中创建HTML5的新标签，然后通过CSS定义样式使其生效。 - **html5shim**：这是一种常用的库，可以帮助旧版IE浏览器识别并正确显示HTML5元素。 3. cookies，sessionStorage和localStorage的区别： - **cookies**：常用于跟踪用户状态，每次HTTP请求都会发送到服务器，具有过期时间，大小限制在4KB。 - **sessionStorage**：仅在当前浏览器窗口关闭时消失，适合临时存储会话数据，大小限制比cookie大。 - **localStorage**：持久化存储，即使浏览器关闭数据也不会丢失，适用于需要长期存储用户数据的情况，大小限制也远大于cookie。 4. HTML5的<!DOCTYPEHTML>声明： - 这是为了告诉浏览器以HTML5标准解析文档，不再需要像HTML4那样引用DTD（Document Type Definition），简化了文档头部。 对于CSS3，面试中可能会询问其新特性，例如： - **选择器扩展**：例如:nth-child(), :nth-of-type()，更强大的伪类和伪元素选择器。 - **CSS3边框**：如圆角border-radius，阴影box-shadow，渐变linear-gradient和radial-gradient。 - **动画和过渡**：transition和animation可以创建平滑的动效效果。 - **多列布局**：column-count, column-gap, column-fill等属性，使得多列布局更容易实现。 - **Flexbox布局**：提供更灵活的弹性盒模型，用于创建响应式和动态布局。 - **Grid布局**：二维布局系统，可以方便地创建复杂的网格布局。 对于canvas的绘制，可能需要了解的基本概念包括： - **context对象**：通过canvas元素的getContext('2d')获取，提供了一系列绘图方法。 - **路径绘制**：beginPath(), moveTo(), lineTo(), closePath()等用于创建和绘制图形路径。 - **填充和描边**：fillStyle和strokeStyle定义颜色，fill()和stroke()分别进行填充和描边操作。 - **图像绘制**：drawImage()方法用于在canvas上绘制图片。 - **文本绘制**：fillText()和strokeText()用于在canvas上添加文本。 了解这些知识点，将有助于在面试中展示自己的前端技术深度和广度。