前端面试（3）

HTML5CSS3

1.语义化的理解

在写HTML页面结果时所用的标签有意义
头部用head 主体用main 底部用foot
怎么判断页面是否有语义化
把CSS去掉，如果能够清晰的看出来页面结构，显示内容较为正常
为什么要选择语义化？
1.让HTML结构更加清晰明了
2.方便团队协作，利于开发
3.有利于爬虫和SEO
4.能够让浏览器更好的去解析代码
5.给用户带来良好的体验

2.H5C3有哪些新特性

H5的新特性？
1.语义化的标签
2.新增了音频视频
3.增加了画布canvas
4.增加了数据存储localstorage、sessionstorage
5.增加了表单控件 email url search00
6.拖拽释放API
C3新特性：
1.新增选择题：属性选择器、伪类选择器
伪元素选择器
2.新增了媒体查询、
3.新增了文字阴影、
4.新增边框、
5.新增盒子模型box-sizing、
6.新增渐变、
7.过度、
8.自定义动画、
9.背景的属性、
10.2D和3D

3.rem是如何做适配的？

rem是相对长度，相对于根元素的font-size属性来计算大小，通常来做移动端的适配
rem是根据根元素font-size来计算值的倍数
比如html上的font’-size：16px 给div设置宽为1.5rem，1.2rem=16px*1.2=19.2px

4.解决过哪些移动端的兼容问题？

1.当设置样式overflow：scroll/auto时，ios上的华东会卡顿
-webkit-overflow-scrolling：touch；
2.在安卓环境下placeholder文字设置行高时会偏上
input有placeholder属性的时候不要设置行高
3.移动端字体小于12px时异常显示
应该先把在整体放大一倍，然后再用transform进行缩小
input[type=button]{
opcity:1
}
5.安卓手机取消语音输入按钮
input::-webkit-input-speech-button{
display:none
}
6.IOS下取消input输入框在输入英文首字母默认大写 input autocapitakize=‘off’ autocorrect=‘off’
7.禁用ios和安卓用户选中文字
添加全局CSS样式：-webkit-user-select:none
8.禁止ios弹出各种窗口
添加全局CSS样式：-webkit-touch-callout:none
9.禁止ios识别长串数字为电话
添加meta属性 meta content=‘telephone=no’ name=‘format-detection’