1.HTML命名规范及格式规范

　　标签名和属性应该都小写，虽然HTML代码不区分大小写；属性值应该用双引号闭合。

　　<IMG src=demo.jpg alt='test'/>(N)

　　<img src=demo.jpg alt="test"/>(Y)

　　给所有的关键元素定义元素的id和class,便于和CSS、javascript交互。推荐做法：根据语义和DOM树的层级关系来定义合适的名称，名称中全部使用小写，id名称中的关键词使用下划线（_）连接，class的关键词用中划线（-）连接，这样可以最大限度的保证命名不重复。

　　不推荐示例：

　　<div id="Reader">

　　<div id="introduce"class="introduce">

　　...

　　</div>

　　</div>(N)

　　推荐示例：

　　<div id="Reader">

　　<div id="Reader_introduce" class="Reader-introduce">

　　...

　　</div>

　　</div>　　

　　如果class名称仅座位javascript调用的“钩子”，则可在名称中添加“js”前缀，如下

　　<ul id="js_reader_memu">

　　<li class="memu-toc js-active">Toc</li>

　　<li class="memu-store js-active">Store</li>

　　<li class="memu-library">Library</li>

　　<li class="memu-news">News</li>

　　</ul>

　　HTML代码层级缩进为4个空格，如果元素中包含子元素，则此元素对应的起始标签和闭合标签分别独占用一行

　　不推荐示例：

　　<ul>

　　<li> item1</li><li>item2</li>

　　<li>item3</li><li>item4</li></ul>

　　推荐示例：

　　<ul>

　　<li>item1</li>

　　<li>item2</li>

　　<li>item3</li>

　　<li>item4</li>

　　</ul>

　　给HTML代码添加必要的注释。可以在页面的公共部分（页面的头部、尾部以及侧边栏等）、页面经常变化的部分（如广告栏）以及需要后端代码注入的部分添加注释。注释添加的位置在要注释的代码上单独占用一行，不要再代码行的后面直接添加，例如：

　　<body>

　　<!--main header-->

　　<div id="reader_head">

　　...

　　</div>

　　<!--动态绑定列表：toc-->

　　<ul id="reader_content_toc">

　　</ul>

　　...

　　</div>

　　</body>

　

2.CSS命名规范及格式规范

　　推荐的CSS类的命名规则和元素的id命名规范相似，只是组成类名称的关键字的连接符为中划线（-）

　　.reader-content-title{

　　...

　　}

　　为了避免重复，命名时，取父元素的class名作为前缀

　　/*父元素的样式声明*/

　　.reader-content{

　　...

　　}

　　/*子元素的class名称以父元素中的class名称作为前缀*/

　　.reader-content-body{

　　...

　　}

　　在css样式定义中，左大括号放置在选择器的同一行，并和选择器之间添加一个空格分隔，在保证可读性的基础上，缩短代码的行数；在样式声明中，属性名称和值之间用一个空格分隔，提高代码可读性。

　　不推荐示例：

　　.reader-content-title

　　{

　　backgrond:#FFF;

　　...

　　}

　　推荐示例：

　　.reader-content-title{

　　background:#FFF;

　　...

　　}

　　多个选择器具有相同的样式声明时，每个选择器应该独占一行，便于阅读和维护

　　不推荐示例：

　　h1,h2,h3{

　　font-weight:normal;

　　line-height:1.2;

　　}

　　推荐示例：

　　h1,

　　h2,

　　h3{

　　font-weight:normal;

　　line-height:1.2;

　　}

　　使用CSS美化工具做样式声明排序的工作

　　示例代码：

　　.reader-content-title{

　　background:#FFF;

　　boder:1px solid;

　　-moz-border-radius:4px;

　　-webkit-boeder-radius:4px;

　　border-radius:4px;

　　color:black;

　　text-align:center;

　　}

　　样式定义按照模块来分组，相同的模块的样式定义放在一起，不同的模块定义之间用一个空行分隔；

　　示例代码：

　　/*reader header*/

　　.reader-header-title{

　　...

　　}

　　.reader-header-introduce{

　　...

　　}

　　/*reader footer*/

　　.reader-footer-copyright{

　　...

　　}

　　.reader-footer-links{

　　...

　　}

　　在CSS中添加注释，主要分为，两种类型，文件头部的文件信息注释和正文中的解释说明性注释。文件信息一般包括文件版本，版本信息以及作者等；解释性说明性注解，有给模块的注释性和单独给选择器的注释，模块的注释则需添加注释表明模块样式定义的开始和结束，CSS选择器的注释需要添加在选择器的上一行，而不是的选择器相同一行。

　　示例代码：

　　/*注释规范说明：文件头部的文件信息注释*/

　　/*!

　　*reader content v1.0

　　*

　　*Copyright 2012

　　*Dual licensed under the MIT or GPL Version 2 licensed

　　*

　　*Desighned and built by dangjian

　　*

　　*/

　　/*注释规范说明：模块样式定义的开始和结束*/

　　/*content containers start*/

　　/*注释规范说明：注释需要添加在选择器的上一行，而不是和选择器相同的一行*/

　　/*content  title*/

　　.reader-content-title{

　　...

　　}

　　/*content containers end*/

3.javascript命名规范及格式规范

　　javascript局部变量命名采用首字母小写，其他字母大写的方式命名，命名时建议采用有意义的单词命名，不推荐使用标示变量类型的前缀，如int，str,obj等。

　　//不推荐使用：变量命名首字母大写

　　var ReaderBookMark='bookmark'

　　//不推荐使用：变量命名意义不明确

　　var object={};

　　//不推荐使用：变量命名以类型作为前缀

　　var strName='Note'

　　//不推荐使用：变量命名使用语义不明确的缩写

　　var newNT=function(){

　　...

　　}

　　//推荐示例：变量命名语义明确

　　var bookmarkDefaultTitle='UntitleBookmark'

　　公有接口的命名为首字母大写，私有接口的命名为首字母小写

　　示例代码：

　　Reader.Contect=function{

　　//私有变量

　　var info,title;

　　//私有方法

　　var getContent=function(){

　　...

　　}

　　return{

　　//公有方法

　　SetTitle:function(contentTitle){

　　title=contentTitle;

　　},

　　//公有属性

　　ContentInfo:info

　　}

　　}()

　　JQuery框架在项目中使用广泛，推荐给JQuery类型变量添加“$”作为前缀

　　示例代码

　　var $tocTitle=$('.reader-toc-title')

　　左大括号应该在行的结束位置，而不应该单独一行，因为这样增加了不必要的行数。应该一直使用大括号括起逻辑块，即使逻辑块只有一行，也应该用大括号括起来，以便提高代码的可读性和可维护性。

　　示例代码

　　//左大括号应该在行的结束位置，而不应该单独一行

　　for（var i=0;i<100,i++）{

　　doSomething(i);

　　}

　　//应该一直使用大括号括起逻辑块，即使逻辑只有一行，

　　var isFound=false;

　　if(statement){

　　isFound=true;

　　}

　　JavaScript中可以用单引号或者双引号定义字符串，但是因为习惯于定义HTML的元素属性值时使用双引号，而JavaScript中又经常包含HTML代码，所以字符串定义使用单引号也可方便于在字符串内部包含含有双引号的HTML代码。
　　示例代码：
　　var content='<span id="main_content">...';

　　空格的作用是提高代码的可读性，在函数参数的逗号后面使用一个空格，在操作符前后各使用一个空格，另外，使用一个空行来区分业务逻辑段

　　示例代码：

　　doSomething(myChar , 0 , 1);

　　where(x===y){

　　...

　　}

　　javascript语句结束时，应该添加一个分号。

　　javascript代码中，如果注释未占有多行，那么建议使用//，不推荐使用/**/。注释应单独占一行，而不是写在和代码相同一行的右边。哦CSS代码的注释规范相似，javascript代码的注释主要也是文件信息注释和代码逻辑注释

　　

　　

　　

　　

　　

　　

　　

　　

WEB学习笔记4-前端代码基本命名规法和格式规范的更多相关文章

  1. [原创]java WEB学习笔记66：Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) 使用 paramsPrepareParamsStack 重构代码 ，PrepareInterceptor拦截器，paramsPrepareParamsStack 拦截器栈

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  2. [原创]java WEB学习笔记95：Hibernate 目录

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. java web 学习笔记 编码问题总结

       java web 学习笔记 编码问题总结 1.非form表单中提交的中文参数---------------------------传递给Servlet服务器时,默认以iso-8859-1解码 ...

  4. Java Web 学习笔记 1

    Java Web 学习笔记 1 一.Web开发基础 1-1 Java Web 应用开发概述 1.1.1 C/S C/S(Client/Server)服务器通常采用高性能的PC机或工作站,并采用大型数据 ...

  5. jQuery 学习笔记：jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  6. Java Web学习笔记之---EL和JSTL

    Java Web学习笔记之---EL和JSTL (一)EL (1)EL作用 Expression  Language(表达式语言),目的是代替JSP页面中复杂的代码 (2)EL表达式 ${变量名} ( ...

  7. JAVA Web学习笔记

    JAVA Web学习笔记 1.JSP (java服务器页面) 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . JSP全名为Java Server Pages,中文名叫java服务器 ...

  8. Vue学习笔记-vue-element-admin 前端学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  9. [原创]java WEB学习笔记75：Struts2 学习之路-- 总结 和 目录

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

随机推荐

  1. 【数据结构】运输计划 NOIP2015提高组D2T3

    [数据结构]运输计划 NOIP2015提高组D2T3 >>>>题目 [题目描述] 公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n−1 条双向航道,每条航 ...

  2. 回文的范围——算法面试刷题2（for google），考察前缀和

    如果一个正整数的十进制表示(没有前导零)是一个回文字符串(一个前后读取相同的字符串),那么它就是回文.例如,数字5, 77, 363, 4884, 11111, 12121和349943都是回文. 如 ...

  3. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  4. element 树形菜单加title

    <script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpk ...

  5. 微信或QQ屏蔽域名,爆红域名如何在微信打开,如何进行微信域名防封?

    近很多朋友都会遇到这个问题,为什么我的微信域名或者QQ域名怎么总是提示拦截呢?在这里跟大家说一下吧: 第一点:就是域名里面的内容违规或者诱导被举报而导致的拦截 第二点:就是被用户或者同行恶意举报而导致 ...

  6. python 绑定方法

    一.绑定方法与非绑定方法 1.绑定方法''' 绑定方法:绑定给谁就是给谁用的 1.凡是类中的方法和函数,都是绑定给对象使用的: 2.绑定方法都有自动传值的功能.传递进去的值,就是对象本身. 3.如果类 ...

  7. shutil

    import shutil#功能是将db文件中的内容拷贝到haha这个文件中去,但是haha原有的内容会被清空#shutil.copyfileobj(open('db','r',encoding='u ...

  8. 网络编程-day2

    1 网络通信协议 Tcp udp的区别 重点(*****) TCP(Transmission Control Protocol)可靠的.面向连接的协议(eg:打电话).传输效率低全双工通信(发送缓存& ...

  9. Oracle 11g 测试ogg中断之后，重新同步操作

    测试ogg中断之后,重新同步操作 2018-06-07 17:11 779 1 原创 GoldenGate 本文链接:https://www.cndba.cn/leo1990/article/2839 ...

  10. ACCESS 查询重复记录

    In (SELECT [全称] FROM [New14] As Tmp GROUP BY [全称],[账号],[银行] HAVING Count(*)>1  And [账号] = [New14] ...