I构建工具为生,而我读取任何人之前最常做的唯一的事情's前端是通过格式化程序运行他们的HTML服务器模板在一行上吐出标记捆绑器将其折叠起来。有人粘贴到Slack的一个片段,将三个级别的嵌套平坦地放入角支架的墙壁中。我无法调试我无法读取的内容,因此第一步始终是相同的:粘贴进去,击中美化,让结构显示自己。本指南是我希望我已经把年轻的自己交给了我,他以前用手重新缩进标记,并且有一半的时间弄错了。
TL;博士: HTML 格式化程序重新缩进标记,以便您可以读取其结构,并最小化它,使其体积小。在构建和调试时使用美化,最小化以进行生产。 HTML 格式化程序 在 toolz。dev 上,两者都可以在浏览器中执行,保持脚本、样式和内容前字节对字节,并且永远不会上传任何内容。
HTML格式化程序是什么?
HTML格式化程序是一种工具,它将你的标记解析到它的标签树中,并以一致的缩进方式打印回来,每个嵌套深度一个级别,那就是美化方向。反向,最小化,剥离标签之间的微不足道的空白,这样文件就尽可能小,而不会改变浏览器渲染的方式。大多数好的格式化程序,包括toolz。dev上的格式化程序,都从相同的输入中完成。
"微不足道"这个词在那句话里做着真正的工作,在html中,有些空格很重要,有些则不然,你在闭包之间放的换行符和两个空格 </li> 还有下一个 <li> 对渲染的页面不做任何更改,因此格式化程序可以自由添加、删除或标准化它们。但 a 内部的空格 <pre> block,或者两个内联之间的单个空间 <a> elements,是用户所看到的一部分,一个不懂得差异的格式化程序会很乐意打破你的布局,这是帮助格式化程序和你学会不信任格式化程序之间的界限。
如果您使用过 漂亮 editor 中,你已经知道了这样的感觉:你不再关心缩进,因为一个工具保证了它,基于浏览器的格式化程序会给你一次性片段、生成的输出和你不控制的标记同样的保证,而无需设置项目。
HTML为什么一开始就乱七八糟?
了解混乱的根源很有帮助,因为它告诉你格式化程序必须生存什么。
第一个来源是服务器渲染。一个 PHP 模板、一个 Rails 视图或一个 Blade 文件会发出 HTML,其中模板引擎想要生成什么空格,并且在最小化中间件运行后,它通常是一行数千个字符长。当浏览器中出现问题时,您会点击 "查看源代码,"这就是您所得到的。
2个来源是复制粘贴,你从设计系统中抓取一个组件,一个CMS的片段,或者某人发给你的电子邮件模板,它携带了所使用的任何间距来源:混合选项卡和空格,不一致的嵌套,尾随空白。我花了很多我的星期在WordPress和无头CMS输出,而CMS生成的标记是最糟糕的,因为它是由每个格式不同的片段组装而成。
第三个来源是生成标记。构建工具、所见即所得编辑器和导出函数会产生人类永远不会读取的 HTML。它是正确的,但它是不透明的。格式化程序将其变回您可以审核的内容。
共同点是这些来源都不关心你是否能读出结果。那是你的工作,格式化程序是最快的方法。
如何在线格式化 HTML?
toolz。dev上的工作流程大约需要十秒钟:
- 打开 HTML 格式化程序 并将您的标记粘贴到输入面板中。它是否被最小化到一行、缩进不一致或裸露的片段并不重要。
- 选择 Beautify 来扩展它或 Minify 来压缩它。
- 为了美化,请选择缩进:2 个空格、4 个空格或选项卡。两个空格是常见的 Web 默认值。
- 可选地勾选 "删除注释 "从输出中删除 HTML 注释。
- 复制结果或将其下载为
.html文件。
Everything都运行客户端,解析器是你浏览器中的JavaScript,所以标记永远不会触及服务器,这比人们假设的更重要,我会回到。
美容和迷你有什么区别?
这些是共享解析器的相反操作,并且知道何时到达每个操作是大部分技能。
Beautifying是给人类的,它增加了换行和缩进,所以嵌套是可见的,这是你在编辑、调试、差异化两个版本或审查拉取请求时想要的,当我正在寻找布局错误时,我首先美化,这样我就可以看到哪个元素未关闭或嵌套太深了一层。
Miniming 是机器的。它删除了浏览器忽略的空白,因此文件更小,传输速度更快。您最小化 HTML 的原因与最小化 CSS 或 JavaScript 的原因相同:字节超过电线需要花费时间,并且在大页面上,空白加起来。如果您已经依靠 HTML 迷你器 对于生产压缩,格式化程序是您在出现故障时再次读取输出的工具。
以下是两个方向在实际不同的决策上的比较:
| 方面 | 美化 | 最小化 |
|---|---|---|
| 目标 | 可读性 | 最小的文件 |
| 标签之间的空白 | 已添加并标准化 | 已删除 |
| 输出大小 | 较大 | 较小 |
| 何时使用 | 编辑、调试、审查 | 生产、转让 |
| 压痕 | 2 个空格、4 个空格或制表符 | 没有 |
| 渲染结果 | 相同的 | 相同的 |
Last行是重要的,两个操作都不会改变页面的样子,只有浏览器的空白才视为微不足道的改变,如果格式化程序曾经改变过你的渲染输出,那就是格式化程序中的一个bug,而不是格式化的属性。
格式化会破坏我的 JavaScript、CSS 或预格式化文本吗?
这是将玩具与工具分开的问题,也是我对使用哪种格式化程序持挑剔态度的原因。
某些元素包含空白和字符显着且不得触及的内容。 WHATWG HTML 标准 分类 script 並 style 作为原始文本元素和 textarea 並 title 为可转义的原始文本元素,在它们内部,格式化程序必须将内容视为不透明,如果它试图在a中重新缩进javascript script tag,它可以移动模板文字的内容,改变正则表达式,或者在多行字符串内移动一行,现在你的代码表现不同,那不是格式化的改变,那是格式化程序引入的错误。
的 pre element是一个相关的案例,它的全部目的是为了保留空白,所以它的文本内容是完全按照写入的方式显示的,它是一个在里面重新缩进的格式化程序 <pre> 明显更改页面。
toolz。dev 格式化程序通过处理来处理所有这些 script、 style、 pre、 textarea、和 title as raw content:它重新缩进他们周围的HTML但是逐字复制他们的内在文本,你的代码和预格式化的文本出来字节对字节相同,当我在构建它时测试这个时,验收栏很简单:a <script> 含有 if(a<b){x=1} 必须保持不变,确实如此。如果您正在使用包含内联脚本或样式的标记,那么在您信任任何格式化程序之前,这是需要检查的属性。
格式化程序可以处理损坏或不完整的 HTML 吗?
真正的 HTML 很少像 XML 那样格式良好,而要求完美的格式化程序是没有用的。浏览器具有著名的宽容性: HTML 解析算法 准定义如何处理省略的结束标签和错误嵌套的元素,这就是为什么页面缺失的原因 </li> 还是渲染得很好,好的格式化程序借用了同样的容差。
最常见的情况是可选的结束标签。 HTML 让您省略元素上的结束标签 li、 p、 td、 tr、和 option,因为规格上写的是开 li 当下一个时隐式关闭 li 开始。所以 <ul><li>a<li>b</ul> 是有效的,并且toolz。dev格式化程序应用这些隐式接近规则来生成 <li>a</li> 並 <li>b</li> 在他们自己的行上,就像浏览器构建树一样。 A <p> 当块元素在其内部打开时自动关闭,因为段落不能包含块内容。
第二种情况是真正的破损标记:标签打开且从未关闭,或者是没有匹配打开的杂散关闭标签。格式化程序关闭文档末尾悬挂的任何内容并将其报告为警告,因此您知道输入不完整,而不是默默猜测。这些警告通常是找到您要修复的确切错误的最快方法。
将该行为与严格格式化程序进行比较,并反对手工操作:
| 方法 | 省略结束标签 | 未关闭的标签 | 速度 |
|---|---|---|---|
| 容差格式化程序 (Toolz.dev) | 适用隐式-封闭规则 | 自动关闭并发出警告 | 瞬间 |
| 严格的 XML 风格格式化程序 | 经常出错 | 错误已消除 | 立即发挥作用 |
| 手动折痕 | 你自己追踪它 | 易错过 | 缓慢且容易出错 |
我曾经在底排,用手重新折痕,错过了一个未关闭的 div 十分之三。宽容工具获胜是因为真正的标记很混乱,你希望混乱浮出水面,而不是被拒绝。
我应该何时使用格式化程序而不是编辑器?
如果您拥有该文件并且它位于您的项目中,则您的编辑器加上 Prettier 或同等文件是格式化的正确主页,因为它可以在保存上运行并在整个团队中保持一致。我不建议您替换它。
Browser-based formatter 在工作流留下的空白中赚取一席之地,你粘贴了一个 bug 报告的片段,现在就需要阅读它,你在一个不是你的 dev box 的机器上,你正在查看 CMS 输出、一个电子邮件模板,或者生成从未在 repo 中存在的标记,你想在不连接构建步骤的情况下最小化单个片段,在所有这些情况下,打开一个选项卡比配置一个项目更快,结果是一样的。
还有隐私角度,这不是一件小事。因为 toolz。dev 解析器完全在您的浏览器中运行,包含内部 URL、未发布的副本、嵌入模板中的 API 响应或客户的标记's 数据永远不会离开您的设备。很多在线格式化程序将您的输入发布到服务器来完成工作。对于来自工作代码库的任何内容,这是您不需要承担的数据暴露。我足够关心这一点,它是站点上每个工具的设计规则,我在其中写了更多内容 web开发人员工具包 和指南 在线工具中的数据隐私。
实用的工作流程节省了我几个小时
Here is the loop I actually run when a layout is misbehaving。Beautify the markup so the nesting is veible。Scan the indentation for the level that looks wrong, because a stray extra indent always meaning a tag that never closed。read the formatter warnings, which frequently name the excel unclosed element。Fix in the source。if the fragment is destined for production, minify it on the way back out。整个周期是一分钟,那一分钟大部分是我读书
相同的循环适用于内容审核。当我检查标记的可访问性或 SEO 时,我首先进行美化,以便一目了然地看到标题结构和地标元素,然后我将特定部分拉入其他工具中:将一个块转换为 Markdown 以进行文档处理 html 到 Markdown 转换器,或生成比较表 降价表生成器格式化是使结构清晰易读以便使用的步骤,如果您想要这些工具适合更广泛的例程,则 开发人员生产力工具 指南列出了这一点。
常见问题
如何在线格式化 HTML?
HTML粘贴到输入面板中, 选择Beautify, 选择一个缩进宽度, 然后点击格式, 该工具解析标签树并重新缩进它, 然后让你复制或下载结果, 所有处理都发生在你的浏览器中, 所以没有上传任何内容。
HTML美化和最小化有什么区别?
Beautifying 增加了换行和缩进,因此嵌套易于阅读,非常适合编辑和调试,最小化去除了标签之间微不足道的空白,产生更小的文件进行制作,两者都保持相同的渲染结果;只有空白发生变化。
格式会改变我的页面的外观吗?
No。formatter只改变标签之间的空白,而不是元素、属性或文本,保留空白显着的内容,如pre、textarea和内联文本,因此页面在格式化前后呈现相同。
格式化程序是否会重新格式化我的 JavaScript 和 CSS?
No。script和样式标签内部的内容视为原始文本并逐字复制。工具重新缩进周围的HTML,但从不触及代码本身,因此模板文字、正则表达式和CSS值保持字节对字节的相同。
它可以处理损坏或不完整的 HTML 吗?
是的,在理性范围内。解析器是宽容的:它对 li、p 和 td 等标签应用浏览器使用的相同隐含闭合规则,并且自动关闭文档末尾打开的标签。当它这样做时,它会显示警告,以便您知道标记不完整。
HTML格式化包含敏感数据是否安全?
是解析器在浏览器中完全使用 JavaScript 运行,没有网络请求携带您的标记,没有存储任何内容,并且该工具一旦加载就离线工作。HTML 保存内部链接、API 响应或未发布的副本永远不会离开您的机器。
有哪些缩进选项可用?
Beautify 输出支持 2 个空格、4 个空格或选项卡,两个空格是 Web 项目的常见默认值,四个空格适合更喜欢更宽缩进的团队,选项卡让每个开发人员在编辑器中设置自己的显示宽度。
HTML 格式化程序与 HTML 迷你化程序有何不同?
Formatter在一个工具里有双向:美化扩展标记进行读取,最小化崩溃进行发货,专用的minifier只压缩,如果主要需要生产压缩,HTML minifier专注于此;如果在读取和发货之间切换,formatter涵盖两者。
免费格式化您的标记 HTML 格式化程序。它完全在您的浏览器中运行,保持您的脚本和预格式化内容完好无损,并且永远不会上传字节。
