Question

我有两个使用HTML制作的页面，我使用以下标准

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

这两个页面是 index.html ，另一个是 about.html 。我在索引页面中创建了一个徽标，如下所示

Index.html

的HTML标记

<div class="logo"></div>

CSS中的

我做了以下

.logo {
background: url ('../images/logo.png') no-repeat;
height: 300px;
width: 100px;
}

在 about.html 页面中，我编写了以下html标记

<a href="index.html">
   <div class="logo"></div>
</a>

上面的标记工作正常，但是当我使用 w3c验证器时，它会给我警告，因为它不是标准标记。

我的问题是如何使html标记符合标准并给出相同的结果？

Answer 1

你应该这样做：

<a href="index.html" class="logo"></a>

然后您的css将直接应用于a，而不是嵌套的空div。您需要将display: block;添加到CSS，因为a具有不同的默认display。

Answer 2

如果您需要保留此标记结构，则有两种选择：

使用HTML5 doctype，其中<a><div>this</div></a>等锚点内的块级元素有效且合法。

HTML5文档类型为：<!doctype html>

请记住，目前还没有正式的HTML5验证服务。

使用内联元素<span>作为徽标：

<a href="index.html">
   <span class="logo"></span>
</a>

如果您使用＃2，只需将display:block添加到.logo

根据您的设计目标和其他标记，您可能根本不需要内部元素，只需通过赋予<a>来设置class="logo"元素的样式。

Answer 3

您在验证程序中看到的问题是因为<div>是块级标记，而<a>标记是内联标记。

内联标记不能包含块级标记，这就是验证者抱怨的原因。

事实上，这条规则被广泛忽视，因为否则许多事情变得很难进入链接。此外，它只适用于较旧的HTML和xhtml版本（xhtml特别挑剔）;当前的HTML5标准确实允许它，因为他们看到了由规则引起的问题。

所以简短的回答是改用HTML doctype（<!DOCTYPE HTML>），你的问题就会消失。

“正确”的答案是使用<a>或display:block;为display:inline-block;标记添加样式，以便它可以包含块级元素。这将使它在语法上正确。然而，这通常不满足验证器，因为它只是查看默认的显示类型，而不是CSS。

或者，切换<div>的{{1}}。这将满足验证者的要求，您仍然可以使用<span>和朋友来使其像display:block一样工作。

希望有所帮助。

Answer 4

不使用徽标图像作为背景，而是在DIV中放置标记。您不能将标记包装在像DIV这样的块元素周围。

<a href="index.html">
   <div class="logo">
      <a href='gosomewhere.html'>
         <img src='mylogo.png'alt='' title=''/>
      </a>
   </div>

Answer 5

链接（a标签）是内联元素，意味着多个元素适合同一行，而div是块元素，这意味着每行只有一个。在内联样式元素中插入块样式元素是无效的HTML 4.01，因为这会阻止内联元素实际呈现为内联。

有关内联元素和块元素的详细信息，请参阅此页面：http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Answer 6

根据W3c标准的第4部分，将Div标记放入Anchor标记内是否无效。

anchor标记是iline元素，Div是block级元素。您不能将block级元素放在inline元素中。

这是关于你的问题的另一个好的SO讨论。
Is putting a div inside an anchor ever correct?

我怎么写<a> tag in standard html?</a>

6 个答案: