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

高洛峰
リリース: 2017-03-12 18:02:51
オリジナル
1555 人が閲覧しました

この記事では 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 定義を使用せずにレンダリングする場合は、这篇文章分享Html技巧: 语义化你的代码 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート