HTML标签的命名CSS标准化命名⼤全
在⼀个内容较多的HTML页⾯中，需要设计许多不同的框架，再为这些不同的框架及内容进⾏分类，给予相应的名称，从⽽使得⽹页结构更加清晰，也为⼯作提供了⽅便。许多新⼿朋友在设计⼀个HTML⽂件时，可能只会依据⾃⼰的想法随便给⼀些简单的名称，但若是⼀味的乱起名称，不仅会让团队的伙伴看不明⽩，还会导致标签名称混乱，这样会使得代码维护⼗分困难，是⾮常不利于管理的。所以我们在设计整个⽹站，还是⼀个单独的HTML页⾯，都应该要有良好的命名规则。在本⽂中，主要讲解CSS命名规则，这也包括了对HTML标签命名。
⽂件名称必须由英⽂字母开头，通常命名的规则是根据内容的分类和框架的类型翻译成英⽂单词来命名，例如：div id="nav"（表⽰为这个div是个导航条），所有单词应当⽤⼩写字母，名称中可以使⽤数字，或下划线，例如：div="main_piclist"（表⽰主要内容下的图⽚列表）、div="nav_bg.jpg"（表⽰导航条的背景图），还可以使⽤中划线进⾏名称之间的连接，例如：div="main-left"（表⽰左侧内容的布局）所有命名要尽量避免使⽤中⽂字符，要以最少的字母达到最容易理解的含义，除⾮⼀看即懂，否则尽量不缩写。
HTML标签的命名/CSS标准化命名⼤全
页⾯结构命名
1. page：代表整个页⾯，⽤于最外层。
2. wrap：外套，将所有元素包在⼀起的⼀个外围包，⽤于最外层
3. wrapper：页⾯外围控制整体布局宽度，⽤于最外层
4. container：⼀个整体容器，⽤于最外层
5. head、header：页头区域，⽤于头部
6. nav：导航条
7. content：内容，⽹站中最重要的内容区域，⽤于⽹页中部主体
8. main：⽹站中的主要区域（表⽰最重要的⼀块位置），⽤于中部主体内容
9. column：栏⽬
10. sidebar：侧栏
11. foot、footer：页尾、页脚。⽹站⼀些附加信息放置区域，（或命名为copyright）⽤于底部
导航命名
1. nav、navbar、navigation、nav-wrapper：导航条或导航包，代表横向导航
2. topnav：顶部导航
3. mainbav：主导航
4. subnav：⼦导航
5. sidebar：边导航
6. leftsidebar 或 sidebar_a ：左导航
7. rightsidebar 或 sidebar_b：右导航
8. title：标题
9. summary：摘要/li>
10. menu：菜单。区域包含⼀般的链接和菜单
11. submenu：⼦菜单
12. drop：下拉
13. dorpmenu：下拉菜单
html代码翻译中文14. links：链接菜单
功能命名
1. logo：标记⽹站logo标志
2. banner：标语、⼴告条、顶部⼴告条
3. login：登陆，（例如登录表单：form-login）
4. loginbar：登录条
5. regsiter：注册
6. tool、toolbar：⼯具条
7. search：搜索
8. searchbar：搜索条
9. searchlnput：搜索输⼊框
10. shop：功能区，表⽰现在的
11. icon：⼩图标
12. label：商标
13. homepage：⾸页
14. subpage：⼆级页⾯⼦页⾯
15. hot：热门热点
16. list：⽂章列表，（例如新闻列表：list-news）
17. scroll：滚动
18. tab：标签
19. sitemap：⽹站地图
20. msg 或 message：提⽰信息
21. current：当前的
22. joinus：加⼊
23. status：状态
24. btn：按钮，（例如搜索按钮可写成：btn-search）
25. tips：⼩技巧
26. note：注释
27. guild：指南
28. arr、arrow：标记箭头
29. service：服务
30. breadcrumb：(即页⾯所处位置导航提⽰）
31. download：下载
32. vote：投票
33. siteinfo：⽹站信息
34. partner：合作伙伴
35. link、friendlink：友情链接
36. copyright：版权信息
37. siteinfoCredits：信誉
38. siteinfoLegal：法律信息
CSS样式命名
1. 对齐样式命名：left（左边内容）、center（中间内容）、right（右边内容）等；
2. 颜⾊英⽂命名：red（红⾊）、green（绿⾊）、yellow（黄⾊），⼜或者border_red（红⾊边框）等；
3. 颜⾊代码命名：f00（红⾊）、ff0（黄⾊）、f90（橙⾊）等；
4. ⽂字⼤⼩命名：font12px（字体12像素）、font16px（字体16像素）等；
5. 页⾯线条命名：line_x （横线）、line_y （纵线）或 line_red（红线）、line_black（⿊线）
6. 图⽚图标命名：pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
7. 页⾯⼴告命名：ad_01、ad_02
8. 背景框架命名：nav_bg（代表导航条的背景图⽚位置）、tool_bg（代表⼯具栏的背景图⽚位置）CSS样式表命名
1. index.css：单独为⾸页建⽴样式
2. head.css：头部样式，多个页⾯头部设计风格相同时使⽤。
3. base.css：共⽤样式。
4. style.css：独⽴页⾯所使⽤的样式⽂件。
5. global.css：页⾯样式基础，全局公⽤样式，页⾯中必须包含。
6. layout.css：布局、版⾯样式，公⽤类型较多时使⽤，⼀般⽤在⾸页级页⾯和产品类页⾯中
7. module.css：模块，⽤于产品类页，也可与其它样式配合使⽤。
8. master.css：主要的样式表
9. columns.css：专栏样式
10. themes.css：主体样式
11. forms.css：表单样式
12. mend.css：补丁，基于以上样式进⾏的私有化修补。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。