ホームページ >ウェブフロントエンド >htmlチュートリアル >セマンティック Web ページ XHTML セマンティック タグ_HTML/Xhtml_Web ページの作成
セマンティック Web ページ XHTML セマンティック タグ_HTML/Xhtml_Web ページの作成
- WBOYオリジナル
- 2016-05-16 16:42:081319ブラウズ
構造とプレゼンテーションを分離するもう 1 つの重要な側面は、文書コンテンツを構造化するためにセマンティック マークアップを使用することです。 XHTML 要素の存在は、マークされたコンテンツの部分が対応する構造的意味を持っていることを意味し、他のマークアップを使用する理由はありません。つまり、
タグの見出しの代わりに
を使用するなど、CSS で 1 つの HTML 要素が別の HTML 要素のように見えるようにしないでください。
まず、セマンティクスとデフォルトのスタイルの違いについてですが、デフォルトのスタイルは、ブラウザによって設定されるいくつかの一般的に使用されるタグの表現であり、その主な目的は、誰もがタグを直感的に理解できるようにすることであると個人的に考えています。マークアップ) そして、属性の目的と機能を見ると、Hx シリーズは太字のフォントと大きなフォント サイズを備えているため、タイトルによく似ていることは明らかです。 、 は他の単語と区別し、強調する役割を果たします。リストと表は、それらが何をするのかを明確に示します。
第 2 に、セマンティック Web ページの最も重要な利点は、構造とセマンティクスが優れているため、Web ページのコンテンツが自然に検索エンジンによってクロールされやすくなり、コストを節約できることです。ウェブサイトの宣伝に力を入れてください。
特定のセマンティクスと使用法は、XHTML1.0 TAG リファレンスで説明されています。忘れられやすい、または混同されやすいいくつかの TAG と属性がここで補足されています。
、
よりも優れています。段落間の間隔は CSS を使用して制御することもできるため、段落を相互に簡単かつ明確に区別できます。 line-height を使用すると、行間の間隔を簡単に定義し、ドロップ キャップなどの効果を定義できます。これは完璧です。
例:長年にわたり、Blue Ideal のコンテンツは継続的に充実しており、国内の有名なウェブサイトや伝統的なメディアによって宣伝されてきました。 Google、Baidu、Yahoo、Sohu、Sina、Exciteなどの大手検索サイトによって収集され、Googleの3大検索エンジンにおける簡体字中国語でのキーワード「ウェブサイトのデザインと開発」の検索ランキングで1位を獲得し、 Baidu、Yahoo など、現在 Blue Ideal は、ウェブサイトのデザインと開発において、国内で最も影響力のあるウェブサイトの 1 つに成長しました。
、まず、セマンティクスとデフォルトのスタイルの違いについてですが、デフォルトのスタイルは、ブラウザによって設定されるいくつかの一般的に使用されるタグの表現であり、その主な目的は、誰もがタグを直感的に理解できるようにすることであると個人的に考えています。マークアップ) そして、属性の目的と機能を見ると、Hx シリーズは太字のフォントと大きなフォント サイズを備えているため、タイトルによく似ていることは明らかです。 、 は他の単語と区別し、強調する役割を果たします。リストと表は、それらが何をするのかを明確に示します。
第 2 に、セマンティック Web ページの最も重要な利点は、構造とセマンティクスが優れているため、Web ページのコンテンツが自然に検索エンジンによってクロールされやすくなり、コストを節約できることです。ウェブサイトの宣伝に力を入れてください。
特定のセマンティクスと使用法は、XHTML1.0 TAG リファレンスで説明されています。忘れられやすい、または混同されやすいいくつかの TAG と属性がここで補足されています。
、、、、、 ; は、重要度の高い順にタイトルとして使用されます。 は最高レベルです。
例:
コンテンツをクリップボードにコピーします
コード:
<font face="NSimsun"><h1>ドキュメントのタイトル</h1><code><font face="NSimsun"><h1>文档标题</h1><br><h2>次级标题</h2></font>サブタイトル
Document Title または Document Title を使用する代わりに、明らかに検索エンジンは後者に興味を持っています。彼がタイトルだとは思わないだろう。
段落記号、
、、、 ; は、重要度の高い順にタイトルとして使用されます。 は最高レベルです。
例:
コンテンツをクリップボードにコピーします
コード:
<font face="NSimsun"><h1>ドキュメントのタイトル</h1><code><font face="NSimsun"><h1>文档标题</h1><br><h2>次级标题</h2></font>サブタイトル
Document Title または Document Title を使用する代わりに、明らかに検索エンジンは後者に興味を持っています。彼がタイトルだとは思わないだろう。
段落記号、
、 ; は、重要度の高い順にタイトルとして使用されます。 は最高レベルです。
例:
コンテンツをクリップボードにコピーします
コード:
<font face="NSimsun"><h1>ドキュメントのタイトル</h1><code><font face="NSimsun"><h1>文档标题</h1><br><h2>次级标题</h2></font>サブタイトル
Document Title または Document Title を使用する代わりに、明らかに検索エンジンは後者に興味を持っています。彼がタイトルだとは思わないだろう。
段落記号、
は最高レベルです。
例:
コンテンツをクリップボードにコピーします
コード:
<font face="NSimsun"><h1>ドキュメントのタイトル</h1><code><font face="NSimsun"><h1>文档标题</h1><br><h2>次级标题</h2></font>サブタイトル
Document Title または Document Title を使用する代わりに、明らかに検索エンジンは後者に興味を持っています。彼がタイトルだとは思わないだろう。
段落記号、
コード:
<font face="NSimsun"><h1>ドキュメントのタイトル</h1><code><font face="NSimsun"><h1>文档标题</h1><br><h2>次级标题</h2></font>サブタイトル
を段落として認識している場合は、改行に
を使用しなくなります。また、
で段落を区別する必要もありません。
よりも優れています。段落間の間隔は CSS を使用して制御することもできるため、段落を相互に簡単かつ明確に区別できます。 line-height を使用すると、行間の間隔を簡単に定義し、ドロップ キャップなどの効果を定義できます。これは完璧です。
例:
コンテンツをクリップボードにコピーします
コード:
<font face="NSimsun"><p>Blue Idea www.blueidea.com は 1999 年 10 月に誕生しました。 Blue Idealは設立当初から、ネットワーク開発技術の紹介やWebサイト制作・デザイン交流を主な内容として、Webサイトデザイナー・開発者の居場所づくりを目指してきました。ウェブサイトのコンテンツは、メンバーによって丁寧に作成され、毎日公開され、無私にネチズンを支援し、多くのデザインコンテストを開催し、多くのウェブサイトで現在も使用されている関連プログラムを開発しています。出版された作品やレビューは多くのメディアの注目を集め、専門家から賞賛され、同時に社会的地位を確立した結果、多くのインターネット仲間が Blue Ideal に参加し、中国最大のデザイン サイトになりました。 1つ。 <code><font face="NSimsun"><p>蓝色理想 www.blueidea.com 诞生于1999年的10月。从成立之初，蓝色理想就以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良，每天都会有会员精心制作的教程发布，无私地对网友进行帮助，而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评，同时也从中确立了自己的社会地位，于是一批又一批的网络同仁加盟了蓝色理想，成为国内最大的设计类站点之一。 <br></p><br><p>多年来，蓝色理想的内容不断充实，先后被国内一些知名网站、传统媒体重点推介过，并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点收藏，并在Google、百度、Yahoo三大搜索引擎中以简体汉字关键词"网站设计与开发”搜索排名均为第一，现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。</p></font>
- 、
- 順序なしリストは非常に一般的で誰でも広く使用されていますが、
- プロジェクト 1
- プロジェクト 2
- ;/li>
- 犬
- イヌ科の肉食哺乳類。
- 上海ビーチ
- 1980年に撮影されたこの「上海ビーチ」は、最も成功した作品と言えます。香港テレビの歴史に残る古典的なドラマシリーズ。 香港で放送されると、大きな反響を呼びました。
- チョウ・ユンファ
- すべての偉大な映画スターと同様に、チョウ・ユンファも香港映画の黄金時代を築き上げました。
ウインドブレーカーとサングラス、冷血な銃、晴れやかな笑顔はすべて映画の中に封印されており、振り返ってみると、Fa Geは時代のコーディネートとして刻まれています。
- 順序付きリストも非常に便利です一般的に使用されます。 Web の標準化の過程で、
- はナビゲーション バーでも使用されるようになりました。これは完全に正しいことであり、ブラウザが CSS をサポートしていない場合でも、ナビゲーション リンクは非常に便利です。正常に動作しますが、見た目の美しさは少し異なります。
例: コンテンツをクリップボードにコピーします
コード:<font face="NSimsun"><ul><br><li>项目一</li><br><li>项目二</li><br><li>项目三</li><br></ul></font><font face="NSimsun"><ul></font>コンテンツをクリップボードにコピーしますコード:
<font face="NSimsun"><ol><br><li>第一章</li><br><li>第二章</li><br><li>第三章</li><br></ol></font>
dl は「定義リスト」です。たとえば、この種のリストは、辞書内の単語の説明や定義に使用できます。
例:コンテンツをクリップボードにコピーします コード:<font face="NSimsun"><dl></font><font face="NSimsun"><dl><br><dt>Dog</dt><br><dd>A carnivorous mammal of the family Canidae.</dd><br></dl> </font>コンテンツをクリップボードにコピーします
コード:<font face="NSimsun"><dl><br><dt>上海滩</dt><br><dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。<br>当年在香港播出以后，产生了巨大的轰动效应。</dd><br><dt>周润发</dt><br><dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。<br>风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd><br></dl></font><font face="NSimsun"><dl></font>
、cite、例:、
フォーラムやブログでは、他の人からの引用がよく使用され、短い単一行の引用符をマークするために
1 つ以上の段落の長い引用には、が使用されます。 。 Web ブラウザは、
の間のコンテンツを自動的に認識します。残念ながら、IE はこれを認識しないため、
によってアクセシビリティの問題が発生する場合があります。このため、
の使用を避け、引用タグを手動で挿入することを推奨する人もいます。適切なクラスを含む 内に参照コンテンツを 1 行追加すると、CSS を使用して参照のスタイルを設定できますが、これには意味的な意味はありません。
関連問題への対処に関する見解については、Mark Pilgrim によって書かれた Q タグ (http://diveintomark.org/archives/2002/05/04/the_q_tag) を参照してください。
を使用します。 CSS を使用して参照のスタイルを定義できます。記事の段落を
内に直接配置することはできません。引用された内容も要素 (通常は
) に含める必要があることに注意してください。 cite 属性は、
と
の両方とともに使用して、引用されたコンテンツのソース アドレスを指定できます。参照コンテンツをマークするために
の代わりに を使用する場合は、cite 属性を使用できないことに注意してください。
<font face="NSimsun"><cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.</font>コンテンツをクリップボードにコピーしますコード:
<font face="NSimsun"><p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p></font>コンテンツをクリップボードにコピーしますコンテンツをクリップボードにコピーします コード:コード:
<font face="NSimsun"><p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/<br />struct/text.html#h-9.2.1">The presentation of phrase elements<br>depends on the user agent.</q>.</p></font><font face="NSimsun"><p>W3C は次のように述べています <q cite="http://www.w3.org/TR/REC-html40/<🎜>struct/text.html# h-9.2.1">フレーズ要素の表示はユーザー エージェントによって異なります。</q>.</p></font>コンテンツをクリップボードにコピーしますコード:
<font face="NSimsun"><blockquote cite="http://www.w3cn.org/"><br><p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，<br> 我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，<br> 为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，<br> 每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，<br> 例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；<br> 针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。<br> 这是一种恶性循环，是一种巨大的浪费。”</p><br></blockquote></font>は強調に使用され、 は強調に使用されます。 ほとんどのブラウザでは、強調表示されたコンテンツを斜体および太字で表示します。ただし、強調表示されたコンテンツの表示方法を決定する場合、CSS を使用して外観を定義するのが最善の方法です。視覚効果だけが必要な場合は、強調を使用しないでください。また、強調したいものの、太字や斜体、特に中国語の斜体などの視覚効果があまり良くないと感じる場合は、他の目を引くスタイルを定義して強調の効果を得ることができます。 例: コンテンツをクリップボードにコピーしますコード:<font face="NSimsun"><p><em>强调</em> 的文本通常用斜体显示，<br>然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p></font><font face="NSimsun"><p></em>を強調するテキストは通常斜体で表示されますが、強調する<strong>テキストは通常太字で表示されます。 。 </p></font>、
効果を見る: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm<🎜> <🎜><🎜>コンテンツをクリップボードにコピーします<🎜> <🎜>コード:<🎜> <🎜><🎜> <🎜>、、 、 はテーブルのメインコンテンツです。、概要
XHTML のテーブルはレイアウトに使用しないでください。ただし、リスト データにラベルを付ける場合は、テーブルを使用する必要があります。はテーブルのタイトル、summar 属性はヘッダーの説明、 タグはテーブルの先頭です。
スコープを使用して、headers 属性を置き換え、ヘッダー情報を含むセルをマークすることもできます。
row は、現在のセルを示し、そのセルを含む行に関連するテーブルを提供します。現在のセルのヘッダー情報。
Col は現在のセルを示し、現在のセルに基づいて指定された列に対応するヘッダー情報を提供します。
行グループは現在のセルを示し、現在のセルを含む残りの行グループに関連するヘッダー情報を提供します。
Colgroup は現在のセルを示し、現在のセルに基づいて指定された残りの列グループに対応するヘッダー情報を提供します。
abbr は、ヘッダー セルで省略名を定義するために使用されます。この属性が定義されていない場合、デフォルトのセルの内容は省略形になります。
例:コンテンツをクリップボードにコピーしますコード:
<font face="NSimsun"><table id="mytable" cellpacing="0" summary="Apple PowerMac G5 シリーズの技術仕様"><code><font face="NSimsun"><table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"><br><caption>Table 1: Power Mac G5 tech specs </caption><br> <tr><br><th scope="col" abbr="Configurations" class="nobg">Configurations</th><br><th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th><br><th scope="col" abbr="Dual 2">Dual 2GHz</th><br> <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th><br> </tr><br> <tr><br><th scope="row" abbr="Model" class="spec">Model</th><br><td>M9454LL/A</td><br><td>M9455LL/A</td><br><td>M9457LL/A</td><br> </tr><br> <tr><br><th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th><br><td class="alt">Dual 1.8GHz PowerPC G5</td><br><td class="alt">Dual 2GHz PowerPC G5</td><br><td class="alt">Dual 2.5GHz PowerPC G5</td><br> </tr><br> <tr><br><th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th><br><td>900MHz per processor</td><br><td>1GHz per processor</td><br><td>1.25GHz per processor</td><br> </tr><br> <tr><br><th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th><br><td class="alt">512K per processor</td><br><td class="alt">512K per processor</td><br><td class="alt">512K per processor</td><br> </tr><br></table></font>表 1: 電力Mac G5 技術仕様 デュアル 1.8GHz M9454LL/A M9455LL/A <font face="NSimsun"><p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p></font>M9457LL /A デュアル 1.8GHz PowerPC G5 デュアル 2GHz PowerPC G5 デュアル 2.5 GHz PowerPC G5 プロセッサあたり 900 MHz プロセッサあたり 1 GHz <font face="NSimsun"><p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p></font>プロセッサあたり 1.25 GHz プロセッサあたり 512K プロセッサあたり 512K del を知っている場合は、del を取り消し線として使用しないでください。また、del には、削除の理由と削除時刻を示す cite と datetime も含まれています。 ins は挿入を意味し、そのような属性もあります。 例: コンテンツをクリップボードにコピーします コード:</strong><br><br>はコンピュータコードを意味します。デフォルトのスタイルは書体です。技術フォーラムやブログでよく見かけられます。 <br>例: <div class="blockcode"> <em>コンテンツをクリップボードにコピーします</em> <h5>コード:</h5> <code><font face="NSimsun"><code>p{margin:2px 0;}
- 、
タグは Web ページ上の略語を表し、 タグは Web ページ上の略語を表します。 (注: ここでは、略語と略語は分けて考慮されます。略語の範囲は略語よりも広いです。最初の文字の略語
は、 タグとともに使用されます) Windows 上の IE6.0 未満のブラウザでは、現在、 ラベルはサポートされていません。 IE では、CSS を に適用できますが、
タグにはプロンプトが表示されますが、 は無視されます。タグ。
解決策を参照してください: http://www.w3cn.org/article/translate/2005/115.html
例:
コンテンツをクリップボードにコピーします
コード:
<font face="NSimsun"><abbr title="Cascading Style Sheets">CSS</abbr></font>
コンテンツをクリップボードにコピーします
alt 属性と title 属性 コード:
<font face="NSimsun"><acronym title="Cascading Style Sheets">CSS</acronym ></font>
title 属性は、要素の追加の説明情報を提供するために使用されます。title 属性は、base、basefont、head、html、meta、などに加えて使用できます。 param、script、titleのすべてのタグ。しかし、それは必要ありません。
alt 属性は、画像、フォーム、またはアプレットを表示できないユーザー エージェント (UA) の置換テキストを指定します。置換テキストの言語は、lang 属性で指定します。
コンテンツをクリップボードにコピーします
コード:
<font face="NSimsun"><img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com"></font>
コンテンツをクリップボードにコピーします
参照: コード:
<font face="NSimsun"><a href="http://www.jluvip.com/blog/article.asp?id=260" title="js获取单选按钮的数据">js获取单选按钮的数据</a></font>
デフォルトのスタイル:
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. com/2005/11/html_tags.html
http://brainstormsandraves.com/articles/semantics/structor/
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、セマンティクスとウェブの未来
http: //www.westciv.com/style_master/house/good_oil/xhtml/index.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。