Web ページの標準化_CSS/HTML

Web の標準化がますます進んでいます。現在、Web サイトを構築する際には、その標準に準拠し、W3C の XHTML と CSS の検証に合格することが重要です。では、どうすれば標準を満たす Web サイトを作成できるでしょうか。私のBLOGの再構築とOSdevの制作 リソースプロセスでのいくつかの経験^_^。

Web デザイナー に移動して、Web 標準に関する記事を読んでください

w3.org の方が権威がありますが、中国語を母国語とする私たちにとっては、こちらの方が理解しやすいです:) 個人的には、画面いっぱいに表示される電子テキストを読むために w3.org に行くよりも快適に感じます。 。ここでは、XTHML、DIV+CSS レイアウト、CSS テクニックなどに関する多くの記事を見つけることができます。ウェブマスターの Ajie が書いた 「ステップ バイ ステップ」 チュートリアルもあります。このチュートリアルでは、標準を満たす Web サイトの作成方法を段階的に紹介しています。

テーブルを破棄し、div+css レイアウトを使用します

これは、標準を満たす Web ページをデザインするときに最初に行うべきことのようです:)、DIV+CSS レイアウトもトレンドです。 DIV+CSS レイアウトを使用するには、w3cn.org の記事を参照してください:CSS 基本レイアウトの 16 の例、典型的な 3 行 2 列の中央揃えの高さ適応レイアウト。

タグを閉じる

以前は、img や p などの終了タグの問題に注意を払っていなかったかもしれません。これらのタグを使用するとき、正しく終了せずに先頭だけを使用することがよくありました。通常、次のように img を使用します:

しかし、XHTML ではそのような状況は許可されていないため、オフにする必要があります:

さらに、段落記号

は、以前は直接

として使用されていましたが、XHTML では許可されていない

を段落の最後に追加するという発想はありませんでした。

タグを正しくネストします

ブラウザの耐障害性により、

を使用するなど、ルールに従わない Web ページを作成した場合でも、正しい表示効果を得ることができます。

サンプル

問題ありません。繰り返しますが、これは XHTML では許可されていません。 XHTML は XML から派生しており、XML は構造的である必要があるため、タグをネストする場合は、インターリーブせずにレイヤーごとにネストする必要があります。

文字セットを正しく設定してください

あまり重要ではないようですが、文字セットを設定すると、ブラウザによるドキュメントの解析がより容易になります。

写真の配置

XHTML では、align 属性は、left、middle、right、または、top、middle、bottom の 3 つの値のいずれか 1 つだけにすることができ、多くの場合、画像とテキストを完全に中央揃えにする必要があります。つまり、アブミドルを使用します。 XHTML を使用した後、この属性は失われる必要があります。解決策は何ですか?わかりませんが、Web Designer にこの問題について記載された記事があります。ブログを再構築したときに、画像の配置を上に設定したところ、表示効果は許容範囲内でした。

はリンク内の &

を処理します

動的 Web サイトで GET メソッドを使用してパラメーターを渡す場合、パラメーターが複数ある場合は & を使用して各パラメーターを接続します。ただし、XHTML では、& がある場合は、以下がエンティティーであることを意味します。ですが、パラメータ名は nbsp、lt、gt である必要があるとは誰も考えないはずです。 XHTML では、エンティティではないすべての & を & に変換する必要があると規定されています。変換が実行されない場合、W3C 検証中にエラーが報告され、エンティティが見つかりません。

実際、標準に従ってWebサイトを作成する方が、構造とコンテンツが分離されているため、表示を変更するときにページ全体をやり直す必要がなく、はるかに簡単であると個人的に感じています。 CSS でスタイルを書き換えるだけで効果が得られます。また、Fdream の FBS のように、リフレッシュせずにスキンを変更できるので、良いことです~~

。