html的命名規範
命名規範
- 見名知義
- header 頭部 menu菜單欄 banner導航欄 show顯示
- 不要用拼音 或漢語
- 不準數字開頭命名
- 可以用下劃線或橫槓命名 ,一般用來拼兩個名字
命名的兩種方式
- class類命名:指代一類用法
- 可以使用多個類命名
- id命名
- 具有唯一性
企業命名規範
標題: title
摘要: summary
箭頭: arrow
商標: label
網站標誌: logo
轉角/圓角: corner
橫幅廣告: banner
子菜單: subMenu
搜索: search
搜索框: searchBox
登錄: login
登錄條:loginbar
工具條: toolbar
下拉: drop
標籤頁: tab
當前的: current
列表: list
滾動: scroll
服務: service
提示信息: msg
熱點:hot
新聞: news
小技巧: tips
下載: download
欄目標題: title
熱點: hot
加入: joinus
註冊: regsiter
指南: guide
友情鏈接: friendlink
狀態: status
版權: copyright
按鈕: btn
合作伙伴: partner
投票: vote
左/右/中:left/right/center
簡介:profiles
評論:comment
ID命名
(1)頁面結構
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
(2)導航
主導航:mainbav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
(3)功能
標誌:logo
廣告:banner
登陸:login
註冊:regsiter
搜索:search
功能區:shop
標題:title
加入:joinus
狀態:status
按鈕:btn
滾動:scroll
標籤頁:tab
文章列表:list
提示信息:msg
當前的: current
小技巧:tips
圖標: icon
註釋:note
指南:guild
服務:service
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:link
版權:copyright
class命名
(1)顏色:使用顏色的名稱或者16進制代碼,如:
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字體大小,直接使用"font+字體大小"作爲名稱,如:
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標的英文名稱,如:
.left { float:left; }
.bottom { float:bottom; }
(4)標題欄樣式,使用"類別+功能"的方式命名,如:
.barnews { }
.barproduct { }
標籤嵌套遵循的規則
- p dt h標籤 裏面不能嵌套塊屬性標籤
- a標籤不能嵌套a標籤
- 塊級元素可以包含內聯或某些塊級標籤
- 行內元素可以嵌套行內元素 特殊:a標籤不能嵌套a標籤
初級選擇器
- *通配符選擇器 選擇到所有的標籤
- 標籤選擇器 選擇到所對應的tag標籤
- 類選擇器 (class) 選擇到.class所對應的類
- id選擇器 選擇到id命名的元素
- 後代選擇器 之間是空格 是選擇到tag1裏面的子元素tag2
- div.p 是選擇到是div標籤 他的名字是p
標籤的語義化
有了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取,你網站的推廣便可以省下不少的功夫。
背景屬性
- background-image 背景圖片 會覆蓋背景顏色
- background-repeat 背景平鋪 background-repeat:repeat-x 水平方向平鋪 repeat-y 垂直方向平鋪
- background-color 背景顏色
- background-position 背景定位 方位值
- x水平方向: left center right
%
px距離上邊
- y垂直方向: top bottom center
%距離左邊
px
- background-size 背景圖片的大小 只給一個值 第二個會默認auto
- x:px %
- y: px contain 等比例縮放x軸和y軸 直到接觸到邊緣爲止
- 背景圖片綜合寫法 color image repeat position /size cover 按照盒子最大邊等比例縮放
- background-attachment:fixed