-
首先需配置本地服务器环境以解决HTML5项目加载异常。可通过XAMPP、Node.js的http-server、VSCode的LiveServer或Python内置服务器部署，确保支持AJAX请求与模块化功能，最后在浏览器访问对应地址运行项目。
-
使用ID选取DOM最快，优先用语义化ID；类选择器应限定作用域；缓存查询结果避免重复查找；简化选择器表达式，合理使用现代API提升性能。
-
Flex布局结合CSS动画可通过flex属性、order与transform控制子元素尺寸、顺序和对齐，利用transition和keyframes实现平滑伸缩、滑动换位及连贯入场等动态效果，提升界面交互性与视觉流畅度。
-
csscolor-contrast()通过自动计算背景色与备选色的对比度，选择符合WCAG标准的颜色，确保文本可读性；在响应式设计中实现主题切换时的文本自适应；结合LCH/OKLCH等现代颜色空间，提升视觉一致性与设计自由度，优化无障碍体验。
-
1、使用文本编辑器保存HTML代码为.html文件；2、双击文件用浏览器打开查看效果；3、用VSCode等编辑器配合LiveServer插件实现实时预览；4、通过Python启动本地服务器测试需HTTP环境的功能。
-
<p>Joplin可通过代码块、WebClipper、Base64附件和外部编辑器实现HTML+CSS嵌入与预览。1、用html或css插入可高亮的代码块便于查看；2、通过JoplinWebClipper保存已渲染的网页快照，保留视觉效果；3、将含样式的HTML文件转为Base64编码作为附件嵌入，供解码后浏览动态效果；4、启用外部编辑器功能，在VSCode等工具中实时编写并预览，修改后自动同步至笔记，形成开发闭环。</p>
-
可借助第三方服务、API调用、Nginx反向代理、PHP脚本或GitHubPages五种方式将HTML页面URL转为短链接：1.用bit.ly等平台手动缩短；2.调用BitlyAPI批量生成；3.配置Nginxrewrite规则重定向；4.部署PHP+MySQL实现动态跳转；5.利用GitHubPages+JSON+JS客户端路由跳转。
-
需更新DOCTYPE为<!DOCTYPEhtml>，设置lang属性，用语义化元素替代div，升级表单输入类型，以audio/video替代Flash嵌入多媒体。
-
用fr单位是解决CSSGrid列宽不均匀最直接有效的方式，它按比例分配可用空间，不依赖内容长度或固定像素值；常见原因包括混合单位、内容撑开、box-sizing未设为border-box或Flexbox中误用flex-basis。
-
内联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数量，实现流畅滚动体验。
