HTML與CSS 開發經常使用語義化命名

1、佈局❤️

header 頭部/頁眉；
index 首頁/索引；
logo 標誌；
nav/sub_nav 導航/子導航；
banner 橫幅廣告；
main/content 主體/內容；
container/con 容器；
wrapper/wrap 包裹（相似於container）；
menu 菜單；
sub_menu/second_menu 子菜單/二級菜單；
list 列表；
section 分區/分塊（相似於div）;
article 文章；
aside 側邊欄/廣告；
footer 頁腳/底部；
title/sub_title 標題/副標題；
news 新聞；
hot 熱點；
pro 產品（product）；
company 公司；
msg/info 信息（message）/消息；
ads 廣告（advertisements）;
icon 小圖標；
img 圖片（image）；
copyright 版權；
contact_us 聯繫咱們；
friend_link 友情連接；
tel 聯繫電話（telephone）；
address 地址；

2、CSS樣式（style）❤️

CSS 層疊樣式表 (Cascading Style Sheets) ；
background 背景；
position 位置/定位；
relative/absolute/fixed 相對定位/絕對定位/固定定位；
float 浮動；
clear 清除；
vertical-align: middle/top/bottom; 垂直居中/上/下；
line-height 行高；
margin 外邊距；
padding 內邊距；
border 邊框；
solid/dashed/dotted 實線/線虛線/點虛線；
border-radius 圓角；
shadow 陰影；
display 展現；
hidden 隱藏；
block/inline-block 塊元素/行內塊；
overflow 溢出；
cursor 光標；
animation 動畫；
css sprites 雪碧圖/圖片精靈；
column 分列；
flex 彈性（佈局）；

3、表單（form）與表格（table）❤️

form 表單；
action 行爲；
method 方式/方法；
input 輸入框；
label 標籤；
password 密碼；
radio 單選框；
checkbox 複選框；
btn 按鈕（button）；
submit/reset 提交/重置；
textarea 文本域；
select/option 選擇框/選擇項；
placeholder 佔位符（起提示做用）；
search 搜索；
icon 小圖標；
autofocus 自動聚焦；
disabled 禁用；
checked 選中（單選框/複選框）；
selected 默認選擇項（下拉選擇框）；
required 必填項；
readonly 只讀；
table 表格；
thead/tbody/tfoot 表格標題/主體/底部；
colspan 跨列；
rowspan 跨行；
cellspacing 單元格間距（相似於margin）；
cellpadding 單元格邊距（相似於padding）；
border-collapse: collapse; 邊框合併（用於table上）；