構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用してドキュメント コンテンツを構造化することです。 XHTML 要素が存在するということは、マークされた部分の内容に構造的な意味があり、他のタグを使用する必要がないことを意味します。つまり、見出しに <p> タグの代わりに <div> を使用するなど、CSS によって HTML 要素が別の HTML 要素のように見えることがないようにしてください。 コンテンツをクリップボードにコピー 代わりにコード:<h1>文檔標題</h1> <div class="title">ドキュメント タイトル</div>、または <span class="title">ドキュメント タイトル</span>。当然ながら、検索エンジンは後者をタイトルとは見なしません。 <p> 段落タグ。<p> が段落であることがわかれば、行を区切るために <br/> を使用する必要がなくなり、段落を区別するために <br/><br/> を使用する必要もなくなります。 <p></p> 内のテキストは自動的に折り返され、折り返し効果は <br> よりも優れています。段落間のスペースも CSS を使用して制御できるため、段落を明確に区別することが容易になります。 line-height を使用して行間の間隔を簡単に定義し、最初の文字のドロップなどの効果を定義できれば完璧です。 例えば: コンテンツをクリップボードにコピー <ul>、<ol>、<li>コード:<p>藍色理想www.blueidea.com 誕生于1999年的10月。從成立之初,藍色理想就以建設網站設計與開發人員之家為宗旨,以介紹網絡開發技術與網站創作設計交流為主要內容。其網站內容制作精良,每天都會有會員精心制作的教程發布,無私地對網友進行幫助,而且還舉辦過不少設計比賽并開發了很多目前仍被許多網站應用的相關程序。而所發布的作品與點評受到了多家媒體關注及行家的好評,同時也從中確立了自己的社會地位,于是一批又一批的網絡同仁加盟了藍色理想,成為國內最大的設計類站點之一。 <ul> 順序なしリストは非常に一般的で広く使用されており、<ol> 順序付きリストも非常に一般的に使用されています。ウェブ標準化の過程で、<ul> はナビゲーション バーにもより多く使用されるようになりました。ナビゲーション バーはもともとリストなので、このようにするのはまったく正しいことです。また、ブラウザーが CSS をサポートしていない場合でも、ナビゲーション リンクは正常に機能しますが、見た目は少し悪くなります。 例えば: コンテンツをクリップボードにコピー コード:<ul> コンテンツをクリップボードにコピー <dl>、<dt>、<dd>コード:<ol> dl は「定義リスト」の略です。たとえば、この種のリストは辞書の単語の説明や定義に使用できます。 例えば: コンテンツをクリップボードにコピー コード:<dl> コンテンツをクリップボードにコピー <cite>、cite、<q>、<blockquote>コード:<dl> フォーラムやブログでは、他の人の発言を引用することがよく行われます。短い 1 行の引用をマークするには、<q> を使用します。 Web ブラウザは <q> 間のコンテンツを自動的に認識します。残念ながら、IE はこれを理解せず、場合によっては <q> によってアクセシビリティの問題が発生することがあります。このため、<q> の使用をできるだけ避け、引用符を手動で挿入することを推奨する人もいます。適切なクラスを持つ <span> で単一行の引用コンテンツを囲むと、引用を CSS でスタイル設定できますが、これには意味的な意味はありません。 <q> 関連の問題への対処に関する彼の考えについては、Mark Pilgrim の The Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag ) をお読みください。 1 つ以上の段落の長い引用の場合は、<blockquote> を使用する必要があります。 CSS を使用して参照のスタイルを定義できます。段落を <blockquote> 内に直接配置することはできないことに注意してください。引用されたコンテンツも要素 (通常は <p>) 内に含まれている必要があります。 cite 属性は、引用されたコンテンツのソース アドレスを提供するために、<q> または <blockquote> と共に使用できます。引用コンテンツをマークするために <q> ではなく <span> を使用する場合は、cite 属性を使用できないことに注意してください。 例えば: コンテンツをクリップボードにコピー コード:<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman. コンテンツをクリップボードにコピー コード:<p> <cite>孔子</cite>曰:<q>學而不思則罔,思而不學則殆</q>.</p> コンテンツをクリップボードにコピー コード:<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/ コンテンツをクリップボードにコピー <em>、 <strong>コード:<blockquote cite="http://www.w3cn.org/"> <em> は強調に使用され、<strong> は強い強調に使用されます。 ほとんどのブラウザでは、強調されたコンテンツは斜体で表示され、強く強調されたコンテンツは太字で表示されます。ただし、これは必須ではありません。強調されたコンテンツの表示方法を決定する場合、最も良い方法は CSS を使用して外観を定義することです。視覚的な効果だけが必要な場合は強調を使用しないでください。また、強調したいが、太字や斜体、特に中国語の斜体では視覚効果が良くないと感じる場合は、強調効果を実現するために、他のより目を引くスタイルを定義することができます。 例えば: コンテンツをクリップボードにコピー <table>、<td>、<th>、<caption>、要約コード:<p><em>強調</em> 的文本通常用斜體顯示, XHTML のテーブルはレイアウトに使用しないでください。ただし、リスト データにラベルを付けることが目的の場合は、テーブルを使用する必要があります。 <th> は表のタイトル、属性 summar は概要、<caption> タグはヘッダーの説明、<thead> タグは表のヘッダー、<tbody> タグは表の本体の内容、<tfoot> タグは表のフッターです。 また、scope を使用して headers 属性を置き換え、ヘッダー情報を含むセルをマークすることもできます。値は次のとおりです。 行は現在のセルを示し、現在のセルを含む行に関連するヘッダー情報を提供します。 col は現在のセルを示し、現在のセルによって指定された列に対応するヘッダー情報を提供します。 rowgroup は現在のセルを示し、現在のセルを含む残りの行グループに関連するヘッダー情報を提供します。 colgroup は現在のセルを示し、現在のセルによって指定された残りの列グループに対応するヘッダー情報を提供します。 abbr は、ヘッダー セル内の省略名を定義するために使用されます。この属性が定義されていない場合、セルの内容はデフォルトで省略されます。 例えば: コンテンツをクリップボードにコピー 効果ビュー: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htmコード:<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> <dfn> コンテンツをクリップボードにコピー <挿入>、<削除>コード:<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p> del の使い方がわかったので、取り消し線を引くために <s> を使わないでください。del を使うほうが明らかに意味的に優れています。また、del には、削除の理由と削除時刻を示す cite と datetime も含まれています。 ins は挿入を意味し、次のような属性も持っています。 例えば: コンテンツをクリップボードにコピー <コード>コード:<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p> 表現はコンピュータコードです。デフォルトのスタイルは入力です。技術フォーラムやブログでよく見かけます。 例えば: コンテンツをクリップボードにコピー <略語>、<頭字語>コード:<code>p{margin:2px 0;}</code> <abbr> タグは Web ページ上の略語を表すために使用され、<acronym> タグは名前の略語を表すために使用されます。 (注: ここでは、略語と省略形を別々に説明します。省略形の範囲は略語の範囲よりも広くなります。頭文字の省略形には <acronym> タグを使用します。) IE6.0 未満の Windows ブラウザーは現在、<abbr> タグをサポートしていません。 IE では、CSS を <acronym> タグに適用できますが、<abbr> タグには適用できません。 IE は <acronym> タグの title 属性のヒントを表示しますが、<abbr> タグは無視します。 解決策は次のとおりです: http://www.w3cn.org/article/translate/2005/115.html 例えば: コンテンツをクリップボードにコピー コード:<abbr title="Cascading Style Sheets">CSS</abbr> コンテンツをクリップボードにコピー alt属性とtitle属性コード:<acronym title="Cascading Style Sheets">CSS</acronym > title 属性は、要素の追加の説明情報を提供するために使用されます。title 属性は、base、basefont、head、html、meta、param、script、title を除くすべてのタグで使用できます。しかし、それは必要ありません。 alt 属性は、画像、フォーム、またはアプレットを表示できないユーザー エージェント (UA) の代替テキストを指定します。置換テキストの言語は、lang 属性によって指定されます。 コンテンツをクリップボードにコピー コード:<img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com"> コンテンツをクリップボードにコピー 参考文献:コード:<a href="http://www.jluvip.com/blog/article.asp?id=260" title="js獲取單選按鈕的數據">js獲取單選按鈕的數據</a> デフォルトのスタイル: 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/en 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、セマンティクス、そしてウェブの未来 http://www.westciv.com/style_master/house/good_oil/xhtml/index.html |
<<: Dockerはプライベートライブラリイメージを完全に削除します
導入アニメーションを使用すると、JavaScript や jQuery に依存せずに、純粋な CSS...
効果画像のない表示は単なる空虚な言葉です。 1. オーディオをベースにし、elementUI と組み...
1. CentOS 7 仮想マシンを開きます。 2. 仮想マシンにログインし、リストにないユーザー名...
目次1. インストール要件2. OSイメージのダウンロード3. VMware Workstation...
覚えて: IDE ディスク: 最初のディスクは hda、2 番目のディスクは hdb...最初のディ...
これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...
数字で始まる次の CSS クラス名は有効になりません。 .1番目{ 色: 赤; }有効な CSS ク...
1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...
目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...
1. フォントのプロパティcolorは、div{color:red;}のようにテキストの色を指定しま...
目次FileReaderはローカルファイルまたはBLOBを読み取ります1. FileReaderの使...
Baiduで検索しました。 。 chcp コマンドを使用して、cmd の文字エンコーディングを 65...
序文MRR は Multi-Range Read の略で、ランダム ディスク アクセスを削減し、ラン...
最近、ウェブサイトを開発する際にトップに戻るボタンを作成する必要がありますが、私は主にバックエンドの...
BEM は、Web 開発に対するコンポーネントベースのアプローチです。ユーザー インターフェイスを独...