2

我正在制作一个小型网络聊天实用程序,并正在寻找有关将哪些元素用于消息的建议。

这是我目前正在考虑使用的内容:

<p id="message-1">
    <span class="timestamp" id="2009-03-10T12:04:01+00:00">
        12:04
    </span>
    <cite class="admin">
        Ross
    </cite> 
    Lorem ipsum dolor sit amet.
</p>

我会在这里利用 CSS 在时间戳周围添加括号、cited 用户的图标等。我认为为每条消息使用 a 会很愚蠢(而且不正确)blockquote,尽管我认为cite它指的是用户是正确的那张贴了这条消息。

我知道这不是 a) 一门精确的科学和 b) 完全必要的,但我更喜欢使用有意义的元素而不是span贯穿始终。还有其他我应该考虑的因素吗?任何微格式?

4

8 回答 8

5

HTML 在可定制的方式中不是很语义化。尽管如此,您的格式在任何浏览器中都应该是可以理解的(正如您所指出的,使用适当的 CSS)。

我在上面的代码示例中看到的内容与 XML 非常相似。对于您的需求来说,这可能会很麻烦且过大,但我想指出,您可以将 XML 与 XSLT 一起使用来替代 (X)HTML。通过这种方式,您可以获得尽可能语义化的标签,而无需妥协 HTML 标签的限制。

w3schools 有一篇关于该主题的文章。我可以发誓我在其中看到了一个sun.com用 XML 完成的网页,但我再也找不到它了。

如果您不打算由第三方软件解释或解析它,我仍然建议不要使用这种方法,并坚持使用经过验证的 HTML。

于 2009-03-10T19:52:49.557 回答
3

If you're going for semantic HTML, you'll probably want to know that HTML5 doesn't consider your use of the <cite> element correct anymore.

A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names.

于 2009-03-11T16:04:55.397 回答
3

对我来说似乎是合理的,除了“id”无效。NAME 标记不能以数字开头或包含“+”。

另外,如果两个人同时说话,您将拥有非唯一的 ID。也许该数据应该放在另一个属性中,例如“标题”(因此您可以将鼠标悬停以查看确切的时间戳)。

于 2009-03-10T19:45:21.507 回答
1
<ol>
    <li class="message" value="1">
        <span class="timestamp" id="2009-03-10T12:04:01+00:00">
            12:04
        </span>
        <cite class="admin">
            <address class="email">
                <a href="mailto:ross@email.com">
                    Ross
                </a>
            </address>
        </cite> 
        Lorem ipsum dolor sit amet.
    </li>
</ol>

我会尝试类似上面的方法。请注意,我已将所有内容放在有序列表中,因为注释可以以适合有序列表的线性方式进行解释。此外,我在您的 Cite 标记中嵌入了一个带有 Anchor 元素的地址标记。不幸命名的 Address 元素实际上是为了传达作者的联系信息,因此您可能希望在此处链接到作者的电子邮件地址。

于 2009-03-10T19:54:36.260 回答
0

你的建议已经很好了。如果您想更进一步,并且能够使用相同的标记(以较重的 html 为代价)允许大量不同的演示选项,您可能需要执行以下操作:

<dl class="message" id="message-1">
    <dt class="datetime">Datetime</dt>
    <dd class="datetime">
        <span class="day">Wed</span>
        <span class="dayOfMonth">11</span>
        <span class="month">Mar</span>
        <span class="year">2009</span>
        <span class="hourMin">17:34</span>
        <span class="sec">33</span>
    </dd>
    <dt class="author">Author</dt>
    <dd class="author">Ross</dd>
    <dt class="message">Message</dt>
    <dd class="message">Lorem ipsum dolor sit amet</dd>
</dl>
于 2009-03-10T19:47:12.627 回答
0

由于您在问题中提到了微格式,因此您无疑已经熟悉微格式 wiki。它包含大量适用于不同情况的示例。

另一种可能性是借用SIOC的部分内容,其中包括论坛的本体——非常类似于聊天。

通过重用现有格式,您可以利用Operator等插件和工具,并可能免费从您的应用中获得更多收益。

于 2009-03-10T20:13:59.863 回答
0

我会使用 XML 和 XSLT 来转换(样式)数据。

这在语义上是有意义的,但您也可以使用适合存档的格式(即 XML)进行对话 - 我假设您将拥有某种日志或“历史记录”。

于 2009-03-11T16:39:43.287 回答
0

正如@bobince 所说,id="2009-03-10T12:04:01+00:00"是无效的。

你应该改变这个:

<span class="timestamp" id="2009-03-10T12:04:01+00:00">
    12:04
</span>

对此:

<time class="timestamp" datetime="2009-03-10T12:04:01+00:00">
    12:04
</time>

您可以在HTML5 DoctorW3C获得有关该time标签的更多信息:

HTML5 上的time标签提供了一个新元素,用于为机器明确编码日期和时间,同时仍以人类可读的方式显示它们。

time元素表示 24 小时时钟上的时间,或预测公历中的精确日期,可选择带有时间和时区偏移量。

...

我同意ol@Robotsu 发布的有序列表 ( ) 解决方案,除了我刚刚发布的时间标签和不正确的address内部cite标签!

于 2013-01-18T21:25:05.340 回答