HTML项目代码编写规范_html/css_WEB-ITnose
Jun 24, 2016 am 11:45 AM
如果本文档中有任何错误的、不符合行规的,敬请斧正。
引言
不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。
若您对本文档中任何内容有不明白的,或者感觉不合行规的,请您按以下格式向我邮件说明,同时也欢迎任何人参与讨论,共同完善本文档。本文档中很多也是根据我自己现在的公司需求来定的。
邮件不是QQ,请尽可能清晰的组织你的语言,将问题描述得更清楚,同时,不要使用过多的样式化,合乎文档排版标准,谢谢。
项目文件结构
前端项目文件结构
前端项目统一按以下目录结构管理项目文件:
/path/to/PROJECT_NAME/ scss/ base.scss main.scss _module_name.scss scripts/ build.js gulp.js build/ vendor/ THIRD_PARTY_LIBRARY_NAME/ VERSION/ MINIFIED_FILE_NAME/ assets/ css/ base.min.css base.min.map main.min.css main.min.map img/ logo.png logo@2x.png logo@3x.png js/ main.min.js main.min.map index.html layout.html PAGE_NAME.html template/ vendor/ THIRD_PARTY_LIBRARY_NAME/ VERSION/ MINIFIED_FILE_NAME/ assets/ css/ base.css main.css img/ logo.png js/ main.js index.html layout.html PAGE_NAME.html
在上面的目录结构中,大写的名称为可变的,即根据具体需求随时更换,它们的语义分别为:
-
PROJECT_NAME
当前项目的英文名称(若叮当钱包官方无法给出标准翻译,或者拼音即是其名称,则使用拼音全称,或者使用其官方定义的短名称),由纯小写字母 a-z 或者数字 0-9 以及中划线 - 组成的字符串
-
template
模板目录,用于开发使用
-
build
构建目录
-
vendor
所有第三方的文件均存放在 vendor 目录中,在 vendor 中,任何第三方库、样式、脚本等均需要遵守以下规则存放:任何一个第三方库均需要存放在其名称下,在开发过程中,使用 bower 安装。
HTML标准说明
文档类型
任何一个HTML页面,均必须使用下面这个文档类型声明:
<!DOCTYPE html>
在叮当钱包的任何项目的 HTML 界面中,不允许出现该声明之外的任何声明。
合法性验证
合法的使用HTML,并利用w3c的工具(W3C HTML validator)进行检查。
语义性
根据目的合理使用HTML标签,例如 header、footer、nav、section 等标签,跟 div 十分类似,但是在语义上却有天壤之别,比如下面这样:
<article class="entry"> <header> <h1 id="读-双城记">读《双城记》</h1> </header> <section class="content"> <p><strong>《双城记》</strong>(英语:<em>A Tale of Two Cities</em>)是英国作家查尔斯·狄更斯所著的一部以法?大革命为背景所写成的长篇历史小说,情?感人肺腑,是世界文??典名著之一,故事中?巴黎、?敦??大城市??起?,围绕着曼奈特医生一家和以德法奇夫妇为首的圣安东尼区展开故事。小说里描写了贵族如何败坏、如何残害百姓,人民心中积压对贵族的刻骨仇恨,导致了不可避免的法国大革命。本书的主要思想是为了爱而自我牺牲,?名中的「?城」指的是<strong>巴黎??敦</strong>。</p> <h2 id="人物介">人物介?</h2> <ul> <li>曼奈特?生(Dr. Alexandre Manette),一位老政治犯。</li> <li>露西·曼奈特(Lucie Manette),曼奈特?生的女?。</li> <li>查?斯·丹尼(Charles Darney),厄弗?蒙地侯爵的?子,?上露西·曼奈特。</li> <li>雪尼?卡?(Sydney Carton),一位?世嫉俗的律?,?上露西·曼奈特。</li> <li>德法奇(Ernest Defarge),曼奈特?生?日的?人。</li> <li>德法奇夫人(Madame Defarge/Teresa Defarge),一位?定的女革命者。</li> <li>?翰·拔沙(John Barsad),一位??。他的真?名字是索??(Solomon Pross) ,是波希小姐(Miss Pross)的哥哥。</li> <li>波希小姐(Miss Pross),露西的保姆。</li> <li>??·?利(Roger Cly),另一位??,?翰·拔沙的夥伴</li> </ul> </section></article><!-- /.entry -->
协议头
建议在指向图片、样式表、JavaScript脚本或者其它媒体文件的URL地址中省略 http: 与 https: 协议部分,除非已知相应文件不能同时兼容这两个协议,比如:
我们不推荐下面这种方式:
<script src="http://www.doraemoney.com/vendor/jquery/2.1.3/jquery.min.js"></script><link rel="stylesheet" href="http://assets/css/style.css"/><style> .example { background: #fff url(http://www.doraemoney.com/assets/img/example-background.png) no-repeat center; }</style>
你应该像下面这样写:
<script src="//www.doraemoney.com/vendor/jquery/2.1.3/jquery.min.js"></script><link rel="stylesheet" href="//assets/css/style.css"/><style> .example { background: #fff url(//www.doraemoney.com/assets/img/example-background.png) no-repeat center; }</style>
另外的示例,比如通过 标签引入图片,我们同样不推荐这样写:
<img class="logo lazy" src="/static/imghw/default1.png" data-src="http://www.doraemoney.com/assets/img/logo.png" alt="叮当钱包"/>
而应该这样写:
<img class="logo lazy" src="/static/imghw/default1.png" data-src="//www.doraemoney.com/assets/img/logo.png" alt="叮当钱包"/>
代码缩进
不允许在任何 HTML、CSS 以及 JavaScript 代码中使用 Tab 进行缩进,且所有的缩进只允许使用两个空格 __ ,如下面这样是正确的:
<a class="brand"> <img src="/static/imghw/default1.png" data-src="//www.doraemoney.com/assets/img/logo.png" class="lazy" alt="叮当钱包" /></a>
而下面这样均为错误的:
<a class="brand"> <img src="/static/imghw/default1.png" data-src="//www.doraemoney.com/assets/img/logo.png" class="lazy" alt="叮当钱包" /></a>
大小写
所有的代码都应该是小写的,包括元素名称、属性、属性值(除非 text 或者 CDATA 的内容)、选择器、CSS属性以及属性值,如下面这样均是错误的:
<A HREF="http://www.doraemoney.com" TITLE="叮当钱包官方网站首页" CLASS="Brand"/>叮当钱包</A>
正确的写法应该是:
<a href="http://www.doraemoney.com" title="叮当钱包官方网站首页" class="brand">叮当钱包</a>
对于资源文件的命名,我们同样要求全部使用纯小写字母,同时,多个单词间使用中横线分割(-),同时,不允许在命名中出现空格,英文字母必须放在第一个位置, - 不允许出现在名称格式后缀小数点 . 的前面,如下面这样就是正确的命名方法:
logo.pngexample-background.pngassets/css/base.css
而下面这些均是错误的:
logo-.png-logo.png0logo.pngexample background.pngExample-Background.pngExampleBackground.pngAssets/Css/Base.css
尾随空格
尾随空格是绝对不允许的,容易让 diff 更加复杂,比如下面这样是不允许的:
<h2 id="什么是叮当钱包">什么是叮当钱包? </h2><p>叮当钱包的命名灵感来源于哆啦A梦的四次元口袋,叮当希望自己也可以像这个神奇口袋一样,在小伙伴需要帮助时,伸出温暖援(圆)手,给予大家“无所不能”的帮助。</p>
下面这样才是正确的:
<h2 id="什么是叮当钱包">什么是叮当钱包?</h2><p>叮当钱包的命名灵感来源于哆啦A梦的四次元口袋,叮当希望自己也可以像这个神奇口袋一样,在小伙伴需要帮助时,伸出温暖援(圆)手,给予大家“无所不能”的帮助。</p>
注意仔细观察,在 h2 标签中 ? 号后面有无空格。
编码格式
所有的文件,包括 .html、.css、.js、scss、less 等,必须全部使用 utf-8 编码格式,如下面这样的是正确的:
<head> <meta charset="utf-8" /></head>
代码注释
任何编写代码的人都必须根据需要撰写代码注释,对于团队开发来说,这是非常重要的,比如下方是HTML的注释规范:
<!-- 这是单行注释 --><div class="foo"></bar><!-- 这是多行注释的标题 这是多行注释中的一行-->

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까?

html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?
