我目前正在创建自己的博客,我必须标记评论,但最好的标记方法是什么?
我需要提供的信息是:
- 人名
- 头像图标
- 评论日期
- 评论
任何想法都会很受欢迎。
PS:我只对语义 html 标记感兴趣。
我目前正在创建自己的博客,我必须标记评论,但最好的标记方法是什么?
我需要提供的信息是:
任何想法都会很受欢迎。
PS:我只对语义 html 标记感兴趣。
我认为您的带有 cite、blockquote 等的版本肯定会起作用,但如果语义是您主要关心的问题,那么我个人不会使用 cite 和 blockquote,因为它们具有它们应该代表的特定事物。
blockquote 标签用于表示从另一个来源引用的引文,而 cite 标签用于表示信息来源(如杂志、报纸等)。
我认为当然可以提出一个论点,即您可以将语义 HTML 与类名一起使用,前提是它们是有意义的。这篇关于普通旧语义 HTML 的文章引用了使用类名 - http://www.fooclass.com/plain_old_semantic_html
这是您可以使用以下 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>
我可能在想这样的事情:
<ol class="comments">
<li>
<a href="">
<img src="" alt="" />
</a>
<cite>Name<br />Date</cite>
<blockquote>Comment</blockquote>
</li>
</ol>
不使用 div 并且只使用一个类,这是非常语义化的。该列表显示了发表评论的顺序,到个人网站的链接,以及他们的 gravatar 的图像,发表评论的网站的引用标签和阻止引用来保存他们所说的内容。
我不知道在不使用 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 选择器支持,样式将更加困难。
我明白你的意思了。好吧,看完那篇文章,你为什么不试试这样的东西呢?
<blockquote
cite="http://yoursite/comments/feederscript.php?id=commentid"
title="<?php echo Name . " - " . Date ?>" >
<?php echo Comment ?>
</blockquote>
用一些时髦的 CSS 让它看起来不错。
feederscript.php would be something that could read from the database and echo only the commentid called for.