-
结合Bootstrap与Flexbox可创建响应式导航栏，先用Bootstrap搭建结构确保兼容性，再通过Flexbox控制对齐、间距与响应行为，实现品牌居左、菜单居中、按钮居右的布局；利用flex-direction和媒体查询调整小屏显示，用gap统一间距并增强交互效果，兼顾开发效率与设计定制。
-
HTML5页面中文乱码需三步解决：一、在<head>顶部添加自闭合<metacharset="utf-8">；二、用编辑器将文件保存为UTF-8无BOM格式；三、配置服务器响应头Content-Type为charset=utf-8。
-
使用flex-wrap、justify-content和gap属性可实现多行多列Flex卡片均匀布局，通过calc()计算卡片宽度并结合响应式设计，确保每行排列整齐且间距一致，避免最后一行错位。
-
CSSGrid提供grid-row/grid-column显式定位和order属性两种方式调整视觉顺序：前者通过网格线精确定位，无视DOM顺序；后者仅改变同级子项排列优先级，默认值为0，数值越小越靠前，但不改变DOM顺序与焦点顺序。
-
HTML5文档添加样式有三种方式：一、用link标签外链CSS文件，实现结构与样式分离；二、用style标签内嵌CSS代码，适用于局部样式或调试；三、用style属性设行内样式，优先级最高但难维护。
-
使用PDF.js渲染、jsPDF生成，结合文件上传与交互功能，实现前端PDF处理，注意性能与安全。
-
HTML5代码需严格遵循五项规范：一、首行声明<!DOCTYPEhtml>；二、head中添加<metacharset="UTF-8">；三、合理使用header、nav、main等语义标签；四、正确嵌套并闭合标签；五、为img、video、canvas提供alt属性或回退内容。
-
HTML表单校验需结合HTML5属性、JavaScript和正则表达式，前端提升体验，后端确保安全。1.使用required、type、pattern等属性实现基础校验；2.通过JavaScript监听input或submit事件进行动态验证；3.利用正则精确匹配手机号、邮箱、身份证等格式；4.前端校验不可靠，后端必须重复校验以防止恶意提交；5.建议前后端采用一致规则，保障数据完整性与系统安全。
-
使用Yjs+ProseMirror+WebSocket组合可高效构建实时协作富文本编辑器，通过CRDT算法实现无冲突数据同步，结合WebSocket实现实时通信，并利用ProseMirror的结构化文档模型处理复杂编辑操作，同时借助Yjs的awareness协议显示用户光标与选区，完成协同编辑、状态恢复、历史回滚等功能。
-
AST技术通过解析代码为树形结构，实现代码转换（如Babel、TypeScript）、静态分析（如ESLint）、构建优化（如Vue、Webpack）和自动化生成，支撑现代JavaScript工程化。
-
多列布局中图文混排需顺应流式结构，通过column-count或column-width定义分栏，结合width:100%、height:auto和break-inside:avoid确保图片自适应且不断裂，使用figure标签提升语义并控制间距，使图文自然分布。
-
history.pushState()新增历史记录，适合导航跳转；replaceState()替换当前记录，适合修正URL而不留返回点；二者均需配合popstate监听及服务端配置防404。
-
链接伪类必须按L-V-H-A顺序声明，因浏览器按声明顺序层叠样式，:visited会覆盖前置的:hover等同名属性，且:link与:visited互斥而:hover/:active可叠加其上。
-
使用Bulma的Flexbox布局无需编写复杂CSS，通过.is-flex、.justify-content-center等类可快速实现弹性布局；结合Level组件创建水平分布栏，利用Columns系统构建响应式网格，辅以.is-flex-grow等实用类控制伸缩行为，简化现代网页布局开发。
-
JavaScript组件化核心是封装可复用、独立状态与行为的UI单元，可通过Class、CustomElements或函数式+虚拟DOM三种方式实现，关键在于作用域隔离、生命周期管理、配置传递与通信机制。
