フロント

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

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

Webサービスの性質

ブラウザウィンドウ、URLプレスを入力して、両方を入力し、これらの事が起こりました

指定されたサービスの終わりに向かって要求を送信します
サーバーは、対応する要求を受け取ります
サーバーは、対応する応答を返します
ブラウザが見るために、ユーザーに特定の規則に従い、ページの表示をレンダリング、応答を受け取ります

HTTPプロトコル

HTTPプロトコル：ハイパーテキスト転送プロトコルは、ブラウザとサーバ間のデータ伝送の形式を指定します

HTTPプロトコルの4つの特徴

要求（一次応答に対応する要求）に基づいて応答
プロトコルは、アプリケーション層の役割上でTCP / IPに基づいています
ステートレス（クライアントの無い予約状況）
接続なし

（HTTPプロトコル大型パッチと同様に）長いリンク用WebSocket関連のチャットルーム

データフォーマット

要求フォーマット

①：リクエスト（要求モード・プロトコル・バージョン）の最初の行

②：要求ヘッダ（ロットK、Vキーと値のペア）

③：空行

④：リクエストボディ（データを搬送は必ずしもなく、時々要求方法に応じて、空であってもよいです）

応答形式

①：応答の最初の行（応答ステータスコード）

②：要求ヘッダ（ロットK、Vキーと値のペア）

③：空行

④：レスポンスボディ（ブラウザがデータを見るためにユーザに表示されます）

応答ステータスコード（メッセージの多くの数）

1XX：サーバーが正常にクライアントデータを受信したが処理されている、あなたが提出し続けることができます

2XX：200要求が成功すると、サーバーは、必要なデータに戻って行かなければなりません

3XX：リダイレクション（ページを訪問したいと考えていましたが、内部は自動的にBのページに転送されます）

4XX：404要求されたリソースが存在しない、あなたは現在、403点の要求リソース条件を持っていません

5XX：500内部サーバーエラー（爆発するかもしれないダウンルーム・オン・ファイアがあるかもしれません）

PS：企業は、独自の内部応答ステータスコードをカスタマイズすることができます

リクエストメソッド

し1.Get要求

（ブラウザのウィンドウと同様に、www.baidu.com GET Baiduのホーム・ページを入力してください）サーバにデータを取得します

2.post要求

サーバーにデータを送信するために、

ログイン登録機能は、に似ています

HTML（HTML）

あなたのページには、道を識別し、実証するための格好良いブラウザになりたい場合は、のためのHTMLコードを記述する必要があります

ブラウザは、わずか数の言語を認識することができます：HTML / XML、CSS、JSを

PS：XMLは、内部管理ソフトウェアを書いて、主にodooフレームワークのために、フロントページを書くことができます

HTMLのコメント

母親のコードを注意してください

単一行コメント：<！ - - 片道 - - >

複数行コメント：<！ - - マルチラインNOTE 1 - >

マルチラインNOTE 2 - >

HTMLページの構造がより複雑に、より多くのコンテンツであるため、ページを書くときに、容易ではない後のメンテナンスまで、変更は通常、次のように通常の人工部門コード領域であります

例如：

<!--顶部导航栏开始-->

<!--顶部导航栏结束-->
<!--左侧菜单栏开始-->

<!--左侧菜单栏结束-->

HTMLの文書構造

<html>
    <head></head>:head内存放的内容不是给用户看的，是给浏览器去识别相应的操作的
    <body></body>:body内存放的内容就是浏览器展示给用户看到的花里胡哨的页面
</html>

HTMLドキュメントを開きます

1.pycharmが自動的に開くようにブラウザを呼び出します（推奨）

2.手動検索パスの後に開くようにブラウザを選択します

分類および表示1

1.ダブルラベル

2.自己終了タグ

分類および表示2

1.ブロックレベルタグ

別線H1-H6、P、BR、時間、DIV

①：ブロックレベルのタグは、任意のブロックレベルおよび行ラベル内にネストすることができます

②：特殊なケース：ブロックレベルのタグもののPが、彼は唯一のタグライン内にネストすることができますが、ネストされたブロックレベルのタグにはできません

巣は問題ではない場合は、単にHTML構文の仕様に準拠していません。

行ラベル内の2

あまり自分自身をテキスト、かなりのuを占め、S、I、B、スパン

内部行ラベルブロックレベルおよび行ラベル内にない巣

PS：書き込み時に名前タグは、単にタグを記述し、その後のことができます。Tabキーオートコンプリート（エメットプラグイン）

エメットプラグイン：特殊なHTMLコード補完プラグイン

ヘッド使用されているタグ

タイトル：ページタイトルが定義されています
スタイル：内部のサポート直接書き込みCSSコード
リンク：外部CSSファイルの導入
スクリプト：①：内部JS②直接書き込むことができますコード：jsのコードは外部のsrc属性によって参照することができます
メタ：name属性
- キーワード
  
  説明

URL（ユニフォームリソースロケータは、ウェブページのアドレスです）

ボディ使用されるタグ

[基本]タブ

H1-H6：タイトルタグ
S：削除行
B：太字
U：下線
i：斜体
P：専用線
BR：ラップ
時間：除行

特殊記号

＆NBSPに、スペース
＆Gtと、より大きい
＆Ltは、より少ないです
＆＃038; 与
＆円、人民元
＆コピー;著作権のロゴ
＆レッグ;登録商標

一般的に使用されるタグ

divブロックレベルのタグ
spanタグライン内
- それ自体は特別な意義ありません
  
  しかし、これらの二つは本当にほとんど、使用前のページレイアウトを行うために使用されています
IMGイメージタグ
- SRC
  - 写真は、ウェブサイトのアドレスを書くことができます
  - 写真は、ローカルアドレスを書き込むことができます
  - URL（URLに自動的にデータを取得するためにGETリクエストに送信）
- ALT
  - 写真は時間のうちにロードされていない場合、デフォルトのメッセージ表示
- 題名
  - ときに画像表示メッセージ上にマウスホバー
- 幅高さ
  - プロパティを変更し、他はまた、スケーリングされます（場合画像歪みの値）
  - 2つのプロパティを変更することを余儀なくさ、絵が歪んで
リンクラベル
- HREF
  - URLを入れて、クリックすると、URLに適切なリソースにジャンプします
- 目標
  - 現在のページがジャンプするかどうかを制御
    - デフォルトでは、現在のジャンプのページです
      - _自己
    - 新しいページジャンプ
      - _ブランク
- アンカー機能
  - hrefのURLを書くことができるだけでなく、あなたは、さらにタグIDの値を書き込むことができます。
  - クリックして、位置タグのid値に対応する位置にジャンプします

タグは、プロパティを持っている必要があります

id属性：一意現在のHTMLページ1のラベルを識別するために使用される同様のID番号
- 同じHTMLページのid値で繰り返すことはできません
クラス属性：継承に似たタイプの顔のオブジェクト
- 他のクラスのスタイルへの直接参照

リスト]タブ

順序なしリスト
- インクルード
  - で
    
    限りページは基本的にテキストのより規則的な配列に表示される番号なしリストを達成するために使用することができます
順序付きリスト
- オール
  - で
タイトル一覧
- DL
  - DTタイトル
  - DDコンテンツ

表タグ

<!--展示网站数据的时候  一般情况下可以使用表格标签-->
<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
先表格标签 先写结构 然后写数据

一个tr就是一行
th和td之分   一个加粗一个不加粗  
通常情况下表头用th,表单内容用td

FORMタグ

formタグ

ユーザー入力（入力、選択、......アップロードファイル）とバックエンドに送信されたデータパッケージを獲得
アクションパラメータ

（最終的にデータを送信するためのバックエンドサーバがある）提出されたデータのパスを制御するために使用します

ライティングの三種類
- デフォルトでは、現在のページのアドレスに提出し、書き込みデータが配置されていないのです
- フル・パス（https://www.baidu.com）
- 書き込みのみパスサフィックス（/インデックス/）
入力タグ：ユーザー入力を取得
- 標準プロパティ
  - テキストのプレーンテキスト
  - パスワードの暗号文
  - 日付日
  - 複数の選択肢のラジオ
  - チェックボックス複数の選択肢とより
    
    デフォルトでチェック選択=「確認」
    
    ときに同じ属性名と値ラベル、あなただけの属性名を書くことができます
```
女<input type="radio" name="gender" checked="checked">
简写
女<input type="radio" name="gender" checked>
```
  - リセットリセット
  - ボタンのプッシュボタン
  - フォームがフォームを送信トリガするために提出します
  - ファイルの取得ファイル

タブを選択：ドロップダウンリスト

1つのオプションは、1つのオプションタグであります

デフォルトでは、ラジオで

あなたは、複数の選択肢の中に複数を追加することができます

<select name="" id="" multiple>
  <option value="">小明</option>
  <option value="">小红</option>
  <option value="">小张</option>
  <option value="">小王</option>
</select>
<!--如何让option标签默认选中
加selected="selected"-->  
<select name="" id="" multiple>
  <option value="" selected="selected">小明</option>
  <option value="">小红</option>
    <!--当标签的属性名和属性值相同的时候，可以只写属性名-->
  <option value="" selected>小张</option>
  <option value="">小王</option>
</select>

textareaタグ：テキストの大部分を取得します。
ラベルlabel

通常、入力と組み合わせて使用

パラメータ「の」プロパティは、タグIDに対応する値の入力に使用され

自動的に対応する入力ラベルになりますタグ内のラベルの内容をクリックしてフォーカスを

これは、フォームからのデータを送信するボタンをトリガすることができます

<input type="submit">
<!--可以通过value属性来指定按钮文本内容-->
<input type="submit" value="注册">
<button>点我</button>

ユーザー入力を取得するための入力値の辞書に似ています

キーの辞書に似ているinpu name属性

フロントエンド - 基本的かつ共通のラベル