1

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

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

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

例如

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

它是否正确？

如有必要，应如何修改以下（第二跨度）？

谢谢

PS。两条线都需要用跨度包围以进行 CSS 样式。

4

2 回答 2

3

首先，不排除使用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.

于 2012-08-13T23:20:43.727 回答
0

为了实现这些在单独的行中，请尝试改用<div>标签。您仍然可以为样式指定一个类，唯一的区别是<div>s 是块元素；它们中的每一个都呈现在单独的行上。这是您的代码的修改版本：

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

另一种更可取的方法是将元素设置为块元素。可以通过将 CSS显示属性设置为block. 就像是：

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

（请注意，这class = "alt block"意味着该元素同时具有类alt和block，并且还要注意第一个<span>已被删除，因为不需要使用任何东西来设置该节点的样式）。

CSS：

.block {
    display: block;
}

希望对您有所帮助！

于 2012-08-13T21:19:21.723 回答