####自用#### ...持续更新目录1、块级元素行内元素2、HTML53、CSS34、定位5、CSS权重6、BFC7、CSS SCSS Less1、块级元素行内元素块h,p,ul,form,table,容器元素行span,a,img,input,button,select,textarea,strong,i,b对比维度块级元素Block行内元素Inline行内块元素Inline-block布局表现是否独占一行✅ 独占一行强制换行❌ 不独占与其他行内元素并排❌ 不独占与其他行内 / 行内块并排尺寸控制width/height✅ 直接生效可自定义宽高❌ 完全无效宽高由内容决定✅ 直接生效可自定义宽高margin 生效范围✅ 上下左右全方向生效❌ 仅左右生效上下无效✅ 上下左右全方向生效padding 生效范围✅ 上下左右全生效撑大自身✅ 上下左右视觉生效但上下不挤压其他元素✅ 上下左右全生效撑大自身 挤压周围元素默认宽度100%自动撑满父容器由内容宽度决定由内容宽度决定嵌套规则可嵌套块级、行内、行内块元素仅可嵌套行内元素 / 文本不能嵌套块级可嵌套行内、行内块嵌套块级需谨慎兼容性典型元素示例div、p、h1-h6、ul、ol、li、tablespan、a、strong、em、i、label、brinput、button、img、select、textarea2、HTML51.语义化标签header nav main aside article section footer1.网页内容结构化高效开发和代码维护2.语义化表达更好理解3.方便样式和脚本控制4.内容复用与维护2.多媒体 video audio source3、表单增强 输入类型email、url、number 表单验证required、max 占位符placeholder4、绘图和动画canvas svg可缩放矢量图形5、本地存储特性LocalStorageSessionStorageCookie有效期永久存储除非手动删除或清理浏览器数据会话有效关闭标签页 / 浏览器后删除可通过expires/max-age设置有效期默认会话有效数据发送不随 HTTP 请求发送仅在客户端存储不随 HTTP 请求发送每次 HTTP 请求都会携带包括图片、CSS 等资源请求可能增加带宽消耗使用场景持久化存储用户偏好如主题设置、记住登录状态临时存储会话数据如表单临时草稿、页面间临时传递数据存储少量必要的跨请求数据如用户身份标识 Token、CSRF 令牌使用 Cookie 会有安全性问题吗有核心风险XSS 攻击Cookie 可被脚本读取攻击者注入恶意脚本窃取 Cookie解决设置 HttpOnly: true禁止脚本访问CSRF 攻击攻击者利用用户登录态诱导用户访问恶意网站发起请求解决设置 SameSite: Strict/Lax限制跨站请求携带 Cookie明文传输未启用 HTTPS 时Cookie 数据明文传输可能被拦截解决启用 HTTPS设置 Secure: true仅 HTTPS 传输其他Cookie 可被篡改需服务端校验数据合法性。6、高级API、地理定位、web Worker让js在后台线程中运行避免阻塞主线程提高页面响应性能WebSocket是 HTML5 全双工通信协议通过 HTTP 握手建立 TCP 长连接解决了 HTTP 无法服务器主动推送的问题前端核心 API 是WebSocket构造函数需处理onopen/onmessage/onclose/onerror回调且必须实现心跳机制检测连接状态为什么需要 WebSocket 心跳机制如何实现高频答原因网络波动比如路由器重启、断网可能导致连接断开但两端都未感知「假死连接」部分服务器 / 网关会主动断开长时间无数据的连接比如 Nginx 默认超时断开心跳机制用于检测连接是否存活并维持连接。实现思路客户端每隔固定时间比如 10 秒向服务器发送「心跳包」比如 { type: ping }服务器收到后立即返回「心跳响应」比如 { type: pong }客户端如果超过指定时间比如 20 秒没收到响应判定连接失效触发重连。WebSocket 和 Socket.IO 的关系答Socket.IO 是基于 WebSocket 轮询的封装库向下兼容如果浏览器不支持 WebSocket自动降级为长轮询WebSocket 是原生协议轻量但需自己处理心跳、重连、兼容面试答Socket.IO 简化了 WebSocket 的开发提供了更友好的 API 和兼容性但会引入额外的库体积纯 WebSocket 更轻量适合对性能 / 体积要求高的场景。、拖放API.....3、CSS31.圆角boder-radius 、阴影盒子阴影box-shadow 文字阴影 text-shadow2.盒子模型 标准盒模型 box-sizingcontent-box 总宽度borderpaddingcontent(width)margin怪异盒模型box-sizingborder-box总宽度margincontent(width)标准盒模型W3C 盒模型默认模型盒子总宽 width padding border总高同理。怪异盒模型IE 盒模型通过box-sizing: border-box启用盒子总宽 width已包含padding和border内容区宽高会自动收缩。3.过渡与动画过渡 transitionproperty duration timing-function delay 、动画 from-to 0%-100%4.2D/3D2D -----transformtranslatex,yrotate(0deg) scale(0,0) skew(x,y)倾斜3D-----在2D转换基础上通过transform-style和perspective三维空间变换5.弹性布局flex:justify-content: flex-start; /* 默认靠左 */flex-end; /* 靠右 */space-between; /* 两端对齐 */space-around; /* 两侧均分间距 */space-evenly; /* 完全均分间距 */水平垂直居中display:flex ;justify-content:center;align-item:center;///.parent { display: grid; place-items: center; /* 简写水平垂直居中 */ }(父relative 子position:absolute;top:50%;left:50%;transform:tansform(-50%,-50%)///父relative 子position:absolute;设宽高top:0;lrb..0 margin:auto;///flex(-grow -shrink -basis)、justify-content主轴对齐方式、flex-flow flex-direaction主轴方向flex-wrap是否换行、align-item单行项目在交叉轴对齐方式、align-content多行~6.媒体查询 边框图片。。。4、定位relative 相对定位不脱离文档流相对原有位置Absolute 绝对定位脱离文档流相对父元素5、CSS权重!important 1000行内样式100id 10类属性 伪类伪元素 标签1*06、BFC1. 自适应两栏布局2. 清除内部浮动3. 防止垂直 margin 重叠7、CSS SCSS LessCSS 是浏览器直接解析的原生样式语言无编程特性SCSSSass和 Less 是 CSS 预处理器需编译为 CSS 使用核心解决原生 CSS 复用差、维护难的问题。SCSS扩展 CSS支持变量、嵌套、混入等最终编译为 CSSLess与 SCSS 定位一致语法更接近原生 CSS学习成本更低