在HTML5中使用徽标的正确方法

问题描述：

<a href="#" class="logo"></a>

和CSS

a.logo 
{ 
    display: block; 
    background-color: transparent; 
    background-image: url("images/logo.png"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    width: auto; 
    height: auto; 
}

<a href="#"><img src="images/logo.png"></a>

我建议第二个更好 –

我会使用img标签。更适合用户（可能想要保存徽标）或在搜索引擎中编制索引。 – JoeMecPak

我第二个建议。另外，'a.logo'选择器可能不需要'a'部分，它可以只是'.logo'。 –

答

第二个选项是绝对美好的事业有一个在<a>没有内容与CSS唯一的选择。

<a href="/"> 
    <img src="#" alt="Company Name"> 
</a>

如果你打算去与CSS唯一的选择，你会想做到以下几点：

<a href="/" aria-label="Company Name"></a>

或

<a href="/"> 
    <span class="sr-only">Company Name</span> 
</a>

至于你的CSS关注，你会想要做这个与图像选项：

.logo { 
    display: inline-block; 
} 

.logo img { 
    display: block; 
}

如果用的非图像选项之一下去，你会想要做的事，如：

.logo { 
    display: inline-block; 
    width: /* necessary width */; 
    height: /* necessary height */; 
    background: /* necessary background values */ 
}

编辑：屏幕读者仅类视觉上隐藏的内容，但其提供给屏幕阅读器：

/* ie9+ */ 
.sr-only:not(:focus):not(:active) { 
    clip: rect(0 0 0 0); 
    clip-path: inset(100%); 
    height: 1px; 
    overflow: hidden; 
    position: absolute; 
    white-space: nowrap; 
    width: 1px; 
}

aria标签和sr-only课程是怎样的？如果您关心辅助功能，只需在锚点元素上使用“alt”标记即可。 –

请注意，['aria-label'在链接上不一致]（https://www.w3.org/TR/aria-in-html/#practical-support-aria-label-aria-labelledby-and- aria-describedby） – Alohci

@EdmundReed - 在一个锚元素上不会做任何事情。 – Alohci

答

你有两种不同的选择：

HTML：

使用带有CSS属性的div或a标签background-image: url("images/logo.png"); 在这种情况下，您的徽标是栅格图像栅格图像（pnh/jpg/gif）。

SVG：

使用SVG您的标志是载体，或向下可以扩大，但未得到解决的任何损失，这可能是一个很好的解决方案，如果您计划创建一个响应式设计，其中的标志大小可能因设备而异。

SVG链接示例： http://codepen.io/chriscoyier/pen/lCEux

答

这取决于你想要的位置。你提到的第一种方法很困难，因为你将它定位为一个元素（该位置取决于父节点/元素），无论父节点/元素是什么。

这就是说，我更喜欢使用除文本以外的其他方法。你必须认识到，当你设置<a>标签的CSS属性时，它们是为了封装文本（而不是图像），所以当它被渲染时，你将不得不做出奇怪的调整，你不愿意否则不得不使（例如在CSS中设置line-height属性而不是height属性）。

我肯定会用第二种方法。

如果它看起来很有趣，请确保在您的CSS中将a标记的text-decoration属性设置为none。

在HTML5中使用徽标的正确方法

相关推荐