当前位置：文江博客话题详情

HTML 注释标记

发布于 2024-07-04 02:40:02 字数 161 浏览 6 评论 0原文

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

我需要提供的信息是：

人名
头像图标
评论日期
评论

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼泪淡了忧伤 2024-07-11 02:40:02

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

blockquote 标签旨在表示从其他来源获取的引用，而 cite 标签旨在表示信息来源（如杂志、报纸等）。

我认为当然可以提出这样的论点：您可以将语义 HTML 与类名一起使用，只要它们有意义。这篇关于普通旧语义 HTML 的文章引用了使用类名 - http://www.fooclass.com/plain_old_semantic_html

回复收藏 0 原文

埋葬我深情 2024-07-11 02:40:02

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

Here's one way you could do it with the following CSS to float the picture to the left of the contents:

.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>

回复收藏 0 原文

喵星人汪星人 2024-07-11 02:40:02

我可能在想这样的事情：

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

它非常语义化，不使用 div 并且只使用一个类。该列表显示了评论的顺序、该人网站的链接、他们的头像图片、发表评论的网站的引用标签以及保存他们所说内容的块引用。

I was perhaps thinking of something like this:

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

It's very semantic without using div's and only one class. The list shows the order the comments were made, a link to the persons website, and image for their gravatar, the cite tag to site who said the comment and blockquote to hold what they said.

回复收藏 0 原文

离不开的别离 2024-07-11 02:40:02

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

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

加上一些时髦的 CSS 让它看起来很漂亮。

feederscript.php 可以从数据库读取并仅回显所要求的 commentid。

I see your point. OK, after reading through that article, why don't you try something like this?

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

with some snazzy CSS to make it look nice.

feederscript.php would be something that could read from the database and echo only the commentid called for.

回复收藏 0 原文

满栀 2024-07-11 02:40:02

我不知道是否有标记可以在不使用 div 或类的情况下很好地表示注释结构，但您可以使用定义列表。您可以在定义列表的上下文中使用多个 dt 和 dd 标签 - 请参阅10.3 定义列表：DL、DT 和 DD 元素。

<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 在这里会很棒）来查找和应用样式。如果没有跨浏览器 (Internet Explorer) 的完整 CSS 选择器支持，样式设置将会更加困难。

I don't know that there's markup that would necessarily represent the comment structure well without using divs or classes as well, but you could use definition lists. You can use multiple dt and dd tags in the context of a definition list - see 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>

The concern I'd have with an approach like this is that it could be difficult to uniquely identify the elements with CSS for styling purposes. You could use JavaScript (jQuery would be great here) to find and apply styles. Without full CSS selector support across browsers (Internet Explorer), it would be tougher to style.

回复收藏 0 原文

~没有更多了~