减小HTML的大小，但保持相似 [英] Reduce size of HTML but keep it looking similar
本文介绍了减小HTML的大小，但保持相似的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这样的HTML：
< table width =600border =0cellspacing =0 cellpadding =3>
< tr>
< td width =25％align =center>牛奶< / td>
< td width =25％align =center>< b>蓝色< / b>< / td>
< td width =25％align =center>盲人< / td>
< td width =25％align =center>< b>永久< / b>< / td>
< / tr>
< tr>
< td width =25％align =center> juice< / td>
< td width =25％align =center>丛林< / td>
< td width =25％align =center>清洁剂< / td>
< td width =25％align =center> tiny< / td>
< / tr>
< tr>
< td width =25％align =center> lemon< / td>
< td width =25％align =center>维他命< / td>
< td width =25％align =center>< b> unheard< / b>< / td>
< td width =25％align =center>空< / td>
< / tr>
< tr>
< td width =25％align =center>< b>真棒< / b>< / td>
< td width =25％align =center>粉红色< / td>
< td width =25％align =center>烧烤< / td>
< td width =25％align =center>镜像< / td>
< / tr>
< tr>
< td width =25％align =center>< b>饥饿< / b>< / td>
< td width =25％align =center> opening< / td>
< td width =25％align =center>黑暗< / td>
< td width =25％align =center> apply< / td>
< / tr>
< tr>
< td width =25％align =center>负担< / td>
< td width =25％align =center>< b>杯垫< / b>< / td>
< td width =25％align =center>火箭< / td>
< td width =25％align =center>怪物< / td>
< / tr>
< tr>
< td width =25％align =center>滚动< / td>
< td width =25％align =center>恋人< / td>
< td width =25％align =center>< b> plug< / b>< / td>
< td width =25％align =center>< b>跳转< / b>< / td>
< / tr>
< tr>
< td width =25％align =center>< b>马戏团< / b>< / td>
< td width =25％align =center> bird< / td>
< td width =25％align =center>博士< / td>
< td width =25％align =center>无穷无尽< / td>
< / tr>
< tr>
< td width =25％align =center>< b> golden< / b>< / td>
< td width =25％align =center> mutate< / td>
< td width =25％align =center>< b>尖叫< / b>< / td>
< td width =25％align =center>胸部< / td>
< / tr>
< / table>
可以有更多的行。
这看起来没什么问题。但是，这个页面占用了超过60％的带宽。
有什么方法可以减少这个HTML中的字符数，同时保持它看起来大致相同？
如果有问题，我在页面上使用PHP。
解决方案
其他答案已经覆盖了更简单的方式，并且很好地解释了事情。
我的答案将HTML中的字符数减少到（可能）最低限额：
可读HTML ：
< div id =words>
< i>牛奶< / i>
< b>蓝色< / b>
< i>盲< / i>
< b>永久性< / b>
...
< / div>
CSS：
#words {
width：600px;
text-align：center;
overflow：auto
}
#words i，#words b {
display：block;
float：left;
宽度：25％;
padding：3px 0;
font-style：normal
}
为了理解这一点，试着想一想（一个字母）< b> 和< i> 标签已被更改为类似< div> 通过CSS标记。
如果您对此技术有任何疑问，我会尽力回答他们给你。
I have HTML like this:
<table width="600" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="25%" align="center">milk</td>
<td width="25%" align="center"><b>blue</b></td>
<td width="25%" align="center">blind</td>
<td width="25%" align="center"><b>perpetual</b></td>
</tr>
<tr>
<td width="25%" align="center">juice</td>
<td width="25%" align="center">jungle</td>
<td width="25%" align="center">cleaner</td>
<td width="25%" align="center">tiny</td>
</tr>
<tr>
<td width="25%" align="center">lemon</td>
<td width="25%" align="center">vitamin</td>
<td width="25%" align="center"><b>unheard</b></td>
<td width="25%" align="center">empty</td>
</tr>
<tr>
<td width="25%" align="center"><b>awesome</b></td>
<td width="25%" align="center">pink</td>
<td width="25%" align="center">grilled</td>
<td width="25%" align="center">mirror</td>
</tr>
<tr>
<td width="25%" align="center"><b>hungry</b></td>
<td width="25%" align="center">opening</td>
<td width="25%" align="center">darkness</td>
<td width="25%" align="center">apply</td>
</tr>
<tr>
<td width="25%" align="center">burden</td>
<td width="25%" align="center"><b>coaster</b></td>
<td width="25%" align="center">rocket</td>
<td width="25%" align="center">monster</td>
</tr>
<tr>
<td width="25%" align="center">rolled</td>
<td width="25%" align="center">lovers</td>
<td width="25%" align="center"><b>plug</b></td>
<td width="25%" align="center"><b>jumping</b></td>
</tr>
<tr>
<td width="25%" align="center"><b>circus</b></td>
<td width="25%" align="center">bird</td>
<td width="25%" align="center">doctor</td>
<td width="25%" align="center">endless</td>
</tr>
<tr>
<td width="25%" align="center"><b>golden</b></td>
<td width="25%" align="center">mutate</td>
<td width="25%" align="center"><b>scream</b></td>
<td width="25%" align="center">chest</td>
</tr>
</table>
There can be many, many more rows.
There's nothing wrong with how this looks. However, this page is responsible for over 60% of the bandwidth used.
Is there any way to reduce the number of characters in this HTML while keeping it looking roughly the same?
If it matters, I'm using PHP on the page.
解决方案
The other answers already cover the easier way, and explain things nicely.
My answer reduces the number of characters in the HTML down to (probably) the absolute minimum:
HTML:
<div id="words"><i>milk</i><b>blue</b><i>blind</i><b>perpetual</b><i>juice</i><i>jungle</i><i>cleaner</i><i>tiny</i><i>lemon</i><i>vitamin</i><b>unheard</b><i>empty</i><b>awesome</b><i>pink</i><i>grilled</i><i>mirror</i><b>hungry</b><i>opening</i><i>darkness</i><i>apply</i><i>burden</i><b>coaster</b><i>rocket</i><i>monster</i><i>rolled</i><i>lovers</i><b>plug</b><b>jumping</b><b>circus</b><i>bird</i><i>doctor</i><i>endless</i><b>golden</b><i>mutate</i><b>scream</b><i>chest</i></div>
Readable HTML:
<div id="words">
<i>milk</i>
<b>blue</b>
<i>blind</i>
<b>perpetual</b>
...
</div>
CSS:
#words {
width: 600px;
text-align: center;
overflow: auto
}
#words i, #words b {
display: block;
float: left;
width: 25%;
padding: 3px 0;
font-style: normal
}
To understand this, try to think of this as the (one letter) <b> and <i> tags having been changed to act like <div> tags via CSS.
If you have any questions about this technique, I will try to answer them for you.
这篇关于减小HTML的大小，但保持相似的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
