宁鸣而死，不默而生。 —— 欧阳修
H5/C3面试题
HTML5是最新的HTML标准，引入了许多新的功能和特性，如语义化标签、媒体元素、Canvas绘图、地理定位等。在HTML5中，开发人员可以更好地构建结构良好、语义明确的网页，提升用户体验。
CSS3是最新的CSS标准，引入了许多新的样式属性和技术，如渐变、阴影、动画、过渡、响应式布局等。CSS3让开发人员能够更轻松地实现复杂的样式效果，提升网页的视觉吸引力和交互性。
什么是语义化标签
1. 易读性和维护性更好。
2. seo成分会更好，蜘蛛抓取更好。
3. IE8不兼容HTML5标签的。解决：可以通过html5shiv.js去处理。
::before 和 :after中双冒号和单冒号 有什么区别？解释一下这两个伪元素的作用。
1. 区别
:是伪类、::伪元素 ===》是为了做区分
2.是什么？作用
元素before之前 、 元素after之后
作用：清除浮动、样式布局上也有作用
如何关闭IOS键盘首字母自动大写
<input type="text" autocapitalize='off'>
怎么让Chrome支持小于12px 的文字？
Chrome默认字体大小是：16px
**每个浏览器默认字体大小可能都不一样
<style type="text/css"> div{ font-size:10px; } div span{ display: inline-block; -webkit-transform:scale(1.6); } </style>
rem和em区别
相对于font-size
em针对于父元素的font-size
rem针对于根(html)元素的font-size
ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
<style> a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); } </style>
webkit表单输入框placeholder的颜色值能改变吗？
<style type="text/css"> input::-webkit-input-placeholder{ color:red; } </style>
禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片
禁止ios 长按时触发系统的菜单，禁止ios&android长按时下载图片
html,body{ touch-callout: none; -webkit-touch-callout: none; user-select:none; -webkit-user-select:none; }
禁止ios和android用户选中文字
html,body{ user-select:none; -webkit-user-select:none; }
自适应
淘宝无限适配【移动端】：淘宝无限适配 + 布局单位使用rem
响应式
1. 是什么？
一个URL可以响应多端
2. 语法结构
@media only screen and (max-width: 1000px){ ul li:last-child{ display: none; } }
only : 可以排除不支持媒体查询的浏览器
screen ： 设备类型
max-width | max-height
min-width | min-height
3. 响应式图片【性能优化】
<picture> <source srcset="1.jpg" media='(min-width:1000px)'> <source srcset="2.jpg" media='(min-width:700px)'> <img srcset="3.jpg"> </picture>
布局方案
一、什么情况下采用响应式布局
数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局
例如：公司的官网、专题页面
特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。
二、pc + 移动端应该做什么样的布局方案
注意：访问量还可以或者比较大，类似于淘宝网。
pc是一套，会加入一点点响应式。
移动端是一套，会使用自适应的布局方式。
三、pc的设计图
ui：1980
笔记本电脑：1280
ui图的宽度和电脑的宽度不对应该怎么办？
1. 把ui图进行等比缩放，缩放成和电脑一样的尺寸
2. 换1980的电脑
四、移动端的设计图
宽度：750
因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点。
