ディレクトリ

（フロントエンド学習その1）

前端

1.フロントエンドとは何ですか

ユーザーインターフェースと直接取引は、フロントエンドと呼ばれることができます

たとえば：コンピュータ画面表示インタフェース、インタフェースは、お使いの携帯電話、タブレット・インターフェース上に表示しました。。。

2.バックエンドは何ですか

これは、舞台裏で人気のあるとして理解することができます。

あなたには、いくつかの情報を入力インターフェースのフロントエンドは、後端部に伝え、一連の操作は、プログラムの後端部で行われ、その後、結果のいくつかのフロントエンドに戻ります。後端は、主にビジネスロジック、およびデータ操作を処理するために使用されます。

3.なぜ私は、フロントエンドを学ぶ必要があります

スキルは、本体よりもあります
フルスタックエンジニアは次のようになります

第二に、ウェブサービスの性質

1.リクエスト＆レスポンス

ブラウザのURLを入力し、Enterキーを押してそれらの事が起こっENTER？

ブラウザは、指定されたサーバーアドレスに向けてリクエストを送信します
サーバーは、要求とプロセスを受け取ります
サーバーは、ブラウザの要求に応答を返します
ブラウザは、サービスによって送信されたデータを受信して、見栄えの良いページをレンダリング、ユーザーに見て

2.依頼方法

リクエストを取得
- サーバーへのリソースへ
ポスト要求
- スーパーサーバーのデータが提出します

三、HTTPプロトコル

1.四特性

プロトコルは、アプリケーション層の役割上でTCP / IPに基づいています
リクエスト（要求に対応する応答）に基づいて応答
ステートレス（あなたは状態の顧客は保存されません）（クッキーを使用する場合があります状態を保存するためのセッション）
（接続がチャネルに接続された後、TCPプロトコルとは異なり、切断に対するこの要求完成したHTTPレスポンスデータ）を接続なし

2.データ・フォーマット

リクエストフォーマット：
1. リクエストの最初の行（要求方法、プロトコルバージョン、等）
2. リクエストヘッダ（ロットK：Vキーと値のペア）
3. （改行）
4. リクエストボディ（その他の機密情報、パスワード、ID番号、）
要求形式と応答形式:(同じ）
1. リクエストの最初の行（要求方法、プロトコルバージョン、等）
2. リクエストヘッダ（ロットK：Vキーと値のペア）
3. （改行）
4. リクエストボディ（その他の機密情報、パスワード、ID番号、）

3.ステータス応答コード

数字で表されるが、テキストの文字列の意味を表現する必要があり、ユーザーは数字のこの文字列を参照してください、あなたはどのような問題がトラブルのうちに理解することができます。なぜなら少数の空間に数、初期の小さなハードディスクメモリ、データはできるだけ小さく送信された理由。その後、我々はそれに慣れ、私たちは規則を持っています。

1XX：サーバーが正常に追加データを提出し続けることができ、あなたの要求が処理されている受信しました。フラッシュが速すぎるため、一般的にあなたを見て遅すぎる、この番号が表示されない、サーバーのデータを介して送信されます。

2XX：成功した応答データに応答したサーバ（200）

3XX：リダイレクション

4XX：リクエスト・エラー（404：要求されたページが見つからないこと）（403：ユーザーが条件を満たしていない、サーバーが要求を拒否）

5XX：内部サーバーエラー（500）

四、HTML：HTML

1.コメント

ノートコードの母です！

ページを設定するときは、多くの場合、地域を分割するコメントを使用。

1.1単一行コメント

<!--注释内容-->

以上の2.2行のコメント

その上に直接、内部ラップに実際には、単一行コメント

<!--
注释内容
注释内容
注释内容
-->

2.文書構造

<html>
    <head></head>  head头不是给人看的，是给浏览器看的
    <body></body>  body内的代码才是给人看的
</html>

3.ラベル

3.1 HTMLタグ

一般的にHTMLマークアップタグをHTMLタグ（HTMLタグ）と呼ばれます。

HTMLタグは、たとえば、角括弧で囲まれているキーワード
ほとんどのHTMLタグのような、対になってきます <b> </b>
ラベル上のラベルは、最初の開始タグであり、第二のタグが終了タグであります
開始タグと終了タグは、開始タグと終了タグと呼ばれています

3.2タグは典型的には2つの特性を有するべきです

ID：ID番号は、各タグがID値を有するべきであることが同様であり、同じHTML文書で、IDタグを繰り返すことができません
クラス：オブジェクト指向の継承に幾分類似クラス属性、クラス=「C1 C2 C3」、あなたはC1 C2、C3のすべてのラベルのスタイルを持っています

4.分類ラベル

ラベルと自己終了タグの4.1ペア

ジタグは、ラベルの先端を持っている、のようなもの

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

タグのような、一つだけ自動閉鎖ブラケット矢印ラベルです

<img src="图片链接，可以是本地地址，也可以是网络地址"/>

4.2レベルのタグとタグライン

ブラウザ表示でブロックレベルのタグを指す別個のライン上のタグに、ブロックレベルの要素であります

特点：
    1. 块级标签内可以嵌套其他块级标签和行内标签
    2. p标签虽然是块级标签，但是他的内部不能嵌套任何块级标签，只能嵌套行内标签。
举例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是p标签的效果<s>这是s标签效果</s></p>
<br>
<hr>
<div>这里是div</div>

インラインタグは、インライン要素であります

特点：
    1. 内部文本多大，标签的位置就占多大
    2. 行内不能嵌套行内和块级标签
举例：
<s>这是s标签效果</s>
<i>这是i标签的效果</i>
<u>这是u标签的效果</u>
<b>这是b标签的效果</b>

一般的に使用されたタグ

5.1ヘッドの共通ラベル

タイトル：ページタイトルが定義されています
スタイル：内部支持書き込みCSSコード
リンク：外部CSSスタイルファイルの導入
スクリプト：内部直接書き込みjsのコードは、外部のjsファイルをインポートすることができます
メタ：ソース情報ページの定義

<meta charset="UTF-8">
<title>我的第一个HTML文件</title>
<style>样式代码</style>
<link rel="stylesheet" href="scc文件名">
<script src="js文件名"></script>

5.2身体一般的に使用されるタグ内に

H1〜H6：タイトルタグ
P：Pは、段落タグラインの内容であります
U：下線
I：イタリック
S：削除行
B：太字
BR：ラップ
時間：分割線

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是p段落标签标签的效果<s>这是s标签效果</s></p>
<u>这是u标签的效果下划线</u>
<i>这是i标签的效果斜体</i>
<s>这是s标签效果删除线</s>
<b>这是b标签的效果加粗</b>
<br>
<hr>

5.3体内で重要なタグ

DIV：他のHTML要素のコンテナと組み合わせて使用することができる領域と、
スパン：テキストコンテナ、インライン要素
A：接続タブ
- ジャンプ機能：hrefのパラメータコントロールジャンプ
  - デフォルトでは、現在のウィンドウでジャンプtarget = "_self"セットすることができ、新しいウィンドウでジャンプしたいと思いますtarget = "_blank"
```
<a href="https://www.sogo.com" id="1">这里是id=1的标签的位置</a>
```
- アンカーポイント：id値タグに設定され、HREFに設けられ「＃+ ID」に対応した位置にジャンプします。
```
<a href="#1">这里可以连接到标签id为1的标签的位置</a>
```
IMG：画像タグ
- src属性
  1. 絵アドレス、インターネットアドレスもローカルの画像のアドレスにすることができます
  2. URL（URL）、自動的に画像をURLに向けてリソースを取得取得要求を送信します
- alt属性
  
  負荷が絵から出ていない場合、メッセージを表示するとき
- title属性
  
  マウスは、サスペンションの後にメッセージを表示します
- 高さ和幅
  
  あなたはセットのみ1デフォルトに必要なこれらの2つのパラメータは、スケーリングすることができ、2がセットされ、画像が歪むことになります

6.特殊記号

1. &nbsp;   空格
2. &amp;    &
3. &yen;    ￥
4. &gt;     >
5. &lt;     <
6. &copy;   ©
7. &reg;    ®

7.ラベルリスト

7.1順不同リスト

UL +李

型パラメータ：

ディスク（黒丸、デフォルト値）
円（白丸）
四角（黒四角）
なし（ノースタイル）

<ul>
    <li>
        what1?
    </li>
    <li>
        what2?
    </li>
</ul>

7.2順序付きリスト

オールLi +（リチウムイオン）