将我的徽标链接到主页 html答案

【问题标题】：Link my Logo to homepage html将我的徽标链接到主页 html
【发布时间】：2013-01-24 09:24:54
【问题描述】：

我想让我的标题中的徽标可点击并链接到主页，但我不知道如何正确地做到这一点。

我的代码：

导航菜单：

HTML

<div id="myMenu">
            <div class="myWrapper">
                <nav>
                    <div class="logo"></div>
                </nav>
            </div>
        </div>

CSS

#myMenu
{
    width: 100%;
    height: 30px;
    z-index: 999; 
    background-color: #252e30;

}
.myWrapper
{
    max-width: 660px;
    margin: 0 auto;
}

.logo
{
    display: inline-block;
    width: 156px;
    height: 30px;
        margin-top: 5px;
        background-size: auto 43px;
    background-image: url(../images/mylogo.png);
    background-repeat: no-repeat;
}

我希望我的徽标可点击并链接到页面：Homepage.cshtml

【问题讨论】：

只需将其包含在锚标记<a><img src="logo.png" /></a>中即可。

标签： html css

【解决方案1】：

使用<a> 代替<div> 作为徽标..

【讨论】：

【解决方案2】：

您最好使用包裹在锚标记中的图像。

但是这应该可以工作：

<div class="logo" onclick="window.location.href='homepage.html'"></div>

【讨论】：

这是一种不好的做法，因为它会在没有 JavaScript（或禁用 JavaScript）的浏览器中中断。

【解决方案3】：

您不能将背景图片设为链接。将图像移动到 HTML 代码中，然后将其设为链接。

【讨论】：

这是误导。一个元素可以有一个背景图片并被链接，在视觉上使背景图片成为链接。

【解决方案4】：

不使用 CSS 将您的徽标设置为背景图像，使用 img 标记并由链接包围会有什么问题？像这样：

<div id="myMenu">
  <div class="myWrapper">
    <nav>
    <a href="/"><img src="../images/mylogo.png" height="30" width="156" /></a>
    </nav>
  </div>
</div>

这具有更易于访问的额外好处（特别是如果您在徽标上使用alt 属性），这使搜索引擎机器人更快乐。向用户传达意义的图像内容决不应该使用 CSS 设置。

【讨论】：

【解决方案5】：

<div id="myMenu">
         <div class="myWrapper">
             <nav>
                 <a href="Homepage.cshtml"><div class="logo"></div></a>
             </nav>
         </div>
    </div>

【讨论】：

哦，好吧，这很好，这里没有废话..正如你刚才所说..它有效。
@JackAllen 仅仅因为它有效，并不意味着它是正确的并且会验证。但是在这种情况下，你是对的，只要是 HTML5 中的文档。
@soyuka some reading on wrapping block elements with a.
感谢 MikeSmithDev 我真的认为这是无效的。
它暗示<a> 标签中的所有内容都是指向href 的链接，因此使用它没有任何问题，它与<a> 一样肯定是其他任何东西

【解决方案6】：

也可以像下面的例子：

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #000000;">     
      <div class="logo" >
            <a href="{% url 'major' %}">
                <img src="{% static 'images/logo.gif' %}" style="width:80px;height:80px;"/>
            </a>
      </div>
      .....
</nav>

【讨论】：