简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLプロジェクトコード記述仕様書_html/css_WEB-ITnose

HTMLプロジェクトコード記述仕様書_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:45:371255ブラウズ

この文書に誤りや違反がある場合は、修正してください。

はじめに

何人で同じプロジェクトに取り組んでも、コードのすべての行が同じ人によって書かれたように見えるようにしてください。

この文書の内容が理解できない場合、または規定に準拠していないと思われる場合は、以下の形式でメールをお送りください。同時に、誰でも議論に参加して共同で参加することができます。この文書を改善してください。このドキュメントの内容の多くは、私自身の現在の会社のニーズにも基づいています。

電子メールは 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

    現在のプロジェクトの英語名 (Dingdang Wallet 公式が標準翻訳を提供できない場合、またはピンインがその名前である場合)完全なピンイン名が使用されるか、公式に定義された短縮名が使用されます) name)、純粋な小文字 a ～ z または数字 0 ～ 9 とアンダースコアで構成される文字列 -

  • template

    Template ディレクトリ。開発

  • ビルド

    ビルド ディレクトリ

  • vendor

    ベンダーでは、サードパーティのライブラリ、スタイル、スクリプトなどはすべてベンダー ディレクトリに保存される必要があります。次のルールに従ってください。サードパーティのライブラリはその名前で保存する必要があり、開発中は bower インストールを使用します。

HTML 標準の説明

ドキュメント タイプ

どの HTML ページでも次のドキュメント タイプ宣言を使用する必要があります: 

<!DOCTYPE html>

Dingdong Wallet のプロジェクトの HTML インターフェイスでは、この宣言以外のステートメントを表示することはできません。

合法性検証

HTMLを合法的に使用し、w3cツール(W3C HTML validator)を使用してチェックします。

セマンティック

ヘッダー、フッター、ナビゲーション、セクション、その他のタグなど、目的に応じて HTML タグを適切に使用します。これらは div と非常によく似ていますが、セマンティクスは次のように大きく異なります。プロトコル ヘッダー

対応するファイルが両方のプロトコルと互換性がないことがわかっている場合を除き、画像、スタイル シート、JavaScript スクリプト、またはその他のメディア ファイルを指す URL アドレスの http: および https: プロトコル部分を省略することをお勧めします。次のようなメソッドは推奨されません: 

<article class="entry">  <header>    <h1>读《双城记》</h1>  </header>  <section class="content">    <p><strong>《双城记》</strong>（英语：<em>A Tale of Two Cities</em>）是英国作家查尔斯&middot;狄更斯所著的一部以法?大革命为背景所写成的长篇历史小说，情?感人肺腑，是世界文??典名著之一，故事中?巴黎、?敦??大城市??起?，围绕着曼奈特医生一家和以德法奇夫妇为首的圣安东尼区展开故事。小说里描写了贵族如何败坏、如何残害百姓，人民心中积压对贵族的刻骨仇恨，导致了不可避免的法国大革命。本书的主要思想是为了爱而自我牺牲，?名中的「?城」指的是<strong>巴黎??敦</strong>。</p>    <h2>人物介?</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 -->

次のように記述する必要があります: 

<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>

a1f02c36ba31691bcfe87b2722de723b タグを使用して画像を導入するなど、次のような記述も推奨しません: 

<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 src="http://www.doraemoney.com/assets/img/logo.png" alt="叮当钱包" class="logo"/>

コードのインデント

HTML、CSS、および JavaScript コードのインデントにタブを使用することは許可されておらず、すべてのインデントで使用できるのは 2 つのスペースのみです __ 以下は正しいです。 

<img src="//www.doraemoney.com/assets/img/logo.png" alt="叮当钱包" class="logo"/>

以下は間違っています :

<a class="brand">  <img src="//www.doraemoney.com/assets/img/logo.png" alt="叮当钱包" /></a>

Case

要素名、属性、属性値 (テキストまたは CDATA コンテンツを除く)、セレクター、CSS 属性、および属性値を含むすべてのコードは小文字である必要があります。 以下は次のとおりです。間違い：

<a class="brand">    <img src="//www.doraemoney.com/assets/img/logo.png" alt="叮当钱包" /></a>

正しい書き方は次のとおりです: 

<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

以下は正しいです。 : 

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

h2 タグ内を注意深く観察してください? 数字の後にスペースはありますか?

エンコード形式

.html、.css、.js、scss、less などを含むすべてのファイルは、すべて utf-8 エンコード形式を使用する必要があります。以下が正しいです: 

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

コード コメント

誰でも。コードを記述するには、必要に応じてコード コメントを記述する必要があります。これは、チーム開発にとって非常に重要です。たとえば、次のような HTML コメント仕様です。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：入力で Enter を押してリンクボタンにフォーカスを置くにはどうすればよいですか? _html/css_WEB-ITnose次の記事：入力で Enter を押してリンクボタンにフォーカスを置くにはどうすればよいですか? _html/css_WEB-ITnose

関連記事

続きを見る