[toc] ### web語義化 一個得到廣泛推崇的東西，必然有它的優勢所在，web語義化可以讓人一目了然每塊的功能，對于維護或者優化都是非常有意義的  ### 一、主體 頭部：header 內容：content/container 尾部：footer 導航：nav 側欄：sidebar 欄目：column 整體布局：wrapper 左右中：left / right / center 登錄條：loginbar 標志：logo 廣告：banner 頁面主體：main 熱點：hot 新聞：news 下載：download 子導航：subnav 菜單：menu 子菜單：submenu 搜索：search 友情鏈接：friendlink 頁腳：footer 版權：copyright 滾動：scroll 標簽頁：tab 文章列表：list 提示信息：msg 小技巧：tips 欄目標題：title 加入：join 指南：guild 服務：service 注冊：regsiter 狀態：status 投票：vote 合作伙伴：partner ### 二、css注釋的寫法 如內容區，Html注釋的寫法 ：  ### 三、id的命名規范 #### (1)頁面結構 容器: container 頁頭：header 內容：content/container 頁面主體：main 頁尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體布局寬度：wrapper 左右中：left right center #### (2)導航 導航：nav 主導航：mainnav 子導航：subnav 頂導航：topnav 邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 菜單：menu 子菜單：submenu 標題: title 摘要: summary #### (3)功能 標志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊：regsiter 搜索：search 功能區：shop 標題：title 加入：joinus 狀態：status 按鈕：btn 滾動：scroll 標簽頁：tab 文章列表：list 提示信息：msg 當前的: current 小技巧：tips 圖標: icon 注釋：note 指南：guild 服務：service 熱點：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情鏈接：link