前言
餘為前端菜鳥,感姿勢水平匱乏,難觀前端之大局。遂決定循前端知識之脈絡,以興趣為引,輔以幾分堅持,望於己能解惑致知、於同道能助力一二,豈不美哉。
本系列程式碼及文件均在 此處
SEO
描述
SEO(search engine optimization, 搜尋引擎優化),利用搜尋引擎的搜尋規則來提高目標網站在搜尋引擎索引庫內的得分和排名。
常用
- title
- description
<meta name="description" content="xxxx" /> 複製程式碼
- keywords
<meta name="keywords" content="xxxx" /> 複製程式碼
html結構化
語義化標籤
header
, nav
, section
, aside
, article
, footer
等,詳見 github
好處
- 語義化標籤具有更豐富的含義,方便開發、維護
- 利於搜尋引擎識別頁面的各部分
- 方便其他裝置
WAI-ARIA
描述
ARIA(Accessible Rich Internet Applications, 可訪問富網際網路應用),是一個為殘疾人士等提供無障礙訪問動態、可互動web內容的技術規範
簡單瞭解
role
部分html5標籤自帶role,主要是設定元素的角色aria-
aria屬性有不少,主要是控制元素的一些行為表現
這一part其實不是很感興趣,點到為止,詳細內容參考大漠老師的 WAI-ARIA 無障礙Web規範
web components
標準化的元件封裝
每個元件組織自己的html/css/js,不影響頁面其他部分
shadow dom
通過shadow dom建立子dom樹,和主文件流互不干擾
使用
- 元件內定義好html結構和樣式,也即模板
- 通過js指令碼將模板轉為dom elment並插入到shadow root
- 在document上註冊一個自定義的key
- 元件被link引用後,可以直接使用這個key作為自定義標籤使用
- 具體程式碼見 github
好處
- 無侵入、標準化元件
- 語義化,結構化
雖發表於此,卻畢竟為一人之言,又是每日學有所得之筆記,內容未必詳實,看官老爺們還望海涵。