Div+CSS Web ページレイアウトで CSS が無効である 10 の一般的な理由

Div+CSS Web ページ レイアウトで CSS が無効である 10 の一般的な理由
Div+CSS Web ページ レイアウトの知識を学びますが、Band of Brothers の検証は操作が難しい場合がありますが、これを使用すると、レイアウト設計時に、検証プログラムが大量のエラーをスローし、XHTML がまだ完成しておらず、さまざまなブラウザーで一貫した機能を維持できない可能性があることを示す警告が表示されます。この記事では、次の 10 個の微妙な障害の問題が多くのプログラマーを悩ませていることを説明します。それらを解決する方法。この記事を始める前に、Brothers in Arms PHP トレーニングの基本的な div+css 検証プログラムを使用するときに注意する必要がある問題をいくつか紹介します。

1. 検証プログラムからの警告は気にしないでください: 検証プログラムが 12 個のエラーと 83 個の警告を見つけたと言ったら、それを無視して次のステップに進みます。
2. エラーを 1 つずつ修正する: 上から下に順番に作業し、一度に 1 つずつエラーを修正します。 HTML はブラウザで上から下に表示され、これらのエラーは同じ順序で表示されます。

3. コードを修正するたびにコードを更新して、コードを再度有効にします。多くの場合、小さなエラーがページ全体で一連のエラーを引き起こします。したがって、「エラーの修正」を誤ると、さらに多くのエラーが発生する可能性もあります。問題が完全に解決されるように、修正するたびにコードを再度有効にしてください。上記の基本的な例外を理解した上で、レイアウト設計が無効であるいくつかの理由を見てみましょう。

1. div タグが閉じられていません
これは、レイアウト設計の失敗の最も一般的な理由の 1 つです。このせいで、どれだけ多くの繊細なレイアウト設計が失敗しているかを知ると、いつも驚かされます。 Open div タグは、レイアウト設計で最もよくある間違いの 1 つであり、診断が最も難しいものの 1 つです。バリデーターは、間違った開始 div タグを指すことがあります。これは、干し草の山から針を見つけるようなものになる可能性があります。

2. 面倒な埋め込みタグ
1990 年代初頭、Microsoft と Netscape のブラウザーが標準以外の独自フォントを認識できるようになりました。残念ながら、これは、「embed」などの特定の主要な HTML タグが広く使用されているにもかかわらず、W3C バリデーターがまだそれらのタグを認識していないことを意味します。本当に厳密な DOCTYPE (ドキュメント タイプ) 検証が必要な場合は、ネストを放棄するしかありません。効果的なレイアウトと埋め込みメディアを同時に必要とする場合は、Flash Satay 方法を試すことができます。

3. 不適切な DOCTYPE 宣言
DOCTYPE を宣言しなかったり、ファイルの先頭で DOCTYPE を誤って宣言したりすることもよくある間違いです。一般的な経験によれば、Strict DOCTYPE は誰もが追求する最高レベルの検証です。厳密な検証は、Web ページがすべてのブラウザで最適に表示されることを示します。 DTD ドキュメント タイプの宣言については、www.lampbrother.net で関連記事を参照してください。

4. 末尾のスラッシュ
Web サイトが検証できない場合は、コード内のどこかで末尾のスラッシュが欠落している可能性が非常に高くなります。特にイメージタグなどの要素では、末尾のスラッシュなどを見落としがちです。これは厳密な DOCTYPE では効果がありません。この問題を解決するには、img タグの最後に「/」を追加します。

5. Align タグ
DOCTYPE が Transitional に設定されている場合は、「align」タグを使用しますが、要求が厳しく、厳密な検証が必要な場合は、多くのエラーが表示されます。 Align もレイアウト設計には使用できないタグです。要素を変換するには、align の代わりに「float」または「text-align」を使用してみてください。

6. JavaScript
Strict DOCTYPEが宣言されている場合は、JavaScriptでCDATAタグをオーバーライドする必要があります。 Web サイトは広告や追跡スクリプトに埋め込み JavaScript を使用する傾向があるため、検証プロセスのこの側面は多くのプログラマーを悩ませています。 JavaScript を使用する必要がある場合は、その前後に次のタグを追加できます:

7. 画像には「alt」属性が必要です
画像も高度な検証の潜在的な障害となることに気づいていないかもしれません。末尾のスラッシュに加えて、高度な検証では、alt=「怖い吸血鬼の写真」などの画像を説明するために alt タグを使用する必要もあります。検索エンジンは、Web ページ上の画像を識別するために alt タグにも依存するため、常に推奨されます。何が何でもaltタグを追加してください。

8. 不明なエンティティデータ
エンティティデータも検証に影響を与える簡単な間違いです。 「&」などの記号を置き換えるために、適切なエンコード文字を使用することを検討できます。 XHTML セクション設計で使用できる、適切にエンコードされた文字エンティティ データの完全なリスト。

9. 悪い入れ子
入れ子とは、要素の中に要素が含まれることを意味し、入れ子になった要素の順序を混乱しやすくなります。たとえば、div タグの前に強いタグを開始しますが、最初に div タグを閉じます。これによってセクションのレイアウトは変更されない可能性がありますが、セクションのデザインは無効になります。

10. "title" タグの欠落
これは明らかな間違いのように思えますが、多くのプログラマ (私も含めて) は "head" セクションの title タグをよく見逃します。 「missing a required sub-element of HEAD」（HEAD の必須サブ要素がありません）と表示されると、title タグを追加するのを忘れていることがわかります。