登陸

用戶

上一篇:蘋果App Store公布最新應用審核標準:更加嚴格 下一篇:以蘇寧易購為例,看推薦運營平臺的產品實踐

轩辕传奇答题:HTML 命名規范說明

轩辕传奇职业推荐2019 www.sjxvw.icu 來源:榮華軟件   2019-04-19 09:21

一、命名規則說明: 
1)、所有的命名最好都小寫
2)、屬性的值一定要用雙引號("")括起來,且一定要有值如class="divcss5",id="divcss5"
3)、每個標簽都要有開始和結束,且要有正確的層次,排版有規律工整
4)、空元素要有結束的tag或于開始的tag后加上"/"
5)、表現與結構完全分離,代碼中不涉及任何的表現元素,如style、font、bgColor、border等
6)、標簽h1到h5的定義,應遵循從大到小的原則,體現文檔的結構,并有利于搜索引擎的查詢。
7)、給每一個表格和表單加上一個唯一的、結構標記id
8)、給圖片加上alt標簽
9)、盡量使用英文命名原則
10)、盡量不縮寫,除非一看就明白的單詞

DIVCSS5給大家介紹常見CSS命名和DIV CSS命名方法。


二、相對網頁外層重要部分CSS樣式命名:
外套 wrap ------------------用于最外層
頭部 header ----------------用于頭部
主要內容 main ------------用于主體內容(中部)
左側 main-left -------------左側布局
右側 main-right -----------右側布局
導航條 nav -----------------網頁菜單導航條
內容 content ---------------用于網頁中部主體

底部 footer -----------------用于底部


三、DIV+CSS命名參考表:  
1、以下為CSS樣式命名與CSS文件命名參考表,DIV CSS命名集合:
CSS樣式命名
   
網頁公共命名:
頁面外圍控制整體布局寬度:#wrapper  
容器,用于最外層: #container或#content  
布局:#layout    
頁頭部分:#head, #header   
頁腳部分: #foot, #footer 
主導航:#nav   
二級導航:#subnav  
菜單:#menu    
子菜單: #submenu  
側欄: #sideBar 
左邊欄或右邊欄:#sidebar_a, #sidebar_b   
頁面主體:#main  
標簽:  #tag
提示信息:#msg #message   
小技巧:#tips   
投票:#vote   
友情連接:#friendlink   
標題:  #title 
摘要: #summary  
登錄條:  #loginbar 
搜索輸入框:#searchInput   
熱門熱點:#hot   
搜索: #search 
搜索輸出和搜索結果相似:#search_output   
搜索條:#searchBar  
搜索結果:#search_results   
版權信息:#copyright   
商標: #branding 
網站LOGO標志:#logo   
網站信息:#siteinfo 
法律聲明: #siteinfoLegal    
信譽: #siteinfoCredits  
加入我們:#joinus  
合作伙伴:#partner    
服務:#service   
注冊: #regsiter  
箭頭:arr/arrow   
指南: #guild 
網站地圖: #sitemap
列表:#list   
首頁:#homepage 
二級頁面子頁面  :#subpage   
工具條:#tool, #toolbar   
下拉: #drop  
下拉菜單:#dorpmenu   
狀態:  #status 
滾動:  #scroll 
標簽頁:.tab   
居左、中、右: .left .right .center
新聞:.news     
下載:  .download 

廣告條(頂部廣告條) :.banner

電子貿易相關:

產品: .products   
產品價格:.products_prices 
產品描述: .products_description    
產品評論:.products_review   
編輯評論: .editor_review  
最新產品: .news_release  
生產商:.publisher 
縮略圖: .screenshot    
常見問題:.faqs   
關鍵詞:.keyword   
博客:.blog   

論壇:.forum

CSS文件命名    說明:  

主要的:master.css,style.css    
??椋?nbsp;  module.css
基本共用:  base.css 
布局,版面:layout.css   
主題: themes.css  
專欄:columns.css   
文字、字體:font.css   
表單: forms.css  
補?。簃end.css

打?。簆rint.css


CSS命名其它說明:
DIV+CSS命名小結:無論是使用“.”(小寫句號)選擇符號開頭命名,還是使用“#”(井號)選擇符號開頭命名都無所謂,但我們最好遵循,主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名,其它都用“.”(小寫句號)選擇符號開頭命名,同時考慮命名的CSS選擇器在HTML中重復使用調用。
通常我們最常用主要命名有:wrap(外套、最外層)、header(頁眉、頭部)、nav(導航條)、menu(菜單)、title(欄目標題、一般配合h1h2h3h4標簽使用)
、content (內容區)、footer(頁腳、底部)、logo(標志、可以配合h1標簽使用)、banner(廣告條,一般在頂部)、copyRight(版權)。其它可根據自己需要選擇性使用。

DIVCSS5建議:主要的、重要的、最外層的盒子用“#”(井號)選擇符號開頭命名,其它都用“.”(小寫句號)選擇符號開頭命名。


2.CSS樣式文件命名如下
主要的 master.css
布局,版面 layout.css
專欄 columns.css
文字 font.css
打印樣式 print.css

主題 themes.css


四、英文命名技巧:
如果遇到不常用的,可以借助翻譯工具進行翻譯取其英文命名。
推薦使用谷歌在線翻譯工具://translate.google.cn/
谷歌翻譯工具介紹://www.divcss5.com/css-tool/t346.shtml

五、 DIV命名
站點:site
首頁:homepage
導航:nav
布局:layout
搜索:search
網頁頭部:head/header
二級頁面/子頁面:subpage     subContent
登錄條:loginbar  toolbar
側欄:side/sidebar
廣告:banner
子導航:subnav
當前位置導航面包屑導航:crumb
菜單:menu
子菜單:submenu
滾動:scroll
下拉:drop
表單:form
箭頭:arr/arrow
下拉菜單:dropmenu
主題/外觀:theme
頁面主體:main
內容:content
標簽頁:tab
列表:list
工具條:tool/toolbar
轉角/圓角:cor/corner
提示信息:msg
小技巧:tips
標題:title
特別的:speciscal
資源:source
加入:join-department
指南:guild
服務:service
熱點:hot   news_hot
新聞:news
下載:download
注冊:regsiter
狀態:status
按鈕:btn
投票:vote
關于我們:aboutus
網站地圖:sitemap
合作伙伴:partner
友情鏈接:friendlink
網頁底部:foot/footer
版權:copyright
提交:submit
搜索框:searchbox
文本框:textbox
統計:count
以上結構就可以組合使用,例如:左列標題lefttitle;底部導航footernav
 
  規范不是說要所有人照一個樣子來命名css,我們可以根據自己的需要定制命名規則,只要記住命名的規則,就可以根據網站本身的特點來創造具有自己風格的命名方式。
  一、目前網頁設計者用得較多的是基于軟件開中變量的命名方式的命名方法。如對于一組用于定義字體樣式的class,我們可以使用f即foot的頭字母為前綴進行命名,如:
  f-blue:表示藍色字體樣式
  f-blod:表示粗體字體樣式
對于網頁中如新聞頻道的一些新聞的現實樣式,可以用n作為前綴進行樣式設計,如:
  n-title:新聞標題
  n-list:新聞列表
  二、我們還可以將代表各個部分的名字組合起來使用,如 ,對于上面的例子,我們可以這樣命名:
fontBlue: 表示藍色字體樣式
newsTitle:表示新聞列表
  這樣的命名方式同樣清晰明了,為大多網頁設計師所接受,只不過要特別注意大小寫的區分,css中是區別大小寫的.開始時容易出錯,多加注意便可.
  按照這樣的一些命名方式,我們可以非常明確的知道css中的每一個class的用途,便于使用和設計、維護。
想一想,你要想出很多名字來命名css也很麻煩的,是吧?
 
————————-另外一個規范——————-
 
1.CSS ID 的命名
外 套:  wrap/container
主導航:  main_nav
子導航:  subnav
頁 腳:  footet
整個頁面: content
頁 眉:  header
頁 腳:  footer
商 標:  label
標 題:  title
主導航:  mainbav(globalnav)
頂導航:  topnav
邊導航:  sidebar
左導航:  leftsidebar

右導航:  rightsidebar

旗 志:  logo
標 語:  banner
菜單內容1: menu1 content
菜單容量: menu container
子菜單:  submenu
邊導航圖標:sidebarIcon
注釋:   note
面包屑:  breadcrumb(即頁面所處位置導航提示)
容器:   container
內容:   content
搜索:   search
登陸:   Login
功能區:  shop(如購物車,收銀臺)
當前的   current
 
2.另外在編輯樣式表時可用的注釋可這樣寫:
<– Footer –>
內容區
<– End Footer –>
 
3.樣式文件命名
主要的 master.css  
布局,版面 layout.css
專欄 columns.css
文字 font.css
打印樣式 print.css

主題 themes.css

---------------------

  

       隨時隨地了解更多最新資訊,關注榮華軟件官方公眾號:ronghuasoft



0條回答

登陸后可回復

  1. 登陸
  2. 注冊
服務熱線

400-692-8081

( 周一至周五 09:00-17:00 )

聯系我們

名稱:煙臺榮華軟件科技有限公司

地址:煙臺市高新區航天路101號C棟5樓516

座機:0535-3458081

郵箱:[email protected]

Q Q:327195471

[email protected] 煙臺榮華軟件科技有限公司 版權所有 魯ICP備14003838號-1