ホームページ ウェブフロントエンド htmlチュートリアル DIV+CSS テクノロジーは中国の中小規模の Web サイトに適していますか_html/css_WEB-ITnose

DIV+CSS テクノロジーは中国の中小規模の Web サイトに適していますか_html/css_WEB-ITnose

Jun 24, 2016 pm 12:30 PM

今、全国の大小さまざまなWebサイトで、いわゆる「Webサイト再構築」という技術的な「革命」が起こっています。簡単に言うと、Webサイト制作におけるDIV+CSSです。 DIV+CSS を使用して従来のテーブルを置き換え、フレームを作成し、ページを美しくします。
リファクタリングを行う前に、なぜリファクタリングを行うのか、なぜ DIV+CSS テクノロジーを使用する必要があるのか​​を理解する必要がありますか? この問題を理解することによってのみ、誰もがこのテクノロジーを使用して Web サイトを再構築する動機を得ることができます。すべての主要な CSS 学習 Web サイトとチュートリアルでは、例外なく DIV+CSS を使用する次の利点が列挙されています:
1. Web ページのフロントエンドはコンテンツを表示するだけでよく、形式的なアートは CSS によって処理されます。 。生成された HTML ファイルのコードは合理化され、小さくなり、開くのが速くなります。
2. ウェブサイトの修正がより簡単で簡単です。ウェブページのレイアウトを再設計したり、元のウェブサイトの HTML やプログラムページを変更したりする必要はなく、CSS ファイルを変更するだけですべての修正が完了します。ポータルサイトのリニューアルは、服を変えるのと同じくらい簡単です。
3. 検索エンジンがよりフレンドリーになり、上位にランクされやすくなります。
以上の3点が、Nの多くのメリットの中で最も魅力的で優れた3点です。これら 3 つのポイントを 1 つずつ紹介します:
1 つ目のポイントは、Web ページのフロントエンドはコンテンツを表示するだけでよく、形式的な部分は CSS に任せます。生成された HTML ファイルのコードは合理化され、小さくなり、開くのが速くなります。
これが DIV+CSS テクノロジーの最も顕著な特徴であり、CSS の存在の根源です。現在の伝統的な (表) Web デザイン技術を完全に覆します。現在テーブルを使用して作成されているすべてのコンテンツは CSS を使用して解決でき、そのソリューションはより完璧で強力です。テーブル内でテーブルを使用する必要はありません。div 内で div を使用するだけで、div+CSS テクノロジを使用して、生成される Web ページのファイル サイズがより合理化され、小さくなります。 。テーブルの時代では、ページに 10 個以上のテーブルが存在するのが一般的でしたが、DIV+CSS では、テーブルがなくてもテーブルを使用できるようになり、以前の効果が完全に実現されます。テーブルを使用した場合と比較して、Web ページのファイル サイズが 50% 削減され、Web マスターのハード ドライブのスペースが節約され、訪問者が Web ページを開く時間が短縮されます。さらに、div+CSS を使用した場合とは異なります。以前は、ページのコンテンツを表示する前にテーブル全体を読み取る必要がありましたが、div を読み取るだけで効果が表示されるため、Web ページを開くまで待つ必要がなくなりました。そのメリットは明確で強力です。
この利点は確かに重要で、従来のテーブルを使用して構築された Web ページの場合、コンテンツが多い場合、ファイルを開くときに確実に 0.0 秒の遅延が発生することがあります。 DIV+CSS を使用する場合、テーブルは使用されないため、フロントデスクを開いたときに表示されるのは直接のコンテンツだけであり、CSS ファイルはインポートされたリンクであり、HTML ファイルのサイズとは関係ありません。この種の生成された HTML ファイルのサイズは約 10K です。ファイル数が少ない場合は目立ちませんが、ファイルサイズが 10,000 を超えると、それでも数十 MB のサイズが節約されます。
実際、これらの利点は現在ではあまり役に立ちません。理由は? テーブルによって生成される HTML ファイルは大きくなり、より多くのスペースを必要としますが、現在の仮想ホスト スペースは数百元で 3G に達する可能性があるためです。中小規模のポータルや Web サイトでは十分ではありますが、データ量が 100,000 を超える場合、実際には、中小規模の場合、このコストは完全に無視できます。規模のウェブサイト所有者。しかもテーブルを使うと開くスピードが遅くなります。現在のネットワーク環境では、誰もがインターネットにアクセスするのに少なくとも 512K のブロードバンドを使用しており、DIV+CSS を使用すると開くのに 1 秒もかかりません。つまり、0.0秒、これは基本的に誰にも見えません。どちらも HTML を生成するため、仮想ホスト ネットワークが安定している限り、テーブルと div+css に違いはありません。サーバーへの影響は同じです。

ただし、テーブルを使用して Web ページのフレームとテーブルを作成する場合、それらはすべて選択的に作成されるため、コードを記述する必要はなく、制作要件を満たすために枠線と行番号と列番号を入力するだけで済みます。ただし、 div+CSS を使用する場合、テーブルに 4 行のコードを記述する場合、ページに 10 を超える div テーブルの生成が含まれる場合、手書きコードは 50 行を超えます。数学が苦手だったり、論理的思考能力が低い人は、手書きのフォームが重なったり、位置が完全に間違っていたりして、めちゃくちゃになってしまいます。 div+css を使用してテーブルを作成する場合、テーブルの論理的な配置は完全に独自の手書きコードに依存するため、強力な手書きコードのスキルとロジックを持っていない場合、費やす時間は少なくとも 10% 長くなります。テーブル作成にかかる時間は約4倍。基本的に、1 ページに定義される ID とクラスは 20 ページ以上になります。ID やクラスを 5 文で作成すると、HTML ページを作成するには 100 文以上のコードが必要になります。それらの多くは CSS として保存でき、ファイルは繰り返し呼び出されます。つまり、ページ内容が同じでレイアウトも同じであれば、リンクCSSを直接​​インポートすることが可能です。
これは、以前に HTML を生成するときに Web ページのテンプレートを作成するのとよく似ています。ただし、このテンプレートを作成するのにかかる時間は、テーブルで作成する場合の数倍かかります。という人もいるかもしれませんが、バージョンを修正する際にはCSSを書き直すだけで済み、HTMLを生成する必要はありません。次に、CSS ファイルの別のリビジョンを作成するときに、テーブルを使用してページ テンプレートを作成し、サイト全体の HTML ページを自動生成している可能性があることを言いたいと思います。不可能ではありません。
Web マスターとして、手書きのコードに特に自信がなく、論理的思考能力もそれほど高くない場合は、従来のテーブルを使用して Web ページをより熟練して迅速に作成することをお勧めします。
2 番目のポイントは、Web サイトの改訂がより簡単かつ簡単であることです。Web ページのレイアウトを再設計したり、元の Web サイトの HTML やプログラム ページを変更したりする必要はなく、CSS ファイルを変更するだけですべての改訂が完了します。
DIV+CSS は、ポータル Web サイトの服を変えるのと同じくらいシンプルで簡単です。変更する場合は、CSS を書き換えて、以前の CSS を上書きするだけです。新しい CSS を使用してリビジョンを実現します。便利ですね。
便利なのは便利ですが、ウェブサイトの場合、毎月更新する必要があるのか​​、それとも半年に一度更新する必要があるのか​​、これを頻繁に行うウェブサイトはほとんどないと思います。現在、個人の Web サイトを含む業界 Web サイトやポータル Web サイトを含む多くの有名な Web サイトは、多くても 1 年に 1 回更新されます。バージョンは年に 1 回変更されますが、CSS を書き直す必要があるのは年に 1 回だけであり、CSS の作成にかかる時間は、テーブルを使用して CSS を作成する場合に比べて 1 ~ 2 倍遅くなります (技術的に熟練している場合)。では、なぜ CSS を使用する必要があるのでしょうか。テーブルを使用すると同じ効果が得られます。テーブルは CSS で作成するのに 10 分かかります。
全国の中小規模のウェブマスターのウェブサイトのデータ量は一般的に 10 万件未満ですが、HTML の自動バッチ生成機能により、生成が完了するまでにかかる時間はわずか数時間です。気にする必要があるのは年に一度だけなので、大したことではありません。
したがって、Web サイトが月に 1 回更新されない限り、最も熟練した便利な方法を使用して Web デザインを実装することをお勧めします。
もちろん、CSS をマスターしていてコーディングオタクであれば。あなたは私の言ったことをナンセンスだと受け取ります。
3 番目のポイントは、検索エンジンがよりフレンドリーになり、上位に表示されやすくなることです。
CSS のこの利点を見たとき、私は冷笑しました。翻訳者やライターは中国のインターネット環境を本当に理解していません。これは、google.com が一般的に使用されている環境など、外国では十分に可能です。しかし、百度が独占している中国のインターネット環境を考えれば、完全に無視してもいいだろう。
Baidu や Google に関係なく、検索エンジンの主なランキング基準はタイトルと重みに基づいています。これら 2 つのポイントを使用することはできませんが、主な目的のためにコンテンツを使用してデータをキャプチャします。そして最も重要な点は、中小規模の Web サイト所有者のトラフィックの約 80% が Baidu からのものであるということです。div+CSS を使用すると、Baidu が上位にランクされると思いますか。あなたはそう思います、あなたは中国のウェブマスターになる資格があまりにもありません。
言うまでもなく、たとえあなたの DIV+CSS にこの利点があり、あなたのページが Baidu 検索で上位にランクされることができたとしても、このページを 1 秒以内にあなたに提供すると思いますか?トラフィックが一定量に達すると、Baidu K はあなたに異議を唱えません。 (キーワード K を参照します)
要約すると、DIV+CSS は非常に優れており強力であるため、あまり迷信すべきではないと個人的に感じています。Web ページを作成し、美しくするための重要な補助機能として非常に強力で便利です。テーブルフレームやテーブルの作成における多くの欠点やアートの欠点を補うことはできますが、それを独占的に使用するには時間と労力がかかりすぎるため、全国の中小規模のWebサイト所有者にはまったく適していません。 。個人的には、table+DIV+CSS を使用するのが最良の組み合わせであり、最も時間と労力を節約できる方法だと考えています。
PS: 多くの CSS マテリアルは、CSS で生成された Web ページのコードが少ないことを宣伝しています。つまり、この種の HTML ファイルはまったく美化されていないため、美化プロセスのステートメントはすべて . CSS ファイルのコードは So many Cheetos です。
HTML は CSS ファイルとともに使用する必要があり、単独で使用することはできません。

2008 年 8 月 27 日に Qzone に掲載されました

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

See all articles