文件名稱必須由英文字母開頭,通常命名的規則是根據內容的分類和框架的類型翻譯成英文單詞來命名,例如:div id= nav (表示為這個div是個導航條),所有單詞應當用小寫字母,名稱中可以使用數字,或下劃線,例如:div= main_piclist (表示主要內容下的圖片列表)、div= nav_bg.jpg (表示導航條的背景圖),還可以使用中劃線進行名稱之間的連接,例如:div= main-left (表示左側內容的布局)所有命名要盡量避免使用中文字符,要以最少的字母達到最容易理解的含義,除非一看即懂,否則盡量不縮寫。
HTML標簽的命名/CSS標準化命名大全頁面結構命名page:代表整個頁面,用于最外層。
wrap:外套,將所有元素包在一起的一個外圍包,用于最外層
wrapper:頁面外圍控制整體布局寬度,用于最外層
container:一個整體容器,用于最外層
head、header:頁頭區域,用于頭部
nav:導航條
content:內容,網站中最重要的內容區域,用于網頁中部主體
main:網站中的主要區域(表示最重要的一塊位置),用于中部主體內容
column:欄目
sidebar:側欄
foot、footer:頁尾、頁腳。網站一些附加信息放置區域,(或命名為copyright)用于底部
導航命名nav、navbar、navigation、nav-wrapper:導航條或導航包,代表橫向導航
topnav:頂部導航
mainbav:主導航
subnav:子導航
sidebar:邊導航
leftsidebar 或 sidebar_a :左導航
rightsidebar 或 sidebar_b:右導航
title:標題
summary:摘要/li
menu:菜單。區域包含一般的鏈接和菜單
submenu:子菜單
drop:下拉
dorpmenu:下拉菜單
links:鏈接菜單
功能命名logo:標記網站logo標志
banner:標語、廣告條、頂部廣告條
login:登陸,(例如登錄表單:form-login)
loginbar:登錄條
regsiter:注冊
tool、toolbar:工具條
search:搜索
searchbar:搜索條
searchlnput:搜索輸入框
shop:功能區,表示現在的
icon:小圖標
label:商標
homepage:首頁
subpage:二級頁面子頁面
hot:熱門熱點
list:文章列表,(例如新聞列表:list-news)
scroll:滾動
tab:標簽
sitemap:網站地圖
msg 或 message:提示信息
current:當前的
joinus:加入
status:狀態
btn:按鈕,(例如搜索按鈕可寫成:btn-search)
tips:小技巧
note:注釋
guild:指南
arr、arrow:標記箭頭
service:服務
breadcrumb:(即頁面所處位置導航提示)
download:下載
vote:投票
siteinfo:網站信息
partner:合作伙伴
link、friendlink:友情鏈接
copyright:版權信息
siteinfoCredits:信譽
siteinfoLegal:法律信息
CSS樣式命名對齊樣式命名:left(左邊內容)、center(中間內容)、right(右邊內容)等;
顏色英文命名:red(紅色)、green(綠色)、yellow(黃色),又或者border_red(紅色邊框)等;
顏色代碼命名:f00(紅色)、ff0(黃色)、f90(橙色)等;
文字大小命名:font12px(字體12像素)、font16px(字體16像素)等;
頁面線條命名:line_x (橫線)、line_y (縱線)或 line_red(紅線)、line_black(黑線)
圖片圖標命名:pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
頁面廣告命名:ad_01、ad_02
背景框架命名:nav_bg(代表導航條的背景圖片位置)、tool_bg(代表工具欄的背景圖片位置)
CSS樣式表命名index.css:單獨為首頁建立樣式
head.css:頭部樣式,多個頁面頭部設計風格相同時使用。
base.css:共用樣式。
style.css:獨立頁面所使用的樣式文件。
global.css:頁面樣式基礎,全局公用樣式,頁面中必須包含。
layout.css:布局、版面樣式,公用類型較多時使用,一般用在首頁級頁面和產品類頁面中
module.css:模塊,用于產品類頁,也可與其它樣式配合使用。
master.css:主要的樣式表
columns.css:專欄樣式
themes.css:主體樣式
forms.css:表單樣式
mend.css:補丁,基于以上樣式進行的私有化修補。
以上就是HTML/CSS標準化命名大全的詳細內容,html教程
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答