幾個 HTML 秘訣

不久前才有一篇文章聊到某些 CSS 秘訣,接著再來跟大家聊聊 HTML 的竅門了!本文將提點某些 HTML 程式碼的小訣竅與建議,其中更有幾點很適合初學者納為己用,例如適當分段落、使用標題標籤、改善表單。但我們仍會討論圖像的 SVG sprites,以及更進階的。

文字方面

段落

我們寫的大多數程式碼必須再予以分段,這時應該使用 <p> 這個 HTML 元素分段。請勿使用 <br> 斷行標籤切割出文字的段落;斷行標籤本來就不是這種用法。

避免:

建議:

 

斷行標籤應用於詩、歌的斷行:

 

標題

標題標籤從 <h1><h6>,各自代表 1 (最重要) 到 6 (最不重要) 的等級。

為正確傳達語義,請依照順序使用標頭,而不要只顧及瀏覽器所將繪製的標頭效果。若只是單純需要字體大小的效果,你可以、也應該使用 CSS 達到你所需。

避免:

 

建議:

 

另外應該考慮的,就是該如何搭配標題來建立子標題或標籤行。根據 W3C 的建議 ,應使用一般文字標記 (Markup),而避免較低層級的標題。

避免:

 

建議:

 

表單方面

提示欄位輸入文字

<input> 表單元素中的輸入欄位提示文字 (Placeholder),可為使用者呈現範例值,並在使用者於該欄位輸入時自動消除。此提示文字即是某一欄位的有效格式範例。

但現有的實作上,有很多提示文字都如同 <label> 元素「告知此為何種欄位」的作用,而不是作為有效輸入值的範例。這種實作的親和度較低,開發者更應避免之。

避免:

 

建議:

 

行動裝置的鍵盤

針對如手機或平板電腦等行動裝置上的瀏覽活動,理應提供打字秘訣給使用者。只要為我們所使用的 <input> 元素選出正確的類別,就能達到此效果。

舉例來說,type="number" 可讓手機顯示數字鍵盤,而非常見的英數字元鍵盤。同理,type="email"type="tel" 等都是。

避免:

 

建議:

 

下圖的左、右兩邊分別是用 type="text"type="tel" 所顯示的鍵盤:

 

keyboard comparison

圖像

來認識 SVG 檔案!你不僅可以透過 <img> 標籤使用向量圖片:

也可以在自己的網站中使用 SVG sprites 實作向量圖示,藉以取代 Web Font。因為瀏覽器將 Web Font 圖示當做文字而非圖像,所以 Web Font 可能無法產生較平滑的線條而發生鋸齒效果,且還有如內容\廣告阻擋軟體可能阻擋下載 Web Fonts 等的潛在問題。你可欣賞由 Sarah Semark 主講的影片,進一步了解 SVG 較 Web Font 更優於用做圖示的理由。你也可參閱 CSS-Tricks 知道此一技術。

其實 SVG sprites 的概念與 CSS sprites 極為類似。實作上必須將所有的 SVG 靜態檔案 (Asset) 融入單一圖像檔案之中。在 SVG 的狀態下,所有靜態檔案應包裹進單一 <symbol> 標籤之中,如下所示:

 

接著,可在你的 HTML 中透過類似的 <svg> 標籤使用該圖示。我們這裡即以 SVG 檔案指向 symbol ID:

 

建立 SVG spritesheet 看起來太麻煩了嗎?所以才有類似「gulp-svgstore」的工具,可自動進行整個程序,依據各個靜態圖像檔案產生 1 組 spritesheet。

另請記得,因為我們是以 <svg> 標籤取代 <img> 來包裹圖像,所以也能透過 CSS 套用樣式。如此一來,你用 Web Font 圖樣達到的酷炫效果,也同樣能用 SVG 圖樣完成。

 

但 CSS 仍有某些限制,如當使用 SVG 並以 <use> 連至 <symbol> 之時,圖像會透過 Shadow DOM 投射,讓我們無法使用某些 CSS 功能。在此情況下,我們就不能擇優挑出 SVG 的元素並套用樣式,且某些屬性 (如 fill) 也只能套用到尚未定義的元素。但 Web Font 圖樣也是相同情況喔!

在下列展示裡,你可看到 SVG sprite 的運作範例。只要滑鼠游標移到圖像之上,火把上的火焰就會透過 CSS 改變其顏色。


希望這些秘訣能幫到你。如果你有任何問題,或要對大家分享自己的秘訣,歡迎在下方留言!

 

 

原文連結:A few HTML tips

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *