前端面试题 （HTML5 CSS3 部分）

1. 语义化的理解

        在写HTML页面结构时所用的标签有意义

        头部用header        主体用main        底部用footer

        如何判断页面是否语义化：

                把CSS去掉，如果能够清晰地看出来页面结构，显示内容较为正常

        为什么要选择语义化：

                1. 让HTML结构更加清晰明了

                2. 方便团队协作，利用开发

                3. 有利于爬虫和SEO

                4. 能够让浏览器更好地去解析代码

                5. 给用户带来良好的体验

2. H5C3有哪些新特性？

        H5的新特性：

                1. 语义化的标签

                2. 新增了音频视频

                3. 画布canvas

                4. 数据存储localStorage        sessionStorage

                5. 增加了表单控件        email        url        search

                6. 拖拽释放API

        CSS3的新特性：

                1. 新增了选择器：属性选择器、伪类选择器、伪元素选择器

                2. 增加了媒体查询

                3. 文字阴影

                4. 边框

                5. 盒子模型box-sizing

                6. 渐变

                7. 过渡

                8. 自定义动画

                9. 背景的属性

                10. 2D和3D

3. rem是如何做适配的?

        rem是相对长度，相对于根元素（html）的font-size属性来计算大小，通常来做移动端的适配

        rem是根据根元素font-size计算值的倍数

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

        1.当设置样式overflow:scroll/auto时，IOS上的华东会卡顿

                -webkit-overflow-scrolling: touch;

        2. 在安卓环境下，placeholder文字设置行高会偏上

                input有placeholder属性就不要设置行高

        3. 移动端字体小于12px时异常显示

                应该先把整体放大一倍，然后再用transform进行缩小

        4. iOS下input按钮设置了disabled属性为true显示异常

                input[type=button]{

                        opcity: 1;

                }

        5. 安卓手机下取消语音输入按钮

                input:: -webkit-input-speech-button{

                        display: none;

                }

        6. IOS下取消input输入框在输入引文首字母默认大写

                <input autocapitalize = 'off' autocorrect= 'off'>

        7. 禁用IOS和安卓用户选中文字

                添加全局CSS样式：-webkit-user-select: none

        8. 禁止IOS弹出各种窗口

                -webkit-touch-callout: none

        9. 禁止IOS识别长串数字为电话

                添加meta属性 <meta content='telephone=no'  name='format-detection'>