HTML项目代码编写规范_html/css_WEB-ITnose-html教學-PHP中文網

/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>）是英国作家查尔斯&middot;狄更斯所著的一部以法?大革命为背景所写成的长篇历史小说，情?感人肺腑，是世界文??典名著之一，故事中?巴黎、?敦??大城市??起?，围绕着曼奈特医生一家和以德法奇夫妇为首的圣安东尼区展开故事。小说里描写了贵族如何败坏、如何残害百姓，人民心中积压对贵族的刻骨仇恨，导致了不可避免的法国大革命。本书的主要思想是为了爱而自我牺牲，?名中的「?城」指的是<strong>巴黎??敦</strong>。</p>    <h2 id="人物介">人物介?</h2>    <ul>      <li>曼奈特?生（Dr. Alexandre Manette），一位老政治犯。</li>      <li>露西&middot;曼奈特（Lucie Manette），曼奈特?生的女?。</li>      <li>查?斯&middot;丹尼（Charles Darney），厄弗?蒙地侯爵的?子，?上露西&middot;曼奈特。</li>      <li>雪尼?卡?（Sydney Carton），一位?世嫉俗的律?，?上露西&middot;曼奈特。</li>      <li>德法奇（Ernest Defarge），曼奈特?生?日的?人。</li>      <li>德法奇夫人（Madame Defarge/Teresa Defarge），一位?定的女革命者。</li>      <li>?翰&middot;拔沙（John Barsad），一位??。他的真?名字是索??（Solomon Pross） ，是波希小姐（Miss Pross）的哥哥。</li>      <li>波希小姐（Miss Pross），露西的保姆。</li>      <li>??&middot;?利（Roger Cly），另一位??，?翰&middot;拔沙的夥伴</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><!--  这是多行注释的标题  这是多行注释中的一行-->

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML项目代码编写规范_html/css_WEB-ITnose

引言

项目文件结构

前端项目文件结构

HTML标准说明

文档类型

合法性验证

语义性

协议头

代码缩进

大小写

尾随空格

编码格式

代码注释

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題