前端标签命名规范

编码

1. 必须有DOCTYPE

2. 必须指定字符编码，如utf-8，gb2312

3. 页面中必须包含一个title元素，内容少于60字，包含网站名字和页面主题

 

框架标签（强制使用所列出的命名）

5. 页面至少且只能有一个h1，h1一般用在网站logo，<h1 class="logo"></h1>

从h2开始，每个hn前面至少有一个h(n-1)

6. 页头header，页面主体main，页底footer，外框container/wrap

<div class ="container">

<div class ="header"></div>

<div class ="main"></div>

<div class ="footer"></div>

</div>

7. 页面主体左列leftSidebar，内容区content，页面主体右列rightSidebar

<div class ="main">

<div class ="leftSidebar"></div>

<div class ="content"></div>

<div class ="rightSidebar"></div>

</div>

 

8. 面包屑breadCrumbNav，<div class="breadCrumbNav"></div>

 

9. quickLink快速链接，用来快速到达某一位置的链接列表。<div class="quickLink"></div>

 

10. mainNav网站主导航，subNav网站子导航。

 

<div class ="mainNav">

<div class ="subNav"></div>

</div>

 

11. search搜索区块。<form class ="search"></form>

 

13. copyright版权信息。<div class ="copyright"></div>

14. sitemap网站地图。<div class ="sitemap"></div>

 

15. friendLink友情链接。<div class ="friendLink "></div>

 

16. loginBar登录口。< form class ="loginBar "></form>

 

17 changePage分页码

<ul class ="changePage">

<li><a href="#" title="首页">首页<a></li>

<li><a href="#" title="上一页">上一页<a></li>

<li><a href="#" title="第 1 页">1<a></li>

<li><a href="#" title="第 2 页">2<a></li>

<li><a href="#" title="下一页">下一页<a></li>

<li><a href="#" title="尾页">尾页<a></li>

</ul>

 

18. 其他标签

广告：banner      菜单：menu      子菜单：subMenu  下拉菜单：dropMenu  工具条：toolbar  表单：form         栏目：column   箭头：arrow

滚动：scroll       注释：note        标签页：tab         文章列表：list     

提示信息：msg     小技巧：tips       栏目标题：title       加入：joinus      指南：guild        服务：service      热点：hot           新闻：news       下载：download     注册：regsiter      状态：status        按钮：btn         投票：vote         合作伙伴：partner   外套：wrap         商　标：label   

 

 

尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名。尽量用英文，不加中杠和下划线。

 

 [元素类型]+[元素功能/内容]

 

如:搜索按钮: btnSearch，searchBtn

 

登录表单: formLogin，logonForm

 

新闻列表: listNews