web前端命名规范.docxVIP

web前端命名规范前端技能汇总这个项目详细记录 了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习 的方向，完善技能和知识面。frontend-dev-bookmarks是老外总结的前端开发资源。覆盖面非常广。包括各种知识点、工具、技术，非常全面。以下是个人觉得入门阶段应该熟练掌握的基础技能：HTML4，HTML5语法、标签、语义CSS2.1，CSS3规范，与HTML结合实现各种布局、效果Ecma-262定义的javascript的语言核心，原生客户端javascript，DOM操作，HTML5新增功能一个成熟的客户端javascript库，推荐jquery一门服务器端语言：如果有服务器端开发经验，使用已经会的语言即可，如果没有服务器端开发经验，熟悉Java可以选择Servlet，不熟悉的可以选PHP，能实现简单登陆注册功能就足够支持前端开发了，后续可能需要继续学习，最基本要求是实现简单的功能模拟，HTTP文本编辑器：推荐Sublime Text，支持各种插件、主题、设置，使用方便浏览器：推荐Google Chrome，更新快，对前端各种标准提供了非常好的支持调试工具：推荐Chrome自带的Chrome develop tools，可以轻松查看DOM结构、样式，通过控制台输出调试信息，调试javascript，查看网络等辅助工具：PhotoShop编辑图片、取色，fireworks量尺寸，AlloyDesigner对比尺寸，以及前面的到的Chrome develop tools，对于经验资深的前端er，在给web布局时，相信都会很注重标签和命名的规范。尤其是随着html5的普及发展，更是把web前端语义化推向一个新的台阶上。比如html5给我们新增的语义标签：header、nav、main、aside、footer、section、article等等。那么对于web语义化，有什么优势呢？一个得到广泛推崇的东西，必然有它的优势所在。web语义化：1、可以让人一目了然这块是什么鬼，那块是什么鬼，对于项目的维护或者优化都是非常有意义的。2、随着html5语义化标签的出现，我推测以后web语义化对于seo优化，还是非常有利的。也就是说，seo优化，必然也要考虑web语义化。如：<header></header>可以很好的代替传统的<div id="header"></div>。那怎样愉快的玩耍web语义化呢？1）标签语义化，如在合适的地方用合适的语义化标签，如头部可用<header>、尾部可用<footer>；2）命名语义化，包括html的id和class的命名，javascript相关命名；如#header{}、.footer{}、等。下面是常见的命名参考规范：一、主体头部：header内容：content/container尾部：footer导航：nav侧栏：sidebar栏目：column整体布局：wrapper左右中：left / right / center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：join指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner二、css注释的写法如内容区，Html注释的写法 ：<!--header头部-- >三、id的命名规范(1)页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center(2)导航导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：serv