【知识总结】金九银十offer拿到手软的前端面试题——HTML篇

1、html5有哪些新特性、移除了那些元素？

新增功能：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

• 新增选择器document.querySelector、document.querySelectorAll
• 拖拽释放API
• 媒体播放video、audio
• 本地存储的sessionStorag、localStorage
• 离线应用manifest
• 桌面通知Notifications
• 语意化标签header、footer、section、nav、article
• 增强表单控件calendar、date、time、email、url、search
• 地理位置Geolocation
• 多任务webworker
• 全双工通信协议websocket
• 历史管理history
• 跨域资源共享CORS
• 页面可见性改变事件visibilitychange
• 跨窗口通信PostMessage
• Form Data对象
• 绘制canvas

移除的元素：

• 纯表现的元素basefont、big、center、font、s、strike、tt、u
• 对可用性产生负面影响的元素frame、frameset、noframes

2、viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
1

• width：设置viewport宽度，为一个正整数，或字符串‘device-width’，表示设备宽度
• height：设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
• initial-scale：默认缩放比例（初始缩放比例），为一个数字，可以带小数
• minimum-scale：允许用户最小缩放比例，为一个数字，可以带小数
• maximum-scale：允许用户最大缩放比例，为一个数字，可以带小数
• user-scalable：是否允许手动缩放

延伸提问：怎样处理 移动端 1px 被 渲染成 2px问题？

1）局部处理

• meta标签中的viewport属性，initial-scale设置为1
• rem按照设计稿走，外加transform的scale设置为0.5，缩小一倍即可

2）全局处理

• meta标签中的viewport属性，initial-scale设置为0.5
• rem按照设计稿走即可