HTML评论标记

ysequi 发布于 2018-03-05 html 最后更新 2018-03-05 01:06 394 浏览

我目前正在创建自己的博客,我必须评论这些评论,但标记它的最佳方式是什么? 我需要提供的信息是:

  1. 人名
  2. Gravatar图标
  3. 评论日期
  4. 评论
任何想法都会很受欢迎。 PS:我只对语义化的html标记感兴趣。
已邀请:

ket

赞同来自:

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

ket

赞同来自:

我不知道如果没有使用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选择器支持,则样式更难。

ysequi

赞同来自:

我可能正在想这样的事情:

<ol class="comments">
    <li>
        <a href="">
            <img src="" alt="" />
        </a>
        <cite>Name<br />Date</cite>
        <blockquote>Comment</blockquote>
    </li>
</ol>
没有使用div和只有一个类,它非常有语义。该列表显示评论的顺序,人员网站的链接,以及他们的gravatar图像,引用标签的站点谁说评论和blockquote持有他们所说的。 人们认为什么?

ket

赞同来自:

我认为你的版本与引用,blockquote等肯定会起作用,但是如果语义是你最关心的问题,那么我个人不会使用引用和blockquote,因为它们具有他们应该代表的特定事物。 blockquote标签意味着代表从其他来源引用的引用,而引用标签意味着代表信息来源(如杂志,报纸等)。 我认为一个论点当然可以使你可以使用带有类名的语义HTML,只要它们有意义。这篇关于Plain Old Semantic HTML的文章引用了类名 - http://www.fooclass.com/plain_old_semantic_html

jdolor

赞同来自:

我明白你的意思。好吧,读过那篇文章后,为什么你不尝试这样的事情?

<blockquote 
    cite="http://yoursite/comments/feederscript.php?id=commentid" 
    title="<?php echo Name . " - " . Date ?>" >
    <?php echo Comment ?>
</blockquote>
用一些时髦的CSS让它看起来不错。 feederscript.php是可以从数据库中读取的东西,只回应所需的纪念。