ウェブデザイン研究における XHTML の応用の概要

ウェブデザイン研究における XHTML の応用の概要
<br />一般的に、「標準的な Web ページ」のファイル構成は XHTML CSS です。 XHTML は主に Web ページの構造を表現し、コンテンツを表示するために使用され、CSS は構造レイアウトを定義し、コンテンツ スタイルを変更するために使用されます。
レイアウトによく使用される XHTML には、通常、次のものが含まれます。
DIV: 主にページ コンテンツの論理的な分割に使用されます。たとえば、Web ページには通常、ヘッダー、ナビゲーション、サイドバー、コンテンツ、著作権、その他の責任パーティションが含まれます。このとき、DIV タグを使用して分割することができます。
同時に、各ブロックには次の命名が推奨されます。
引用内容は以下のとおりです。
ヘッド: <div id="masthead"></div>
ナビゲーション: <div id="globalnav"></div>
サイドバー: <div id="navbar"></div>
コンテンツ: <div id="content"></div>
著作権: <div id="copyright"></div>
注意: ID は一意です。つまり、同じページに ID が 2 回以上表示されることはありません。それ以外の場合はクラスを使用します。
ul: 元々は順序なしリストでしたが、XHTML CSS アプリケーションでは構造的に同等でない要素を表すためによく使用されます。 UL の子要素 ​​LI と一緒に使用する必要があります。
引用内容は以下のとおりです。
<div>
<ul>
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
</ul>
</div>
span: この要素を DIV と比較すると、span はバッグで、div はボックスです (Xiaoyi: XHTML コードの基本的な応用より)。実際、div はブロック レベル要素であり、span はインライン要素です (インライン要素とブロック レベル要素を参照)。span は、セクション内の要素のフラグメントまたは要素の行を個別に定義するために使用できます。
例えば:
引用内容は以下のとおりです。
<ul>
<li><span>(2006-11-13)</span>XHML CSS レイアウトにおける XHTML の適用の概要</li>
</ul>
CSS で span を左/右フローティングとして定義すると、日付とタイトルを両側に表示できます。これは比較的よく使われる
引用内容は以下のとおりです。
<ul>
<li>2007-11-5jb51.net</li>
<li>XHML CSS レイアウトの概要</li>
</ul>
ずっとシンプルです。
=======================================
レイアウトに使用される一般的な XHTML タグについて説明しましたが、Web ページのコンテンツを表示するために使用される XHTML タグもあります。例えば:
引用内容は以下のとおりです。

<img src="" alt="" title="" /> は画像を表します
<a href="" title=""></a> はハイパーリンクを示します
<hn></hn>(n=1,2,...,6) はページ コンテンツのタイトルを示します。h1 から h6 は重要度の降順で推奨され、h1 が最も重要なタイトルです (greengnn: div css 命名リファレンスを参照)
太字と斜体の元の <b></b> タグと <i></i> タグは、<strong></strong> タグと <em></em> タグに置き換えられます。

<<:  Dockerイメージ解析ツールのダイブ原理解析

>>:  Ajax リクエストにおけるクロスドメイン問題の原因と解決策

推薦する

Reactでコンポーネントロジックを共有する3つの方法

簡単に説明すると、これら 3 つの方法は、レンダリング プロップ、高階コンポーネント、カスタム フッ...

2つのボールが交差する粘着効果を実現するCSSサンプルコード

これは純粋に CSS のみを使用して作成されたエフェクトです。簡単に言うと、このエフェクトは画像処理...

Linux での MySQL のインストールに関するチュートリアル

目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...

MySQL は重複データを削除して最小の ID ソリューションを維持します

オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...

MySQLデータベースのSYNフラッディング問題を解決する

Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...

複数の古いプレーヤーの埋め込みコード

ウェブページに表示されるプレーヤーは、WMP/RealPlayer/Flash Player に過ぎ...

優秀なウェブ開発者が開発スキルを向上させるために知っておくべき10のこと

「開発とは、単にコードを書くだけではない」というのは、3EV の Dan Frost 氏の言葉です。...

ウェブページのメモリ使用量とCPU使用量を削減する方法

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

シンプルなデータ応答システムを実装する

目次1. デップ2. 観察者を理解する3. 監視と観察者を理解する4. トリガーの依存性5. プロセ...

ファイルの種類を検出するJavaScriptメソッド

目次1. 画像のバイナリデータを表示する方法2. 絵の種類の見分け方3. 画像の種類を検出する方法3...

CSS3は三角形の連続拡大効果を実現します

1. CSS3の三角形は特殊効果でズームし続けます11.1 画像プレビュー 11.2 index.h...

Vueはファイルのアップロードとダウンロードを実装します

この記事では、参考までにVueのファイルのアップロードとダウンロードの具体的なコードを紹介します。具...

IMG での UserMap の使用例

usemap は <img> タグの属性であり、使用するイメージ マップの名前を指定する...

1つのコマンドで、シェルの読み取りコマンドの共通パラメータを理解できます。

Shell で受信パラメータを受信する方法は 2 つあることがわかっています。 1 つはスクリプト...

CentOS 7 に Docker 1.8 をインストールする詳細な手順

Docker は、次の CentOS バージョンでの実行をサポートしています。 • CentOS 7...