私は 3 年近くフロントエンド開発を行ってきました。今日は、WEB フロントエンド開発における私の個人的な経験について話したいと思います (もちろん、すべて私の個人的な理解です。あれば修正してください)。は私が不適切または間違っていると言うものです) ここで WEB の標準から始めましょう。
WEB標準とは何ですか?
はは、WEB標準と言われていますが、ここでは主にXHTML1.1とCSS2.1の体験談をまとめます。 WEB には非常に多くのコンテンツが含まれるため、「WEB 標準」は HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1 などの一連の標準の総称です。等々。ここで、WEB 標準はいわゆる DIV+CSS ではないことを指摘しておきたいと思います。
上で述べたように、DIV+CSS です。ははは、ここで説明させていただきますが、これは実際には間違っています。 DIV+CSS の正確な用語 (個人的な理解) は、W3C が推奨する WEB 標準の XHTML1.1 と CSS2.0 スタイル シートを組み合わせてページを作成することを指します。DIV は XHTML タグを指し、CSS 表示は CSS を指します。 CSSスタイルシート。
WEB標準を使用して開発するメリット
では、なぜ W3C はそのようなページ作成方法を推奨するのでしょうか?以前の TABLE レイアウトと比較して、WEB 標準開発を使用する利点 (個人的な理解) を簡単に見てみましょう。
1. 運用コストを節約してお金を節約しましょう！
はは、お金の節約に役立つものに興味はありますか?もちろんとても興味があります。当社のWEB標準制作手法がどのように実現されているかわかりますか?
WEB 標準を使用して作成すると、XHTML を使用して表現 (データ) を使用し、CSS を使用してフォーム (ページ要素の表示) を制御することができます。うまく書かれたページでは、XHTML コードには基本的にユーザーが見たいデータやその他の装飾が含まれており、すべて CSS によって制御されます。このようにして、(XHTML) ページのサイズが大幅に削減され、帯域幅のコストが削減されます。これを削減するにはどうすればよいでしょうか。YAHOO のホームページは 1K で、1,000,000 人が同時にアクセスすると考えられます。どのくらいの帯域幅が節約されますか?また、帯域幅をより最大限に活用できます。
CSS はすべてのページ要素のスタイルを制御します。Web サイト全体のスタイルを変更したい場合は、CSS ファイルを変更するだけで簡単に変更できます。維持費も下がり、かなりの節約になりましたね。また、このページを開くのがはるかに速くなります。このページは、非常に有益な情報でない限り、基本的に待つ時間はほとんどありません。
2. よりユーザーフレンドリーであり、より多くのユーザーを獲得する機会があります。
次に、ユーザーフレンドリーについて話しましょう。まず、ユーザーをカテゴリーに分類したいと思います。
カテゴリ 1: 一般ユーザー (当社の Web サイトにアクセスするすべてのユーザー)。
カテゴリ 2: 検索エンジン。
WEB 標準を使用して開発されたページは、構造が明確で、ページ サイズが小さく、ブラウザーとの互換性が優れています。一般ユーザーがアクセスするとページが素早く開き、ユーザーがどのブラウザを使用しても正常にページにアクセス（表示）でき、ページ構造も明確で、探しているデータを簡単に閲覧できます。
検索エンジンにとって、WEB 標準を使用して開発された優れたページは SEO に最適化されており、非常にアクセスしやすく、ページ内のタイトル (H1 ～ H6 タグ) がどこにあるか、タイトルの段落がどこにあるかが簡単にわかります。タグ）、段落内で強調したい内容がどこにあるか（強いタグ）などを簡単に分析できます。ご存知のとおり、優れた SEO を備えたサイトは、検索エンジンによってインデックスされる可能性が高く、より多くのユーザーがサイトにアクセスすることになります。
これは、大幅なコストの節約と作業効率の向上に役立ちます。同時に、ページの閲覧速度が向上し、使いやすくなり、宣伝にお金をかけずにさらに多くのユーザーを獲得することもできます。それを使うと思いますか？ハハ、これが、W3C がオープン Web サイトに WEB 標準の使用を推奨する理由でもあります。この技術はユーザーにも認められているので、これからは WEB 標準を学ぶ必要があります。 ^-^!
はは、基礎コースの復習は終わったので、いよいよ XHTML と CSS のスキルについて正式に話し始めます。
合理的なレイアウト
友達の中には、なぜ最初から合理的なレイアウトについて話し始めるのかと尋ね始める人もいるでしょう (笑)、先ほどいくつかの知識ポイントについて触れました - 「明確な構造、SEO の最適化、小さなページ サイズ、そして XHTML コードには基本的にすべてのユーザー要件が含まれています」データ」。これらは合理的なレイアウトの結果です。そして、私たちが WEB 標準を使用して制作するものはすべてこの知識点から始まると個人的に感じているので、最初にこのトピックについて話します。
そうなると、どのようなページが合理的なレイアウトとみなされるのか、誰もが疑問を持つようになります。これは良い質問です。私たちが初めて WEB 標準の使い方を学び始めるときによく聞かれる質問の 1 つです。ここでは、合理的なレイアウトについての私の理解をいくつかお話します。 。
適切にレイアウトされたページが達成すべき要素について話し始める前に、例を使って説明した方が直感的です。まずはこの写真を見てみましょう。
http://www.yaohaixiao.com/samples/myblog/index.htm
はい、これは記事詳細ページであり、左右の列レイアウトはありませんが、ここで注目したいのは合理的なレイアウトです。フローティング要素については、後の記事で詳しく紹介します。さて、先ほどの話に戻りますが、このページは皆さんご覧になったことがあると思います。