HTML篇

一、頁面結構語義化

• 為什麼需要語義化
  • 易修改、易維護
  • 無障礙閱讀支援
  • 搜尋引擎友好、利於SEO
  • 面向未來的HTML,瀏覽器在未來可能提供更豐富的支援。
• 結構語義化
  

• header： 元素有兩種用法，一種是標註內容的標題，第二種的標註網頁的頁首。
• nav： 導航欄，通常僅僅在頁面的主要導航部分使用
• aside : 不僅僅是側欄，他標識與它周圍文字滅有密切關係的內容。當aside用於側欄時，其標識整個網頁的附加內容。通常的廣告區域、搜尋、分享連結則位於側欄。側欄職工的section元素規定了一個區域，通常是帶有標題的內容。
• section標籤適合標記的內容區塊：
  （1）：與頁面主題並列顯示的小內容快
  （2）： 獨立性內容，清單、表單等
  （3）： 分組內容，如cms系統各種的文章分類區塊
  （4）：比較長文件的一部分，可能僅僅是為了正確規定頁面大綱
  div標籤依然是可用的，當你覺得使用其它標籤都不太合適的時候。新的語義元素出現之前，我們總是這麼幹的。
  • footer 僅僅可以包含版權、來源資訊、法律限制等等之類的文字或連結資訊，如果想包含其他內容請使用div 來幫忙
  • main 標籤不能包含在頁面其他區塊元素中，通常是body的字標籤，或者是全域性div的子標籤。main標籤可以幫助品目閱讀工具識別頁面的主題部分，從而讓訪問者迅速得到有用的資訊。
  • article 表示一個完成的、自稱一體的內容塊，如文章或新聞報導。這裡主要寫的是文章，應包含完成的標題、文章書名、釋出時間、正文。
  • figure 文章中包含插圖時，使用更新寓意元素figure.figcaption包含了關於插圖的詳細解釋，所以img元素上的alt可以省略不寫。