html - 为新手缩短 HTML

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

尝试将您的样式移动到样式表中，这也将为您节省大量编写代码的时间。它应该如下所示：

<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 3

您可以使用 CSS，这样您就不需要为每个 td 指定样式。您可以使用类/ID。

喜欢

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

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

Answer 4

1. 查看有关结束标签的新规范。在 HTML5 中，许多元素在某些情况下不需要结束标记。

2. 使用外部 css 文件。您多次重复相同的样式代码。即使你想让用户自定义一些 html 输入，或者如果你想自定义博客中的帖子，总是建议在你的 css 中定义标准，例如：

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

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

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

   用户只需要将这个类添加到他的<td>-Tag 中。提供以下元素：

   .left, .right, .vcenter, .center

   对于标准文本对齐。这节省了额外的长度。此外，这有助于在支持定制的同时创建统一的外观。

3. 在您的数据库中使用诸如 gzip 之类的压缩。

4. 您甚至可以使用 html 压缩/缩小工具。但是，仅当您以后不想更改此代码时才建议这样做。（使其难以阅读）。您甚至可以设置一个自动执行此操作的系统，但这有点先进。