1

我已经查看了https://stackoverflow.com/questions/5542428/why-on-earth-is-address-a-block-level-element，发现它对此事几乎没有什么洞察力。

一位客户给了我一段纯文本，我正在尝试针对用户体验和搜索引擎优化对其进行优化。这是文本中间的相关片段：

<p>[Several sentences]. Having trouble? Contact <address style="font-style:normal;display:inline">Jane Doe at <a href="mailto:jdoe@example.com">jdoe@example.com</a> or <a href="callto:5551234567">(555) 123-4567</a></address> between the hours of 9AM and 5PM. [Several sentences].</p>

然而，由于<address>是块级元素，DOM 最终看起来像这样：

<p>[Several sentences]. Having trouble? Contact </p>
<address style="font-style:normal;display:inline">Jane Doe at <a href="mailto:jdoe@example.com">jdoe@example.com</a> or <a href="callto:5551234567">(555) 123-4567</a></address>
between the hours of 9AM and 5PM. [Several sentences].<p></p>

输出如下所示：

[几句话]。遇到麻烦？接触

Jane Doe 在 jdoe@example.com 或 (555) 123-4567

在上午 9 点到下午 5 点之间。[几句话]。

显然，这破坏了用户体验，并且不是有效的 HTML。我的问题是仅块级背后的原因是什么<address>，有什么办法可以让它内联显示？如您所见，CSSdisplay:inline属性/值对这种情况没有任何帮助

4

2 回答 2

3

为什么地址元素不能在p元素中？

因为 HTML 规范以这种方式定义了它们。

该address元素表示其最近的article或body元素祖先的联系信息。如果那是body元素，那么联系信息将应用于整个文档。

这意味着<address>元素并不是用来标记任何旧地址的。这意味着您将使用 .<address>作为联系文章来源的一种方式。在一篇文章中，讨论“第四街 123 号”不值得使用<address>元素。

如果您想将其描述为用于样式目的的地址，您始终可以将其指定class为：

<span class="address">123 fourth street</span>
于 2013-04-11T15:43:50.083 回答
2

不要将<address>元素用于通用地址，而是将Person 模式与Microdata或hCard Microformat或RDFa一起使用。这是微数据的示例：

<p itemscope itemtype="http://schema.org/Person">
    [Several sentences]. Having trouble? 
    Contact <span itemprop="name">Jane Doe</span> at 
    <a itemprop="email" href="mailto:jdoe@example.com">jdoe@example.com</a>
    or <a itemprop="telephone" href="tel:5551234567">(555) 123-4567</a> 
    between the hours of 9AM and 5PM.
    [Several sentences].
</p>

您可以使用 Google 网站管理员工具测试数据提取（向下滚动到标题为“提取的结构化数据”的部分）。

于 2013-04-11T16:06:29.500 回答