HTML タグと属性をセマンタイズする

構造とプレゼンテーションを分離するもう 1 つの重要な側面は、文書コンテンツを構造化するためにセマンティック マークアップを使用することです。 XHTML 要素の存在は、マークされたコンテンツの部分が対応する構造的意味を持っていることを意味し、他のマークアップを使用する理由はありません。つまり、

タグの見出しの代わりに

を使用するなど、CSS で 1 つの HTML 要素が別の HTML 要素のように見えるようにしないでください。

1 つ目は、セマンティクスとデフォルト スタイルの違いについてです。デフォルト スタイルは、ブラウザによって設定されるいくつかの一般的に使用されるタグの表現であり、その主な目的は、マークアップと属性を直感的に理解できるようにすることです。 Hx シリーズは太字で大きなフォント サイズであるため、タイトルによく似ていることがわかります。 、 は他の単語と区別し、強調する役割を果たします。リストと表は、それらが何をするのかを明確に示します。

次に、セマンティック Web ページの最も重要な利点は、構造とセマンティクスが優れているため、Web コンテンツが検索エンジンによって自然にクロールされやすくなり、Web サイトを宣伝する際の労力を大幅に節約できることです。

タイトルとしては、重要度の高い順に、

、

、

、

、

、

が使用されます。

は最高レベルです。例:

<h1>文档标题</h1>
<h2>次级标题</h2>

ドキュメント タイトル

または ドキュメント タイトル を使用する代わりに、検索エンジンは明らかに後者を使用しません。タイトルにある1つ。

段落記号、

を段落として認識すると、
を使用して改行する必要がなくなります。段落。

内のテキストは自動的に折り返され、行折り返し効果は
よりも優れています。段落間の間隔は CSS を使用して制御することもできるため、段落を相互に簡単かつ明確に区別できます。 line-height を使用すると、行間の間隔を簡単に定義し、ドロップ キャップなどの効果を定義できます。これは完璧です。例:

<p>Admin10000.com 是WEB开发者学习交流的网站,这里提供大量实用的技术文档及相关资源下载，是网页设计、网络编程人员及其爱好者必备网站。</p>
<p>希望大家能在这里学到WEB开发知识，启发灵感，提高自己的WEB开发水平。</p>

、

、

順序なしリストは非常に一般的であるため、誰でも広く使用されています。
順序付きリストも非常に一般的に使用されています。 Web の標準化の過程で、
はナビゲーション バーでも使用されるようになりました。これは完全に正しいことであり、ブラウザが CSS をサポートしていない場合でも、ナビゲーション リンクは非常に便利です。正常に動作しますが、見た目の美しさは少し異なります。例:

<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

rree

、

、

dlは「定義リスト」です。たとえば、この種のリストは、辞書内の単語の説明や定義に使用できます。例:

<ol>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
</ol>

rree

、引用、、

フォーラムやブログでは、他の人を引用するときに短い単一行の引用符をマークするために を使用することがよくあります。 Web ブラウザは、 の間のコンテンツを自動的に認識します。残念ながら、IE はこれを認識しないため、 によってアクセシビリティの問題が発生する場合があります。このため、 の使用を避け、引用タグを手動で挿入することを推奨する人もいます。適切なクラスを含む 内に参照コンテンツを 1 行追加すると、CSS を使用して参照のスタイルを設定できますが、これには意味的な意味はありません。 に関する問題への対処に関する見解については、Mark Pilgrim によって書かれた Q タグ (http://peintomark.org/archives/2002/05/04/the_q_tag) を参照してください。 1 つ以上の段落の長い引用には、

を使用します。 CSS を使用して参照のスタイルを定義できます。記事の段落を

内に直接配置することはできません。引用された内容も要素 (通常は

) に含める必要があることに注意してください。 cite 属性は、 と

の両方とともに使用して、引用されたコンテンツのソース アドレスを指定できます。 タグの代わりに を使用してコンテンツを引用する場合は、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/
struct/text.html#h-9.2.1">The presentation of phrase elements
depends on the user agent.</q>.</p>

<blockquote cite="http://www.w3cn.org/">
    <p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。”</p>
</blockquote>

、

是用作强调的，是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好，特别是斜体对于中文来说，那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。例如:

<p><em>强调</em> 的文本通常用斜体显示，
然而，<strong>特别强调</strong> 的文本通常以粗体显示。</p>

、标签为表格头部，标签为表格主体内容，标签为表格尾部。
其中还可以使用scope 可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下：
　row 指示当前单元格，为包含当前单元格的行提供相关的表头信息。
　col 指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。
　rowgroup 指示当前单元格，为包含当前单元格的其余行组提供相关的表头信息。
　colgroup 指示当前单元格，为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。
例如:

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
  <tr>
    <th scope="col" abbr="Configurations" class="nobg">Configurations</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">Model</th>
    <td>M9454LL/A</td>

    <td>M9455LL/A</td>
    <td>M9457LL/A</td>
  </tr>
  <tr>
    <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</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">Frontside bus</th>
    <td>900MHz per processor</td>
    <td>1GHz per processor</td>
    <td>1.25GHz per processor</td>

  </tr>
  <tr>
    <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
  </tr>

</table>

<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>

 

,

知道del，就不要再用做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。例如：

<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>

表示是计算机代码。而默认样式为打字体。技术论坛和blog中经常遇到。例如：

、

标签是表示web页面上的简称，标签为取首字母缩写。（注：这里把简称和缩写分开而论，简称范围比缩写大，取首字母的缩写用标签）Windows的IE6.0以下的浏览器暂不支持标签。 在IE里，你可以应用CSS给但是不能应用给标签，IE会为标签的title属性显示提示，但是会忽略标签。
解决方法见: http://www.w3cn.org/article/translate/2005/115.html
例如:

<abbr title="Cascading Style Sheets">CSS</abbr>

<acronym title="Cascading Style Sheets">CSS</acronym >

alt属性和title属性

title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。
alt属性为不能显示图像、窗体或applets的用户代理（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>

以上がHTML タグと属性をセマンタイズするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：LIタグで記事タイトルを左揃え、日付を右揃えにする方法次の記事：LIタグで記事タイトルを左揃え、日付を右揃えにする方法

関連記事

続きを見る

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について



福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved

标签为首部说明，

、	、< caption >、 summary XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。	为表格标题，属性summar为摘要，