HTML 注释标记答案

【问题标题】：HTML Comments MarkupHTML 注释标记
【发布时间】：2008-08-07 19:46:47
【问题描述】：

我目前正在创建自己的博客，我必须标记 cmets，但最好的标记方法是什么？

我需要提供的信息是：

人名
Gravatar 图标
评论日期
评论

任何想法都会非常受欢迎。

PS：我只对语义 html 标记感兴趣。

【问题讨论】：

标签： html semantic-markup

【解决方案1】：

我认为您的带有 cite、blockquote 等的版本肯定会起作用，但如果语义是您主要关心的问题，那么我个人不会使用 cite 和 blockquote，因为它们具有它们应该代表的特定事物。

blockquote 标签用于表示从另一个来源引用的引文，而 cite 标签用于表示信息来源（如杂志、报纸等）。

我认为一个论点当然可以证明您可以将语义 HTML 与类名一起使用，前提是它们是有意义的。这篇关于 Plain Old Semantic HTML 的文章提到了使用类名 - http://www.fooclass.com/plain_old_semantic_html

【讨论】：

【解决方案2】：

这是一种方法，您可以使用以下 CSS 将图片浮动到内容的左侧：

.comment {
  width: 400px;
}

.comment_img {
  float: left;
}

.comment_text,
.comment_meta {
  margin-left: 40px;
}

.comment_meta {
  clear: both;
}

<div class='comment' id='comment_(comment id #)'>
  <div class='comment_img'>
    <img src='https://placehold.it/100' alt='(Commenter Name)' />
  </div>
  <div class='comment_text'>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mauris. Morbi quis tellus sit amet eros ullamcorper ultrices. Proin a tortor. Praesent et odio. Duis mi odio, consequat ut, euismod sed, commodo vitae, nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam pede.</p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rhoncus accumsan velit. Donec varius magna a est. </p>
  </div>
  <p class='comment_meta'>
    By <a href='#'>Name</a> on <span class='comment_date'>2008-08-21 11:32 AM</span>
  </p>
</div>

【讨论】：

【解决方案3】：

我可能在想这样的事情：

<ol class="comments">
    <li>
        <a href="">
            <img src="" alt="" />
        </a>
        <cite>Name<br />Date</cite>
        <blockquote>Comment</blockquote>
    </li>
</ol>

不使用 div 并且只使用一个类，这是非常语义化的。该列表显示了 cmets 的制作顺序、指向人员网站的链接、他们的 gravatar 图像、发表评论的网站的引用标签和包含他们所说内容的块引用。

【讨论】：

据我了解，类属性是导致语义的原因。我相信大多数微格式都是作为 XHTML 中的类和属性实现的，除非你想采用 RDF 等，否则你不会得到比这更多的语义。

【解决方案4】：

我不知道在不使用 div 或类的情况下，是否存在能够很好地表示注释结构的标记，但您可以使用定义列表。您可以在定义列表的上下文中使用多个 dt 和 dd 标签 - http://www.w3.org/TR/html401/struct/lists.html#edef-DL

<dl>
  <dt>By [Name] at 2008-01-01<dt>
  <dd><img src='...' alt=''/></dd>
  <dd><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mauris. Morbi quis tellus sit amet eros ullamcorper ultrices. Proin a tortor. Praesent et odio. Duis mi odio, consequat ut, euismod sed, commodo vitae, nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam pede.</p>

  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rhoncus accumsan velit. Donec varius magna a est. </p>
   </dd>
</dl>

更新：我对这种方法的担忧是，为了样式目的，可能难以使用 CSS 唯一标识元素。您可以使用 JavaScript（这里 jQuery 会很棒）来查找和应用样式。如果没有跨浏览器 (IE) 的完整 CSS 选择器支持，样式将更加困难。

【讨论】：

【解决方案5】：

我明白你的意思。好吧，看完那篇文章，你为什么不试试这样呢？

<blockquote 
    cite="http://yoursite/comments/feederscript.php?id=commentid" 
    title="<?php echo Name . " - " . Date ?>" >
    <?php echo Comment ?>
</blockquote>

用一些时髦的 CSS 让它看起来不错。

feederscript.php 将是可以从数据库中读取并仅回显所需的 commentid 的内容。

【讨论】：