ホームページ > 記事 > ウェブフロントエンド > 『CSS デザインガイド』ノート HTML マークアップと文書構造_html/css_WEB-ITnose
『CSS デザインガイド』ノート HTML マークアップと文書構造_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:19:351379ブラウズ
本『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="images/cisco.jpg" alt="My dog Cisco" />
注: 視覚障害のあるユーザーが使用するスクリーン リーダーは、alt5 属性の内容を読み上げます。そのため、一目で理解できるように、必ず a1f02c36ba31691bcfe87b2722de723b タグの alt 属性を追加してください。 （または一目でわかる）。
その他の重要なポイント: タグとインラインタグをブロックします。
ブロックレベルのタグ
<h1>-<h6>:6级标签，<h1>表示很重要<p>:段落标签<ol>:有序列表<li>:列表项<blockquote>:独立引用
インラインタグ :
<a>:链接（anchor，锚）<img>:图片<em>:斜体<strong>:重要<abbr>:简要<cite>:引证<q>:文本内引用
1.1.4 段落とタグ
4a249f0d628e2318394fd9b75b4636b1 最大かつ最も目立つタイトルであるだけでなく、検索エンジンもこれを 2 番目として扱います。 b2386ffb911b14667cb8f0f91ea547a7 タグは検索語のもう 1 つのソースです。
段落は本文の内容をマークするために使用され、すべてのテキスト要素の中で最も頻繁に使用されます。つまり、他のテキストタグに収まらないテキストのみを段落に配置できます。
1.1.5 複合要素
いわゆる複合要素、つまり複数のタグで構成されています。リスト、テーブル、フォームなどの複雑なユーザー インターフェイス コンポーネントを作成するためのマークアップ。
1.1.6 ネストされたタグ
タグ内に別のタグをネストするには、最初に後のタグを閉じてから、前のタグを閉じる必要があります。 HTML文書の構造は、このように入れ子になったタグと、タグ間に確立される「親子」関係によって形成されます。
1.2 HTML ドキュメント分析
<!DOCTYPE html><html><head><meta charset="utf-8" /> <title>An HTML Template</title></head><body> <h1>Stylin' with CSS</h1> <!-- if you want a typographically-correct, right single quotation mark, replace the ' with ’ --> <p>Great Web pages start with great HTML markup!</p> <!-- OK to remove the code between here and </body> --> <div style="clear:both; padding:100px 0 0 0; font-size:.85em; color:#666;"> <p>A code example from <em>Stylin’ with CSS, Third Edition</em> by Charles Wyke-Smith. Visit <a href="http://www.stylinwithcss.com">stylinwithcss.com</a> for more CSS information and updates.</p> </div> </body></html>
e8e496c15ba93d81f6ea4fe5f55a2244 タグには charset 属性があり、このページが UTF-8 エンコーディングを使用していることをブラウザに伝えます。
b2386ffb911b14667cb8f0f91ea547a7タグ内のテキストは、ページ表示時にブラウザウィンドウ上部のタイトルバーにページ全体のタイトルとして表示されます。
検索エンジンは b2386ffb911b14667cb8f0f91ea547a7 タグ内のテキスト コンテンツを重視し、これらの単語は Web ページのタイトルとして検索リストの結果にも表示されます。テキストはシンプルかつ明確である必要があり、対象読者が Web ページを検索するときに使用するキーワードが含まれている必要があります。
6c04bd5ca3fcae76e30b72ad730ca86d タグには、すべてのコンテンツをマークする HTML 要素が含まれます。
a1f02c36ba31691bcfe87b2722de723b タグ内の src 属性は、source、source;、3499910bf9dac5ae3c52d5ede7383485 タグ内の、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 ノードは次のとおりです。要素ノード: 上の図の 100db36a723c770d327fc0aef2ce13b1、6c04bd5ca3fcae76e30b72ad730ca86d、e388a4556c0f65e1904146cc1a846bee などはすべて要素ノード、つまりラベルです。