概要
優れた供給源の開発よりもさらにプロジェクト、だけでなく、一人の人間の手のようなコードを見てください。統一されたコーディング標準、コード読みやすく、理解しやすく、維持するために簡単に
HTMLの仕様
凹み
統一された二つの空間をインデントします
命名規則
- クラスの機能やコンテンツが顕在化して名前が付けられていない、名前を付ける必要があります。
- クラスIDと小文字の単語、複数の単語下線付きを使用して - 分離。
- 作成クラス・ノースタイル情報を避けない間、Javascriptのフックとして一意のIDを使用します。
DOCTYPE宣言
HTMLファイルには、DOCTYPE宣言、およびHTML5の文書宣言の一貫した使用を追加する必要があります。
<!DOCTYPE html>
METAタグ
- 統一された使用「UTF-8」エンコーディング
<meta charset="utf-8">
- SEOの最適化
<!-- 页面关键词 -->
<meta name ="keywords" content =""/>
<!-- 页面描述 -->
<meta name ="description" content ="">
<!-- 网页作者 -->
<meta name ="author" content ="">
- 優先順位は、IEとChromeの最新バージョンを使用します
<meta http-equiv ="X-UA-Compatible" content ="IE = edge,chrome = 1">
- モバイルデバイス用のビューポート
<!-- device-width 是指这个设备最理想的 viewport 宽度 -->
<!-- initial-scale=1.0 是指初始化的时候缩放大小是1,也就是不缩放 -->
<!-- user-scalable=0 是指禁止用户进行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- 自動識別のページを無効にし、デジタル電話のフォーマットが存在してもよいです
<meta name="format-detection" content="telephone=no">
チームの規則:
pc 端:
<meta charset="utf-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
web前端开发资源Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路
モバイルエンド:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
タグ
次のカテゴリにhtmlタグ:
- 自己閉じ閉じずに、タグ(自動閉鎖を)。例えば:領域、ベース、BR、COL、コマンド、埋め込み、時間、IMG、入力、keygenの、リンク、メタ、PARAM、ソース、トラック、WBR等)
- タグ(終了タグ)を閉じると、閉じた状態にする必要があります。たとえば、次のテキストエリア、タイトル、時間、DIV、スパンなど
チームの規則:
- 開始タグと終了タグは、開始と終了タグに記述する必要があります持っているすべての要素は、また、上の記述する必要がありますが、開始タグまたはラベルと梁要素の一部を省略することができます
- 自己終了タグには終了タグを追加しないでください
- 、 - ()自己定義されたラベル名はダッシュが含まれている必要があり
<x-tags>
、<my-element>
かつ<my-awesome-app>
正しい名称でありながら、<tabs>
かつ<foo_bar>
正しくありません。このような制限は、HTMLパーサは、カスタム要素であるこれらのある標準的な要素を、区別することができ作ります - カスタムラベルは、ラベルに書かれたと終了タグを開始する必要があります
- ラベルの数を最小限に抑えます
要素のプロパティ
- 二重引用符を使用するには、要素の属性値の構文
推奨:
<input type="text">
推奨しません:
<input type=text>
<input type='text'>
コードのネスト
- インラインブロック要素は、ブロックのいくつかの要素または要素を含むことができるが、インライン要素は、要素をブロック含まれていないことができ、それは、他のインライン要素を含むことができ
- H1、H2、H3、H4、H5、H6、P、DT:などの見出しや段落ブロックが含まれていません、
- これは、インラインブロック、平行とブロックレベル要素におけるブロックレベル要素、埋め込まれた埋め込み要素と並列の要素と平行ではありません
- ルールネストされた一部のタグは、例えば、UL李、オール備えるリチウム、DL DTを備えるなど、DDを備え、固定されています。
擬似クラスの柔軟な使用
非コンテンツ情報は、あなたのHTMLを汚染させてはいけません、HTMLの構造を破壊しました。それは使用することができますなど、疑似希土類元素後,:前に
推奨:
HTMLコード
<!-- That is clean markup! -->
<span class="text-box">
See the square next to me?
</span>
CSSコード:
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
推奨しません:
HTMLコード:
<!-- We should not introduce an additional element just to solve a design problem -->
<span class="text-box">
<span class="square"></span>
See the square next to me?
</span>
CSSコード:
.text-box > .square {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
web前端开发资源Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路
特殊記号はエスケープする必要があります
シンボル | 説明 | エスケープ |
---|---|---|
ブランク | |
|
< | 以下 | < |
> | より大きい | > |
& | と | & |
" | 引用符 | " |
ピュアデジタル入力ボックス
=「TEL」の代わりのタイプは=「番号」タイプを使用します
<input type="tel">
Typeプロパティ
HTML5は、デフォルトで含まれ、JSは、type属性を指定し、CSSする必要はありません。
推奨:
<link rel="stylesheet" href="" >
<script src=""></script>
推奨しません:
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
ノート仕様
単一行コメント
- いくつかの州に記載され、および他の特性が記載されているように、一般に、簡単な説明のために使用
- 行のコード自体にコメントの上に位置する各注釈コンテンツ前後の空白文字、コメント、
推奨:
<!-- Comment Text -->
<div>...</div>
推奨しません:
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
モジュールの備考
- 各スペースの文字コンテンツ前後のノート
<!-- S Comment Text -->
ブロック開始<!-- E Comment Text -->
モジュールとモジュールとの間の線によって分離されたブロックの端、- 内側の入れ子モジュール注釈モジュールに注意し、
<!-- /Comment Text -->
推奨:
<!-- S Comment Text A -->
<div class="mod_a">
<div class="mod_b">
...
</div>
<!-- /mod_b -->
<div class="mod_c">
...
</div>
<!-- /mod_c -->
</div>
<!-- E Comment Text A -->
<!-- S Comment Text D -->
<div class="mod_d">
...
</div>
<!-- E Comment Text D -->
web前端开发资源Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路
セマンティック
- CSS、HTMLは、セマンティックシステムの代わりに、UIシステムではありません
- 一般的に、各意味ラベルが全てです
- セマンティックHTML構造は、多くの人々は一方で一緒に作業するときに(検索エンジン)は、理解するマシンは、開発者が迅速意図を理解することができますことができます
- マルチページのdivと意味タグではなく、ページ全体を構成して使用することをお勧めします
一般的な意味タグ:
タグ | セマンティック |
---|---|
<p> |
段落 |
<hn> |
タイトル(H1〜H6) |
<ul> |
順序なしリスト |
<ol> |
順序付きリスト |
<nav> |
ナビゲーションマークは、グループだけの使用で重要なリンクを文書化 |
<main> |
ページの主な内容は、ページが一度だけ使用することができます。Webアプリケーションならば、それはその主な機能に囲まれて |
<article> |
外部定義のコンテンツ、コンテンツはドキュメントの残りの部分とは独立しています |
<section> |
文書のセクション(セクション、セクション)で定義されています。そのような他の章、ヘッダ、フッタ、または文書など。 |
<aside> |
これは、その内容外のコンテンツを定義します。こうしたサイドバーなどの一連のリンク、記事、広告、リンク、関連製品のリスト |
<header> |
ヘッダーは通常、サイトのロゴ、メインナビゲーション、サイト全体のリンクや検索ボックスを含み |
<footer> |
フッターは、親が体である場合にのみ、ページ全体がフッターです |
<figure> |
別々のストリームコンテンツ(画像、図表、写真、コード等)の規定は、(デフォルトでは40ピクセルのマージンについてがあります) |