HTML中文乱码需统一字符编码：一、head中加<metacharset="UTF-8">；二、服务器配置HTTP响应头Content-Type；三、编辑器保存为UTF-8无BOM；四、DOCTYPE后立即声明charset；五、验证文件编码、响应头、document.characterSet三者一致。

内联style优先级高于外部CSS，同一元素样式以就近原则覆盖，ID选择器权重高于类和标签选择器，!important可打破常规但慎用；2.实际开发中推荐外部文件实现结构与样式分离，利于维护、缓存及响应式设计，内联仅用于动态样式或个别覆盖。

JavaScript模板字符串用反引号包裹，支持多行、保留空格换行，并通过${}嵌入变量或表达式；注意${}内只能是表达式，不可写语句，反引号不可与单双引号混淆。

JavaScript模板引擎核心是安全灵活替换占位符并支持简单逻辑，可通过正则替换、Function构造函数（慎用）或Proxy+字符串解析实现，推荐使用lit-html等成熟方案避免XSS风险。

使用<pre>标签、CSSwhite-space属性或 实体可保留HTML中空格。示例：预格式化文本、pre-wrap换行、非断行空格。

使用<ul>和<li>标签创建HTML无序列表，默认以实心圆点标记项目；通过CSS的list-style-type属性可改为方块、空心圆或隐藏符号，如list-style-type:square；还可用list-style-image属性设置自定义图片作为项目符号，实现个性化样式；嵌套列表时符号会自动区分层级，结合HTML与CSS能灵活控制列表外观。

虚拟滚动通过只渲染可视区域内的元素来提升长列表性能。它计算可视范围，监听滚动偏移，动态更新渲染区间，并用占位元素维持滚动条状态，从而减少DOM数量，实现流畅滚动体验。

第三方授权登录基于OAuth2.0协议，允许用户通过社交平台账号登录网站。JavaScript负责前端交互，如绑定登录按钮、调起授权页面及处理回调。以微信为例，前端触发跳转至授权页，用户确认后重定向至回调地址并携带code参数，前端将code传给后端，由后端换取access_token和openid。Google和Facebook提供JavaScriptSDK（如FB.login和GoogleIdentityServices），可直接弹出授权窗口并返回Token。安全方面需注意：敏感操作交由后端处理，校验

放弃float用text-align或flex布局实现图片居中：text-align适用于父容器内单行图片；flex支持水平垂直居中且控制力强；保留float的负margin方案不推荐。

gap属性用于设置Flex和Grid布局中项目间的间距，可替代margin；它是row-gap和column-gap的简写，支持同时定义行列间距，适用于display为grid或flex且flex-wrap换行的容器，能避免外边距重叠、简化代码，但需注意IE等旧浏览器不支持。

object-fit是解决响应式图片拉伸/裁剪问题的核心方案，需配合object-position精准控制裁剪锚点，并通过background-image或JS降级兼容IE。

align-items:baseline可使Flex子元素按文本基线对齐，适用于不同字号文本的整齐排版，通过设置容器display:flex和align-items:baseline即可实现，常用于表单、导航等场景，需注意仅对含内联内容的元素生效，图片等非文本元素可能需额外调整。

通过设置负外边距（margin-bottom）配合z-index，可在保持Grid布局结构不变的前提下，让hover状态下的元素视觉上覆盖后续行，避免推挤其他网格项。

JavaScript组件化核心是封装可复用、独立状态与行为的UI单元，可通过Class、CustomElements或函数式+虚拟DOM三种方式实现，关键在于作用域隔离、生命周期管理、配置传递与通信机制。

在Flexbox布局中，将自定义组件（如Stencil组件）作为Flex项目时，常见误区是认为其默认宽度会填充容器。本文将深入探讨Flexbox中元素尺寸的默认行为、:host选择器在自定义组件中的作用，并提供正确使用Flexbox属性（如justify-content:stretch）来控制组件宽度，避免不必要的width:100%显式设置，确保组件按预期显示和布局。