HTML：优化显示朋友的方式

Question

我想创建一个优化的结构，用于跟踪HTML中的输出。

现在我正在使用这种结构：

<div> 
    <div style="float:left; padding:5px;"> 
        <img src="avatar_url">
    </div> 
    <div style="float:left; padding:5px;">
        Name <br /> 
        Current Mood
    </div>
    <div class="clr"></div>
    <div align="right">
        Online Status
    </div>
</div>

但在某些情况下，我必须在一个页面上显示数千个朋友，这就是为什么我试图优化结构并从代码中删除不必要的标签。

Answer 1

你能否对结果进行分页？

<div class="user">
  <img src="avatar.gif" class="user-avatar" />
  <h1 class="user-name">Name</h1>
  <h2 class="user-mood">Current mood.</h2>
  <div class="user-status">Online Status</div>
</div>

这在技术上是少了一些标签但是......

Answer 2

除了移除头像img周围的div（你可以在img元素本身设置浮点/填充吗？），你可以做很多事情。

但是，您可以通过为float: left; padding: 5px创建一个类并使用该类而不是完整样式数千次来优化文本量。

Answer 3

这有点简单。根据您需要获得的花哨程度，几乎所有东西都可以被剥夺：

<div class="friend">
    <img ... />
    <hx>FULL NAME</hx>
    <p>Current Mood</p>
    <p class="status">Online Status</p>
</div>

hx部分只是您想要用于其名称的任何标题级别的替身。

这里有一些非常小的CSS：

.friend img { float:left; margin-right:5px; }
.status { text-align:right; }

Answer 4

你不能删除很多，但你肯定可以用一级

替换style属性

class="left"

带

.left { float:left;padding:5px; }

你也可以替换

<div class="clr"></div>

与

<div class="clr" />

无论如何，装载时间不会有太大变化。