『CSS デザインガイド』ノート HTML マークアップと文書構造_html/css_WEB-ITnose

本『CSS デザイン ガイド』を読んで勉強することによる要約
『CSS デザイン ガイド』 / Charles Ivyke-Smith 著、Li Songfeng 訳 - People's Posts and Telecommunications Press
本の Web サイト: http://www. stylinwithcss.com
強くお勧めします! ！ 説明が簡単、簡潔、初心者向け! ！

HTML タグと文書構造

1.1 HTML タグの基本

1.1.1 本文には終了タグを使用する

終了タグの基本的な形式は次のとおりです。

<标签名>文本内容<标签名/><标签名 属性_1="属性值" 属性_2="属性值">文本内容</标签名>

1.1.2 引用されたコンテンツには自己終了タグを使用する

自己終了タグの基本 形式は次のとおりです。

<标签名 属性_1="属性值" 属性_n="属性值" />

テキスト以外のコンテンツは、自己終了タグを通じて表示されます。終了タグと自己終了タグの違いは、終了タグには表示される実際のコンテンツが含まれるのに対し、自己終了タグは表示されるコンテンツへの参照をブラウザに提供するだけであることです。 HTML ページがロードされると、ブラウザは追加のリクエストをサーバーに送信し、終了タグから参照されるコンテンツを取得します。

1.1.3 属性

属性は、ブラウザにタグに関する追加情報を提供する責任があります。すべての HTML タグには属性を追加できます。例:

<img src="/static/imghwm/default1.png"  data-src="images/cisco.jpg"  class="lazy" alt="My dog Cisco" />

注: 視覚障害のあるユーザーが使用するスクリーン リーダーは、alt5 属性の内容を読み上げます。そのため、一目で理解できるように、必ず タグの alt 属性を追加してください。 （または一目でわかる）。

その他の重要なポイント: タグとインラインタグをブロックします。

ブロックレベルのタグ

<h1>-<h6>:6级标签，<h1>表示很重要<p>:段落标签<ol>:有序列表<li>:列表项<blockquote>:独立引用

インラインタグ :

<a>:链接（anchor，锚）<img  alt="『CSS デザインガイド』ノート HTML マークアップと文書構造_html/css_WEB-ITnose" >:图片<em>:斜体<strong>:重要<abbr>:简要<cite>:引证<q>:文本内引用

1.1.4 段落とタグ

最大かつ最も目立つタイトルであるだけでなく、検索エンジンもこれを 2 番目として扱います。 タグには、すべてのコンテンツをマークする HTML 要素が含まれます。
タグ内の src 属性は、source、source;、 タグ内の、href 属性は、ハイパーリンク参照、ハイパーリンク参照です。

1.2.1 開発ツールの紹介: Web Developer

関連記事 :

Web Developer 簡体字中国語版ダウンロード (Firefox & Chrome 拡張機能)

Baidu 百科事典: WebDeveloper プラグイン

WEB 開発者

「アウトライン」メニューの「ブロック レベル要素のアウトライン」コマンドを使用すると、このコマンドでページ上のブロック レベル要素ボックスのアウトラインを表示できます。

カスタム要素のアウトラインは、アウトラインメニューのアウトラインカスタム要素から表示できます。本文、インライン要素など。

1.2.2 HTMLエンティティ

主要な記事リンク:

HTML文字エンティティ

HTMLシンボル

HTMLエンティティシンボルコードチートシート

1.3 ドキュメントオブジェクトモデル (DOM)

ドキュメント オブジェクト モデル DOM (ドキュメント オブジェクト モデル) は、HTML ドキュメントにアクセスして処理するための標準メソッドを定義します。 DOM は、HTML ドキュメントを要素、属性、テキストを含むツリー構造 (ノード ツリー) として表現します。

次のコードのように:

HTML コードを DOM ノード階層図に分解します:

HTML ドキュメントはノードのコレクションであると言えます。 DOM ノードは次のとおりです。要素ノード: 上の図の 、

、

などはすべて要素ノード、つまりラベルです。

テキスト ノード: JavaScript、DOM、CSS、および

...

内のその他のテキストなど、ユーザーに表示されるコンテンツ。

属性ノード: のリンク属性 href="http://www.imooc.com" などの要素属性。