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

すべてのユーザー・インターフェースを直接扱う、それはまた、フロントエンドと呼ばれることができます
スケルトンHTML --->コンテンツページ
CSS --->外観、ページスタイル
JavaScriptの--->アクション

ソフトウェア開発フレームワーク

C / S
B / S、本質的にB / Sはまた、C / Sであります

Webサービスの性質

要求と応答
ブラウザのURLを入力してEnter、送られた何の事
- 指定されたサーバアドレスへのリクエストを送信します
- サーバーは、要求とプロセスを受け取ります
- サーバーは、プロセスの結果を返します。
- ユーザーに表示されるページを参照してください素敵を受信してレンダリングするブラウザ

要求には二つの方法

リクエストを取得
- サーバーへのリソースへ
ポスト要求
- 北朝鮮は、データ・サーバを提出します

HTTPプロトコル

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

4つの特性

アプリケーション層の演技上のTCP / IPプロトコルに基づくプロトコル
リクエストに基づいてレスポンス、一次応答に対応する要求
ステートレス、クライアントは、状態を保存しません
接続なし、クライアントとサーバが接続を確立する必要はありませんありません
- ロング接続、WebSocketを、長い接続

データフォーマット

要求フォーマット
- リクエスト（要求モード・プロトコル・バージョン）の最初の行
- リクエストヘッダ（大腿K：Vキーと値のペア）
- \ rを\ nは
- リクエストボディ（機密情報、パスワードなど、など
応答形式
- レスポンス（応答モード・プロトコル・バージョン）の最初の行
- レスポンスヘッダ（大プッシュK：Vキーと値のペア）
- \ rを\ nは
- レスポンス本体（ユーザー・データを参照してください）

応答ステータスコード

サーバの応答の状態を表現するデジタルコード
- 1XX：要求を正常に受信したサーバが処理されている、あなたは追加のデータを提出し続けることができます
- 2XX：成功した応答データに応答したサーバ（200）
- 3XX：リダイレクション
- 4XX：（404のリクエスト資源の存在）（403要求が一定の条件を満たしていない、通常のアクセスすることはできません）
- 5XX：内部サーバーエラー（500）

コード

まず書かれたサーバー
ブラウザ（クライアント）入力127.0.0.1:8888アクセスクライアント

# text1.txt: This is a test of HTTP

# 服务端
import socket

server = socket.socket()
server.bind(('127.0.0.1', 8888))
server.listen(5)

while True:
    conn, addr = server.accept()
    data = conn.recv(1024)
    # 响应首行
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')

    with open(r'text1.txt', 'rb') as f:
        conn.send(f.read())
    conn.close()

HTML

HTMLハイパーテキストマークアップ言語
< > タグまくります...

注記

母親のコードを注意してください
ページを設定するときは、多くの場合、分割された領域へのコメントを使用

<!--导航条开始-->

<!--导航条结束-->
<!--侧边栏开始-->

<!--侧边栏结束-->

単一行コメント

<!--单行注释-->

複数行コメント

<!--
多行注释1
多行注释2
多行注释3
-->

HTMLの文書構造

頭はポスターではなく、ブラウザに探しています
本体内のコードはポスターです

<html>
    <head></head>  
    <body></body>
</html>

分類および表示

ジタグ、頭と尾の両方
- <h1>This is the first html page I made!</h1>
自己終了タグ、両方の頭尾なし
- <img src="test.jpg"/>

ヘッドは、一般的に、タグを使用します

タイトル定義されたページのタイトル <title>Welcome to MrBigB's Website</title>
内部サポート文体のCSSコード

<style>
        h1 {
            color: darkred;
        }
    </style>

外部CSSスタイルファイルの導入をリンク <link rel="stylesheet" type="text/css" href="test.css"/>

/* test.css */

h2 {
    color: darkgreen;
}

内部スクリプトが直接jsのコードを書くことができ、あなたは外部JS文書をインポートすることができます
- <script>alert="Hello world!"</script>
- <script src="test.js"></script>
メタ定義されたページのソース情報

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's Website</title>
    <style>
        h1 {
            color: darkred;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    <script src="test.js"></script>
</head>
<body>
<h1>This is the first html page I made!</h1>
<h2>HTML is fucking awesome!</h2>
<img src="https://images.cnblogs.com/cnblogs_com/bigb/1551224/o_%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA.jpg"/>
</body>
</html>

本体内で一般的にタグを使用

H1-H6タイトルタグ
p個の段落タグは、単一の行は、pです
sの取り消し線
太字B
Uアンダースコア
私はイタリック
ラップBR
分割線の時間

本体内の特殊記号

  ブランク
& ＆
yen; ¥
> >
< <
© ©
® ®

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's website!</title>
</head>
<body>
<h1>h1标签效果测试</h1>
<h2>h2标签效果测试</h2>
<h3>h3标签效果测试</h3>

<s>s标签效果测试</s>
<b>b标签效果测试</b>
<u>u标签效果测试</u>
<i>i标签效果测试</i>

<p>p标签效果测试</p>
<br>
我是无标签文本1上面测试的br标签效果
<hr>
我是无标签文本2上面测试的是hr标签的效果
<p>p标签效果测试</p>

<p>a &gt; b</p>
<p>a &lt; b</p>
<p>&amp;</p>
<p>&yen;</p>
<p>&copy;</p>
<p>&reg;</p>

</body>
</html>

ブロックレベルのタグやラベルインライン

インラインタグ、占めどのくらいの内部テキスト：S、I、U、B、スパン
- 行ラベルおよびタグはブロックレベルの行ラベル内にネストすることができます
自身のラインブロックレベルのタグ：H1-H6、P、BR、時間、DIV
- ブロックレベルのタグ内の他のブロックレベルのラベルと行ラベル内にネストすることができます
- 注：タグでタグだけネストされた行は、タグがネストされたブロックレベルできないが、Pは、ブロックレベルのタグであります

二つは、タグの属性

いいえ、IDタグは、各タグにid、および同じドキュメントを持つべきではない、IDタグはユニークです
オブジェクト指向の継承に多少似たクラスのクラス属性、
- class = "c1, c2, c3" 現在のラベルは、のすべてのスタイルのC1、C2、C3を持っています

bodyタグ内の重要ないくつかの

DIV
- これは、ブロックタグです
- 面積に相当、あなたは地域にどんなコンテンツを埋めることができます
スパン
- これは、インラインタグであります
接続タブ
- ジャンプ機能、ジャンプのhrefパラメータ制御は、目標パラメータコントロールがページを開くには、現在または新しいページにジャンプすることである（_self、_blank）
アンカー機能


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's Website</title>
</head>
<body>
<a href="" id="a1">start</a>
<a href="http://www.baidu.com" target=_self>click me to search</a>
<div style="background-color: darkred;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkblue;height: 200px"></div>
<a href="" id="a2">middle</a>
<div style="background-color: darkblue;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkred;height: 200px"></div>
<a href="#a1">back to the start</a>
<br>
<a href="#a2">bac to the middle</a>
</body>
</html>

IMGイメージタグ
- SRC絵アドレス
- ALT絵がメッセージを表示するために出てきたときにロードされていません
- 絵の上にタイトルにマウスの後にメッセージ
- 幅と高さの設定フォトギャラリーの大きさは、単にデフォルトの幾何学的なスケーリングを設定することができます

  <img src="test.jpg" alt="this is a picture of a dog" title="the dog is playing" height="200"/>

リスト]タブ

UL順不同リスト
- ディスク黒丸（デフォルト）
- サークル中空円
- 四角い黒四角
- なしUnstyled
オール順序付きリスト
- 番号のリスト
- キャピタルレター
- 小文字の手紙
- 私はローマを大文字
- 私はローマを小文字
DLタイトルリスト
- dtのサブタイトル
- DDのサブセクション

表タグ

表示データは、一般に、フォームタグを使用する場合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1">
    <thead> <!--表头-->
    <tr> <!--一个tr代表一行-->
        <th>name</th>
        <th>gender</th>
        <th>age</th>
    </tr>
    </thead>
    <tbody> <!--表数据-->
    <tr>
        <td>bigb</td>
        <!--<td rowspan="2">bigb</td>--> 
        <td>male</td>
        <td>18</td>
    </tr>
    <tr>
        <td>blake</td>
        <!--<td colspan="2">blake</td>-->
        <td>female</td>
        <td>22</td>
    </tr>
    </tbody>
</table>
</body>
</html>

HTML 01

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

ソフトウェア開発フレームワーク

Webサービスの性質

要求には二つの方法

HTTPプロトコル

4つの特性

データフォーマット

応答ステータスコード

コード

HTML

注記

HTMLの文書構造

分類および表示

ヘッドは、一般的に、タグを使用します

本体内で一般的にタグを使用

本体内の特殊記号

ブロックレベルのタグやラベルインライン

二つは、タグの属性

bodyタグ内の重要ないくつかの

リスト]タブ

表タグ

おすすめ