Question

向achieving hover effect answer提出问题，大多数人都说下面的HTML标记非常糟糕。所以我实现了他们的一个建议，即将表格改为div。

<html>
<head>
    <title>Abyssal Warder Fire</title>
    <link href="http://225175.edicypages.com/stylesheets/cards.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <div class="pictureholder"><img src="http://lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/Abyssal%20Warder%20fire.jpg" /></div>
    <div class="information">
        <div class="Orbs">
                <div class="layout">Orbs:</div>
                <div class="value"><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /> <i>(3)</i></div>
        <div class="Affinity">
                <div class="layout">Affinity:</div>
                <div class="value"><font color="red">Fire</font></div>
            </div>
        <div class="Energy">
                <div class="layout">Energy:</td>
                <div class="value">250</td>
            </div>
        <div class="Type">
                <div class="layout">Type:</td>
                <div class="value">Creature <i>(Giant Destroyer)</i></div>
            </div>
        <div class="Charges">
                <div class="layout">Charges:</div>
                <div class="value">1</div>
            </div>
        <div class="Rarity">
                <div class="layout">Rarity:</div>
                <div class="value">UR</div>
            </div>
        <div class="Edition">
                <div class="layout">Edition:</div>
                <div class="value">Lost Souls</div>
            </div><br />
        <div class="WeaponType">
                <div class="layout">Weapon:</div>
                <div class="value">L</div>
            </div>
        <div class="Size">
                <div class="layout">Size:</div>
                <div class="value">XL</div>
            </div>
        <div class="Attack">
                <td class="layout">Attack:</div>
                <td class="value">2500</div>
            </div>
        <div class="Defense">
                <div class="layout">Defense:</div>
                <div class="value">2500</div>
            </div>
        <div class="CardID">
                <div class="layout">CardID:</div>
                <div class="value"></div>
            </div><br />
        <div class="Abilities">
            <p class="description"><i>
                <img src="http://225175.edicypages.com/photos/Activated.jpg" />Crystal Spikes - Activate to ram Abyssal Warder's crystaline fist into the ground. Crystal Spikes will erupt from the ground and within 4 seconds cover a 20m radius. They deal 570 damage to enemies within it, up to 1710 in total that cannot be warded off with the help of damage reducing abilities as the crystals are able to circumvent every buff or protective shield. Knocks back small and medium units. Only affects ground entities. Reusable every 20 seconds. (Power: 80)<br /><br />
                <img src="http://225175.edicypages.com/photos/Passive_r.jpg" />Infused Breakdown - Upon dying the unit collapses into pieces that will reassemble on their own to form two large sized Abyssal Warders. If those die their remains will again form to medium sized golems each. All smaller variants of Abyssal Warder are enraged and deal increasingly more damage the longer they attack.
            </i></p></div>

    </div>

<div class="upgrades">
    <div class="Upgrade1">
        <div class="L U1"><u>Upgrade I:</u></div>
                    <div class="V Map1">Empire <br />(<font color="green">Standard</font>)</div><br />
        <div class="L HT1">Honor Tokens:</div>
                    <div class="V HTV1">0</div>
        <div class="L VT1">Victory Tokens:</div>
                    <div class="V VTV1">4</div>
        <div class="L BT1">Battle Tokens:</div>
                    <div class="V BTV1">30</div>
        <div class="L PR1">PvP Rank:</div>
                    <div class="V PRV1">8</div>
    </div><div class="Upgrade2">
        <div class="L U2"><u>Upgrade II:</u></div>
                    <div class="V Map2">Empire <br />(<font color="orange">Advance</font>)</div><br />
        <div class="L HT2">Honor Tokens:</div>
                    <div class="V HTV2">0</div>
        <div class="L VT2">Victory Tokens:</div>
                    <div class="V VTV2">30</div>
        <div class="L BT2">Battle Tokens:</div>
                    <div class="V BTV2">60</div>
        <div class="L PR2">PvP Rank:</div>
                    <div class="V PRV2">9</div>
    </div><div class="Upgrade3">
        <div class="L U3"><u>Upgrade III:</u></div>
                    <div class="V Map3">Empire <br />(<font color="red">Expert</font>)</div><br />
        <div class="L HT3">Honor Tokens:</div>
                    <div class="V HTV3">40</div>
        <div class="L VT3">Victory Tokens:</div>
                    <div class="V VTV3">70</div>
        <div class="L BT3">Battle Tokens:</div>
                    <div class="V BTV3">120</div>
        <div class="L PR3">PvP Rank:</div>
                    <div class="V PRV3">10</div></div>
</div>
<div class="comments"></div>

以下是before和after更改。在我进入CSS之前，我应该添加或删除任何HTML代码吗？我应该更改任何div标签吗？

P.S。我将使用Microsoft Excel自动执行500多个html页面并逐个手动上传，因此我必须做到这一点非常重要。

Answer 1

布局和个人造型应该在CSS中完成，同意。但是，如果在布局中有表格数据，则应使用表格。你不想沉迷于“divs for divs”！

看着你的标记，它非常“密集” - 那里指定了很多类。为了便于维护（以及你的理智），我真的会考虑你想要实现的目标并从那里开始。

例如，这种标记，具有微妙的不同（和模糊命名）类是一个需要维护的熊：

<div class="L BT2">Battle Tokens:</div>
                <div class="V BTV2">60</div>

也许您可以使用列表;这对我来说似乎更具可读性，但你的里程可能会有所不同：

<li class="tokens">Battle Tokens:<span class="count">60</span></div>

Answer 2

首先，您从<Table>更改为<div>非常棒！你必须明白每个标签都有它自己的目的，而且你把div用于所有东西，这是非常糟糕的HTML礼仪。

此外，<i>, <font>标签是OBSOLETE，而不是像这样编写代码，您可以使用CSS的样式属性，例如：

p{font-style: italics}

或者如果你想为元素着色

p{color:red}

如果你已经有样式元素，那么添加子样式（或元素的额外样式）不是问题

<p class='style 1 style2'>bla bla</p>

在这种情况下，<p>元素将同时使用style1和style2。

另外，我相信如果你不创建500个html页面，你会变得更聪明，并且你会利用数据库的力量，所以你可以轻松地改变页面你以后会想要的，只需使用简单的PHP解析页面。将来比重新编写500多个html页面更容易，因为你想要改变布局。嗅探PHP和MySQL的主题 - 起初看起来有点棘手，但从长远来看，它会让你的生活更轻松。

Answer 3

我不确定，这对我来说看起来很相似，所以我尝试使用表格，确保使用正确的语义。

这是参考http://www.htmlcodetutorial.com/tables/_THEAD.html

虽然我使用div（html / css stuffs）来处理布局

GL

如何改进此HTML代码

3 个答案: