まず、HTMLとは何でしょうか?
HTMLでhtyperテキストマークアップ言語
HTMLは、Webページの基礎にも、ページの主要部分です。ページのスタイルを持つことができないので、あなたが対話することはできませんが、レンダリングされるWebコンテンツの必要性を持っている必要があります。だから、HTMLフロントエンド部分の基礎です。
ハイパーテキストは:イメージ、リンク、さらには音楽、プログラム、およびその他の非テキスト要素を含めることができ内部のページを参照します。
マークアップ言語:マーク(ラベル)の言語を構成します。
これは、Webページを作成するために使用されるマークアップ言語です。マークアップ言語は、テキストが詳細を処理するドキュメントの構造とデータを表示するためにコンピュータ上でコード、テキスト(テキスト)とテキストの組み合わせに関連する他の情報です。他のテキストに関連する情報(例えば含む、などを示すテキスト情報の構造)は、元のテキストと組み合わせたが、標識された使用(マークアップ)を同定しました。
ページ== HTML文書は表示に使用しているブラウザによって解析され
、このようなxxx.htmlなどの静的リソース:静的ページ
、動的ページ:いくつかの動的に生成さによって開発されたHTMLコードの言語をユーザの要求に基づいて、
第二に、ラベルは何ですか?
HTMLマークアップ言語としては、種々の標識を介してWebコンテンツをマークすることです。私たちは、HTMLがメインのHTMLタグを学ぶことです学びます。
- 例えば、ワードラップ角括弧で構成されます。<html> *すべてのタグは、単語の数で始めることはできません。
- タグは大文字と小文字は区別されません。<HTML>と<HTML>。小文字を推奨しました。
- 私たちは、タグ本体と呼ばれる2つのラベル間の開始タグと終了タグの<a> </a>のセクション:ラベルは、2つの部分に分かれています。
- 一部のタグは、ラベルにこのラベルの比較的単純な関数を使用して、ラベルは自動閉鎖例と呼ばれている:... <BR/> <HR /> <入力/> <IMG />
- タグはネストされたが、クロスませんネストされたことができます。<A> <B> </a>の</ B>
ラベルのプロパティは何ですか?
- 通常、キーと値のペアの形態であってもよい。例えば、名の場合=「アレックス」
- プロパティは、ほんの始まりまたは自己終了タグやラベルで表示されます。
- すべて小文字の属性名。*属性値は二重引用符または一重引用符で囲む必要があります例えば名前=「アレックス」
- プロパティ値と属性名とまったく同じ場合は、直接属性名を書く。たとえば、読み取り専用
<!DOCTYPE html>タグは何ですか?
歴史的な理由には、各ブラウザのページのレンダリングの違い、あるいは同じブラウザーであっても異なるバージョンがあり、ページのレンダリングが異なっています。W3C規格の導入前に、何の違いが生じ、ページのレンダリングに標準的なブラウザが統一された(Quirksモードまたは互換モードと呼ばれる); W3C規格の導入により、(統一規格にCSScompatかをページをレンダリングするブラウザが呼び出されません厳密モードでは、両方の最も単純な差であるStandarsモード)と呼ばれます。
W3C規格を導入した後、ブラウザは、新しい基準を採用し始めているが、どのように古い基準がに使用した場合、古いレンダリング方法によれば、標準が出てきた前に、多くのページが書かれている、ウェブを閲覧し続けることができるようにするという問題がありますレンダリング、ページが正しく表示されるようになります。ブラウザのレンダリング互換性を維持するためには、前のページには、ブラウザが(:マイクロソフトIEなど)古いレンダリング方法を保持し、適切に表示することができます。このように、ブラウザのレンダリングは、ブラウザ上のメソッド共存をレンダリングする2種類、QuircksモードとStandarsモードを発生します。
window.top.document.compatModeは: // BackCompatは:モード癖、ブラウザがページを解析、レンダリング、独自のQuirksモードを使用しています。 // CSS1Compatは:標準モードでは、ブラウザは、W3C標準的な分析レンダリングページを使用しています。
このプロパティは、ブラウザを識別し、使用することになりますが、あなたのページには、DOCTYPE宣言は、その後、compatModeのデフォルトは悪魔の始まりですBackCompat、あるいない場合 - ブラウザのページをレンダリング解決するために独自の方法では、その後、別のブラウザでデバイスは、別のスタイルを示しています。
ページ<!DOCTYPE HTML>だから、を追加した場合、それは標準モードと同じですがオンになっている、あなたは正直ので、すべてのブラウザでページという、W3C標準に従ってページをレンダリングするために解決しなければならないブラウザレーンは、表示する方法です。これは、<!DOCTYPE HTML>役割です。
第三に、開発環境
共通Hbuild、から選択する多くのHTMLエディタがありますが、崇高なテキストは、DreamweareはHTMLを開発するために使用することができます。もちろんPyCharmも、HTMLの開発をサポートしています。
第四に、ファイルの拡張子の指定
ファイルの拡張子.htmまたは.htmlの一般的な使用の.htmと.htmlのページには、同様に違いはありませんよう、ウェブ上の影響はありません、交換可能に使用することができる静的な拡張、ページファイルなし異なる区別、HTM接尾辞接尾辞htmlページです。HTM HTMLとは、より小さな「L」以上である唯一の違いは、全く異なると考えることができません。
開発環境のために我々は、ああ、我々は正式にHTMLタグそれを学ぶ入った、余分導入しません。PS:学生!あなたは、フロントエンドのいくつかは何すべてのタグを通じて学生を知りたい場合は、あなたは、Baiduのホームページを開くF12、または検査を右クリックすることができます、あなたは見つけるでしょう、のように:
五、HTMLの文書構造
このセクションでは、我々は、HTMLファイルの構造を学ぶ:HTMLファイルには、独自の固定構造を有しています。
<!DOCTYPE HTML> <HTML> <HEAD> ... </ head>の <身体> ... </ BODY> </ HTML>
次のようにコード上で説明されています。
まず、<!DOCTYPE HTML>
これは、文書宣言があるHTML文書の最初の行に書かれなければならないである文書はHTML5の文書であることを示す、ラベルの前に。<html>
<html></html>
ルートタグとして知られている、すべてのページがあるラベルに。<html></html>
<head></head>
タグは、文書の頭を定義するために使用され、それはすべてのヘッド要素のコンテナです。ヘッドの共通の要素がありますが、、、および他のラベル、ラベルヘッドは、次のセクションで詳細に説明します。<title>
<script>
<style>
<link>
<meta>
- 内とタグとの間のコンテンツがページなどのメインコンテンツである、、、で、及び他のウェブコンテンツラベルタグ(図淡緑色の部分)の含有量が最終的にブラウザに表示されます。
<body>
</body>
<h1>
<p>
<a>
<img>
<body>
HTML文書は、HTMLタグとテキストコンテンツを含む、ブラウザ上の異なるラベルが異なる結果が表示されますので、私たちは心の中で最も一般的なタグの特性を維持する必要があります。
六、HTMLのコメント
言語をプログラミング何どんなに私たちは、さらに苦もなく、私たちはここにコメント、自明の重要性をコメントしているさに注意を払うNotes形式でHTMLについての話を聞かせている必要があり、学びます:
<! - ここでは、コンテンツのコメントがあります - >
注:コメントは、直接改行で使用することができます。そして、我々はHTMLコードをラップするラベルに注釈を付けるために使用されています。以下のような:
<! - XX節スタート- >
ここでのあなたのHTMLコードxxの部分を入れて
<! - XXの端部分- >
HTMLは、Notesのコメント:
- HTMLは、ネストされたコメントをサポートしていません。
- コメントはHTMLタグでHTMLを記述することはできません
七、HTMLタグの属性
HTMLタグは開始ラベルに書かれたプロパティ、プロパティのように、一般的にキーと値のペアを設定することができます。として
<DIV ID = " I1 " >これは、DIVのラベルである</ DIV> <Pのクラス = ' P1 P2 P3 ' >これは段落タグである</ P> <A HREF = " http://www.baidu.com " >これは、リンク</a>である <INPUTタイプ= ' ボタン'のonclick = ' addclick()' > </ INPUT>
なぜあなたは、プロパティをすることができます設定することができますか?
最後に、我々はCSSを通じてこれらのラベルを美化するために行きますので、実際には、あなたはjavascriptの運営、理解することは簡単なようすることができ、その後、我々はオブジェクトとして見ることができ、これらのラベルは、オブジェクトは、独自のプロパティとメソッドを持っている必要があります。それが入力タグに来るとき、タイプ=「ボタン」のその財産である上記のようなあなたがそう、のonclick =「addclickは()」は、その方法です。
タグの属性についての注意:
1 いくつかの特定のプロパティは、カスタム属性を設定することができるため、ラベルの複数の属性は、スペースで区切られた複数の属性を提供することができる以外.HTMLラベルは区別順序ではありません。 2 。引用符で囲まれた属性値がラップを使用し、通常は二重引用符は、単一引用符かもしれません。 3.属性と属性値の大文字と小文字は区別されていないが、小文字を使用することをお勧めします。
八、ラベルの分類
HTMLエレメントのタグの3種類:ブロック要素、エレメント列、素子行ブロック。
8.1共通ブロック要素。
1
|
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
|
特長:ディスプレイ:ブロック;
- 各ブロックレベル要素は新しい行を開始し、それ以降の要素は別々の行にもあります。自身のライン
- 高さ、幅、行の高さと上下の余白の要素がある提供されてもよいです。
- 設定せずに素子幅は、設定された幅ない限り(均一な幅と親要素)親コンテナ自体の100%です。
8.2一般的なインライン要素:
<A>の<span> <BR> <I> <em>の<strong>を<ラベル>
特長:ディスプレイ:インライン;
- そして、他の要素1行に。
- 素子高さ、幅、及び上下の余白を設定することができません。
- 要素の幅は、幅テキストまたはイメージ含まれていることで変更できません。
8.3一般的に使用されるインラインブロック要素。
<IMG> <入力>
特長:ディスプレイ:インラインブロック;
- そして、他の要素1行に。
- 高さ、幅、行の高さと上下の余白の要素は設けられていてもよいです
注意:
我々は戻ってページのレイアウトのための準備ができてブロックレベル要素、インライン要素、属性表示によって、インラインブロック要素に変換することができます。
九、ネストされたラベルのルール
インラインブロック要素は、ブロックのいくつかの要素または要素を含むことができるが、インライン要素のブロック要素を含むことができない、それは例えば、他のインライン要素を含めることができます。
<div>の<div> </ div> <H1> </ H1> <P> <P> </ div>の✔️ <a href=" ">#の<span> </ span>の</a>の✔️ <スパン>の<div> </ div> </ span>の❌
Pブロック要素は、例えば、ラベルの内側に配置することができません
<P> <OL> <LI> </ LI> </ OL> </ P> ❌
<P>の<div> </ div> </ P>❌
唯一のブロックレベル要素を含めることはできませんインライン要素を含めることができますいくつかの特別なブロックレベル要素はありますが、これらの特別なラベルは、次のとおりです。
H1、H2、H3、H4、H5、H6、P
li要素は、UL、OL、div要素や他のラベルを埋め込むことができます
<UL> <LI> <UL> <LI> <div> </ div> </ LI> <LI> <OL> <LI> </ LI> <LI> </ LI> <LI> </ LI> <LI> </ LI> </ OL> </ LI> </ UL> </ LI> </ UL>