HTML5CSS3

1.语义化的理解

---

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

头部用header 主题用main 底部用foot...

怎么判断页面是否语义化了？

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

为什么要选择语义化？

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

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

3.有利于爬虫和SEO

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

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

2.H5C3有哪些新特性？

---

H5的新特性：

1.语义化的标签

2.新增音频视频

3.增加了画布canvas

4.增加了数据存储localstroage、sessionstorage

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

6.拖拽释放API

C3的新特性：

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

2. 增加了媒体查询

3. 文字阴影

4. 边框

5. 盒子模型box-sizing

6. 渐变

7. 过渡

8. 自定义动画

9. 背景的属性

10. 2D和3D

3.rem是如何做适配的？

---

rem是相对长度，相对于根元素（HTML）的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进行缩小

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 conten = 'telephone=no' name='format-detection'>