HTML のヒントを共有する: コードを意味論化する

この記事では HTML のスキルを共有します: セマンティックあなたのコード

HTML のセマンティクスはよくある質問のようです。なぜセマンティクスに関する記事があるのでしょう : HTML の各タグには固有のタグがあります。意味とセマンティクスにより、適切な場所で適切なタグを使用して、人間と機械をより容易にすることができます (機械はブラウザーや検索エンジンと同様に理解できます) インデックスエンジン) 私の説明があれば、すべてが一目瞭然です。十分に明確ではないので、Google で調べてください。 適切な場所で適切なタグを使用する方法 これは簡単な理解のロジックです。たとえば、h1 〜 h6 タグは順序なしリストに使用され、ol は塗りつぶされたリストに使用されます。 リストを定義するために使用されます; em、強力なタグは強調のために使用されます... 率直に言うと、HTML タグ のそれぞれの英語の解釈がそのセマンティクスを決定します (この記事の後半で、英語の比較表を載せます)一般的に使用される Html タグの定義を参考にしてください)。 人間と機械の両方にとって明らかなことは何でしょうか? HTML ページがセマンティックであるかどうかを確認する最良の方法は、ページの Css リンク を削除し、Web ページの構造が正しいかどうかを確認することです。よく整理されていますが、ページはまだ非常に読みやすいですか? なぜこんなことが言えるのでしょうか? ブラウザーにはデフォルトのスタイルがあることは誰もが知っています (Chrome の Web Developer Tools for Chrome プラグイン、または Firefox の Web Developer プラグインを使用することをお勧めします) -in)、h1~h6 など、フォント サイズの太字/減少のデフォルト スタイルがあり、上下の余白があり、ul、ol、dl にはすべてデフォルトの箇条書きがあり、strong にはデフォルトで太字のスタイルが付いています。 、同じページ、適切なセマンティクスを備えた HTML は、ページ CSS が削除された場合でも引き続き良好なパフォーマンスを維持できます。 もう 1 つのポイントは、優れたセマンティック コーディングは 検索 エンジンにとってよりフレンドリーであるということです。検索スパイダーは CSS を認識しませんが、HTML タグを認識できます。ここに簡単な例を示します:

	Mr.Think的博客
	专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子.
	Mr.Think的博客
	专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子.

上記の簡単な例とCSS 定義を使用せずにレンダリングする場合は、Html5

の

ヘッド、フッター、サイドバー、記事などの違いを理解する必要があります。これらの要素はすべて、新たに追加された セマンティック タグです。 HTML コーディング セマンティクスは、高品質のフロントエンド開発に向けた一歩であり、Web 標準に準拠することを意味し、スタイルを削除した後もページを整理することができます。セマンティクスの詳細については、こちらをご覧ください。自分で Google するか、Adang の「Web フロントエンド開発の実践方法」の第 3 章を読んでください。添付: タグ セマンティクスの中国語と英語の比較表 ( HTML5 でサポートされていないタグの 行は削除してください)。

ab br頭字語住所bbig大きくなるブロック引用ブロック引用ブロックinbrキャプションキャプションタイトルセンターセンターcenterdd定義の説明定義の説明delppision分離定義定義リスト定義用語定義用語em強調強調フィールドフィールドセットドメインセットフォント フォントリック挿入アイコンリスト項目注文整理リスト段落フォーマット済み取り消し線みんな小さいスパン強い下付きスーパースクリプト付き下線順序なしリスト変数変数

タグ名	英語の綴り	中国語翻訳
a	anchor
略語	略語
頭字語	頭字語
住所	住所
太字	太字
	引用
改行	改行
削除	削除
		リスト
	dt
	セット
	フォント
イタリック	イン	挿入
	凡例	凡例
	li	リスト項目
	オル
並べ替えリスト		p
段落		事前
定義済みフォーマット		s
取り消し線	sm
もっと小さくなって		スパン
レンジ		強い
悪化		サブ
以下の表	sup
スーパースクリプト		u
下線		ul
順序なしリスト		var

以上がHTML のヒントを共有する: コードを意味論化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。