导语
前面八期把建站常用的东西补齐了：写代码用 Notepad++（第一期），本地跑站用 phpStudy（第二期），看页面结构用 仿站扒皮（第三期），管内容用 迅睿CMS（第四期），做网站图标用 比特虫（第五期），处理网页图片用 Fireworks（第六期），找小图标用 iconfont（第七期），放地图用 百度地图生成器（第八期）。页面能跑起来后，还会遇到另一类麻烦：别人发来的代码挤成一行，自己改过的样式又太散。本期用 tool.lu 的三个在线工具，把 HTML、CSS、JavaScript 分开整理。
软件介绍
tool.lu 的 HTML 工具 不是一个按钮通吃三种代码。HTML、CSS、JavaScript 各有入口，打开网页粘贴代码就能处理，不用安装软件，也不用先登录。
它适合看别人发来的压缩代码、整理自己写乱的样式，以及上线前把页面代码压小。HTML 还能把样式内联到标签上，这个功能是给邮件模板准备的。页面写明，有些邮件客户端会剥掉 head 和 style，样式必须写进标签里才不容易丢。
官网与使用方法
三个入口直接打开就能用：
JavaScript：https://tool.lu/js/
使用步骤（照着走就行）：
先对上入口。HTML 进 html 工具，样式进 css 工具，脚本进 js 工具。不要把整页源码丢进 CSS 或 JS 里碰运气。
要看懂就先美化。HTML 点“美化”，CSS 和 JavaScript 也有同名按钮。美化只是把代码展开，方便阅读和修改。
确认没问题再压缩。三个工具都有压缩。压缩后的代码留给线上页面，自己留一份展开的原稿。
CSS 按需要选用。页面说明里，净化是单行化并去掉注释，整理是重排属性，优化是把长属性改成简写。移动端页面才考虑 px转rem，小程序页面才考虑 px转rpx。
处理完放回原处。下载或复制结果，替换模板里对应的那一段，刷新页面看样式和交互。显示变了就用原稿撤回，不要在压缩结果上继续改。
主要特点
三种代码分开处理。HTML、CSS、JavaScript 各有工具，按钮和示例都对着自己的语法。
打开就能用。不用安装，也不用先注册。临时整理一段代码很方便。
美化和压缩都有。阅读用美化，上线用压缩，两件事不混在一次操作里。
HTML 能做内联样式。邮件模板可以把 style 里的样式写进标签，减少被邮件客户端剥掉的情况。
CSS 带单位换算。普通网页、移动端 rem、小程序 rpx，可以按页面类型选择，不必手算。
知也的几个使用提醒
按钮看着简单，真正拿去改站时有几个边界：
1. 代码会送到对方服务器处理。页面写着不会存储或记录输入内容。即便如此，也不要把数据库密码、支付密钥、未公开的业务脚本粘进去。
2. 压缩前先留原稿。压缩后的代码不适合继续修改。线上用压缩版，本地和模板库留展开版，出问题才能对回去。
3. JavaScript 混淆不能还原。工具页写明，混淆会缩短变量名，可读性变差，混淆后的代码无法还原。自己还要维护的脚本，不要点混淆。
4. 内联样式只适合邮件。网页里把 CSS 全写进标签，后面改颜色会非常累。网页继续用独立样式文件，邮件模板才用“内联css”。
5. 换单位前先看页面类型。px转rem、px转rpx 不是通用优化。普通企业站没有对应的根字号或小程序环境时，转完尺寸会对不上。
为啥不推荐别的
编辑器里也有格式化插件，上线打包时构建工具也能压缩。项目已经有完整构建流程，就用自己的流程，不必再把代码传到在线工具。
tool.lu 胜在临时处理。客户发来一段挤成一行的代码，或者旧模板里只有一个样式片段，打开网页就能看、能压。它不是项目的构建工具，也不该替代你自己的原稿管理。
小结
tool.lu 把 HTML、CSS、JavaScript 分成三个在线工具。HTML 可以美化、压缩、清除链接、转成 JS 变量和内联样式；CSS 还可以整理、优化和换单位；JavaScript 还可以解压和混淆。看代码用美化，上线用压缩，混淆只在确定不再阅读时才考虑。处理前留下原稿，别把密钥和未公开脚本粘进去。
码字不易，多谢点赞支持！
SEO
GEO
建站与上线
工具
网站模板
网址导航
