Question

我正在尝试学习HTML和标记的基础知识。

我想创建一个包含两行信息的锚点。

第一行：链接的名称第二行：简短说明

e.g。

<a href='#'>
<span>Studies</span>
<span class="alt">-Information about studies</span>
</a>

这是对的吗？

如有必要，应如何修改以下（第2段）？

谢谢

PS。这两行都需要用span来包围css样式。

Answer 1

首先，不要排除使用br标记。对于br标记，这是一个语义上合适的位置（强制在一行或一段文本中进行硬破坏）。另外，如果您使用br标记，则可能不再需要将两行文本中的任何一行放在单独的标记中，除非您要对它们进行不同的样式设置。

<a href='#'>
    Studies<br/>
    -Information about studies
</a>

其次，尝试在禁用样式表的情况下查看HTML（我在Firefox中通过按ctrl-shift-S，在Web Developer扩展程序的帮助下执行此操作）。浏览器是否能够仅根据提供的HTML以易于阅读的方式呈现内容？在某种程度上，“无格式”内容的可读性越高，HTML的语义就越正确。

鉴于第二行文本似乎是次要的第一行（副标题，不重要，可能多余或不完全必要），将第一行放在strong标记或放第二行small标记中的行有几种方法可以确定两条线的相对重要性，如果您愿意这样做的话。

<a href='#'>
    <strong>Studies</strong><br/>
    -Information about studies
</a>

<a href='#'>
    Studies<br/>
    <small>-Information about studies</small>
</a>

这里有个人偏好的空间。这只是两种方法。

在这样的情况下，使用small标签可能有点拉伸，但这并不完全不合适。 small代码通常用于“细则”，归属，免责声明或旁注。它在语义上并不意味着文本很小，但它确实倾向于用于其他东西的次要内容（这澄清了其他内容）。它应该只用于篇幅较短的文本。

strong标记不一定是粗体样式。事实上，这就是语义标记的重点：它没有指定或暗示内容的样式;它所做的只是暗示内容的含义或背景。可以合理地为strong标记指定font-weight:normal样式。

Answer 2

为了实现那些分开的行，请尝试使用<div>标记。你仍然可以为样式指定一个类，唯一的区别是<div>是块元素;每个都在一个单独的行上呈现。以下是代码的修改版本：

<a href='#'>
Studies
<div class="alt">-Information about studies</div>
</a>

另一种更优选的方法是将元素设计为块元素。可以通过将CSS display属性设置为block来使用它。类似的东西：

<a href='#'>
Studies
<span class = "alt block">-Information about studies</span>
</a>

（请注意，class = "alt block"表示该元素同时具有类alt和block，并且还要注意第一个<span>已删除，因为无需设置该节点的样式什么都有。）

CSS：

.block {
    display: block;
}

希望能帮到你！

嵌套在锚点内的跨度应该是以下标记？

2 个答案: