12 日目: 検証と一般的なエラー_基本チュートリアル

何日も一生懸命働いた後、私たちは Web サイトを再設計するために XHTML+CSS を使用できるように一生懸命勉強しました。では、作成したページが実際に Web 標準に準拠していることをどうやって確認できるのでしょうか? W3C および一部のボランティア Web サイトは、ページが標準に準拠しているかどうかを確認し、エラーを修正するためのヘルプ情報を提供するオンライン検証プログラムを提供しています。これらのチェックは非常に便利で、ページをデバッグするときに最初に行います。

1.XHTML 検証

• 検証 URL: http://validator.w3.org/
• 検証方法：URL検証、ファイルアップロード検証

検証が成功すると、図に示すように、「このページは有効な XHTML 1.0 移行版です!」と表示されます。

検証が失敗した場合は、図に示すように、追加の検証オプションとエラー メッセージが表示されます。

通常、[ソースを表示] と [詳細出力] を選択すると、エラー コードの行とエラーの原因を見つけるのに役立ちます。

一般的な XHTML 検証エラーの原因の比較表

• DOCTYPE が見つかりません! HTML 4.01 移行へのフォールバック -- DOCTYPE が定義されていません。
• 文字エンコーディングが見つかりません! UTF-8 に戻ります -- 未定義の言語エンコーディング。
• 「img」の終了タグが省略されましたが、OMITTAG NO が指定されました -- 画像タグが「/」で閉じられていません。
• SHORTTAG YES が指定されていない限り、属性値の指定は属性値リテラルである必要があります。属性値は引用符で囲む必要があります。
• 要素 "DIV" 未定義---DIV タグは大文字では使用できないため、小文字の div に変更する必要があります。
• 必須属性「alt」が指定されていません---画像には alt 属性を追加する必要があります。
• 必須属性「type」が指定されていません---JS または CSS によって呼び出されたタグに type 属性がありません。

最も一般的なエラーの 1 つは、ラベルの大文字化です。通常、これらのエラーは関連しています。たとえば、 を忘れた場合、他の

タグがエラーを報告するため、通常、1 つのエラーが解決されれば、大量のエラーが表示されることを心配する必要はありません。他のエラーは消えます。ページが XHTML1.0 検証に合格した場合、そのようなアイコンをページに配置できます。コードは次のとおりです。

;

2.CSS2 検証

• 検証 URL: http://jigsaw.w3.org/css-validator/
• 検証方法: URL 検証、ファイルアップロード検証、直接コード検証

検証が成功すると、「おめでとうございます。この文書はスタイルシート検証に合格しました!」と表示され、検証情報は中国語に対応しています。写真に示すように:

検証が失敗した場合は、エラーと警告の 2 種類のエラーが表示されます。エラーは、修正する必要があることを意味します。修正しないと検証に合格しません。警告は、W3C によって推奨されていないコードがあり、それを変更することが推奨されることを意味します。

一般的な CSS2 検証エラーの原因の比較表

• (エラー) 無効な数値: color909090 はカラー値ではありません: 909090 ---16 進数のカラー値には「#」記号を追加する必要があります (#909090)。
• (エラー) 無効な数値: margin-top 不明な寸法: 6 ピクセル ---ピクセルは単位値ではありません。正しい書き込み方法は 6 ピクセルです
• (エラー) 属性スクロールバーフェイスカラーが存在しません: #eeeeee --- スクロールバーの色の定義は非標準属性です
• (エラー) 値cursorhandが存在しません: handは非標準の属性値であり、cursor:pointerに変更されています
• (警告)Line: 0 font-family: 最後の選択肢としてタイプ ファミリを指定することをお勧めします。W3C では、フォントを定義するときに、「sans-serif」などのフォントのタイプで終わることを推奨しています。 、Web フォントをさまざまなオペレーティング システムで表示できるようにするためです。
• (警告)行: 0 他のプロファイルの警告メッセージが見つかりません -- コード内に標準以外の属性または値があり、検証プログラムが対応する警告情報を判断して提供できないことを示します。

同様に、検証に合格した後、CSS 検証合格アイコンを配置できます。コードは次のとおりです。

a href="http://jigsaw.w3.org /css-validator /">