「Web フロントエンドのベスト プラクティス」-HTML_html/css_WEB-ITnose

1. Web 標準

多くの人が Web 標準について話しますが、ページの外部パフォーマンスのみに焦点を当てており、ページ自体のコードの品質は無視されています。

標準ページの利点は何ですか?

• ブラウザーが最大限に正しくレンダリングされていることを確認して、さまざまなブラウザーでページが正常に解析できることを保証すると同時に、将来のさまざまなクライアントでページが正常に解析できることも保証します。

• 検索エンジンで検索されやすくなり、ウェブサイトの検索ランキングが向上します。標準ページは基本的に、検索エンジンの最適化作業の半分を完了します。検索エンジンの Web 「クローラー」の目的は、Web サイトのコンテンツを理解し、Web サイトのキーワードを見つけることです。タグと属性を合理的に使用すると、検索エンジンが Web サイトのコンテンツを正確に理解するのに役立ちます。

• ウェブサイトの使いやすさを向上させます。視覚障害や身体障害のあるユーザーなど、幅広いユーザーが Web サイトにアクセスできるようにします。

• より良いメンテナンスと拡張。 複数の開発者が統一標準に従えば、既存のページをよりよく理解し、維持できるようになります。タグ、スタイル、動作を分離した標準ページの方が明らかにスケーラビリティが優れています。

標準を達成するにはどうすればよいですか?

• 標準の HTML ページ構造 (ドキュメントタイプ宣言、ヘッド (タイトルおよびインポートされたファイル)、本文など)。

• ラベルを正しく閉じてください。

• 非標準のタグと属性の使用をやめ、コードを簡素化します。

• スタイルと構造の分離。

• JavaScriptが無効になっているプロンプト情報を追加します。

• よく使用されるキーワード、説明などの必要な タグを追加し、IE ブラウザの互換モードを設定し、モバイル デバイスでのページの表示を設定します。

2. 可読性の高い HTML

いくつかの小さな原則

1. Web ページの外観は、ブラウザの解析や検索エンジンのクローリングとは関係がありません。開発者にとって HTML コードは理解しやすく保守しやすいですが、最も重要なことはマシンで読み取れることです。

2. 不必要なタグを使用しないでください。疑似要素など、他の方法を使用して同じ効果を得ることができます。 より一般的な不適切な使用には、「セパレータ」や「空のラベル クリア フロート」などがあります。

3. テキスト以外のコンテンツを使用する場合、CSS で空のタグを使用することで完成できるように見えますが、テキストの説明を追加して CSS で非表示にすることができます。これにより、サードパーティの読み取りツールによる識別も容易になります。

4. 各タグの標準化された属性を理解し、alt、title、for などの一般的な属性などの必要な属性を HTML タグに追加します。

5.
はテキスト コンテンツの行折り返しにのみ使用する必要があり、行レベル要素の行折り返しには使用しないでください。

6. Web ページの画像には を使用する必要がありますか? ページコンテンツの一部である場合は、img を使用します。装飾のみに使用する場合は、背景を使用します。

いくつかの一般的なタグの正しい使い方

Web ページのタイトル レベル

title タグは、h1 から h6 までの 6 つのタグを指し、他のセマンティック タグと比較して、検索エンジンの影響を受けるため、特別な注意が必要です。

(1) はタイトルに使用する必要があります。

(2) ページ内で h1 タグを 1 つだけ使用すると、検索エンジンはそれに最も高い重みを付けます。他のモジュールのタイトル タグは開始します。 h2 から。

(3) タグを使用するときにレベルをスキップしないでください。

(4) コンテンツのスタイルを設定するために単に を使用しないでください。フォームを正しく作成してください

(1) を使用しないでください。 を使用してください (入力コントロールのテキストを定義するために使用されます)。 ); 関連するコントロールを指定するには、 属性の for に関連するコントロールの ID を割り当てるだけで、 要素によってトリガーされるイベントが関連するフォーム要素に送信されるだけでなく、 (3)

を使用して、コントロール グループのタイトルを定義します。さらに、含まれるフォーム コントロールを無効にすることもできます。

の disable 属性。

(4) 入力コントロールに適切なウォーターマーク プロンプトを設定します。いわゆるウォーターマーク プロンプトは、以前に表示されていたコンテンツを入力し、コントロールがフォーカスされるか、ユーザーは入力を開始します。IE9 以降では、jquery-placeholder プラグインを使用してそれをシミュレートできます。(5) 必要に応じて、タブ オーダーを設定します。キーボードのタブキーを押して次の入力ボックスに切り替えます。特別な設定が必要な場合は、デフォルトで tabindex 属性値を設定できます。

(6) URL、電子メール、検索など、HTML5 で新しく導入されたフォーム コントロール タイプを使用します。高度なブラウザには十分なサポートがあり、これらをサポートしていないブラウザにはテキスト タイプのコントロールが表示されます。

HTML コードを合理化する

1. 冗長なコンテナ (通常は

と ) を削除します。これらはセマンティクスがなく、悪用されることが多い 2 つのタグです。

2. 装飾要素は CSS を使用して実装されます。背景、疑似要素など。

3. テーブル レイアウトの使用を避けます。これにより、コードが少なくなり、再描画や再配置によるパフォーマンスの低下が回避されます。

時代遅れのブロックレベル要素とインライン要素

CSS を使用する人なら誰でもこれら 2 つの概念を理解していますが、これらはすべてスタイルの観点からネイティブ要素を理解しているため、これは少し不適切であり、それ自体は「構造」とは何の関係もありません。これは、「パフォーマンスから分離する」という考えに反しています。HTML5 では、この 2 つの定義が薄められ、より具体的に 7 つのカテゴリに分類されます。 それらは、メタデータ ベースのコンテンツ、ストリーミング コンテンツ、章ベースのコンテンツ、見出しベースのコンテンツ、段落ベースのコンテンツ、埋め込みコンテンツ、およびインタラクティブ コンテンツです。

コンテンツ モデルに関しては、ブロック レベルおよびインライン要素のコンテンツにいくつかの制限がありましたが、HTML5 はこの複雑な状況を解消し、実際のニーズに基づいてコンテンツ モデルを再定義しました。たとえば、 要素にはブロック要素を含めることができます。他にも、新たな理解が必要な相違点が数多くあります。

3. Xiaoxu Html5

まずいくつかの時点を見てみましょう。

2012年12月17日、HTML5の定義が完了しました。

2014 年 6 月 17 日、標準草案の最終草案が公開されました。

2014 年 10 月 28 日、W3C は HTML5 の公式推奨標準をリリースしました。

新機能の使用

近年、HTML5 の概念が過剰に宣伝され、クールで「万能」であるかのような印象を人々に与えていますが、それは新しい Web 標準にすぎません。ここでは、広く使用されているいくつかの機能について説明します。

1. 定義を簡略化します。

ドキュメントタイプの宣言、ページエンコーディングの定義、スタイルやスクリプトの参照方法など、不必要な複雑さを回避します。

2. 新しいタグと新しい属性を使用します。

新しいタグ:

セマンティックタグ:

、

など

機能タグ:

新しい入力コントロールタイプ: 電話、検索、メールなど

新しい属性:

<script> の async 属性</script>

のターゲット属性

および のプレースホルダー、必須、オートフォーカス属性

タグ カスタム属性 data-* は、カスタム データを保存し、対応する API を追加するために使用されます: dataset

ヒント

HTML5 で廃止されたタグと属性は使用しないでください

1。外観を設定します 、、、、、 など。 2. ユーザビリティを損なうタグ 、 、 3. align、valign、bgcolor などのラベル属性を削除しました。 <h4> </h4>互換性に対処する方法<p> </p>(1) document.creatElement を通じてタグを生成します<p> </p>(2) 次のような成熟したフレームワークを使用します。 html5shim<h4> </h4>注: これはブラウザが新しいタグを認識するための互換性方法にすぎません。他にも多くの互換性の問題がありますが、ここでは説明しません。 <p> </p>この記事は、Party Building Seniors が執筆した「Web フロントエンド開発のベスト プラクティス」の HTML 部分を読んで記録したものです。内容は氷山の一角です。読書の過程で、私は自分自身の欠点の多くに気づき、多くの利益を得ました。ぜひ皆さんにも読んでいただければと思います。 <p> </p> <p> </p>