flex-basis用于设置弹性子元素在主轴方向上的初始大小，可取长度、百分比或auto、content等值，常与flex-grow和flex-shrink配合使用，通过flex简写属性定义伸缩行为，如flex:11200px表示初始尺寸200px且可伸缩，适用于侧边栏固定宽度、主内容区自适应等布局场景。

JS压缩图片的核心原理是利用Canvas重绘图像，通过缩小尺寸、降低质量、转换格式减小体积。1.原理：借助Canvas的drawImage和toBlob实现图像重绘与输出，结合分辨率调整和质量参数控制文件大小，并可将PNG转JPEG提升压缩率。2.步骤：先获取file对象，用FileReader加载为Image，再创建canvas按最大边缩放绘制，最后转为Blob或DataURL。3.细节：需判断图片类型避免无效压缩，注意EXIF方向信息丢失问题，手动处理旋转，及时释放临时对象内存，兼容低版本浏览器使用t

最常用的方法是toString()，因为它语义清晰且适用于明确的数字类型；2.String()能安全处理null和undefined，适合不确定类型时使用；3.空字符串拼接（+''）简洁但隐式，可读性较差；4.模板字面量（${}）在构建复杂字符串时最优雅且自然完成转换；5.toString()支持进制转换，是唯一能转为二进制、十六进制等字符串的方法；6.所有方法对NaN、Infinity、-Infinity的转换结果一致，分别为"NaN"、"Infinity"、"-Infinity"；7.选择应基于可读性

Symbol是JavaScript中用于生成唯一不可变值的原始类型，主要作为对象属性键避免命名冲突；每次Symbol()调用均返回不同值，描述字符串仅用于调试；支持全局注册表Symbol.for()和内置Symbol扩展语言行为。

使用Flex布局结合overflow-x实现响应式横向滚动，1.通过display:flex和flex-wrap:nowrap水平排列子元素；2.设置overflow-x:auto启用横向滚动，支持平滑滚动与触控；3.使用flex:00auto防止子元素被压缩；4.通过媒体查询适配不同屏幕尺寸，确保内容完整显示。

使用border-image结合linear-gradient可实现CSS边框渐变。1.设置border宽度和样式；2.用linear-gradient定义渐变方向与颜色；3.border-image-slice设为1以完整应用渐变；4.支持圆角（border-radius），需注意边框宽度与浏览器兼容性；5.推荐搭配浅色背景增强视觉效果。示例：.gradient-border{border:5pxsolid;border-image:linear-gradient(toright,#ff7a00,#ff

应正确使用header、nav、main、article、section、aside和footer等HTML5语义标签构建网页结构：一、按顺序嵌套header→nav→main→footer；二、遵守嵌套规则，如main不得为article子元素；三、辅以ARIA属性增强可访问性；四、通过W3C验证及屏幕阅读器测试确保合规。

使用inset关键字可将box-shadow设置为内阴影，语法为box-shadow:inseth-offsetv-offsetblurspreadcolor；例如.inner-shadow-box{box-shadow:inset2px2px5pxrgba(0,0,0,0.3);}可创建右下方向灰色内阴影，常用于文本框聚焦、按钮按下状态或卡片层次感设计；支持多层阴影，如box-shadow:inset02px4pxrgba(0,0,0,0.2),inset0-2px4pxrgba(0,0,0,0.1)实

Grid基线对齐不一致主因是文本高度、行高、字体或内边距差异，应优先用align-self/justify-self配合微调；空元素无基线，需确保有文本内容；Flex在基线对齐上更稳定，必要时替代Grid。

使用HTML5的<nav>标签构建语义化导航结构，结合CSS实现横向或垂直布局，并通过媒体查询与JavaScript打造响应式设计，适配移动端，同时添加aria-label、键盘导航等可访问性优化，提升用户体验。

WebRTC是浏览器原生支持的实时音视频通信技术，核心组件包括MediaStream（获取音视频）、RTCPeerConnection（建立P2P连接）和RTCDataChannel（传输数据），需信令服务器交换SDP和ICE候选者，并依赖STUN/TURN穿透NAT。

使用CSSGrid可轻松实现多列文章排版，通过display:grid和grid-template-columns定义列数，如repeat(3,1fr)创建三等列，结合gap设置间距；利用repeat(auto-fit,minmax(250px,1fr))实现响应式自适应，使不同屏幕下自动调整列数；通过align-items和justify-items控制对齐方式，grid-column:span3实现标题跨列，整体布局直观灵活。

可通过五种方法将图片转为HTML网页：一、纯HTML手动编写；二、Python脚本批量生成；三、在线工具一键转换；四、Markdown配合Pandoc生成；五、浏览器开发者工具动态构造。

结构化日志是前端监控的关键，它通过JSON格式记录时间戳、级别、上下文等字段，如{"timestamp":"...","level":"error","message":"Failedtofetchuserdata","url":"/api/user/123","status":500,"userId":"u_789","sessionId":"s_abc123"}，相比console.log更易解析与分析。一个高效的前端日志系统需具备统一接口、上下文注入、日志级别控制、异步上报和错误自动捕获能力。日志应

答案：HTML中引入CSS有三种方式——外部样式表、内部样式块和内联样式，推荐优先使用外部样式表以实现样式与结构分离、便于维护和复用；内部样式适用于单页或局部特定样式；内联样式应尽量避免，仅用于动态控制或特殊情况。优先级方面，内联样式高于内部和外部样式，而!important可覆盖所有规则，但需慎用；特异性、来源和顺序共同决定最终样式表现。为优化性能，应将关键CSS内联至head、异步加载非关键CSS、合并压缩文件并使用CDN，同时避免@import和冗余代码。