HTML注释标记

Question

我目前正在创建自己的博客，并且已经开始标记评论，但是最好的标记方法是什么？

我需要展示的信息有：

1. 评论者姓名
2. Gravatar 头像
3. 评论日期
4. 评论内容

PS: 我只关注语义化的 HTML 标记。

- GateKiller

---

HTML源代码中的注释与此不同，但搜索引擎无法区分。一个起点可能是 HTML5是否改变了HTML注释的标准？. - Peter Mortensen

Answer 1

我认为，使用引用、块引用等标签的版本肯定可行，但如果语义是您的主要关注点，那么我个人不会使用引用和块引用，因为它们有特定的表示方式。

块引用标签用于表示从其他来源引用的引语，而引用标签用于表示信息源（如杂志、报纸等）。

我认为，可以通过使用有意义的类名来使用语义化HTML。这篇关于Plain Old Semantic HTML的文章提到了使用类名- http://www.fooclass.com/plain_old_semantic_html

- Rich Reuter

---

链接已经失效 - “嗯，我们在寻找该网站时遇到了问题。我们无法连接到www.fooclass.com上的服务器。” - Peter Mortensen

Answer 2

我可能想到了这样的东西：

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

使用语义化标签而不是div以及仅使用一个类，这样做非常有意义。列表显示了评论的顺序，包括指向评论者网站的链接、他们的Gravatar图像、引用该评论者的cite标签和包含他们所说内容的blockquote标签。

- GateKiller

---

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

Answer 3

以下是一种使用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>

- Rich Reuter

Answer 4

我不知道是否有标记可以很好地表示注释结构，而不使用

或类，但您可以使用定义列表。您可以在定义列表的上下文中使用多个

和

标签-请参见10.3 Definition lists: the DL, DT, and DD elements。

<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 在这里非常好用）来查找和应用样式。由于浏览器之间没有完全支持 CSS 选择器（Internet Explorer），因此样式设置会更加困难。

- Rich Reuter

Answer 5

我明白你的意思。好的，在阅读了那篇文章之后，为什么不试试这个呢？

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

使用一些时髦的CSS让它看起来很漂亮。

feederscript.php 可以从数据库中读取并仅输出所调用的评论ID。

- helloandre