第39、フロントエンドのHTML

HTML入門

1.Webサービス自然

インポートソケット


SK = socket.socket（）

sk.bind（（" 127.0.0.1 "、8080 ））
sk.listen（ 5 ）


一方、TRUE：
    CONN、ADDR = sk.accept（）
    データ = conn.recv（8096 ）
    CONN .send（B " HTTP / 1.1 200 OK \ rを\ nを\ r \ nの" ）
    conn.send（bは" <H1>こんにちは、世界！</ H1> " ）
    はconn.close（）

マニュアルサーバー

　　要求元のブラウザ - > HTTPプロトコルは - >サーバがリクエストを受信 - >レスポンスがサーバから返された - >ブラウザにサーバーHTMLファイルの内容は - >ブラウザがページをレンダリング

2.HTMLは何ですか

HTML（ハイパーテキストマークアップ言語、HTML）は、Webページを作成するために使用されるマークアップ言語です。
ルールブラウザは、私たちはページ、ルールに従って、当社のウェブサイトをレンダリングするブラウザを書くルールに従って、本質的に認識可能です。異なるブラウザのために同じラベルの異なる解釈を有することができます。（互換性の問題）
ウェブページのファイル名の拡張子：.htmlを.htmのか

3.HTMLではありません

　　HTMLはマークアップ言語（マークアップ言語）で、それはプログラミング言語ではありません。

　　HTMLは、Webページを記述するためのタグを使用しています。

4.HTMLの文書構造

最も基本的なHTMLドキュメント：

<！DOCTYPE HTML > 
< HTML LANG = "ZH-CN" > 
< 頭> 
  < メタ文字コード= "UTF-8" > 
  < タイトル> CSS样式优先级</ タイトル> 
</ ヘッド> 
< 身体> 

</ ボディ> 
</ HTML >

HTML5文書の<！DOCTYPE HTML>宣言。
ドキュメントの<HTML>、</ html>タグには、開始と終了タグです。その中でルート要素のHTMLページ、文書（ヘッド）と、本体（ボディ）のヘッドです。
<HEAD>、</ HEAD>は、HTML文書の始まりを定義します。それらの間のコンテンツは、ドキュメントウィンドウのブラウザでは表示されません。これは、文書の元（メタ）データが含まれています。
<タイトル>、</タイトル>は、ページタイトルは、ブラウザのタイトルバーに表示されて定義されています。
<BODY>、</ body>の間のテキストは、目に見えるページの本文の内容です。

　　注意：中国のウェブページの場合、それ以外の場合は文字化けします、<メタ文字セット=「UTF-8」>ステートメントを使用する必要があります。一部のブラウザは、GBKのエンコーディングを設定し、その後は、<メタ文字セット=「GBK」>を設定する必要があります。

5.HTMLのラベルフォーマット

HTMLのタグは、<HTML>、<div>などのように角括弧で囲まれたキーワード、あります
HTMLタグは、次のようなペア、通常、次のとおりです。の<div>と</ DIV>、タグはまず、第2ラベルの端を開始しています。終了タグはスラッシュます。
また、提示されたラベルの別の部分は、例えば、ある：<BR/>は、<hr />、<IMG SRC = "1.JPG" />など。
属性の数を持つことができるラベルは、属性はなしかもしれません。

タグの構文：

<タグ属性名= 1「属性値1」項目2 =「属性値2」......>コンテンツ部分</タグ名>
<タグの属性名= 1 "属性値1" 項目2 = "属性値2" ...... />

いくつかの非常に重要な特性：

ID：固有のID定義されているタグ、独自のHTMLドキュメントツリー
クラス：html要素（クラス名）（CSSスタイルクラス名）のための1つまたは複数のクラス名を定義します
スタイル：指定された要素のインラインスタイル（CSSスタイル）

6.HTMLコメント

単一行コメント：<！ - 脚注 - >

マルチラインのコメント：<！

- 脚注 - >

7.HTML一般タグを使用

　　ヘッド一般的に使用されたタグ

タグ	意味
<タイトル> </ TITLE>	ページタイトルを定義します
<スタイル> </スタイル>	内部スタイルシートの定義
<スクリプト> </ SCRIPT>	コードまたはカスタムJS JSファイルのインポート外部
<リンク/>	外部スタイルシートファイルやWebサイトのアイコンの導入
<メタ/>	オリジナルのウェブページ情報の定義

METAタグ

メタタグの説明：

<META>要素は、検索エンジンのページ（マタ情報）、および説明とキーワードの更新頻度に関するメタ情報を提供します。
ドキュメントの先頭に<META>タグには、任意のコンテンツが含まれていません。
<META>は提供される情報は、ユーザーには見えません。

メタタグからなる：metaタグには2つの属性があり、彼らはHTTP-当量と名前属性である、異なる属性が異なるパラメータ値を持って、これらの異なるパラメータ値が異なるページ機能を実現しています。

1.http-equiv属性：HTTPファイルの先頭の役割に相当し、それは正しく、対応する属性値のコンテンツをWebコンテンツを表示するために役立つブラウザ、いくつかの有用な情報に戻すことができ、コンテンツが実際のコンテンツです各変数のパラメータ。

<！ -エンコードタイプ指定された文書（知っている必要があります） - > 
<META HTTP-当量= "Content-Typeの"文字セット= UTF8「>   
<！ -引用符に注意を払って、対応するWebサイトにジャンプの後に2秒（学習） - > 
<META HTTP-当量=コンテンツを"リフレッシュ" = "2; = HTTPSのURL：//www.oldboyedu.com"> 
<！ - （理解して）最も先進的なモードで文書をレンダリングするためにIEを伝えます- > 
<メタHTTP-当量= "X- UA-互換"コンテンツ= "IE =エッジ">

2.name特性：主にウェブページを記述するために使用される、対応するコンテンツの属性値、主コンテンツのコンテンツ情報と分類情報を見つけるために検索エンジンロボットを容易にすることです。

<メタ名= "キーワード"コンテンツ = "メタ要約、HTMLのメタ、メタ属性、メタジャンプ"> 
<META NAME = "説明"コンテンツ= "Pythonの教育大学オールドボーイズ">

第二に、一般的なタグ本体

基本的なタグ（インラインブロックレベルのタグおよびラベル）

<B>太字</ B> 
<I>イタリック</ I> 
<U>下線</ U> 
<S>削除</ S> 

<P>段落タグ</ P> 

タイトル1 </ H1 <のH1> > 
<H2>表題2 </ H2> 
<H3>表題3 </ H3> 
<H4>表題4 </ H4> 
<H5>表題5 </ H5> 
<H6>表題6 </ H6>。

<！ -ラップ- > 
<BR> 

<！ -水平線- > <時間>

特殊文字

コンテンツ	コード対応
ブランク	＆NBSP;
>	＆GT;
<	＆LT;
＆	＆＃038;
¥	＆円;
著作権	＆コピー;
登録	＆REG;

divタグやラベルがまたがります

divタグはブロックレベル要素を定義するために使用され、実用的な意義がありません。主にCSSスタイルを通じてそれに異なった性能を与えること。
スパンはない実用的な意義のインライン（内側の線）の要素を定義するために使用されます。主にCSSスタイルを通じてそれに異なった性能を与えること。

ブロックレベル要素とインライン要素との間の差：
別個のラインスタートレンダリング要素に基づいて、いわゆるブロック要素は、インライン要素は、新しい行を受けません。別のWebページでこれらの2つの要素を挿入すると、ページ上の任意の影響を与えることはありません。
これらの2つの要素が生まれたCSSスタイルのために特別に定義されています。

注意：

ネストされたタグについて：ブロック要素は、典型的には、いくつかのインライン要素やブロック要素を含んでいてもよいが、要素は、インラインブロック要素を含めることはできません、それは他のインライン要素を含めることができます。

pはブロックレベルのタグのラベルを含めることはできません、ラベルは、p pタグを含めることはできません。

imgタグ

<IMG SRC =「イメージパス」ALT =「プロンプト画像が正常にロードされていない場合、」2つだけのプロパティを自動的様タイトル=「マウスが中断されたメッセージ」幅=「幅」高さ=「ハイ（幅と高さズーム比）「>

ラベル

ハイパーリンクのラベル

Webページからのいわゆるハイパーリンクがゴールへの接続点との間の関係を意味し、この目標は、別のWebページであることができ、それが同じページ上の別の場所することができ、それはまたしても、画像、電子メールアドレス、ファイル、またはすることができアプリケーション。

URLとは何ですか？
URLは、Webアドレスは、インターネット上の標準リソースのアドレスがあるとしても知られているユニフォームリソースロケータ（ユニフォームリソースロケータ）、の頭文字です。
例のURL 
http://www.sohu.com/stu/intro.html 
http://222.172.123.33/stu/intro.html 

URLアドレスは4つの部分から構成されて
-第1部：プロトコルは、次のとおりです。http：//やftp： //など
一部2：サイトのアドレス：ドメイン名またはIPアドレスであってもよい
第3部：ページディレクトリサイト：STUの
一部4：ページの名前、例えばindex.htmlを
「/」と部品の間シンボルが分離されています。

<a target="_blank" href="http://www.oldboyedu.com">点我する</a>

href属性は、リンク先ページのアドレスを指定します。アドレスは、いくつかのタイプがあります

絶対URL - （などのhref =「http://www.jd.comなど）他のサイトへのポイント
相対URL - 正確なパスで、現在のサイト（HREF =「index.htmを」）を指し
アンカーURL - ページのアンカーへのポイント（HREF =「＃トップ」）

ターゲット：

_blankは、新しいタブで開いてランディングページを意味し、
_selfは現在のタブでランディングページを開くことを意味し

テーブル

データテーブルは、複数のセルが別の行を形成し、ジェリー部は、テキストコンテンツ、リスト、パターン、形、数字、記号、テキスト、および他のプレフォームなどを含んでいてもよい、テーブルは行で構成され、二次元空間です。
テーブルの最も重要な目的は、カテゴリデータを示す表です。クラスデータテーブルは、データのテーブル形式最も適切な組織（すなわち、行と列に編成）を指します。
テーブルの基本的な構造：

<TABLE> 
  <THEAD> 
  <TR> 
    <TH>序号</番目> 
    <TH>姓名</番目> 
    <TH>爱好</番目> 
  </ TR> 
  </ THEAD> 
  <TBODY> 
  <TR> 
    <TD> 1 </ TD> 
    <TD>エゴン</ TD> 
    <TD>杠娘</ TD> 
  </ TR> 
  <TR> 
    <TD> 2 </ TD> 
    <TD>元</ TD> 
    <TD>日天</ TD> 
  </ TR> 
  </ TBODY> 
</ TABLE>

属性：

ボーダー：テーブルのボーダー。
CELLPADDING：パディング
CELLSPACING：余白。
幅：ピクセルの割合（長さと幅は、好ましくは、CSSで設定されています）。
ROWSPAN：どのくらいの垂直クロスセルライン
COLSPAN：どのように多くの列のセルスパン（つまり、マージされた細胞です）

形

特徴：

Webサーバーと対話するためにユーザを有効にすると、サーバーへの転送のためのデータを形成します

フォームは、そのようなので、上のテキストフィールド、チェックボックス、ラジオボタン、送信ボタンおよびなどの入力ラベル、一連のを含めることができます。

フォームはまた、テキストエリア、選択フィールドセットとラベル・タグが含まれていてもよいです。

フォームのプロパティ

プロパティ	説明
受け入れ、文字セット	提出フォームで使用するために指定：文字セット（ページの文字セットデフォルト）。
アクション	所定の用紙が提出されている住所（URL）（提出ページ）。
オートコンプリート	ブラウザの規定は、自動的に（：上のデフォルト）のフォームを完了する必要があります。
ENCTYPE	提出された所定の符号化されたデータ（デフォルト：URLエンコード）。
方法	規制提出フォームはHTTPメソッドを使用します（デフォルト：GET）。
名	（：document.forms.name使用DOMのための）認識の所定のフォームに名前を付けます。
NOVALIDATE	規定のブラウザはフォームを検証しません。
ターゲット	（：_selfデフォルト）アクションに定める目的は、アドレスを属性。

フォーム要素

基本的な考え方：
動的なWebサイトのコンテンツを作成することが非常に重要であるので、HTMLは、HTMLのフォーム要素、より複雑な部品、多くの場合、フォームやスクリプト、動的なページ、データ処理と組み合わせた他の機能です。
一般的な情報フォームを入力し、ユーザーを収集するために使用される
フォームの作品を：
訪問者がWebフォームを閲覧しながら、必要な情報を記入して、提出するボタンを押すことができています。この情報は、インターネットを介してサーバに送信されます。
エラーがある場合は、データを処理するために、サーバ上の特別なプログラムは、エラーメッセージを返し、エラーを修正するように依頼します。データが完全かつ正確である場合には、入力サーバは、フィードバック情報を完了します。

from django.conf.urls import url
from django.shortcuts import HttpResponse


def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, 'wb') as f:
            for chunk in request.FILES['file'].chunks():
                f.write(chunk)
            return HttpResponse('上传成功')
    return HttpResponse("收到了！")

urlpatterns = [
    url(r'^upload/', upload),
]

input

<input> 元素会根据不同的 type 属性，变化为多种形态。

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

属性说明:

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

select标签

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

label标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

属性说明：

name：名称
rows：行数
cols：列数
disabled：禁用