HTML标签的命名/CSS标准化命名大全

本文转载于:猿2048网站➭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：下拉菜单
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：补丁，基于以上样式进行的私有化修补。

来源：oschina

链接：https://my.oschina.net/u/4191619/blog/3103428