セマンティックWebページXHTMLセマンティックタグ

構造と表現を分離するもう1つの重要な側面は、ドキュメントコンテンツを構築するためのセマンティックマークアップの使用です。 XHTML要素の存在は、タグ付きコンテンツの一部に対応する構造化された意味があり、他のタグを使用する理由がないことを意味します。言い換えれば、CSSに1つのHTML要素を別のHTML要素のように見せてはいけません。

まず、セマンティクスとデフォルトスタイルの違いについてです。デフォルトスタイルは、ブラウザによって設定された一般的に使用されるタグの表現です。私は個人的に、その主な目的は、タグと属性の使用と機能を誰もが直感的に理解できるようにすることだと思います。 HXシリーズは、大胆でより大きなフォントサイズを備えているため、タイトルに非常に似ていることは明らかです。 <strong>、<em>は他の言葉と区別し、強調の役割を果たすために使用されます。リストとテーブルに関しては、彼らが何をしているのかをあなたに伝えることは明らかです。

第二に、セマンティックのWebページで最も重要なことは、それらが検索エンジンに友好的であることです。優れた構造とセマンティクスにより、Webページのコンテンツは、検索エンジンによって自然に簡単にrawっています。また、Webサイトのプロモーションは多くの努力を節約できます。

特定のセマンティクスと用途は、XHTML1.0タグリファレンスで説明されています。ここでは、忘れやすい、または混乱しやすいタグや属性が補足されます。

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>は、タイトルとして使用され、重要に応じて削減されます。 <h1>は最高レベルです。

例えば：

コード：

<div class = title> document title </div>、または<span class = title> document title </span>。検索エンジンがそれを後者のタイトルとは見なさないことは明らかです。

段落のマークは、<p>を段落として知っているため、<br />を使用してラインを破壊することはなく、段落と段落を区別する必要はありません。 <p> </p>のテキストは自動的にラップされ、ラッピングの効果は<br>よりも優れています。パラグラフ間のギャップは、CSSを使用して制御することもでき、パラグラフをパラグラフと区別するのが簡単かつ明確になります。旅行間隔を簡単に定義してから、ラインハイイトを使用して最初の特徴のシンキング効果を定義できる場合は完璧です。

たとえば、コンテンツをクリップボードにコピーします

コード：

</p>

<p>長年にわたり、Blue Idealのコンテンツは継続的に充実しており、いくつかの有名な国内のWebサイトや従来のメディアによって強調されてきました。 Google、Baidu、Yahoo、Sohu、Sina、Exciteなどの主要な検索サイトによって収集されています。 Google、Baidu、Yahooの3つの主要な検索エンジンの中で、単純化された中国のキーワードのWebサイトの設計と開発の検索で最初にランク付けされました。現在、Blue Idealは、中国のWebサイトデザインと開発における最も影響力のあるプロフェッショナルウェブサイトの1つに発展しています。 </p> <ul>、<ol>、<li>

<ul>順序付けられていないリストは非常に一般的であり、広く使用されています。 <ol>順序付けられていないリストも非常に一般的に使用されています。 Web標準化プロセスでは、<ul>はナビゲーションバーにも使用されます。もともとは、ナビゲーションバーがリストであり、これを行うのは完全に正しいです。ブラウザがCSSをサポートしていない場合、ナビゲーションリンクはまだ非常に優れていますが、それほど美しくありません。

たとえば、コンテンツをクリップボードにコピーします

コード：

<li>プロジェクト1 </li>

<li>プロジェクト2 </li>

<li>プロジェクト3 </li>

</ul>コンテンツをクリップボードにコピーします

コード：

<li>第1章</li>

<li>第2章</li>

<li>第3章</li>

</ol> <dl>、<dt>、<dd>

DLは定義リストです。たとえば、辞書の単語の説明と定義は、このリストで使用できます。

たとえば、コンテンツをクリップボードにコピーします

コード：

<dt> dog </dt>

<dd> canidae科の肉食哺乳類。</dd>

</dl>コンテンツをクリップボードにコピーします

コード：

<dt>上海ビーチ</dt>

<dd> 1980年に撮影されたこの「上海bund」は、香港の歴史の中で最も成功した古典的なドラマです。

その年に香港で放送された後、それは大きな感覚を引き起こしました。 </dd>

<dt> chow yun-fat <​​/dt>

<dd>すべての偉大な映画スターと同様に、チョウ・ユン・ファットは香港の映画の黄金時代である時代を確認しました。

風のコート、サングラス、冷血な二重銃、晴れた笑顔はすべて映画に封印されています。振り返ってみると、FA GEは時代の座標として刻まれています。 </dd>

</dl> <cite>、cite、<q>、<blockquote>

フォーラムやブログは、多くの場合、他の人からの引用を使用し、<q>を使用して短いシングルラインの引用をマークします。 Webブラウザは、<q>間のコンテンツを自動的に認識します。残念ながら、IEは認識できず、<q>はいくつかのアクセシビリティの問題を引き起こす可能性があります。このため、一部の人々は<q>を使用しないことを推奨し、手動で参照マークを挿入することをお勧めします。適切なクラスを含むA <span>に1つの参照コンテンツを追加すると、CSSを使用して参照をスタイリングできますが、これには意味的な意味はありません。 Qタグ（http://diveintomark.org/archives/2002/05/04/the_q_tag）のビューを読むことができます<q>マーク・ピルグリムが書いた関連する問題を処理できます。

1つまたは複数の段落の長い引用には、<blockquote>を使用する必要があります。 CSSを使用して、参照スタイルを定義できます。記事を<blockquote>に直接配置することはできず、引用されたコンテンツも要素、通常は<p>に含める必要があることに注意してください。属性引用は、参照されるコンテンツのソースアドレスを提供するために<q>または<blockquote>で使用できます。 <q>タグ参照コンテンツの代わりに<span>を使用する場合、cite属性を使用できないことに注意してください。

たとえば、コンテンツをクリップボードにコピーします

コード：

コード：

コード：

struct/text.html＃H-9.2.1>フレーズ要素のプレゼンテーション

コンテンツをクリップボードにコピーします

コード：

<p>私たちのほとんどは深い経験をしています。主流のブラウザバージョンがアップグレードされると、私たちが構築したばかりのウェブサイトが時代遅れになる可能性があります。

Webサイトをアップグレードまたは再構築する必要があります。たとえば、1996年から1999年までの典型的なブラウザ戦争

NetscapeおよびIEと互換性があるために、Webサイトはこれら2つのブラウザに異なるコードを記述する必要がありました。同様に、

新しいネットワークテクノロジーとインタラクティブなデバイスが出現するたびに、この新しいテクノロジーまたは新しいデバイスをサポートするために新しいバージョンを作成する必要もあります。

たとえば、モバイルインターネットアクセスをサポートするWAPテクノロジー。同様の質問は無数にあります。ウェブサイトコードは肥大化して複雑であり、帯域幅の多くを無駄にします。

特定のブラウザのDHTML特殊効果は、潜在的な顧客をブロックします。使用が困難なコード、障害者はウェブサイトなどを閲覧できません。

これは悪循環であり、巨大な無駄です。 </p>

</blockquote> <em>、<strong>

<em>は強調に使用され、<strong>は強調に使用されます。ほとんどのブラウザは、イタリック体を使用して、強調表示されたコンテンツと太字を表示して、強調表示されているコンテンツを表示します。ただし、これは必要ありません。強調がどのように表示されるかを判断する場合、最良の方法はCSSを使用してパフォーマンスを定義することです。あなたが望むのが視覚効果だけであるとき、強調を使用しないでください。そして、あなたが強調したいが、それでも視覚効果、特に中国語のイタリック体ではそれほど良くないと感じているなら、あなたは強調の効果を実現するために他のより多くの人目を引くスタイルを完全に定義することができます。

たとえば、コンテンツをクリップボードにコピーします

コード：

ただし、特に重点を置いたテキストは通常​​、太字で表示されます。 </p> <table>、<td>、<th>、<キャプション>、要約

XHTMLのテーブルをレイアウトしないでください。ただし、リストのデータをマークする場合は、テーブルを使用する必要があります。 <th>はテーブルのタイトルであり、属性の概要は要約であり、<キャプション>タグはヘッダーの説明、<thead>タグはヘッダー、<tbody>タグはテーブルのメインコンテンツ、<tfoot>タグはテーブルの端です。

また、各値のコンテンツが次のとおりです。

行は現在のセルを示し、現在のセルを含む行に関連するヘッダー情報を提供します。

COLは現在のセルを示し、現在のセルに従って指定された列に対応するヘッダー情報を提供します。

RowGroupは現在のセルを示し、現在のセルを含む残りの行グループに関連するヘッダー情報を提供します。

Colgroupは現在のセルを示し、現在のセルに基づいて指定された残りの列グループに対応するヘッダー情報を提供します。

ABBRは、ヘッダーセルの略語名を定義するために使用されます。このプロパティが定義されていない場合、デフォルトのセルコンテンツは省略されています。

たとえば、コンテンツをクリップボードにコピーします

コード：

<キャプション>表1：Power Mac G5 Tech Specs </Caption>

<tr>

<th scope = col abbr = configurations class = nobg>構成</th>

<th scope = col abbr = dual 1.8> dual 1.8ghz </th>

<th scope = col abbr = dual 2> dual 2ghz </th>

<th scope = col abbr = dual 2.5> dual 2.5ghz </th>

</tr>

<tr>

<th scope = row abbr = model class = spec>モデル</th>

<td> m9454ll/a </td>

<td> m9455ll/a </td>

<td> m9457ll/a </td>

</tr>

<tr>

<th scope = row abbr = g5プロセッサクラス= specalt> g5プロセッサ</th>

<td class = alt> dual 1.8ghz powerpc g5 </td>

<td class = alt> dual 2ghz powerpc g5 </td>

<td class = alt> dual 2.5GHz PowerPC G5 </TD>

</tr>

<tr>

<th scope = row abbr = frontside bus class = spec>フロントサイドバス</th>

プロセッサあたり<TD> 900MHz </td>

プロセッサごとに<TD> 1GHz </td>

<TD>プロセッサごとの1.25GHz </td>

</tr>

<tr>

<th scope = row abbr = l2キャッシュクラス= specalt> level2キャッシュ</th>

<td class = alt>プロセッサあたり512k </td>

<td class = alt>プロセッサあたり512k </td>

<td class = alt>プロセッサあたり512k </td>

</tr>

</table>効果表示：http：//www.blueidea.com/articleimg/2006/02/3228/csstables.htm

コード：

あなたがDelを知っているなら、もう<s>をstrikethroughとして使用しないでください。 DELの使用は明らかにセマンティックです。さらに、delには、削除の理由と削除時間を示すために、引用と日時も付属しています。 INSは挿入を意味し、そのような属性があります。

たとえば、コンテンツをクリップボードにコピーします

コード：

それはコンピューターコードを意味します。デフォルトスタイルはフォントです。多くの場合、テクニカルフォーラムやブログで遭遇します。

たとえば、コンテンツをクリップボードにコピーします

コード：

<ABBR>タグは、Webページの略語を表し、<頭字語>タグは略語です。 （注：ここでは、略語と略語を分離します。略語の範囲は略語よりも大きく、最初の文字の略語を取るために

Windows IE6.0の下のブラウザを<頭字語>タグ）で書き込みます<Abbr>タグをサポートしません。 IEでは、CSSを<頭字語>に適用できますが、<Abbr>タグには適用できません。

IEは、<頭字語>タグのタイトル属性のプロンプトを表示しますが、<Abbr>タグは無視します。

参照：http：//www.w3cn.org/article/translate/2005/115.html

たとえば、コンテンツをクリップボードにコピーします

コード：

コード：

タイトル属性は、ベース、ベースフォント、ヘッド、HTML、メタ、パラマリ、スクリプト、タイトルを除くすべてのタグでタイトル属性を使用できる要素の追加命令を提供するために使用されます。しかし、それは必要ありません。

ALTプロパティは、画像、フォーム、またはアプレットを表示できず、交換テキストを指定できないユーザーエージェント（UA）です。交換テキストの言語は、Lang属性によって指定されます。コンテンツをクリップボードにコピーします

コード：

コード：

デフォルトスタイル：

http://www.w3cn.org/article/tips/2005/116.html

http://www.w3.org/tr/css21/sample.html

セマンティクス：

http://www.456bereastreet.com/lab/developing_with_web_standards/zh

http://www.456bereastreet.com/lab/developing_with_web_standards

http://www.w3cn.org/article/translate/2005/114.html

http://www.w3cn.org/article/translate/2005/114.html

http://www.junchenwu.com/2005/11/html_tags.html

http://brainstormsandraves.com/articles/semantics/structure/

http://www.w3.org/tr/html401/struct/text.htm

http://www.simplebits.com/bits/simplequiz/

悪いタグ：

http://www.htmldog.com/guides/htmlintermediate/badtags/

Qタグ

http://diveintomark.org/archives/2002/05/04/the_q_tag

HTML、XHTML、セマンティクスとWebの未来

http://www.westciv.com/style_master/house/good_oil/xhtml/index.html