Web フロントエンド コード仕様とページ レイアウト_html/css_WEB-ITnose

1. 仕様の目的:

作業効率を向上させるため、バックエンド担当者の機能追加やフロントエンドの最適化後のメンテナンスを容易にし、高品質なドキュメントを出力し、構造を明確にし、コードを簡潔にする優れたフロントエンド アーキテクチャは SEO の最適化に役立ちます。

2. 仕様の基本ガイドライン:

Web 標準に準拠し、セマンティック タグを使用して構造、パフォーマンス、および動作を分離し、優れた互換性を備え、ページ パフォーマンスを最適化し、コードを簡潔、明確、整然と保ちます。可能な限りサーバーの負荷を軽減して、最速の解析速度を確保します。

3. ファイル仕様:

HTML、css、js、および画像ファイルはすべて、合意されたディレクトリにアーカイブされます。

1. html

(1) エンコーディング: すべてのエンコーディングは xhtml を使用し、タグは閉じる必要があり、属性値は二重引用符で囲み、エンコーディングは utf-8 に統一されます。

(2) セマンティック化: セマンティック html、タグを正しく使用し、互換性の問題がない html 独自のタグを最大限に活用します。

(3) ファイル名: 関数を追加するときに対応するページを見つけやすくするために、中国語で名前を付け、実際のモジュールに応じて名前を付けます。たとえば、同じモジュールに _&title&_ という名前を付けます。

４．

説明とキーワードのコンテンツを追加します

ロボットのコンテンツ部分には、次の 4 つのコマンド オプションがあります:index、noindex、follow、nofollow、「,」で区切られ、次のようになります:

ページのレンダリングを支援するために head タグに CSS ファイルを導入します

スタイルファイルや JavaScript ファイルを導入する場合は、デフォルトの型宣言を省略する必要があります

フッターに JavaScript ファイルを導入する

(5) リンクアドレスタグ: リンクアドレスを記述するときは、href= http: などのリダイレクトを避けてください。 //www .100sucai.com/"、アドレスの後に '/' を追加する必要があります

(6) div のネストをできる限り減らします。たとえば、重要度に応じて h1-6 タグを使用し、段落には p を使用します。インライン要素では、リストには ul を使用してください。 ブロックレベルの要素はネストできません。 説明的なフォーム要素 (input、tetarea) にラベルを追加します。

(7) 画像

背景として表示できる画像は、CSS スタイルに記述する必要があります。可能な限り

コンテンツとしての画像と背景画像としての画像を区別します。背景画像は CSS スプライト テクノロジを使用し、大きな画像内に配置されます

重要な画像は alt 属性を使用して追加する必要があり、重要な要素と切り詰められた要素にはタイトルが追加されます

(8) 注: 領域を与える バックグラウンドでの関数の追加を容易にするために、ブロック コードと重要な関数にコメントを追加します

(9) エスケープ文字: 特殊な記号にはエスケープ文字を使用します

(10) ページを設計するときにスケーラビリティを考慮する構造

2. Css

(1) ページ内での style 属性の使用を避けるようにしてください

(2) CSS は head タグに配置され、link タグによって導入され、構造とパフォーマンスを分離します。ページ。

(3) ファイル命名: 英語で命名、サフィックス .css、共通:base.css、ホームページ:index.css、その他のページスタイルは特定のモジュール要件に従って命名されます

(4) エンコーディングは utf- に統一されています8

( 5) クラスと ID の使用:

ID: 一意の親、ヘッダー/フッター/ラッパー/左/右など、ページ上の特定の要素を識別するために使用されます。

クラス: 再利用可能, これは子レベルであり、ページ上の任意の数の要素に使用できます

名前付け: 英語の小文字、数字、アンダースコアを組み合わせた名前にします。中国語のピンインの使用は避けてください。ピンインを使用し、読みやすさを向上させるためにキャメル ケースの名前とアンダースコアを使用します (dropMenu、sub_nav_menu、drop-menu など)。

(6) JavaScript 用に予約されたフックに名前を付けます。js_ で始まり、次のようになります。 js_hide、js_show

(7) コードを記述する前に、スタイルの再利用性を考慮し、HTML 独自の属性とスタイル継承の原則を最大限に活用してコードの量を削減します。後の管理を容易にするために、コードは 1 行で記述することをお勧めします。 (8) 写真

名前付け: 英語の小文字、数字、_ の組み合わせ、意味のある名前または英語の略語を使用します。中国語のピンインは使用せず、大文字を区別することをお勧めします。

スプライト技術を使用して http リクエストを削減し、スプライトはモジュールに従って作成されます

(9) 書き込み順序: 同じタイプの属性が一緒に書かれていることを確認し、通常はレイアウトに従う 配置属性?>自己属性?>テキスト属性?>その他 属性の記述形式

(10) 記述順序のルール

配置属性 (display、position、float、clear、visibility、table-layout など)

自己プロパティ (例: : 幅、高さ、マージン、パディング、境界線など)

テキスト属性 (例: font、line-height、text-align、text-indent、vertical-align など)

その他の属性 (例:色、背景、不透明度、カーソル、コンテンツ、リストスタイル、引用符など)

(11) インデント: インデントにはタブを使用します

(12) スタイルシートの中国語フォント名を Unicode コードに変換するのが最善ですエンコードエラー時の文字化けを回避します。

(13) パフォーマンスに影響を与える属性 (position、float など) を削減します。

(14) 大きなブロック スタイルにコメントを追加し、小さなブロックに適切なコメントを追加します。

3. Javascript

(1) ファイルのエンコーディングは utf-8 に統一して記述してください。コード汚染 (Shen の冗長コード || 既存のコードとの競合 || ...) やその他の問題を回避する必要があります

(2) フッターに JavaScript スクリプトを導入し、外部リンクを使用してページの構造と動作を分離します

(3) 命名:

ファイル命名: 英語で命名、サフィックスは .js、共通: common.js、その他の名前はモジュール要件に従って命名可能

変数命名: キャメルケース命名、ネイティブ JavaScript 変数は純粋な英語の文字である必要がある場合、最初の文字は小文字である必要があります ( iTaoLun など)。変数を集中的に宣言し、グローバル変数を避ける

クラスの名前付け: 最初の文字を大文字にする

ITaoLun など

関数の名前を小文字で付ける

セマンティックな名前付け可能な限り英単語またはその略語を使用します

(4) ルール

互換性があり、リソースを消費するメソッドや属性の使用は避けるようにしてください

後の最適化では、JavaScript のコメント以外の漢字は Unicode に変換する必要がありますエンコードを回避するためのエンコーディング エラー発生時に文字化けを表示する

コード構造を明確にし、適切なコメントを追加する

HTML からの分離を重視し、リフローを減らし、パフォーマンスを重視する

4. コメントの仕様。

(1) html: コメント形式、「-」はコメントの先頭と最後にのみ配置でき、コメントテキストエリアには配置できません

(2) Css: コメント形式

(3) Javascript : 単一行コメント: //ここにコメント、複数行コメント:

5. CSS ハック 特殊記号

(1)*: IE6/7 は * を認識できますが、標準ブラウザは認識しません

( 2)_:

(3) を認識できるのは IE6 だけです!重要: IE6 では認識されませんが、Firefox、IE7/8/9、Chrome およびその他の主流ブラウザーでは認識されます

(4) 9: IE6/7/8 を含むすべてのブラウザーで認識されます

(5)+: IE6/ 7 /8 認識

(6) 記述順序: 最初に FF などの非 IE ブラウザーで必要なスタイルを記述し、次に IE8、次に IE7、最後に IE6 を記述します

4. アダプティブ ページ レイアウト (主なプラットフォームは次のとおりです) iOS と Android、したがって、これは IE の互換性を考慮していません)

1. レイアウトの詳細

まず、Web ページの幅がデフォルトで画面の幅と等しくなるように、新しいメタ タグを head

に追加します。元の拡大縮小率は 1.0、つまり 100% 表示です。

位置: 絶対位置は使用できません

幅: px幅は使用できません。パーセンテージまたは自動を使用する必要があります

フォント: 絶対サイズは使用できません、em を使用する必要があります

2. 流体レイアウトでの float の使用

各ブロックの位置はすべて変動しており、固定されていません。 float の利点は、幅が小さすぎて 2 つの要素に収まらない場合、次の要素が水平方向にオーバーフローすることなく前の要素の一番下まで自動的にスクロールし、水平スクロール バーの表示を回避できることです。

3. CSS3 によって導入された Media Query モジュールは、画面の幅を自動的に検出し、対応する CSS ファイルをロードできます

画面の幅が 400 ピクセル (max-device-width: 400px) 未満の場合は、tinyScreen をロードします。 .css ファイル

、画面幅が 400 ピクセルから 600 ピクセルの間の場合、smallScreen.css ファイルがロードされます。

@importurl("tinyScreen.css") screen and (max-device-width: 400px);

同じ CSS ファイルで、異なる画面解像度に応じて異なる CSS ルールを適用することも選択できます。

@media screen and (max-device-width: 400px) {

.column {

float: none

width:auto;

転載から: http://blog.sina .com.cn/s/blog_6c2f334c01018rmz.html