Question

html的新手 - 正确地做到这一点很新。

我有一个简单的问题，但它支持我将要做的很多决定，因此需要正确启动。

        <div id="site-master-social">Find us at:
            <a href="http://www.OurWebsite.com"><img src="/Images/icon_fb.png" alt="Facebook" title="Find us on Facebook" /></a>
        </div>

问题是关于下面的html代码段。在包装Div中，有一些元素 - 一些文本，一个超链接和一个图像。问题是，如果文本“Find us at：”包含在诸如span之类的标签中，或者是否可以在Div标签内“浮动”？

Answer 1

这里没有对错。

但是我个人会将文本包装在span标签中。这意味着将来如果您希望专门针对文本的样式，这将更容易做到：

<div id="site-master-social">
    <span>Find us at:</span>
    <a href="http://www.OurWebsite.com">
       <img src="/Images/icon_fb.png" alt="Facebook" title="Find us on Facebook" />
    </a>
</div>

#site-master-social span
{
}

然而正如我所说，这只是个人意见。你的标记是完全语义的。

Answer 2

如果你需要它，请将其包裹起来，否则请将其解开。我会说。

就像读书或文章一样。如果你以某种方式将你的文本标记为“特殊”，在你的情况下通过将其包装在<span>元素中，你会告诉屏幕阅读器和其他人这样的工具文本在某种程度上是特殊的。如果你没有把它包起来，他们只会正常阅读它，这就是我想要的情况。

（但是，屏幕阅读器往往更注重<em>或类似的元素，可能会忽略跨度。）

Answer 3

技术上没关系，但我不推荐它。它使文本成为某种隐式伪元素。在这种情况下，可能会建议将此类文本放在<span>中。如果以下元素是相关的输入字段，那么它将是一个标签。如果它不是文本，它可能应该是<p>。

这些选项中的每一个都可以让您更直接地控制该显式内容/元素。

Answer 4

来自W3C

当没有其他元素适合时，div元素用作最后的元素。否则，它会导致可访问性差阅读器。

DIV没有语义含义，因此如果内容确实具有某种意义，那么残疾人就无法使用它。

这也意味着你很难专门设计这个短语。更重要的是，如果你想稍后以某种方式操作它（正则表达式等），很难使用javascript访问这个textNode属性。

span也没有特殊含义，但你可以更容易地分配类和随后的javascript，然后没有。

为了完整起见，我将在Paul D. Waite和我之间的讨论中加上结论:(见评论）

所以我建议将文本包装在span中并添加class属性对于这个特定的情况，我会考虑使用<h1>，因为html5有分区范围，它看起来像这个部分的标题。

<section id="site-master-social"> 
<h1>Find us at:</h1> 
<ul> 
<li>facebook</li> 
<li>google+</li> 
etc...
</ul> 
</section>

Answer 5

不确定。这是完美的，除非你需要以某种方式格式化它。

在<div>？</div>中将纯文本与其他元素一起使用是一个好主意

5 个答案: