iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

意識界歸來的前端 系列

為前一部「30 天轉生到 bootstrap 5 的意識界」的續集。

講述在現實世界昏迷一年後突然甦醒過來後,分享這一年以來在意識界中,所有發生和前端切版相關的故事。

鐵人鍊成 | 共 30 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文
DAY 1

logo 圖片取代文字 background、img 標籤差異

此篇會介紹常用的兩種 logo 常用的技巧 background、img 標籤。 img img 會將文字設置為 alt 屬性的值。 <a hr...

2022-09-16 ‧ 由 Kent 分享
DAY 2

多個 h1 標籤

此篇會針對網站中能否「使用多個 h1?」這個問題來探討。 Q:再討論 h1 標籤之前,可以先聊聊為什麼需要標題標籤(heading tags)A:依照 重要...

2022-09-17 ‧ 由 Kent 分享
DAY 3

3 件關於網站架構、網站閱讀性的小事

Google 爬蟲透過解析網站架構,來理解網站的內容和重點,而對於好的「網站架構」來說,「網站可讀性」可是一大重點。 此篇不是要介紹如何提升 SEO,而是在探討...

2022-09-18 ‧ 由 Kent 分享
DAY 4

新手常見的標籤錯誤用法

此篇會透過實際的範例,來介紹一些新手剛開始使用標籤時,可能會遇到的狀況。 p 標籤 br 標籤 ul 標籤 h1~h6 標籤 p 標籤 <p&g...

2022-09-19 ‧ 由 Kent 分享
DAY 5

行內元素特性與常見錯誤用法

此篇會介紹幾個新手在使用 inline 行內元素時常發生的問題。 開始前先來複習一下 行內元素 特性 不能修改寬高(寬高取決於內容本身) 擁有並排特性(不...

2022-09-20 ‧ 由 Kent 分享
DAY 6

vertical-align 與行內元素空白空隙

前一篇簡單介紹了行內元素特性(還不同的朋友可以先觀看前一篇),此篇會簡單演示兩種行內元素常見出現空白空隙的狀況以及如何解決。 下方空隙 inline 元素...

2022-09-21 ‧ 由 Kent 分享
DAY 7

行內元素顯示結果不如預期

此篇會基於前兩篇介紹的行內元素常見誤區、關於行內元素的空白所介紹的特性和問題,來延伸介紹三個常見深受 inline 行內元素特性其害的標籤。 偽元素:偽元...

2022-09-22 ‧ 由 Kent 分享
DAY 8

vertical-align: middle 上方空隙

此篇主要為回答,前面這篇提到的「icon 使用 span 標籤父層 a 標籤高度比子層高」解法為什麼沒有 vertical-align: middle? 因...

2022-09-23 ‧ 由 Kent 分享
DAY 9

img 下方空隙與 vertical-align 的關係

此篇不會討論 img 下方空隙如何解決以及怎麼產生的,有興趣可以看前面這篇文章。 這邊主要探討 img 解決下方空隙的方法,為什麼 vertical-alig...

2022-09-24 ‧ 由 Kent 分享
DAY 10

section 標籤、article 標籤常見的錯誤使用方法

此篇會主要會圍繞在 section 標籤、article 標籤兩者使用範例以及常見的錯誤情境,最後會回答一個問題:「是 section 包 article,還...

2022-09-25 ‧ 由 Kent 分享