[01] HTMLエントリゼロベースの学習ノート（1）

フロントの基礎を学習する前に、今のフロントとフルスタックエンジニア方向に、前の学習に堪能で、深たいです。

フロントエンドの時計ビデオを通じて主に学習する前に、実践的な演習と組み合わせます。今すぐ+動画+練習を読んで、それは学習の最も効率的な方法であるべきだと思います。HTML、CSS、私は主に「頭最初のHTMLとCSS第二版」、秩序と緩やかな、理解しやすい知識を頭最初のシリーズの本を参照してください。

ここでは、次のように最初の部分をコーミング、前に行うことを学ぶのノートで、私はこの本を読んだことです。

HTML：ハイパーテキストマークアップ言語

1.1概念の理解

1、役割：ページの構造を説明する責任;
2は、HTMLの意味を理解する：
1）ミリリットルをマークアップ言語は、ウェブの構造を記述するために使用されます。

HTMLのマークアップ言語によって：それは、ブラウザがページを表示する方法を知っている方法です。たとえば、<P> <head>と他のタグは、テキストのブラウザ構造と意味を伝えます。これは、段落、どのような位置などの絵でテキストのタイトルである、です。

コンテンツページ（いくつかの顕著な例外は、<IMG>）マーカーの組が必要周囲
例：<h1>the first page</h1>総称要素：要素コンテント+ + =フラグ終了フラグを開始します

2）HT：ハイパーテキスト、別のページへ1ページからリンクしています。

1.2基本的な構文

1、HTML構造

このような比較的完全なスケルトン：

1    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3    <head>  描述网页的配置
4        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5        <meta name="Keywords" content="牛逼，很牛逼，特别牛逼" />
6        <meta name="Description" content="网易是中国领先的互联网技术公司" />
7        <title>Document</title>
8    </head>
9    <body>
10        其中的内容是用户可以看见的内容
11    </body>
12    </html>

1行目：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html要素ではないブラウザ用のドキュメントタイプの指定]ページで！
標準が公開されていることを公共;
"-//W3C//DTD XHTML 1.0 Transitional//EN" 彼は、バージョンXHTML1.0を使って表現しました
<!DOCTYPE html> HTML5のDOCTYPE

4行目：文字セット

文字セット：すべてのコンピュータ上でいくつかの文字、数字、記号や他の言語を表現することができます。例えば、ASCIIと上のようにします。今、Unicode文字エンコーディングの統一規格があり、それは人気のあるソフトウェアがたくさんあるとオペレーティングシステムには、文字セットをサポートしています。私たちは、私たちがして、ユニコードエンコーディングを使用するブラウザに指示する必要があります<meta>タグ。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">これは、HTML4.01およびそれ以前の<meta>タグ形式です。HTML5、のように書かダイレクト<meta charset=”utf-8”>
UTF-8は、コーディングのunicodeシリーズ（このシリーズをコーディングする他がある）である
：中国の2つの方法で使用することができますエンコード
、アラビア語など、すべての言語をカバーし、国際UTF-8文字、：最初の中国の
二：GB2312 GBKも中国語フォントで書かれている、唯一のシンボル、共通外交および中国語の文字の一部をカバー

フォントスケール： UTF-8（ワード幅）> GB2312（漢字のみ）
サイズ割引： UTF-8（およびより多くの肥大化、負荷よりゆっくり）> GB2312（小さく、より速くロード）
によるUTF-8文字の大規模なので、説明へもっと必要な文字コード。
UTF-8は、3バイト文字の内部に格納されています。格納文字GB2312 2バイト。

概要：
UTF-8文字とよりは、各国の言語がありますが、大きな記憶容量は、ファイルが肥大化し、
より少ない2312個の単語、中国と外国の言語や記号の数が少ないが、容量が小さく、コンパクトなファイルです
。

2つの使用例を示しています。
同社は、日本のアニメ、日本のアニメーションあなたはUTF-8を使用したいページの一部の頻繁に名前をやっています。GB2312は日本語で表示されない場合がございます。
同社は2312を使用するために、中国のウェブサイト、ページの表示速度の極端な追求です。各文字のUTF-8を使用している場合は、マルチバイトなので、5000の文字、複数の5キロバイトとなります。

私たちはプロのテスト：
●QQ、網易、捜狐は、使用GB2312です。これらの企業は、表示速度を追求しています。
●新華チベット語のチャンネルに、その文字セットを確保するために、UTF-8の番号を使用して。

注：
我々は設定しないとき、崇高デフォルトのタイプはUTF-8です。：変更は2312時間になると、私たちは崇高の種類の保存についてのセットに覚えておく必要があります
→簡体字中国語にファイル]→[設定ファイルのエンコーディングを（GBK）

キー：5行目
6行目：説明

2、折りたたみ表示

スペース、改行がある場合は、HTMLテキストの全ての間に、タブがスペースに折り畳まれます表示され

、ページの読み込み速度をスピードアップ、ユーザーエクスペリエンスを向上させ、時にはコード圧縮コードの量を減らすためにするために、ウェブサイトのオンライン版を。以下に示すように、HTMLタグには改行されていない、（タブ）インデントない操作を行い、HTML、および変更はまだかかわらず、階層のタグを明確にラップしませんが、プログラマが読めません。
画像のキャプション

3つの一般的なマーカー

マーキング1、H
<H1> </ H1>タイトル
<H2> </ H2>小見出し
......
<H6> </ H6> 6タイトル

2、Pマーク：段落英語段落"段落"略語

3、空の要素：要素の実際の内容は、ちょうど開始タグを記述します。

<BR>のみ効果が改行を挿入することであり、通常は使用されるブロック要素、ブラウザを使用すると、テキストに新しい行を挿入したい場合は、行を挿入可能な<BR>、または<BR/>することができます。
<img scr=””>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

図4は、<Q>短い参照、段落の役割の一部を、参照の両側に引用符付きフェアブラウザ

必要が別々の基準ディスプレイを使用する場合5、<BLOCKQUOTE>、長い引用しました。

6、リスト：

<ul>      ：表示列表类型：有序列表<ol>【ordered list】；无序列表<ul> 【unordered list】
    <li></li> ：每个列表项：【list item】
    <li></li>
</ul>

注：
1、各リスト項目の後に開始改行もラップする前に、<UL> <LI>、リストを持っているブロック要素であり
、別途2にはポイントないだろう使用し、<UL> <LI>は一緒に使用されています。
3、<UL>要素は、<LI>を含むことができ、直接テキスト又は他の要素を含むことができない;
。、4 <LI>は、ネストされた書き込み<UL>、すなわちネストされたリストであってもよいです。李は何でも置くことができるコンテナクラスで、
5は、リスト、定義リストの別のタイプがあります。

<dl>
    <dt></dt> 列表中每一项都有 定义术语 和 定义描述
        <dd></dd>
    <dt></dt>
        <dd></dd>
</dl>

7、<img>マーキング

1、どのようにブラウザがロードイメージ？

HTMLページは直接代わりに挿入された画像に対応するために参照するので、画像を挿入されていません。、のindex.htmlファイルを取得したファイルを読み込むと、ファイルを表示し、ブラウザは画像を個別にWebサービスからこれらの画像を取得し、その後、取得する必要があることがわかりました。

図2に示すように、一般的な画像フォーマットの3種類の中で使用されるWeb：JPEG、PNG、GIF

画像のキャプション

3、<img src=”images/drinks.gif” alt=”drink”>
SRC：同じサイト上の画像、好ましくは相対パスと、別のサイト、使用したURL上の画像;

ALT：画像を表示するために失敗した場合、それを交換するために、ALTテキストを使用しますが、HTML5は、alt属性で記述する必要があります。

幅高さ：ピクセル単位で、幅ページの高さで画像を表示するブラウザを教えてください。

画像リンク：<img>置く要素<a>に。
```
<a href=”html/downtown.html”>
     <img src=”images/downtown.jpg” alt=”downtown”>
 </a>
```

8は、<a target=”_blank” href=”index.html#chai” title=”tea”>see the tea</a>要素
のhrefは：英語のハイパーテキスト参照の略称であり、時にデフォルトの表示が下線されます。
href属性は、他のページへのリンクに相対パスまたはURLを使用することができます。
相対パス：同じサイト内のページにリンクするため、URL：他のウェブサイトへのリンクを。

ターゲット：新しいウィンドウで開いています。さて、ブラウザのタブのデフォルト設定ではなく、新しいブラウザウィンドウよりも、新しいコンテナで開く
タイトル：ホバーテキストは、説明のリンクを提供しています。

一定期間の他のページへの直接リンク：
1）上記ID「チャイ」の上に作成するには=、要素はアンカーポイントを作成したい見つける、
2）<a href=”index.html#chai”>see the tea</a>

図9に示すように、<div>
ロジック領域において、一緒にグループ化された対応するブロック要素のため。
明確な構造や増加コンビニエンススタイルを確保するために役立つ多くのファイル構造を、追加するために、ネストされた<div>要素を使用してください。本当に必要な場合を除き、あまりにも多くのネスティングを増加させません。

10、<span>
<DIV>同様に、関連したテキストとインライン要素についてまとめ。

11、文字実体：特殊文字を、対応する入力と略称
例：表示テキストにHTMLにおける<HTML>要素の岩、エンティティ文字ので、入力スルーは

                the &lt;html&gt; elment rocks

＆：＆＃038;
<：＆LT。
：100。

4つの要素、インライン要素

1）ブロック要素：各改行の前と後の表示;
<div>、<h1> h系列、 <p> 、<blockquote>、<ol>、<ul> <li>

2）インライン要素：ページフローのテキストで常に「行」が表示され、
<span>、<em>、 <strong> 、<q>、 <img>

3）が両方とも：<a> それは、テキストだけでなく、ブロック要素を囲むことができます。コンテキスト。
4）との間の差を使用：要素は、通常、主構築ブロックのウェブページで使用されているブロックを、インライン要素は、マークスニペットに使用されます。大きなブロックの開始から始まる通常、ページを設計するとき、そして完璧なページにインライン要素を追加します。