爲新手縮短HTML

-4

我們有以下代碼進入數據庫字段，限制字符數。爲新手縮短HTML

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

因此我需要縮短代碼。任何建議將不勝感激。

來源

2013-07-30 user2633899

運輸署與內嵌樣式..給他們一個類，而不是與移動規則的樣式表，單獨將節省代碼 – Dale

使用的好大塊的壓縮像GZ減小尺寸。 – GolezTrol

1.決定html或xhtml;驗證3.使用CSS – tborychowski

您可以使用CSS，因此您不需要爲每個td提供樣式。你可以使用class/id。

像

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

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

來源

2013-07-30 11:51:14

like –

和.tableClass td {} –

這裏是我採取在縮短的話，我不認爲它可以進一步濃縮的任何。這進入你的樣式表：

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

如果您仍需要更短，這也將有助於縮短類名「表圖標」和「彙總標題」。另外，您可以刪除所有格式選項卡，它們根本不是必需的。

來源

2013-07-30 12:00:07 MightyPork

嘗試將樣式移動到樣式表中，這樣可以節省大量時間來編寫代碼。它應該是這樣的：

<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; 
}

來源

2013-07-30 12:02:14 oligibson

退房有關結束標記的新規格。在HTML5中，許多元素在某些情況下不需要結束標記。
使用外部的css文件。您多次重複相同的樣式代碼。即使你想讓用戶自定義一些html輸入，或者如果你想在博客中自定義帖子，總是建議在你的css中定義標準，例如：

.standardTD { ... }你甚至可以定義多個版本，並使用戶在他的代碼中選擇一個。

您還可以爲表格創建一個完整的類，以便您只需向表中添加一個類，然後從此類繼續設計表中的所有內容即可。

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

用戶只需將該類添加到他的<td> -Tag。提供元件，例如：

.left, .right, .vcenter, .center

對於標準文本對齊。這節省了額外的長度。此外，這有助於在支持定製的同時創建統一的外觀。
在你的db中使用壓縮比如gzip。
你甚至可以使用html壓縮/縮小工具。但是，只有在您稍後不想更改此代碼時才推薦使用。（使其難以閱讀）。你甚至可以設置一個自動執行此操作的系統，但這有點高級。

來源

2013-07-30 12:04:44

相關問題

爲新手縮短HTML

回答

相關問題