前端标签命名规范

编码

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

时间: 2024-11-05 12:09:04

前端标签命名规范的相关文章

前端CSS命名规范大全

文章整理了Web前端开发中的各种CSS规范,包括文件规范.注释规范.命名规范.书写规范.测试规范等. 一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件,放在如下目录中: 读书 /css/book/ 电影 /css/movie/ 音乐 /css

Puppet主机、模块、类、资源、变量、参数、标签命名规范

Puppet命名规范: 约定说明: 小写字母:"a-z" 大写字母:"A-Z" 数字: "0-9" 句号: "." 下划线: "_" 连字符: "-" 冒号: ":" 1.主机命名: 规范:/\A[a-z0-9._-]+\Z/ 推荐:角色-运营商-机房-IP.系统.域名   web-cnc-bj-174.129.158.192.centos.linuxtone.org

CSS+DIV标签命名规范 搜索引擎最喜欢

搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很关键的步骤.为了更加符合SEO的规范,下面是目前流行的CSS+DIV的命名规则: 登录条:loginBar  标志:logo  侧栏:sideBar   广告:banner   导航:nav   子导航:subNav   菜单:menu   子菜单:subMenu   搜索:search   滚动:scroll   页面主体:main   内容:content   标签页:tab   文章列表:list   提示信息:msg   小技

前端代码命名规范

(1)HTML代码规范 1.标签名和属性都使用小写,虽然HTML代码不区分大小写,但是推荐在书写HTML代码时,使用小写. 2.属性值使用双引号闭合. 3.给所有关键元素东定义id和class,便于和CSS.JavaScript交互. 4.id中的关键词使用下划线(_)连接,class中的关键词使用中划线连接(-). 5.如果class名称仅仅用作JavaScript钩子,可在名称中添加"js-"前缀. 6.如果元素包含子元素,则起始标签和结束标签应该各自独占一行. (2)CSS代码规

前端的命名规范

1. 尽量不缩写,除非一看就明白的单词2. 只有一个单词时候一律小写3. 尽量用英文4. 全局:global.css5. 私有:style.css6. 帕斯卡命名法(驼峰命名法) 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻

常用html、CSS、javascript前端命名规范

常用html.CSS.javascript前端命名规范 无意发现自己文件夹里面有这么一个文件,具体从哪里来的不记得了,仔细看下,发现总结的挺好的,贴出来分享一下. 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本

要想成为前端大神,那些你不得不知晓的web前端命名规范。

一.Web语义化 1.1 H5的语义化 对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范.尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上.比如html5给我们新增的语义标签:header.nav.main.aside.footer.section.article等等.那么对于web语义化,有什么优势呢? 1.2 语义化优势 可以让人一目了然代码结构块,对于项目的维护或者优化都是非常有意义的. 语义化能提高页面SEO.如:<header><

后端前端命名规范

python命名规范:#类名class(静态变量): 单词首字母大写AdStats,MyClass#全局变量名:大写字母,单词之间用_分割COLOR_WRITE,from M import *导入语句#实例变量:以_开头_instance_var#私有实例变量(外部访问会报错): 以__开头(2个下划线)__private_var# 专有变量:__开头,__结尾__doc__,python的自有变量,不要以这种方式命名XXx # 普通函数:get_name() fn_my_example() #

web前端命名规范

在做web项目的时候,命名的规范是很重要.初学者一般急于求成对命名规范没有概念,觉得花时间这些还不如多看几遍框架.其实在我看来,一个良好的命名习惯是很重要的.下面就来介绍一下我总结的命名规范: (1) 1.全部用小写字母 2.不用拼音 (2) 页面主体:main; 整体布局:wrapper; 页面的头部:header; 标志:logo; 导航:nav; 菜单:menu; 子菜单:submenu; 标题:title; 主导航:mainnav; 子导航:subnav; 搜索:search; 内容:c