blocks|key|239266|text|当从HTML中删除内容时，您必须小心，因为它是一种脆弱的语言。根据页面的编码方式，一些空格可能更重要；另外，如果您有white-space:+pre等CSS样式，则可能需要保留空格。此外，还有大量的浏览器错误，等等，基本上HTML文件中的每个字符都可能是为了满足某些要求或安抚某些浏览器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|239267|在我看来，你最好的办法就是用CSS技术设计好页面(我最近在我工作的网站上拿了一个重要的页面，通过使用CSS而不是表格和嵌套的style=来重新编码，将它的大小减少了50%25……属性)。然后，使用gzip为支持GZip的浏览器减小页面大小。这将节省带宽，同时保留html的结构。|239268|entityMap^0|1M|G|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

You have to be careful when removing stuff from HTML as it's a fragile language. Depending on how your pages are coded some of that whitespace might be more significant; also if you have CSS styles such as <code>white-space: pre</code> then you may need to keep the whitespace. Plus there are numerous browser bugs, etc, and basically every character in an HTML file might be there to satisfy some requirement or appease some browser.

In my opinion your best bet is to design the pages well with CSS techniques (I was recently able to take an important page on the site I work for and reduce it's size by 50% just by recoding it using CSS instead of tables and nested style="..." attributes). Then, use GZip to reduce the size of your pages for browsers that understand gzip. This will save bandwidth while preserving the structure of the html.

blocks|key|982009|text|有时，根据封闭标记和/或CSS的不同，空格可能很重要。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|982010|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Sometimes, depending on the enclosing tags and/or on the CSS, whitespace may be significant.

blocks|key|4303250|text|除了HTML+Tidy/删除空白之外，正如其他答案所提到的那样，没有太多问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4303251|这更多的是一项手动任务，将样式属性提取到CSS中(希望您没有使用字体标记等)，尽可能使用较少的标记和属性(比如不在元素中嵌入标记，但使用CSS使整个元素的font-weight：>strong<变得粗体，除非使用>strong<在语义上有意义)等等。|4303252|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Outside of HTML Tidy/removing white space as the other answers mentioned, there isn't much. 

This is more of a manual task pulling out style attributes into CSS (hopefully you're not using FONT tags, etc.), using fewer tags and attributes where possible (like not embedding &lt;strong&gt; tags in an element but using CSS to make the whole element font-weight: bold, unless of course it makes semantic sense to use &gt;strong&lt;), etc.

blocks|key|4303146|text|你可以找到一些很好的参考资料，比如HTML，tidy和其他的here。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4303147|如果您不想使用这些选项之一，Prototype有一种在DOM中执行clean+the+whitespace的方法。你可以自己做，然后通过Firefox扩展Web开发者工具栏中的“查看生成的源代码”复制它。然后，您可以用prototype的修复程序替换原始的html。很抱歉没有说出那个明显的昵称。|4303148|(我推荐第一个链接)|4303149|entityMap|0|LINK|mutability|MUTABLE|url|http://www.websiteoptimization.com/speed/tweak/whitespace/|1|http://prototypejs.org/api/element/cleanwhitespace^0|U|4|0|0|X|K|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

You can find some good references <a href="http://www.websiteoptimization.com/speed/tweak/whitespace/" rel="nofollow noreferrer">here</a> to things like HTML tidy and others.

If you don't want to use one of those options, Prototype has a means to <a href="http://prototypejs.org/api/element/cleanwhitespace" rel="nofollow noreferrer">clean the whitespace</a> in the DOM. You could do that on your own and copy it via 'View Generated Source' in the Firefox extension Web Developer Toolbar. Then you can replace the original html with prototype's fix. Sorry for not making that apparent nickf.

(I recommend the first link)

blocks|key|3456308|text|是的，我猜这相当于删除了空格和注释。您不能像在javascript中那样用较短的标识符替换标识符，因为CSS类或javascript很可能依赖于这些标识符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3456309|此外，在删除空格时应该小心，并确保至少留有空格字符，否则所有的文本看起来都是这样的。|3456310|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Yes I guess it's pretty much removing whitespace and comments. You cannot replace identifiers with shorter ones like in javascript, since chances are that CSS classes or javascript will depend on those identifiers.

Also, you should be careful when removing whitespace and make sure that there is always at least whitespace character left, otherwise allyourtextwilllooklikethis.

blocks|key|239094|text|在this+Wordpress+blog上有一个相当长的关于这个话题的讨论。您可以在那里找到一个使用PHP和HTML+Tidy的非常冗长的建议解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|239095|entityMap|0|LINK|mutability|MUTABLE|url|http://php100.wordpress.com/2006/10/30/html-compact/^0|1|J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

There's a pretty lengthy discussion on <a href="http://php100.wordpress.com/2006/10/30/html-compact/" rel="nofollow noreferrer">this Wordpress blog</a> about this topic. You can find a very lengthy proposed solution using PHP and HTML Tidy there.

blocks|key|239484|text|我还没有尝试过，但是htmlcompressor是一个超文本标记语言的缩略器，如果你想试一试的话。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|239485|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/htmlcompressor/^0|A|E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I haven’t tried it yet, but <a href="http://code.google.com/p/htmlcompressor/" rel="nofollow noreferrer">htmlcompressor</a> is an HTML minifier, if you fancy giving one a try.

blocks|key|982167|text|如果你已经安装了node.js并且你是一个windows用户，你可以创建这个.bat，它将缩小你文件夹中min子文件夹中的所有html。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|982168|输出将位于min文件夹中|982169|982170|打开控制台。运行-->+npm+install+html-minifier+-g|ordered-list-item|offset|length|style|CODE|982171|create+.bat。不要忘记在cd命令中更改路由。在bat文件中更改文件夹比复制和粘贴更容易。|982172|在控制台中进入.bat文件夹并运行它。|982173|982174|982175|cd+the_destination_folder

dir++/b+*.HTML+>+list1.txt

for+/f+"tokens=*"+%25%25A+in+(list1.txt)+do+html-minifier+--collapse-whitespace+--remove-comments+--remove-optional-tags+%25%25~nxA++-o+min\%25%25~nxA+

pause|code-block|syntax|javascript|982176|entityMap^0|0|0|0|C|S|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|11|8|@$H|12|I|13|J|K]]|9|@]|A|$]]|$1|L|3|M|5|G|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|G|7|15|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|18|8|@]|9|@]|A|$U|V]]|$1|W|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|X|$]]

If you have installed node.js and you are a windows user you can create this .bat
It will minify all html in your folder in the min subfolder.
The output will be in min folder
<ol>
<li>open the console. run--&gt; <code>npm install html-minifier -g</code></li>
<li>create the .bat. don't forget to change the route in cd command. It's easier to change the folder in the bat file than copy and paste.</li>
<li>go in console into the .bat folder and run it.</li>
</ol>
<hr />
<pre><code>cd the_destination_folder

dir /b *.HTML &gt; list1.txt

for /f &quot;tokens=*&quot; %%A in (list1.txt) do html-minifier --collapse-whitespace --remove-comments --remove-optional-tags %%~nxA -o min\%%~nxA 

pause
</code></pre>

blocks|key|987156|text|不能将JavaScript用作压缩的HTML字符串的解压缩器吗?例如，为未压缩的格式创建DEV版本，运行‘发布’脚本将DEV构建压缩到生产环境中，并将JavaScript附加到HTML源文件(删除了空格和类似内容)？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|987157|服务器上的带宽将会减少，但缺点是，将字符串解压缩为HTML会带来更多的客户端压力。此外，还需要启用JavaScript，并能够将解压缩的字符串解析为HTML。|987158|我并不是说这是一个明确的解决方案，但它可能会起作用-这一切都取决于你是否在没有用户JavaScript权限/系统规范的情况下考虑带宽，或者类似的东西。|987159|否则寻找混淆脚本，一个简单的谷歌搜索产生的http://tinyurl.com/phpob+-取决于你寻找什么，应该有一个软件包可用。|offset|length|987160|如果我说错了，请大叫，我会看看我还能做些什么。|987161|祝好运!|987162|entityMap|0|LINK|mutability|MUTABLE|url|http://tinyurl.com/phpob^0|0|0|0|L|O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$H|Z|I|10|1|11]]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|13|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

Couldn't JavaScript be used as a decompresser for a compressed HTML string, for instance have a DEV build for the uncompressed format, run a 'publish' script to compress the DEV build to production and attach a JavaScript to the HTML source (with the whitespace and such removed as before)?

The bandwidth would be reduced on the server, but the downside is there is a lot more client strain for decompressing the string to HTML. Also JavaScript would need to be enabled and be able to parse the decompressed string to HTML.

I am not saying its a definite solution, but something that might work - it all depends on if your looking in regards to bandwidth without the users JavaScript permissions/systems spec, or such.

Otherwise look for obfuscation scripts, a simple google search produced <a href="http://tinyurl.com/phpob" rel="nofollow noreferrer">http://tinyurl.com/phpob</a> - dependent on what your looking for there should be a software package available.

If I am on the wrong lines, please shout and I will see what else I can do. 

Good Luck!

blocks|key|239518|text|我最近发现了一个基于PHP的脚本，它可以在运行时缩小你的站点HTML+-+Inline+css+-+Inline+javascript它被称为Dynamic+website+compressor|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|239519|entityMap|0|LINK|mutability|MUTABLE|url|http://codecanyon.net/item/dynamic-website-compressor/2838376^0|1Z|Q|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I recently found a PHP based script that minify your sites HTML - Inline css - Inline javascript on the fly it is called as
<a href="http://codecanyon.net/item/dynamic-website-compressor/2838376" rel="nofollow">Dynamic website compressor</a>

blocks|key|982100|text|这是一个用PHP编写的HTML5的小工具。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|982101|<?PHP
$in=file_get_contents('path/to/source.html');

//Strips+spaces+if+there+are+more+than+one.
$in=preg_replace('/\s{2,}/m','+',$in);
//trim
$in=preg_replace('/%5E\s%2B%7C\s%2B$/m','',$in);
/*Strips+spaces+between+tags.+
Use+(&nbsp;+or+&shy;+or+better)+padding+or+margin+if+necessary,+otherwise+the+html
parser+appends+a+one+space+textnode.*/++
$in=preg_replace('/+?>+<+?/','><',$in);
//Removes+tag+end+slash.
$in=preg_replace('@+?/>@','>',$in);
//Removes+HTML+comments+except+conditional+IE+comments.
$in=preg_replace('//','',$in);
//Removes+quotes+where+possible.
$in=preg_replace('/="([%5E+\'"\=><]%2B)"/','=$1',$in);
$in=preg_replace("/='([%5E+'\"\=><]%2B)'/",'=$1',$in);

file_put_contents('path/to/min.html',$in);
?>|code-block|syntax|javascript|982102|在此之后，您只需一行较短的html代码。|982103|最好是从正则表达式生成一个数组，但要注意转义反斜杠。|982104|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here is a minifier for HTML5 written in PHP.

<pre><code>&lt;?PHP
$in=file_get_contents('path/to/source.html');

//Strips spaces if there are more than one.
$in=preg_replace('/\s{2,}/m',' ',$in);
//trim
$in=preg_replace('/^\s+|\s+$/m','',$in);
/*Strips spaces between tags. 
Use (&amp;nbsp; or &amp;shy; or better) padding or margin if necessary, otherwise the html
parser appends a one space textnode.*/ 
$in=preg_replace('/ ?&gt; &lt; ?/','&gt;&lt;',$in);
//Removes tag end slash.
$in=preg_replace('@ ?/&gt;@','&gt;',$in);
//Removes HTML comments except conditional IE comments.
$in=preg_replace('/&lt;!--[^\[]*?--&gt;/','',$in);
//Removes quotes where possible.
$in=preg_replace('/="([^ \'"\=&gt;&lt;]+)"/','=$1',$in);
$in=preg_replace("/='([^ '\"\=&gt;&lt;]+)'/",'=$1',$in);

file_put_contents('path/to/min.html',$in);
?&gt;
</code></pre>

After that you have a one line, shorter html code. 

Better you make an array from the regular expressions, but aware to escape the back slashes.

blocks|key|3456689|text|我已经使用这个正则表达式多年了，没有任何问题：s/>\s*</></g|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3456690|在Python+re.sub(r'>\s*<',+'><',+html)中|3456691|或者在PHP+preg_replace('/>\s*</',+'><',+$html);中|3456692|这删除了标记之间的所有空格，但不是任何地方，这是相当安全的(但不完美，有可能会破坏，但很少见)。|3456693|我这样做的主要原因不是速度/文件大小，而是因为空格通常引入一个，嗯，空格。这是可以的，但是当您开始在DOM中使用Javascript时，空格通常会丢失，从而造成(微小的)布局差异。|3456694|考虑一下：|3456695|<div>
++++<a>link1</a>
++++<a>link2</a>
</div>|code-block|syntax|javascript|3456696|链接之间有一个空格，但现在我这样做：|3456697|$('div').append('<a>link3</a>')|3456698|没有空间..。我需要在我的JS中手动添加空间，这是相当丑陋和容易出错的IMHO。|3456699|entityMap^0|N|C|0|8|S|0|7|11|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1B|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1C|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1E|8|@]|D|@]|E|$S|T]]|$1|U|3|V|5|6|7|1F|8|@]|D|@]|E|$]]|$1|W|3|X|5|R|7|1G|8|@]|D|@]|E|$S|T]]|$1|Y|3|Z|5|6|7|1H|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|11|$]]

I've used this regexp for years, without any problems: <code>s/&gt;\s*&lt;/&gt;&lt;/g</code>

In Python <code>re.sub(r'&gt;\s*&lt;', '&gt;&lt;', html)</code>

Or in PHP <code>preg_replace('/&gt;\s*&lt;/', '&gt;&lt;', $html);</code>

This removed all whitespace between tags, but not anywhere, this is fairly safe (but not perfect, there are situations where this will break, but they're rare).

My main reason for doing this isn't speed/file size, but because the whitespace often introduces a, well, space. This would be okay, but when you start mucking about in your DOM with Javascript, spaces are often lost, creating (minor) layout differences.

Consider:

<pre><code>&lt;div&gt;
 &lt;a&gt;link1&lt;/a&gt;
 &lt;a&gt;link2&lt;/a&gt;
&lt;/div&gt;
</code></pre>

There's a space between the links, but now I do something like:

<pre><code>$('div').append('&lt;a&gt;link3&lt;/a&gt;')
</code></pre>

And there's no space ... I need to manually add the space in my JS, which is fairly ugly &amp; error-prone IMHO.

I've googled around but can't find any HTML minifacation scripts.

It occoured to me that maybe there's nothing more to HTML minifacation than removing all unneeded whitespace.

Am I missing something or has my Google Fu been lost?

Minifying HTML

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我用谷歌搜索了一下，但找不到任何HTML小型化脚本。对我来说，也许除了删除所有不需要的空格之外，对HTML的小型化没有更多的东西了。是我遗漏了什么，还是我的Google Fu丢失了？

问缩小HTML
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缩小HTMLEN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缩小HTML
EN