资讯专栏INFORMATION COLUMN

HTML项目代码编写规范

sixgo / 2742人阅读

摘要:引言不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。合法性验证合法的使用,并利用的工具进行检查。

如果本文档中有任何错误的、不符合行规的,敬请斧正。

引言
  

不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。

若您对本文档中任何内容有不明白的,或者感觉不合行规的,请您按以下格式向我邮件说明,同时也欢迎任何人参与讨论,共同完善本文档。本文档中很多也是根据我自己现在的公司需求来定的。

  

邮件不是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页面,均必须使用下面这个文档类型声明:


在叮当钱包的任何项目的 HTML 界面中,不允许出现该声明之外的任何声明。

合法性验证

合法的使用HTML,并利用w3c的工具(W3C HTML validator)进行检查。

语义性

根据目的合理使用HTML标签,例如 headerfooternavsection 等标签,跟 div 十分类似,但是在语义上却有天壤之别,比如下面这样:

读《双城记》

《双城记》(英语:A Tale of Two Cities)是英国作家查尔斯·狄更斯所著的一部以法國大革命为背景所写成的长篇历史小说,情節感人肺腑,是世界文學經典名著之一,故事中將巴黎、倫敦兩個大城市連結起來,围绕着曼奈特医生一家和以德法奇夫妇为首的圣安东尼区展开故事。小说里描写了贵族如何败坏、如何残害百姓,人民心中积压对贵族的刻骨仇恨,导致了不可避免的法国大革命。本书的主要思想是为了爱而自我牺牲,書名中的「雙城」指的是巴黎與倫敦

人物介紹

  • 曼奈特醫生(Dr. Alexandre Manette),一位老政治犯。
  • 露西·曼奈特(Lucie Manette),曼奈特醫生的女兒。
  • 查爾斯·丹尼(Charles Darney),厄弗裡蒙地侯爵的姪子,愛上露西·曼奈特。
  • 雪尼‧卡頓(Sydney Carton),一位憤世嫉俗的律師,愛上露西·曼奈特。
  • 德法奇(Ernest Defarge),曼奈特醫生舊日的僕人。
  • 德法奇夫人(Madame Defarge/Teresa Defarge),一位堅定的女革命者。
  • 約翰·拔沙(John Barsad),一位間諜。他的真實名字是索羅門(Solomon Pross) ,是波希小姐(Miss Pross)的哥哥。
  • 波希小姐(Miss Pross),露西的保姆。
  • 羅傑·錫利(Roger Cly),另一位間諜,約翰·拔沙的夥伴
协议头

建议在指向图片、样式表、JavaScript脚本或者其它媒体文件的URL地址中省略 http:https: 协议部分,除非已知相应文件不能同时兼容这两个协议,比如:

我们不推荐下面这种方式:




你应该像下面这样写:




另外的示例,比如通过

而应该这样写:



代码缩进

不允许在任何 HTMLCSS 以及 JavaScript 代码中使用 Tab 进行缩进,且所有的缩进只允许使用两个空格 __ ,如下面这样是正确的:


  

而下面这样均为错误的:


    

大小写

所有的代码都应该是小写的,包括元素名称、属性、属性值(除非 text 或者 CDATA 的内容)、选择器、CSS属性以及属性值,如下面这样均是错误的:

叮当钱包

正确的写法应该是:

叮当钱包

对于资源文件的命名,我们同样要求全部使用纯小写字母,同时,多个单词间使用中横线分割(-),同时,不允许在命名中出现空格,英文字母必须放在第一个位置, - 不允许出现在名称格式后缀小数点 . 的前面,如下面这样就是正确的命名方法:

logo.png
example-background.png
assets/css/base.css

而下面这些均是错误的:

logo-.png
-logo.png
0logo.png
example background.png
Example-Background.png
ExampleBackground.png
Assets/Css/Base.css
尾随空格

尾随空格是绝对不允许的,容易让 diff 更加复杂,比如下面这样是不允许的:

什么是叮当钱包?

叮当钱包的命名灵感来源于哆啦A梦的四次元口袋,叮当希望自己也可以像这个神奇口袋一样,在小伙伴需要帮助时,伸出温暖援(圆)手,给予大家“无所不能”的帮助。

下面这样才是正确的:

什么是叮当钱包?

叮当钱包的命名灵感来源于哆啦A梦的四次元口袋,叮当希望自己也可以像这个神奇口袋一样,在小伙伴需要帮助时,伸出温暖援(圆)手,给予大家“无所不能”的帮助。

注意仔细观察,在 h2 标签中 号后面有无空格。

编码格式

所有的文件,包括 .html.css.jsscssless 等,必须全部使用 utf-8 编码格式,如下面这样的是正确的:


  

代码注释

任何编写代码的人都必须根据需要撰写代码注释,对于团队开发来说,这是非常重要的,比如下方是HTML的注释规范:


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/60860.html

相关文章

  • 从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

    摘要:从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后,需要一个版本控制系统来管理源代码。 从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架 搭建一个前端项目的方式有两种:选择现成的项目模板、自己搭建项目骨架。 ...

    call_me_R 评论0 收藏0
  • 从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

    摘要:从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后,需要一个版本控制系统来管理源代码。 从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架 搭建一个前端项目的方式有两种:选择现成的项目模板、自己搭建项目骨架。 ...

    wzyplus 评论0 收藏0
  • 从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

    摘要:从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后,需要一个版本控制系统来管理源代码。 从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架 搭建一个前端项目的方式有两种:选择现成的项目模板、自己搭建项目骨架。 ...

    aristark 评论0 收藏0
  • 编写灵活、稳定、高质量的HTML代码规范

    摘要:六字符编码通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。十一减少标签的数量编写代码时,尽量避免多余的父元素。未完待续编写灵活稳定高质量的代码的规范阅读更多 一、唯一定律 无论有多少人共同参与同一项目,一定要确保每一行代码都像是唯一个人编写的。 二、HTML 2.1 语法 (1)用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法...

    anquan 评论0 收藏0
  • 前端练级攻略(第一部分)

    摘要:第一部分介绍了如何使用和开发接口。由于系统变得越来越复杂,人们提出了称为预处理器和后处理器的工具来管理复杂性。当您第一次得知有预处理器和后处理器时,你很有可能在任何地方已经使用它们。我之前建议的文章,,也涵盖了预处理器相关的知识。 我记得我刚开始学习前端开发的时候。我看到了很多文章及资料,被学习的资料压得喘不过气来,甚至不知道从哪里开始。 本指南列出前端学习路线,并提供了平时收藏的一些...

    qpal 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<