写在前面，该博客是对黑马前端课程笔记的再整理，方便自己复习回顾，侵删
01フロントエンド基底.HTML一般的に使用されるタグの第一段階
学習目標
- 理解します：
- 三つの形式の相対パス
- アプリケーション
- 出版レーベル
- テキスト書式タグ
- 画像タグ
- リンク
- 相対パスを使用して、絶対パス
1. HTMLタグを使用
HTMLタグは、ここで我々はいくつかのより少ない使用で最も一般的に使用され、続い学び、多くは、我々はそれを手動で見ることができます。
1.1出版レーベル
ディスプレイを使用したCSSレイアウトと主要なラベルは、ページレイアウトは、最も一般的に使用されるラベルで、ページ構造にラベルを付けます。
1）タイトルタグのH（暗記）
英語略語：文書の頭ヘッドタイトルタイトルタイトル。
より多くのセマンティックウェブを作るために、私たちは多くの場合、ページ上のタイトルタグを使用して、HTMLがあるタイトル、の6つのレベルを提供しています、
タイトルタグの意味：使用するタイトル、重要度の高い順
次のように基本的な構文は次のとおりです。
<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>
次のように表示します。
要約：
- テキストを太字になり、タイトルを追加し、フォントサイズがこの順に増加します
- ラインは、タイトルだけを入れています
2）段落タグP（暗記）
英語略称：段落の段落[pærəgræf]単語を覚えておく必要はありません
意味役割：
HTML文書は、いくつかの段落に分けることができます
ページ上のテキストが整然とを表示しなければならない、我々は通常、記事を書くのと同様に、段落タグと不可分で、ページ全体を複数の段落に分け、段落のラベルがあることができます
<p> 文本内容 </p>
HTML文書は、段落ラップ内のテキストは自動的にブラウザのウィンドウのサイズに基づいて、デフォルトでは、最も一般的なラベルです。
3）水平方向のラベル時間（理解）
英語略称：水平ダッシュ[ˌhɔrəzɑntl]同上。
ページには、多くの場合、構造化するので、その文書の構造が明確に、段落と段落の間で分離するいくつかの水平線を参照してください。これらの水平線は、画像を挿入することによって達成することができ、単に、ラベルによって行うことができる<hr />ページ全体のラベルが水平線を作成すること。次のように基本的な構文は次のとおりです。
<hr />是单标签
Webページで、デフォルトのスタイル水平線が表示されます。
4）ブレークタグBR（暗記）
英語の略語：休憩、中断ラップ
HTMLでは、テキストの段落は、ブラウザウィンドウの右端まで、左から右に配置され、その後、ラップされます。あなたが行を強制的に特定のテキストを表示したい場合は、ブレークタグを使用する必要があります
<br />
あなたは、この時間のようにヒットした場合の単語意志ではない仕事に直接キー改行を入力します。
5）のdivとspanタグ（キー）
divのスパンにはセマンティックWebレイアウトは、私たちの主な2つのボックスきっとあなたが聞いたCSS + divのではないです
DIV部門は、実際にページを結合するために多くのdivがあり、パーティション手段略語部門です。
スパンスパンスパン;範囲
構文：
<div> 这是头部 </div> <span>今日价格</span>
彼らは、私たちのページ要素を保持するために使用される2つのボックス、ですが、彼らは異なっており、そして今、私たちは、主に使用などの機能を覚えて
- divのレイアウトのためのタグが、今彼の党は唯一のdivを置くことができます
- ラインスパンの複数の上に置かれるラベルスパンのレイアウトと
話す時の表示モードの背中の後ろに、私はあなたを教えてくれます
組版タグの概要
| ラベル名 | 定義 | 説明 |
|---|---|---|
<hx></hx> |
タイトルタグ | タイトル用として、および重要度の高い順 |
<p></p> |
段落タグ | HTML文書は、いくつかの段落に分けることができます |
<hr /> |
水平方向のラベル | 何も言うことは、ラインではありません |
<br /> |
ブレークタグ | |
<div></div> |
divタグ | レイアウトのために、今彼の党は唯一のdivを置くことができます |
<span></span> |
spanタグ | レイアウトの行スパンの複数の上に置くことができます |
1.2テキスト書式タグ（暗記）
Webページ、時にはあなたは、あなたがHTMLのテキスト書式タグを使用する必要があり、太字、斜体、または下線テキスト効果を設定する必要があり、テキストは特別な方法で表示します。
違い：
まだ強いセマンティック、大胆な意味を強調するBだけ大胆な、強力な追加。
残りの共感...
太字や斜体のチェックバックの前に2つのグループを覚えておくことが重要な誰かを掲載し、後に2つのグループは覚えていませんでした
1.3ラベルのプロパティ
あなたはより多くの情報が必要な場合は、HTMLタグをWebページを作成するためにHTMLを使用している場合、彼らは属性HTMLタグを使用して設定することができます。次のように基本的な構文は次のとおりです。
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸"> </手机>
1.4画像タグIMG（フォーカス）
英語の略語：イメージ画像
あなたがイメージタグを使用する必要がある画像を表示するには、画像タグには、次のウェブページで詳細に説明するだけでなく、その他の関連する属性。（これは、単一の犬です）
構文は次のとおりです。
<img src="图像URL" />
構文のsrc属性は、画像ファイルのパスとファイル名を指定するために使用され、彼はのimgタグで必要な属性。
私たちが行うCSSを使用する境界線の後ろに、子供の靴はボーダーのようなこの言葉を思い出すためにここにいます
注意：
- タグは、複数の属性を持つことができ、ラベル、ラベルの後ろの名前の先頭に記述する必要があります。
- かかわらず、特性間の順序の、タグ名と属性、特性および属性との間の別の空間です。
- キーと値のペアの形式を取る=「value」の形式
例えば：
正常的<br />
<img src="cz.jpg" width="300" height="300" /><br />
带有边框的<br />
<img src="cz.jpg" width="300" height="300" border="3" /><br />
有提示文本的<br />
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
有替换文本的<br />
<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />
マスターキーポイント：
- 書き込みに必要な状態画像タグの属性してください？
- 状態画像ALTタグ属性の違いとタイトルしてください？
1.5 [リンク]タブ（フォーカス）
英語略称：アンカー略語[æŋkə®]。基本的な説明のアンカー、アンカー
HTMLのハイパーリンクを作成することは非常に簡単です、ただうまくまで含めるようにラベルテキストを使用します。
構文：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| プロパティ | 効果 |
|---|---|
| HREF | URLアドレスは、ラベル用途のためのhref属性、それはハイパーリンク機能を持っているときに、リンク先、（必須属性）を指定します |
| 目標 | 指定したリンクページを開き、その値は_selfを持っており、_selfがデフォルト値、__新しいウィンドウで開くためのブランクでそれらのうちの2つを_blank。 |
注意：
- 外部リンクは、httpを追加する必要があります。// www.baidu.com
- このよう<a hrefの= "index.html">ホームとしてページ名への直接内部リンク内部リンク
- あなたは、リンク先を決定しなかった場合、通常はhref属性の値はリンクラベル「＃」（つまりHREF =「＃」）として定義され、リンクが一時的に空のリンクにあることを示しています。
- だけでなく、あなたは、このような画像、表、オーディオ、ビデオ、などのページ要素、様々なページ上のテキストのハイパーリンクを作成することができますので、ハイパーリンクを追加することができます。
マスターキーポイント：
- 書き込みに必要であると言うリンクタグ属性？
- 新しいウィンドウが、このページへのリンクを開く方法を明記してください？
1.6 [メモ]タブ
コメントタグ - HTMLでは、特別なタグがあります。あなたが読んで理解し、いくつかの簡単なを追加する必要がありますが、HTML文書内のページにコメントテキストを表示する必要がない場合は、コメントタグを使用する必要があります。
簡単な説明：
あなたがソースコードを表示する際の注意事項の内容がブラウザウィンドウに表示されていませんが、文書のHTMLコンテンツの一部として、ユーザーのコンピュータにダウンロードされ、あなたが見ることができます。
構文：
<!-- 注释语句 --> 快捷键是： ctrl + / 或者 ctrl +shift + /
の重要性を注意：
コメントはポスターです、目的はより良いコードのこの部分をやっている説明することである、プログラムは、このコードを実行していません
チームの合意
いくつかの州に記載され、および他の特性が記載されているように、一般に、簡単な説明のために使用
行のコード自体にコメントの上に位置する各注釈コンテンツ前後の空白文字、コメント、
推奨：
<!-- Comment Text -->
<div>...</div>
推奨しません：
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
2.パス（メジャーと難しいです）
実際の作業は、私たちは書類を置き忘れ、またはすぐに我々はそれらを管理するためのフォルダを必要のでそれらが困難、それらを使用するために見つけることができません。
ディレクトリフォルダ：
それは単に私たちは、このようなhtmlファイル、写真やそれ以上のものとして、関連資料を行う必要があるページを保存する通常のフォルダ、です。
ルートディレクトリ
第一層を開きすることは、ルートディレクトリのフォルダです
ページは通常、私たちはその後、画像ファイル（画像）を格納するために特別にフォルダを作成し、絵に非常に多くなり、あなたが画像を挿入次回は、あなたがイメージファイルの場所を指定するには、「パス」のアプローチを使用する必要があります。相対および絶対パス：パスを分けることができます
相対パス
参照文書は、ディレクトリ・パスの確立のための参照基礎とするページ上の位置。異なるディレクトリページ参照に同じファイルを保存した場合、パスは同じで使用されることはありませんしたがって、それは相対パスと呼ばれます。
| カテゴリパス | シンボル | 説明 |
|---|---|---|
| パス付き | 単純に、することができ、画像ファイルの名前を入力として、<IMG SRC =「baidu.gif」/>。 |
|
| パスの下に | 「/」 | 画像ファイルはHTMLにあるフォルダの兄弟ファイル：そのような<IMG SRC =「画像/ baidu.gif」/>のように（例えば、フォルダ名の画像を）。  |
| パス上 | 「... /」 | ファイル名の前に追加しました "... /"、およびレベルは、あなたが使用する必要がある場合は、 "... / ... /" など、上のような<IMG SRC = "... / baidu.gif" />。  |
コードは、私たちは目的のファイルを見つけなければならない、と我々は単にレベルで同じレベルに呼んで、画像はHTMLページの場所に位置して、ファイルから始まる相対パス、
絶対パス
参照ベースのためのWebサイトのルートディレクトリへのディレクトリパスへの絶対パス。すべてのページが同じファイルが参照する際に、使用されるパスが同じであることを意味し、絶対と呼ばれています。
"D：\ウェブ\ IMG \ logo.gifを"、または "http://www.itcast.cn/images/logo.gif" として、完全なネットワーク・アドレス、。
注意：
絶対パスの少ない使用、それの我々の理解。ノートは、しかし、特定のシンボルで表現することを\相対パスではありません/
3.まとめ今日
4.さらに、読書@
4.1アンカーポジション（難易度）
アンカーリンクを作成することにより、ユーザーはすぐに対象コンテンツに移動することができます。
二段階でのアンカーリンクを作成します。
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （拉关系）
<a href="#two">
高速メモリ方式：
同様に、仕事に誰かを見つけるために最初に彼を見つけるために、そしてラテンアメリカ、そして最終的に結果を参照してください。
4.2ベースのラベル
構文：
<base target="_blank" />
要約：
- あなたは、全体的なリンクベースのオープンを設定することができます
- ベースとの間に書かれました
- すべての接続は、デフォルトターゲット=「_空白」で追加されます
~~すべてのリンクのすべてのセットへのリンクはすべて新しいウィンドウで開くページです〜
4.3事前フォーマット済みテキストタグ
<pre>整形済みテキストタグを定義することができます。
囲まれた<pre>要素にラベルのテキストは通常スペースや改行を予約されています。テキストは等幅フォントとして表示されます。
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
いわゆるプリフォーマットされたテキストは、ページ、予約済みスペースや改行などを表示するために私たちの前に書かれたテキストの書式に従って、です。
このラベルを使用すると、テキストの内側に、私たちは書き込みモード表示に従います、段落や改行は、ラベルを必要としません。しかし、それは悪いため、全体的な制御のため、ほとんど使用されています。
4.4特殊文字（理解）
私たちは、その後にhtmlの困難や不便を直接使用する一部の特殊記号は、この時点で我々は、次の代替コードを使用することができます。
そこに多くのですが、我々は、通常の使用は比較的小さいですが、私たちは数が少なく、その上に番号、チェックバックの残りの部分よりもよりも、スペースが大きいの心に焦点を当てます。
要約：
- これらの特殊文字は、オペレータ
&に始まるセミコロン演算子;終了。 - 彼らは、ラベルが、記号ではありません。
- HTMLは以下の数「<」と大なり記号「>」の特殊文字より使用することはできません、ブラウザは、HTMLソースコードで使用される正しい文字エンティティを表示するには、ラベルとしてそれらを解析します
チームの合意
推奨：
<a href="#">more >></a>
推奨しません：
<a href="#">more >> </a>
4.5 HTML5の開発パス
XHTML 4.6とは何ですか
XHTMLは、厳格な、より純粋なHTMLコードです。
- XHTMLを指す拡張可能ハイパーテキストマークアップ言語（拡張可能ハイパーテキストマークアップ言語）。
- XHTMLの目標は、HTMLを交換することです。
- XHTMLとHTML 4.01はほとんど同じです。
- XHTMLは、厳格な、より純粋なHTMLバージョンです。
- XHTMLは、再定義するXMLアプリケーションとしてHTMLです。
- XHTMLは、W3C標準です。
4.7 HTMLとXHTMLの違いは何ですか？
-
XHTMLは拡張可能なHTMLを指し、
-
XHTMLとHTML 4.01は、ほぼ同一であり、
-
XHTMLは、厳格な、より純粋なHTMLバージョンです
-
XHTMLはXMLアプリケーションでHTMLを定義します
-
XHTMLは、2001年1月W3C勧告にリリースされました。
-
XHTMLは、すべての主要なブラウザでサポートされてい
-
XHTML要素は、XML形式のHTML要素に記述されています。HTMLのXHTML厳格なバージョン例えば、それはラベルは小文字でなければならない必要があり、ラベルが適切に閉じなければならない属性は、二重引用符と同じようでなければならないため、ラベルは、きちんと整列順序でなければなりません。
