【html篇】常见面试题使代码语义化，这样不仅便于开发者进行阅读，同时也能维护和写出更优雅的代码，还能够让搜索引擎和浏览

什么事HTML语义化的理解?(重点)

HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如 nav 表示导航条，类似的还有 article、header、footer 等等标签。

Doctype作用？标准模式和兼容模式的区别？

作用：用来告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现
标准模式：排版和js运作方式都是以该浏览器支持的最高标准运行。
兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法运行。
例子：1、width不同在严格模式中，width是内容宽度(content)，但是在兼容模式中，width是(元素的实际宽度),(怪异盒模型是margin之外是width的范围)

行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素：

a , b span ,img , canvas , input, select, em ,del , strong i

块级元素

div , h1~h6 , p , ul(无序),ol(有序), dl , dt ,table, center header footer section ,from

常见的空元素：

br hr link script

行内元素

设置宽高无效
对margin设置左右方向有效，而上下无效，padding设置都无效
不会自动换行

块级元素

可以设置宽高
设置margin和padding都有效
可以自动换行
多个块状，默认排列从上到

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

实现上：h5不再是SGML的子集。

新特性：主要是关于图像，位置，存储，多任务等功能的增加

新增的元素

canvas , footer , header , video ,audio，main,等

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u; 对可用性产生负面影响的元素：frame，frameset，noframes；

表单控件

calendar、date、time、email、url、search;

api

localStorage

页面导入样式时，使用link和@import有什么区别

本质上：link属于XHTML标签，除了加载css之外，还能定义RSS，定义rel连接属性等作用。而@import是css提供的，只能用于加载css 解析上：link是跟着页面加载同时加载的，但是@import会等到页面加载完再加载兼容上：@import IE5以上才能识别，无限制

介绍一下你对浏览器内核的理解？

主要分为两部分：

渲染引擎
JS引擎

渲染引擎：取得网页的内容（html、xml、图片）、构造cssom树、计算网页的显示方式，比如各元素宽高，然后输出至显示器或打印机。
js引擎：解析和执行javascript来实现网页的动态效果

HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

1、页面头部像下面一样加入一个manifest的属性； <html manifest="demo.appcache">
2、在cache.manifest文件的编写离线存储的资源； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？（这个比上面重要）

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

Cookie 和 Session 是用于在 Web 应用中跟踪用户状态的两种常见机制，它们的主要区别如下：

1. 存储位置

Cookie：存储在客户端（浏览器）上。
Session：存储在服务器端，通常通过 Session ID 与客户端关联。

2. 数据存储

Cookie：可以存储少量数据（如用户偏好、登录状态），大小通常限制在 4KB 左右。
Session：可以存储更多数据（如用户信息、购物车内容），存储量取决于服务器配置。

3. 安全性

Cookie：由于存储在客户端，容易被篡改或窃取，安全性较低。
Session：数据存储在服务器，仅通过 Session ID 与客户端交互，安全性较高。

4. 生命周期

Cookie：可以设置过期时间，可以是会话级别的（浏览器关闭时失效）或持久性的（长期有效）。
Session：通常依赖于会话，浏览器关闭后失效，但服务器可以设置过期时间。

5. 性能影响

Cookie：每次请求都会发送到服务器，增加带宽消耗。
Session：仅发送 Session ID，减少数据传输量，但服务器需要存储和管理 Session 数据，可能增加服务器负担。

6. 使用场景

Cookie：适合存储不敏感的小数据，如用户偏好、跟踪信息。
Session：适合存储敏感或较大数据，如用户登录状态、购物车内容。

总结

Cookie：客户端存储，适合小数据，安全性较低。
Session：服务器存储，适合大数据，安全性较高。

两者常结合使用，Session 依赖 Cookie 传递 Session ID。

sessionStorage和session区别

1. sessionStorage

定义: sessionStorage 是 HTML5 提供的一种前端存储机制，用于在浏览器会话期间存储数据。
作用域: 数据仅在当前浏览器窗口或标签页中有效，关闭窗口或标签页后数据会被清除。
存储位置: 数据存储在客户端浏览器中。
生命周期: 数据仅在当前会话期间有效，页面刷新不会清除数据，但关闭窗口或标签页后会丢失。
使用场景: 适合存储临时数据，如表单数据、页面状态等。
API: 通过 JavaScript 的 sessionStorage 对象进行操作，如 sessionStorage.setItem(key, value) 和 sessionStorage.getItem(key)。

2. session

定义: session 是服务器端的一种机制，用于在多个请求之间存储用户的状态信息。
作用域: 数据存储在服务器上，通常通过唯一的 session ID 与客户端关联。
存储位置: 数据存储在服务器内存或数据库中。
生命周期: 数据在用户会话期间有效，通常会在用户长时间不活动或显式注销时过期。
使用场景: 适合存储用户登录状态、购物车信息等需要在多个页面间共享的数据。
管理方式: 服务器通过 session ID（通常存储在客户端的 cookie 中）来识别和管理用户的会话。

总结

sessionStorage 是前端技术，数据存储在浏览器中，生命周期限于当前窗口或标签页。
session 是后端技术，数据存储在服务器中，生命周期跨越多个请求，直到会话结束。

iframe有那些缺点？

iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以绕开以上两个问题。

Label的作用是什么？是怎么用的？

用来关联某个标签，可以是表单标签，也可以是button，这样就可以直接点击label的范围来触发绑定标签的事件

如何实现浏览器内多个标签页之前的通信（阿里）？

WebSocket、SharedWorder（需要实现试试）
也可以调用localstorage、cookies等本地存储方式

webSocket如何兼容低浏览器？(阿里)（暂时没有实现）

Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR

页面可见性（Page Visibility API）可以有哪些用途？

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等; 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

如何在页面上实现一个圆形的可点击区域

border-radius

CSS的盒子模型

包含元素内容content、内边距padding、边框border、外边距margin box-sizing:border-box;content-box;inherit;

content-box:总宽度=margin+border+padding+width，即为标准模型； border-box:总宽度=margin+width，即为IE模型； inherit:继承父元素的border-sizing属性。

在 CSS 中，清除浮动（Clearing Floats）是为了解决父元素因子元素浮动而导致的高度塌陷问题。以下是几种常见的清除浮动的方法：

1. 使用 `clear` 属性

在浮动元素后面添加一个空元素，并为其设置 clear: both; 属性。

<div class="parent">
  <div class="float-left">浮动元素</div>
  <div class="float-left">浮动元素</div>
  <div style="clear: both;"></div> <!-- 清除浮动 -->
</div>

优点：简单直接。
缺点：增加了无意义的空元素，不符合语义化。

2. 使用 `overflow` 属性

为父元素设置 overflow: hidden; 或 overflow: auto;，触发 BFC（块级格式化上下文）来清除浮动。

.parent {
  overflow: hidden; /* 或 overflow: auto; */
}

优点：代码简洁，无需额外元素。
缺点：可能会隐藏内容或出现滚动条。

3. 使用伪元素 `::after`

为父元素添加伪元素，并设置 clear: both;。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<div class="parent clearfix">
  <div class="float-left">浮动元素</div>
  <div class="float-left">浮动元素</div>
</div>

优点：语义化好，无需额外元素。
缺点：需要为父元素添加类名。

4. 使用 `display: flow-root`

为父元素设置 display: flow-root;，触发 BFC 来清除浮动。

.parent {
  display: flow-root;
}

优点：现代 CSS 解决方案，代码简洁。
缺点：兼容性较差（不支持 IE 浏览器）。

5. 使用 `flex` 布局

将父元素的布局方式改为 flex，浮动会自动失效。

.parent {
  display: flex;
  flex-direction: column; /* 或其他方向 */
}

优点：现代布局方式，无需清除浮动。
缺点：改变了布局方式，可能影响原有设计。

6. 使用 `grid` 布局

将父元素的布局方式改为 grid，浮动也会自动失效。

.parent {
  display: grid;
}

优点：现代布局方式，无需清除浮动。
缺点：改变了布局方式，可能影响原有设计。

总结

推荐方法：使用伪元素 ::after 或 display: flow-root;，语义化好且代码简洁。
兼容性考虑：如果需要兼容旧版浏览器（如 IE），可以使用 overflow 或伪元素方法。
现代布局：如果项目支持现代浏览器，可以直接使用 flex 或 grid 布局，避免浮动问题。

meta viewport 是做什么用的

将视口大小设置为可视区域的大小。通过meta设置视口大小 <meta name="viewport" content="width=device-width, initial-scale=1.0"> meta标签的属性:

width=device-width 设置视口宽度等于设备的宽度
initial-scale=1.0 初始缩放比例, 1不缩放
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

Less/Sass/Scss的区别

Scss其实是Sass的改进版本
变量符不一样，Less是@，而Sass是$，而且变量的作用域也不一样。
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
Less与Sass处理机制不一样:Less是通过客户端处理的，Sass是通过服务端处理，相比较之下Less解析会比Sass慢一点

sass 和scss区别

1：异同：简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号

2 scss功能很强大的样子，能做运算、写函数啥的，但是我只是作为语法糖用而已，只看了些基础功能

base64图片和css雪碧图（精灵图）好处和缺点

好处：

优化加载速度:
<img src="./b.png" class="img1"> <img src="jpg,base:64sdffsfdfdsfsdfewr" class="img2"/> img1:DOM树和CSSOM树渲染时候遇到src，这是拿到src路径后，请求加载这张图，然后渲染上去
img2::DOM树和CSSOM树渲染时候遇到src，这是拿到src路径是base，用加载，直接渲染而css精灵也是一样，baground第一次已经把图片已经加载，不用多次加载直接CSSOM树渲染

css中哪些属性可以继承？

不可继承

1.宽高:height，width

2.最小最大宽高：max-height,min-height,max-width,min-width

3.dispaly

4.文本阴影：text-shadow

5.背景属性：background

6.浮动属性：float

7.生成内容：content

8.层级属性：z-index

9.定位属性：position，left，right，top，bottom

10：盒模型属性：margin,padding,border

常用可继承属性：

1.字体系列属性：font-family，font-size

2.文本系列属性：text-indent，line-height，color

3.元素可见性：visibility

4.表格布局属性：border-style

5.列表布局属性：list-style list-style-type

6.光标属性：cursor

:before 与 ::before的区别

1、相同点：\

都可以用来表示伪类对象，用来设置对象前的内容
:befor和::before写法是等效的

2、不同点：\

:befor是Css2的写法，::before是Css3的写法
:before的兼容性要比::before好，不过在H5开发中建议使用::before比较好

3、注意点：

伪类对象要配合content属性一起使用
伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
伪类对象的特效通常要使用:hover伪类样式来激活

.test:hover::before { /* 这时animation和transition才生效 */ }

什么是BFC？什么条件下会触发？应用场景有哪些？

BFC是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素的如何定位，以及其他元素的关系和相互作用。通俗来说：是一个容器，管理块级元素的布局

怎样触发BFC

这里简单列举几个触发BFC使用的CSS属性

overflow: hidden
display: inline-block
display: flex
position: absolute
position: fixed
display: table-cell

BFC特性

应用场景

防止浮动元素高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inner {
            height: 50px;
            width: 50px;
            background: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner"></div>
    </div>
</body>
</html>

*1：将父级元素设为BFC后**

.container {
    overflow: hidden;
}

结果：

2：当2个box在同一个BFC容器内，同时使用margin会引起外边距重合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            overflow: hidden;
        }
        .inner {
            margin: 10px 0;
            background: green;
            
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">div1</div>
        <div class="inner">div2</div>
        <div class="inner">div3</div>
    </div>
</body>
</html>

结果：

**box变为BFC，增加如下样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            overflow: hidden;
        }
        .inner {
            margin: 10px 0;
            background: green;
            
        }
        .bfc {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">div1</div>
        <div class="bfc">
            <div class="inner">div2</div>
        </div>
        
        <div class="inner">div3</div>
    </div>
</body>
</html>

3：自适应两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局</title>
    <style>
            div {
                 width: 200px;
                 height: 100px;
                 border: 1px solid red;
            }

    </style>
</head>
<body>
    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px;">
        我是蛙人，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭
        ，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭
    </div>
</body>
</html>

可以看到上面元素，第二个div元素为300px宽度，但是被第一个div元素设置Float脱离文档流给覆盖上去了，解决此方法我们可以把第二个div元素设置为一个BFC。

代码修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局</title>
    <style>
            div {
                 width: 200px;
                 height: 100px;
                 border: 1px solid red;
            }

    </style>
</head>
<body>
    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两
        栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px;display:flex;">
        我是蛙人，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助
        请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭
    </div>
</body>
</html>

translate(-50%,-50%)导致的像素模糊问题解决办法

#如图，正常情况下，元素的边缘应该和像素点对齐，但是经过 CSS translate 后，计算的结果并非整数的像素点，导致本来一个像素能渲染的内容，没有完全归纳在其像素点内，导致出现模糊的情况。

翻译成人话： css transform:translate(-50%,-50%) 计算后的结果很可能是 transform: translate( 100.5px, 100.5px)，就因为 0.5 所以模糊

解决办法

第一种：在 transfrom 时，使用 calc 函数加上0.5 px ，具体代码 :

.modal {
 
    position: absolute;
    top: 50%;
    right: 50%;
    margin: auto;
    /** 这 0.5px加或者减都可以 */
    transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px));
 }

什么是FOUC？如何避免FOUC？

FOUC即无样式内容闪烁（Flash Of Unstyled Content），是在IE下通过@import导入css文件引起的。

IE会首先加载整个HTML文档的DOM，然后再导入外部的css文件。因此，在页面DOM加载完成到css导入完成之间，有一段时间页面上的内容是没有样式的，这段时间的长短跟网速和电脑速度都有关系。

解决方法：在之间加入一个标签来导入css文件

px 、em 、rem 区别

1、px (pixel)

我们先了解几个概念：

关键概念

设备像素：设备屏幕实际拥有的像素点一般来说：宽度方向有1920个像素点，长度方向有1080个像素点。


逻辑像素：CSS 的像素单位(就是我们这次要讨论的css的px)，其尺寸大小是相对的，也称为独立像素




分辨率：屏长的设备像素 × 屏宽的设备像素（1920 * 1080）




ppi（pixels per inch）：像素密度，表示沿对角线每英寸长度的像素数目（单位是dpi）,越大显示的越细腻


复制代码

缩放因子（Scale Factor）：逻辑像素相对于设备像素的放大比例，可通过window.devicePixelRatio获得，pc上可以用个个性化来设置，但二者并不完全等同

上面概念直接的关系

关系一：


  设备尺寸 × 像素密度 = 分辨率（设备像素）




举例：




  iphone6s 对角线长度为5.5 inches，像素密度401 ppi，分辨率 1920 * 1080，计算可得对角线的设备像素为2205.5。




  5.5 * 401 = 2205.5




关系二：




  逻辑像素(css的px) = 设备像素 × 缩放因子




举例：




  iphone6逻辑像素为375 * 667，分辨率为750 * 1334，缩放因子为2




  1个逻辑像素（1px） = 设备宽度的1/375




  1个设备像素 = 设备宽度的1/750


复制代码

  1/375 = 1/750 * 2

以上参考： 1px 究竟是多大

由公式得出的结论

PC端分辨率一样的情况下，屏幕尺寸越大，显示的越模糊(因为dpi越小)。

举例说明：

我们的台式机电脑屏幕一般是32英寸，分辨率为：1920 * 1080。而一般笔记本是15.6英寸，分辨率也是：1920*1080的。由公式一：当分辨率一样时，设备尺寸越大，像素密度越小。所以32寸的台式电脑看上去模糊一些。

相同分辨率，相同缩放因子情况下，不同设备尺寸下，表现是一致的 举例说明：

平时我们在pc上24英寸的电脑上开发的网页直接写的（px），在不做任何兼容处理的情况下，在15.6英寸的笔记本上也能正常显示。由公式二：因为一般pc端，默认情况下缩放因子为1（window.devicePixelRatio = 1），分辨率也一样（1920 * 1080），那么得到的**逻辑像素(css的px)**也是一样的。所以你在分辨率一样的情况下，在大屏电脑上设置的100px，在小屏电脑上也是100px。只是他们表现出来的大小不一致，小屏上面的1px更小。

如何将pc网页放到手机上展示？

我们可以调整网页在移动端上的缩放比例，这个值就是viewport。默认情况下，移动端浏览器会将 viewport 宽度设为980px（也有可能是1024px 或其它值），也就是说1px = 设备屏幕宽度的1/980。这跟缩放因子没有任何关系。这时的1px 非常小，所有的元素都变得非常小，移动端浏览器之所以这么做，是为了尽可能完整的显示 PC 端的网页，然后允许用户通过缩放来查看细节。显然体验就别的特别差了，很多本来就比较小的元素看都看不清了。第二种方式是我们设置一个适当的缩放比例。一般我们这样设置：

<meta name="viewport" content="width=device-width">
复制代码

那么对于iphone6来说根据公式：1px = 1/750（分辨率） * 2（缩放因子） = 1/ 375。显然比刚才的1/980大了不少，那么我们的元素如果还是按照原来的px去设置，那么屏幕肯定展示不下去了，这时候，如果我们的元素的px值能根据1px的大小是动态调整，我们的网页就完美了，这时候em,rem就派上用场了。

思考：1px到底有多长？

关于px的相关信息《CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport》这篇文章中已经介绍的很详细很详细。下面对px进行概括总结。

浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px，px是一个相对单位，相对的是设备像素(device pixel)，也就是物理像素，其相对性体现在在同一个设备上或在不同设备之间每1个px所代表的物理像素是可以变化的。

那么px到底是什么？

px实际是pixel（像素）的缩写，根据维基百科的解释，它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时 一定要清楚它的上下文！一定要清楚它的上下文！一定要清楚它的上下文！

em

em用来适应用户所使用的字体，1em相当于当前的字体尺寸（font-size属性），2em相对于当前字体尺寸的2倍。

如果当前元素的父元素设置了font-size，则em参考元素为其父元素。
如果当前元素的父元素没有设置font-size，则逐级向上查找有设置font-size属性的元素，直到<html>根元素。
如果当前元素的父元素向上所有父元素均没有设置font-size，则em其参考大小为浏览器默认大小 16px

3、rem

rem 即 root em，其参考元素为文档的根元素<html>中font-size属性。

如果文档根元素<html>没有设置font-size属性，那么当前元素rem相对于浏览器默认字体大小16px
如果文档根元素<html style="font-size: 20px">设置了font-size属性，那么当前元素rem相对于文档的根元素<html>

****em，rem 不仅仅是用于控制当前字体的大小，可以应用于各自可以设置长度的属性上，width、height···****总之：对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

逻辑像素(css的px) = 设备像素 × 缩放因子
为了移动端更好的适配我们引入了em和rem这2个动态单位
em的大小与父元素的font-size有关，rem的大小与根元素html的font-size有关
一般在移动端我们会使用js动态计算跟节点html的font-size来达到自适应的目的。

微信内部H5页面：处理用户修改微信字体大小造成的页面溢出问题

样式选择器权重

第一等级：代表内联样式，如style=""，权值为 1000
第二等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10
第四等级：代表标签选择器和伪元素选择器，如div p，::before、::after，权值为1
!important 权重在这里插入代码片无限大 ,直接卸载后面（color: red!important;）
注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为

类，用户定义的类名，这个类是具体的，看得见的，如div.div0，选择具有类div0的div元素。
伪类，用于向某些选择器添加特殊的效果。用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上，如a标签的:hover，表单元素的:disabled。
元素，如div、p、h1等，是实实在在存在的元素。
伪元素，是html中不存在的元素，仅在css中用来渲染的，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。如::before、::after。

绘制不同方向的三角形

通过调整边框的属性，可以绘制不同方向的三角形。

向下三角形：

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #007bff;
}

向左三角形：

.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid #007bff;
}

向右三角形：

.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid #007bff;
}

cookie 有哪些编码方式？

encodeURIComponent 对 Cookie 值进行编码

encodeURIComponent 和 encodeURI区别

主要区别

特性	`encodeURIComponent`	`encodeURI`
作用范围	编码 URI 的组成部分（如查询参数）	编码整个 URI
编码字符范围	对所有非字母数字字符编码（除了 `- _ . ! ~ * ' ( )`）	对部分特殊字符编码（保留 `; , / ? : @ & = + $ #`）
使用场景	编码查询参数、片段标识符等	编码完整的 URI

4. 何时使用哪个函数

使用 encodeURIComponent：

当需要编码 URI 的某一部分时（如查询参数的值）。

例如：

const param = "name=John Doe";
const url = "https://example.com/page?query=" + encodeURIComponent(param);
console.log(url); // 输出：https://example.com/page?query=name%3DJohn%20Doe

使用 encodeURI：

当需要编码整个 URI 时。

const url = "https://example.com/page?name=John Doe";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // 输出：https://example.com/page?name=John%20Doe

post 和get请求区别

总结对比

特性	GET 请求	POST 请求
用途	获取数据	提交数据
数据传输方式	URL 查询字符串	请求体
数据长度限制	受 URL 长度限制（约 2048 字符）	无明确限制
安全性	数据暴露在 URL 中，安全性较低	数据在请求体中，安全性较高
缓存	可被缓存	默认不缓存
幂等性	幂等	非幂等
浏览器行为	支持书签保存	不支持书签保存

画一条 0.5px 的线

1. 使用 `transform: scale()`

通过缩放元素来实现 0.5px 的效果。

实现代码：

<div class="line"></div>

.line {
  width: 100%;
  height: 1px;
  background-color: black;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

解释：

设置 height: 1px，然后通过 transform: scaleY(0.5) 将其垂直缩放为 0.5px。
transform-origin: 0 0 确保缩放从顶部开始。

2. 使用 `border` 和 `transform`

通过设置 border 并缩放来实现。

实现代码：

<div class="line"></div>

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid black;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

解释：

设置 border-bottom: 1px solid black，然后通过 transform: scaleY(0.5) 将其缩放为 0.5px。

3. 使用 `linear-gradient`

通过 CSS 渐变实现 0.5px 的线。

实现代码：

<div class="line"></div>

.line {
  width: 100%;
  height: 1px;
  background: linear-gradient(to bottom, black 50%, transparent 50%);
}

解释：

使用 linear-gradient 创建一个从上到下的渐变，黑色占 50%，透明占 50%，从而实现 0.5px 的效果。

4. 使用 `box-shadow`

通过 box-shadow 实现细线效果。

实现代码：

<div class="line"></div>

.line {
  width: 100%;
  height: 1px;
  box-shadow: 0 0.5px 0 black;
}

解释：

使用 box-shadow 在元素下方绘制一条 0.5px 的阴影线。

5. 使用 `viewport` 和 `rem`

通过设置 viewport 的缩放比例来实现 0.5px。

实现代码：

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5">
<div class="line"></div>

.line {
  width: 100%;
  height: 1px;
  background-color: black;
}

解释：

通过设置 viewport 的 initial-scale=0.5，将整个页面的缩放比例设置为 0.5，此时 1px 会被渲染为 0.5px。

6. 使用 `canvas`

通过 canvas 绘制 0.5px 的线。

实现代码：

<canvas id="myCanvas" width="200" height="1"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.moveTo(0, 0.5);
ctx.lineTo(200, 0.5);
ctx.stroke();

解释：

使用 canvas 的 lineWidth 属性直接设置 0.5px 的线宽。

总结

推荐方法：使用 transform: scale() 或 linear-gradient，兼容性较好且实现简单。
注意事项：在某些低分辨率设备上，0.5px 可能仍然显示为 1px，因此需要根据实际需求选择合适的方法。

根据具体场景选择最适合的实现方式即可！

flex 三种属性

flex是flex-grow、flex-shrink和flex-basis这三个属性的缩写

常用伪元素有哪一些？

1. `::before`

作用：在元素内容的前面插入虚拟内容。

示例：

p::before {
  content: "前缀: ";
  color: red;
}

<p>这是一段文字。</p>

效果：前缀: 这是一段文字。

2. `::after`

作用：在元素内容的后面插入虚拟内容。

示例：

p::after {
  content: " (后缀)";
  color: blue;
}

<p>这是一段文字。</p>

效果：这是一段文字 (后缀)

3. `::first-letter`

作用：选择元素内容的第一个字母。

示例：

p::first-letter {
  font-size: 2em;
  color: green;
}

<p>这是一段文字。</p>

效果：**这**是一段文字。

4. `::first-line`

作用：选择元素内容的第一行。

示例：

p::first-line {
  font-weight: bold;
  color: purple;
}

<p>这是一段文字。<br>这是第二行。</p>

效果：**这是一段文字。**（第一行加粗并变色）

5. `::selection`

作用：选择用户选中的文本部分。
示例：
```
::selection {
  background-color: yellow;
  color: black;
}
```
效果：选中文本时，背景变为黄色，文字变为黑色。

6. `::placeholder`

作用：选择输入框的占位符文本。

示例：

input::placeholder {
  color: gray;
  font-style: italic;
}

<input type="text" placeholder="请输入内容">

效果：占位符文本显示为灰色斜体。

7. `::marker`

作用：选择列表项（<li>）的标记（如圆点、数字）。

示例：

li::marker {
  color: red;
  font-size: 1.2em;
}

<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>

效果：列表项的标记变为红色并放大。

8. `::backdrop`

作用：选择全屏元素（如 <dialog> 或 <video>）的背景层。

示例：

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

<dialog open>这是一个对话框。</dialog>

效果：对话框背景变为半透明黑色。

9. `::cue`

作用：选择视频或音频的字幕（WebVTT 格式）。

示例：

video::cue {
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
}

效果：视频字幕显示为白色，背景为半透明黑色。

10. `::part`

作用：选择 Shadow DOM 中带有 part 属性的元素。

示例：

custom-element::part(button) {
  background-color: blue;
}

<custom-element>
  #shadow-root
    <button part="button">按钮</button>
</custom-element>

效果：Shadow DOM 中的按钮背景变为蓝色。

总结

常用伪元素包括：

::before 和 ::after：用于插入内容。
::first-letter 和 ::first-line：用于选择文本的首字母或首行。
::selection：用于选择用户选中的文本。
::placeholder：用于选择输入框的占位符。
::marker：用于选择列表项的标记。
::backdrop：用于选择全屏元素的背景。
::cue：用于选择视频或音频的字幕。
::part：用于选择 Shadow DOM 中的部分元素。

根据具体需求选择合适的伪元素来实现样式效果。

【html篇】常见面试题

什么事HTML语义化的理解?(重点)

Doctype作用？ 标准模式和兼容模式的区别？

行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素：

块级元素

常见的空元素：

行内元素

块级元素

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新增的元素

移除的元素：

表单控件

api

页面导入样式时，使用link和@import有什么区别

介绍一下你对浏览器内核的理解？

HTML5的离线储存怎么使用，工作原理能不能解释一下？

如何使用：

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？（这个比上面重要）

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

存储大小：

有期时间：

Cookie 和 Session 是用于在 Web 应用中跟踪用户状态的两种常见机制，它们的主要区别如下：

1. 存储位置

2. 数据存储

3. 安全性

4. 生命周期

5. 性能影响

6. 使用场景

总结

sessionStorage和session区别

1. sessionStorage

2. session

总结

iframe有那些缺点？

Label的作用是什么？是怎么用的？

如何实现浏览器内多个标签页之前的通信（阿里）？

webSocket如何兼容低浏览器？(阿里)（暂时没有实现）

页面可见性（Page Visibility API） 可以有哪些用途？

如何在页面上实现一个圆形的可点击区域

CSS的盒子模型

在 CSS 中，清除浮动（Clearing Floats）是为了解决父元素因子元素浮动而导致的高度塌陷问题。以下是几种常见的清除浮动的方法：

1. 使用 clear 属性

2. 使用 overflow 属性

3. 使用伪元素 ::after

4. 使用 display: flow-root

5. 使用 flex 布局

6. 使用 grid 布局

总结

meta viewport 是做什么用的

Less/Sass/Scss的区别

sass 和scss区别

base64图片和css雪碧图（精灵图）好处和缺点

好处：

css中哪些属性可以继承？

不可继承

常用可继承属性：

:before 与 ::before的区别

什么是BFC？什么条件下会触发？应用场景有哪些？

怎样触发BFC

BFC特性

应用场景

防止浮动元素高度塌陷

1：将父级元素设为BFC后*

2： 当2个box在同一个BFC容器内，同时使用margin会引起外边距重合

3：自适应两栏布局

translate(-50%,-50%)导致的像素模糊问题解决办法

解决办法

什么是FOUC？如何避免FOUC？

px 、em 、rem 区别

1、px (pixel)

关键概念

上面概念直接的关系

由公式得出的结论

如何将pc网页放到手机上展示？

em

3、rem

微信内部H5页面：处理用户修改微信字体大小造成的页面溢出问题

样式选择器权重

绘制不同方向的三角形

Doctype作用？标准模式和兼容模式的区别？

页面可见性（Page Visibility API）可以有哪些用途？

1. 使用 `clear` 属性

2. 使用 `overflow` 属性

3. 使用伪元素 `::after`

4. 使用 `display: flow-root`

5. 使用 `flex` 布局

6. 使用 `grid` 布局

*1：将父级元素设为BFC后**

2：当2个box在同一个BFC容器内，同时使用margin会引起外边距重合

1. 使用 `transform: scale()`

2. 使用 `border` 和 `transform`

3. 使用 `linear-gradient`

4. 使用 `box-shadow`

5. 使用 `viewport` 和 `rem`

6. 使用 `canvas`

1. `::before`

2. `::after`

3. `::first-letter`

4. `::first-line`

5. `::selection`

6. `::placeholder`

7. `::marker`

8. `::backdrop`

9. `::cue`

10. `::part`