HTML タグと属性をセマンタイズする
構造とプレゼンテーションを分離するもう 1 つの重要な側面は、文書コンテンツを構造化するためにセマンティック マークアップを使用することです。 XHTML 要素の存在は、マークされたコンテンツの部分が対応する構造的意味を持っていることを意味し、他のマークアップを使用する理由はありません。つまり、
タグの見出しの代わりに
を使用するなど、CSS で 1 つの HTML 要素が別の HTML 要素のように見えるようにしないでください。
1 つ目は、セマンティクスとデフォルト スタイルの違いについてです。デフォルト スタイルは、ブラウザによって設定されるいくつかの一般的に使用されるタグの表現であり、その主な目的は、マークアップと属性を直感的に理解できるようにすることです。 Hx シリーズは太字で大きなフォント サイズであるため、タイトルによく似ていることがわかります。 、 は他の単語と区別し、強調する役割を果たします。リストと表は、それらが何をするのかを明確に示します。
次に、セマンティック Web ページの最も重要な利点は、構造とセマンティクスが優れているため、Web コンテンツが検索エンジンによって自然にクロールされやすくなり、Web サイトを宣伝する際の労力を大幅に節約できることです。
タイトルとしては、重要度の高い順に、
、、、、、 が使用されます。 は最高レベルです。例: <h1>文档标题</h1>
<h2>次级标题</h2>
ログイン後にコピー
、、、 が使用されます。 は最高レベルです。例: <h1>文档标题</h1>
<h2>次级标题</h2>
ログイン後にコピー
、 が使用されます。 は最高レベルです。例: <h1>文档标题</h1>
<h2>次级标题</h2>
ログイン後にコピー
は最高レベルです。例: <h1>文档标题</h1>
<h2>次级标题</h2>
ログイン後にコピー
<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>
、
dlは「定義リスト」です。たとえば、この種のリストは、辞書内の単語の説明や定義に使用できます。例:
<ol> <li>第一章</li> <li>第二章</li> <li>第三章</li> </ol>
、引用、、
フォーラムやブログでは、他の人を引用するときに短い単一行の引用符をマークするために ) に含める必要があることに注意してください。 cite 属性は、
是用作强调的，是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好，特别是斜体对于中文来说，那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。例如:
XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。
知道del，就不要再用
表示是计算机代码。而默认样式为打字体。技术论坛和blog中经常遇到。例如：
标签是表示web页面上的简称，标签为取首字母缩写。（注：这里把简称和缩写分开而论，简称范围比缩写大，取首字母的缩写用标签）Windows的IE6.0以下的浏览器暂不支持标签。 在IE里，你可以应用CSS给但是不能应用给标签，IE会为标签的title属性显示提示，但是会忽略标签。
title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。 以上がHTML タグと属性をセマンタイズするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。 リアルなヌード写真を作成する AI 搭載アプリ 写真から衣服を削除するオンライン AI ツール。 脱衣画像を無料で AI衣類リムーバー AIヘンタイを無料で生成します。 使いやすく無料のコードエディター 中国語版、とても使いやすい 強力な PHP 統合開発環境 ビジュアル Web 開発ツール 神レベルのコード編集ソフト（SublimeText3） HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。 HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。 これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。 HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。 HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。 HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。 HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。 を使用することがよくあります。 Web ブラウザは、
の間のコンテンツを自動的に認識します。残念ながら、IE はこれを認識しないため、
によってアクセシビリティの問題が発生する場合があります。このため、
の使用を避け、引用タグを手動で挿入することを推奨する人もいます。適切なクラスを含む 内に参照コンテンツを 1 行追加すると、CSS を使用して参照のスタイルを設定できますが、これには意味的な意味はありません。
に関する問題への対処に関する見解については、Mark Pilgrim によって書かれた Q タグ (http://peintomark.org/archives/2002/05/04/the_q_tag) を参照してください。 1 つ以上の段落の長い引用には、
を使用します。 CSS を使用して参照のスタイルを定義できます。記事の段落を
内に直接配置することはできません。引用された内容も要素 (通常は
と
の両方とともに使用して、引用されたコンテンツのソース アドレスを指定できます。
タグの代わりに を使用してコンテンツを引用する場合は、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>
、
<p><em>强调</em> 的文本通常用斜体显示，
然而，<strong>特别强调</strong> 的文本通常以粗体显示。</p>
、
、 、< caption >、 summary
为表格标题，属性summar为摘要， 标签为表格主体内容，标签为表格尾部。
其中还可以使用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还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。例如：<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>
、
解决方法见: 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属性
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>
ホットAIツール
Undresser.AI Undress
AI Clothes Remover
Undress AI Tool
Clothoff.io
AI Hentai Generator
人気の記事
ホットツール
メモ帳++7.3.1
SublimeText3 中国語版
ゼンドスタジオ 13.0.1
ドリームウィーバー CS6
SublimeText3 Mac版
ホットトピック
7552
15
1382
52
83
11
22
95
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
