前端标签命名规范
编码
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