css - 如何改进此 HTML 代码

跟进问题 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 标签吗？

附言我将使用 Microsoft Excel 自动处理 500 多个 html 页面并手动将它们一个接一个地上传，所以我做对这一点很重要。

最佳答案

同意，布局和个别样式应使用 CSS 完成。但是，如果布局中有表格数据，则应使用表格。您不想沉迷于“为了 div 而设计 div”!

看看您的标记，它非常“密集”——其中指定了非常多的类。为了便于维护(和您的理智)，我真的会尝试考虑您要实现的目标并从那里开始。

例如，这种带有细微不同(且命名模糊)的类的标记很难维护:

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

或许您可以使用列表代替；这对我来说似乎更易读，但你的里程可能会有所不同:

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

关于css - 如何改进此 HTML 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5535189/

css - 如何改进此 HTML 代码

上一篇：javascript - div 圆 Angular 形式

下一篇：javascript - 链接是否可能没有明确的 href？