文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何改进这段HTML代码

问如何改进这段HTML代码
EN

Stack Overflow用户
提问于 2011-04-04 14:21:55
回答 3查看 175关注 0票数 0

关于achieving hover effect answer的后续问题，大多数人说下面的超文本标记语言很糟糕。所以我实现了他们的一个建议，那就是把表变成div。

代码语言：javascript
复制
<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
layout
html
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-04-04 15:03:12

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

看看你的标记，它是非常“密集”的-there中指定了非常多的类。为了便于维护(和你的理智)，我真的会试着去思考你想要实现什么，然后从那里开始。

例如，这种带有细微差别(和模糊命名)的类的标记很难维护：

代码语言：javascript
复制
<div class="L BT2">Battle Tokens:</div>
                <div class="V BTV2">60</div>

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

代码语言：javascript
复制
<li class="tokens">Battle Tokens:<span class="count">60</span></div>
票数 3
EN

Stack Overflow用户

发布于 2011-04-04 14:57:52

首先，你从<Table>改成了<div>，这真是太棒了！您必须了解每个标记都有它自己的用途，并且您使用div来处理所有事情的事实是非常糟糕的HTML礼仪。

此外，<i>, <font>标签已经过时，您可以使用CSS的样式属性来代替那样编写代码，例如：

代码语言：javascript
复制
p{font-style: italics}

或者，如果要对元素进行着色

代码语言：javascript
复制
p{color:red}

如果你已经有了样式化的元素，那么添加子样式(或者在元素中添加额外的样式)也不成问题。

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

在本例中，<p>元素将同时使用style1和style2。

此外，我相信你可以更聪明，如果你不创建500html页面，你会利用数据库的力量，所以你可以很容易地改变页面，如果你想以后，并简单地解析页面使用简单的PHP。将比将来重写500+ html页面容易得多，以防您想要更改布局。熟悉PHP和MySQL的主题--乍一看可能有点棘手，但从长远来看，它会让你的生活变得容易得多。

票数 2
EN

Stack Overflow用户

发布于 2011-04-04 14:48:36

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

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

尽管我会使用div (html/css之类的东西)来处理布局。

总帐

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/5535189

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档