在HTML5中使用徽標的正確方法

在網站中放置徽標的有效方法是什麼？在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>

來源

2017-04-27 Critfame

我建議第二個更好 –

我會使用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; 
}

來源

2017-04-27 00:40:40 scottohara

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

來源

2017-04-27 08:02:13 GibboK

這取決於你想要的位置。你提到的第一種方法很困難，因爲你將它定位爲一個元素（該位置取決於父節點/元素），無論父節點/元素是什麼。

這就是說，我更喜歡使用除文本以外的其他方法。你必須認識到，當你設置<a>標籤的CSS屬性時，它們是爲了封裝文本（而不是圖像），所以當它被渲染時，你將不得不做出奇怪的調整，你不願意否則不得不使（例如在CSS中設置line-height屬性而不是height屬性）。

我肯定會用第二種方法。

如果它看起來很有趣，請確保在您的CSS中將a標記的text-decoration屬性設置爲none。

來源

2017-04-27 08:11:33 ihodonald

在HTML5中使用徽標的正確方法

回答

相關問題