必备！H5C3八股文：WEB前端高频面试问题集锦（四）

宁鸣而死，不默而生。  —— 欧阳修

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的尺寸做为基准点。