html - 我一直在为此使用一个列表，但在这种情况下最好的是什么？

Question

我一直在使用一个列表来创建这个:

我不确定这是否是最好的。这是我的代码:

<ul class="contact-info">
  <li>Phone</li>
  <li class="phone"><a href="tel:+1(111)555-1234">+1(111)555-1234</a></li>
  <li>Email</li>
  <li class="mail"><a href="mailto:email@yoursite.com">email@yoursite.com</a></li>
</ul>

虽然我似乎无法像图片那样理解它。就好像我使用内联或内联 block 一样，它们都保持在同一行上。

求助! :)

Answer 1

是的，这很好......您可以使用地址标签或定义列表作为您的联系信息，并且可以使用 schema.org 元数据来增加它的趣味性。

对于你的内联问题，你可以简单地将它们分成两个 <ul> -s

<ul class="contact-info">
    <li>Phone</li>
    <li class="phone"><a href="tel:+1(111)555-1234">+1(111)555-1234</a></li>
</ul>
<ul>
    <li>Email</li>
    <li class="mail"><a href="mailto:email@yoursite.com">email@yoursite.com</a></li>
</ul>

定义列表

定义列表是术语和相应定义的列表。定义列表的格式通常是术语在左侧，定义在右侧或下一行。定义文本通常相对于术语缩进。

<dl>
    <dt>name:</dt>
    <dd>John Doe</dd>
    <dt>tel:</dt>
    <dd>01-2345678</dd>
    <dt>fax:</dt>
    <dd>02-3456789</dd>
    <dt>email:</dt>
    <dd>johndoe@someemail.com</dd>
</dl>

当然是结合tel:和mailto:协议(protocol)

Example of definition list displaying contact information

地址标签

address 元素提供文档或文档的一部分的联系信息。按地址提供的信息可能包括文档维护者的姓名、维护者网页的链接、用于反馈的电子邮件地址、邮政地址、电话号码等。 address 元素不适用于所有邮政和电子邮件地址；它应该保留用于提供有关文档联系人的此类信息。

<address>      
    UNIVERSITY INTERSCHOLASTIC LEAGUE<br>
    1701 Manor Road, Austin, TX 78722<br>
    Tel: (512) 471-5883 | Fax: (512) 471-5908
</address>

W3C Address element

用于搜索引擎的 Schema.org 微数据

您还可以查看 schema.org 微数据，以便设计信息在搜索结果中的显示方式...

<div itemscope itemtype="http://schema.org/LocalBusiness">
    <h1 itemprop="name">Beach Bunny Swimwear</h1>
    Phone: <span itemprop="telephone"><a href="tel:+18506484200">850-648-4200</a></span>
</div>

Adding Phone Numbers To Web Pages With HTML5 and Microdata

Schema.org