Question

我们将以下代码放入具有有限字符数的数据库字段中。

<p class="Summary-heading"> Description</p>
<p> Outer: 100% Nylon</p>
<p> Body lining: 100% Polyester Micro fleece</p>
<p> Sleeve lining: 100% Polyester</p>
<p> Contrast panel jacket with piping</p>
<p> Concealed hood</p>
<p>&nbsp; </p>
<p class="Summary-heading"> Standard Decoration Area(s)</p>
<p> Front, back, chest (both sides)</p>
<p>&nbsp; </p>
<table width: 100%border="0" cellspacing="0" cellpadding="0" class="table_icons">
  <tbody>
    <tr>
      <td style="width: 32px; padding-right: 5px; vertical-align: middle;"><img alt=""src="/Portals/0/i/embroidery.png" /></td>
      <td style="width: 32px; padding-right: 5px; vertical-align: middle "><img alt=""src="/Portals/0/i/screenprint.png" /></td>
      <td style="width: 32px; padding-right: 5px; vertical-align: middle"><img alt="" src="/Portals/0/i/heatapplieddecal.png" /></td>
      <td style="width: 32px; padding-right: 5px; vertical-align: middle"><img alt="" src="/Portals/0/i/waterresistant.png" /></td>
          <td style="width: 32px; padding-right: 5px; vertical-align: middle"><img alt="" src="/Portals/0/i/windresistant.png" /></td>
        </td>
    </tr>
  </tbody>
</table>

因此我需要缩短代码。任何建议都将不胜感激。

Answer 1

这是我缩短它的看法，我不认为它可以进一步缩小。这将进入您的样式表：

<style>

.table-icons {
    width: 100%;
    border: 0 none;
    border-spacing: 0;
    border-collapse: collapse;
}

.table-icons td {
    width: 32px;
    padding-right: 5px;
    vertical-align: middle;
    border: 0 none;
}

</style>

这进入数据库

<p class="summary-heading">Description</p>
<p>Outer: 100% Nylon</p>
<p>Body lining: 100% Polyester Micro fleece</p>
<p>Sleeve lining: 100% Polyester</p>
<p>Contrast panel jacket with piping</p>
<p>Concealed hood</p>
<p>&nbsp;</p>
<p class="summary-heading"> Standard Decoration Area(s)</p>
<p>Front, back, chest (both sides)</p>
<p>&nbsp;</p>
<table class="table-icons">
    <tr>
        <td><img src="/Portals/0/i/embroidery.png"></td>
        <td><img src="/Portals/0/i/screenprint.png"></td>
        <td><img src="/Portals/0/i/heatapplieddecal.png"></td>
        <td><img src="/Portals/0/i/waterresistant.png"></td>
        <td><img src="/Portals/0/i/windresistant.png"></td>
    </tr>
</table>

如果你仍然需要更短，那么缩短课程名称“table-icons”和“summary-heading”也会有所帮助。此外，您可以删除所有格式选项卡，根本不需要它们。

Answer 2

您可以使用CSS，这样您就不需要为每个td提供样式。你可以使用class / id。

喜欢

<style>
  .tdClass{width: 32px; padding-right: 5px; vertical-align: middle;}
</style> 

<td class="tdClass"></td>

Answer 3

尝试将样式移动到样式表，这样可以节省大量编写代码的时间。它应该是这样的：

<p> Outer: 100% Nylon</p>
<p> Body lining: 100% Polyester Micro fleece</p>
<p> Sleeve lining: 100% Polyester</p>
<p> Contrast panel jacket with piping</p>
<p> Concealed hood</p>
<p>&nbsp; </p>
<p class="Summary-heading"> Standard Decoration Area(s)</p>
<p> Front, back, chest (both sides)</p>
<p>&nbsp; </p>
<table class="master-table">
  <tbody>
    <tr>
      <td class="row"><img alt=""src="/Portals/0/i/embroidery.png" /></td>
      <td class="row"><img alt=""src="/Portals/0/i/screenprint.png" /></td>
      <td class="row"><img alt="" src="/Portals/0/i/heatapplieddecal.png" /></td>
      <td class="row"><img alt="" src="/Portals/0/i/waterresistant.png" /></td>
      <td class="row"><img alt="" src="/Portals/0/i/windresistant.png" /></td>
    </tr>
  </tbody>
</table>

使用此样式表

.master-table{
width: 100%;
border="0"; 
cellspacing="0"; 
cellpadding="0";
}

.row{
width: 32px; 
padding-right: 5px; 
vertical-align: middle;
}

Answer 4

查看有关结束标签的新规格。在HTML5中，许多元素在某些情况下不需要结束标记。
使用外部css文件。您多次重复相同的样式代码。即使您想让用户自定义一些html输入，或者如果您想在博客中自定义帖子，也总是建议您在CSS中定义标准，例如：

.standardTD { ... }您甚至可以定义此版本的多个版本，并让用户在其代码中选择一个版本。

您还可以为表创建一个完整的类，这样您只需要向表中添加一个类，然后从此类开始，您可以设计表的所有内容。

.myTable td {width: 32px; padding-right: 5px; vertical-align: middle;}

用户只需将此类添加到他的<td> - 标记中。提供以下元素：

.left, .right, .vcenter, .center

对于标准文本对齐。这节省了额外的长度。此外，这有助于在支持自定义的同时创建统一的外观。
在数据库中使用gzip等压缩。
您甚至可以使用html压缩/缩小工具。但是，如果您以后不想更改此代码，则仅建议使用此选项。（使其难以阅读）。你甚至可以设置一个自动执行此操作的系统，但这有点先进。

缩短新手的HTML

4 个答案: