html介紹
Web服務(wù)本質(zhì)
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK
")
conn.send(b"<h1>Hello world!</h1>")
conn.close()
瀏覽器發(fā)請(qǐng)求 --> HTTP協(xié)議 --> 服務(wù)端接收請(qǐng)求 --> 服務(wù)端返回響應(yīng) --> 服務(wù)端把HTML文件內(nèi)容發(fā)給瀏覽器 --> 瀏覽器渲染頁(yè)面
HTML是什么？
- 超文本標(biāo)記語(yǔ)言（Hypertext Markup Language, HTML）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)記語(yǔ)言。
- 本質(zhì)上是瀏覽器可識(shí)別的規(guī)則，我們按照規(guī)則寫網(wǎng)頁(yè)，瀏覽器根據(jù)規(guī)則渲染我們的網(wǎng)頁(yè)。對(duì)于不同的瀏覽器，對(duì)同一個(gè)標(biāo)簽可能會(huì)有不同的解釋。（兼容性問(wèn)題）
- 網(wǎng)頁(yè)文件的擴(kuò)展名：.html或.htm
HTML不是什么？
HTML是一種標(biāo)記語(yǔ)言（markup language），它不是一種編程語(yǔ)言。
HTML使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)。
HTML文檔結(jié)構(gòu)
最基本的HTML文檔：
<!DOCTYPE%20html> <html%20lang="zh-CN"> <head> %20<meta%20charset="UTF-8"> %20<title>css樣式優(yōu)先級(jí)</title> </head> <body> </body> </html>%20
- <!DOCTYPE%20html>聲明為HTML5文檔。
- <html>、</html>是文檔的開始標(biāo)記和結(jié)束的標(biāo)記。是HTML頁(yè)面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
- <head>、</head>定義了HTML文檔的開頭部分。它們之間的內(nèi)容不會(huì)在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數(shù)據(jù)。
- <title>、</title>定義了網(wǎng)頁(yè)標(biāo)題，在瀏覽器標(biāo)題欄顯示。
- <body>、</body>之間的文本是可見的網(wǎng)頁(yè)主體內(nèi)容。
注意：對(duì)于中文網(wǎng)頁(yè)需要使用 <meta%20charset="utf-8"> 聲明編碼，否則會(huì)出現(xiàn)亂碼。有些瀏覽器會(huì)設(shè)置%20GBK%20為默認(rèn)編碼，則你需要設(shè)置為 <meta%20charset="gbk">。
HTML標(biāo)簽格式
- HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵字，如<html>,%20<div>等
- HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，比如：<div>和</div>，第一個(gè)標(biāo)簽是開始，第二個(gè)標(biāo)簽是結(jié)束。結(jié)束標(biāo)簽會(huì)有斜線。
- 也有一部分標(biāo)簽是單獨(dú)呈現(xiàn)的，比如：<br/>、<hr/>、<img%20src="1.jpg" />等。
- 標(biāo)簽里面可以有若干屬性，也可以不帶屬性。
標(biāo)簽的語(yǔ)法：
- <標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內(nèi)容部分</標(biāo)簽名>
- <標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
幾個(gè)很重要的屬性：
- id：定義標(biāo)簽的唯一ID，HTML文檔樹中唯一
- class：為html元素定義一個(gè)或多個(gè)類名（classname）(CSS樣式類名)
- style：規(guī)定元素的行內(nèi)樣式（CSS樣式）
HTML注釋
<!--注釋內(nèi)容-->
注釋是代碼之母。
標(biāo)簽
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。
<!DOCTYPE> 聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。
HTML常用標(biāo)簽
head內(nèi)常用標(biāo)簽
標(biāo)簽意義<title></title>定義網(wǎng)頁(yè)標(biāo)題<style></style>定義內(nèi)部樣式表<script></script>定義JS代碼或引入外部JS文件<link/>引入外部樣式表文件或網(wǎng)站圖標(biāo)<meta/>定義網(wǎng)頁(yè)原信息。
Meta標(biāo)簽
Meta標(biāo)簽介紹：
- <meta>元素可提供有關(guān)頁(yè)面的元信息（mata-information）,針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。
- <meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。
- <meta>提供的信息是用戶不可見的。
meta標(biāo)簽的組成：meta標(biāo)簽共有兩個(gè)屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁(yè)功能。
1.http-equiv屬性：相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確地顯示網(wǎng)頁(yè)內(nèi)容，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。
<!--指定文檔的編碼類型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳轉(zhuǎn)到對(duì)應(yīng)的網(wǎng)址，注意引號(hào)(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--告訴IE以最高級(jí)模式渲染文檔(了解)--> <meta http-equiv="x-ua-compatible" content="IE=edge">
2.name屬性: 主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)"> <meta name="description" content="老男孩教育Python學(xué)院">
body內(nèi)常用標(biāo)簽
基本標(biāo)簽（塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽）
<b>加粗</b> <i>斜體</i> <u>下劃線</u> <s>刪除</s> <p>段落標(biāo)簽</p> <h1>標(biāo)題1</h1> <h2>標(biāo)題2</h2> <h3>標(biāo)題3</h3> <h4>標(biāo)題4</h4> <h5>標(biāo)題5</h5> <h6>標(biāo)題6</h6> <!--換行--> <br> <!--水平線--><hr>
特殊字符
內(nèi)容對(duì)應(yīng)代碼空格 >><<&&¥¥版權(quán)©注冊(cè)®
div標(biāo)簽和span標(biāo)簽
div標(biāo)簽用來(lái)定義一個(gè)塊級(jí)元素，并無(wú)實(shí)際的意義。主要通過(guò)CSS樣式為其賦予不同的表現(xiàn)。
span標(biāo)簽用來(lái)定義內(nèi)聯(lián)(行內(nèi))元素，并無(wú)實(shí)際的意義。主要通過(guò)CSS樣式為其賦予不同的表現(xiàn)。
塊級(jí)元素與行內(nèi)元素的區(qū)別：
所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行。如果單獨(dú)在網(wǎng)頁(yè)中插入這兩個(gè)元素，不會(huì)對(duì)頁(yè)面產(chǎn)生任何的影響。
這兩個(gè)元素是專門為定義CSS樣式而生的。
注意：
關(guān)于標(biāo)簽嵌套：通常塊級(jí)元素可以包含內(nèi)聯(lián)元素或某些塊級(jí)元素，但內(nèi)聯(lián)元素不能包含塊級(jí)元素，它只能包含其它內(nèi)聯(lián)元素。
p標(biāo)簽不能包含塊級(jí)標(biāo)簽，p標(biāo)簽也不能包含p標(biāo)簽。
img標(biāo)簽
<img src="圖片的路徑" alt="圖片未加載成功時(shí)的提示" title="鼠標(biāo)懸浮時(shí)提示信息" width="寬" height="高(寬高兩個(gè)屬性只用一個(gè)會(huì)自動(dòng)等比縮放)">
a標(biāo)簽
超鏈接標(biāo)簽
所謂的超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。
什么是URL？ URL是統(tǒng)一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網(wǎng)頁(yè)地址，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址。 URL舉例 http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.html URL地址由4部分組成 第1部分：為協(xié)議：http://、ftp://等 第2部分：為站點(diǎn)地址：可以是域名或IP地址 第3部分：為頁(yè)面在站點(diǎn)中的目錄：stu 第4部分：為頁(yè)面名稱，例如 index.html 各部分之間用“/”符號(hào)隔開。
<a href="http://www.oldboyedu.com" target="_blank" >點(diǎn)我</a>
href屬性指定目標(biāo)網(wǎng)頁(yè)地址。該地址可以有幾種類型：
- 絕對(duì)URL - 指向另一個(gè)站點(diǎn)（比如 href="http://www.jd.com）
- 相對(duì)URL - 指當(dāng)前站點(diǎn)中確切的路徑（href="index.htm"）
- 錨URL - 指向頁(yè)面中的錨（href="#top"）
target：
- _blank表示在新標(biāo)簽頁(yè)中打開目標(biāo)網(wǎng)頁(yè)
- _self表示在當(dāng)前標(biāo)簽頁(yè)中打開目標(biāo)網(wǎng)頁(yè)
列表
1.無(wú)序列表
<ul type="disc"> <li>第一項(xiàng)</li> <li>第二項(xiàng)</li> </ul>
type屬性：
- disc（實(shí)心圓點(diǎn)，默認(rèn)值）
- circle（空心圓圈）
- square（實(shí)心方塊）
- none（無(wú)樣式）
2.有序列表
<ol type="1" start="2"> <li>第一項(xiàng)</li> <li>第二項(xiàng)</li> </ol>
type屬性：
- 1 數(shù)字列表，默認(rèn)值
- A 大寫字母
- a 小寫字母
- Ⅰ大寫羅馬
- ⅰ小寫羅馬
3.標(biāo)題列表
<dl> <dt>標(biāo)題1</dt> <dd>內(nèi)容1</dd> <dt>標(biāo)題2</dt> <dd>內(nèi)容1</dd> <dd>內(nèi)容2</dd> </dl>
表格
表格是一個(gè)二維數(shù)據(jù)空間，一個(gè)表格由若干行組成，一個(gè)行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數(shù)字符號(hào)、預(yù)置文本和其它的表格等內(nèi)容。
表格最重要的目的是顯示表格類數(shù)據(jù)。表格類數(shù)據(jù)是指最適合組織為表格格式（即按行和列組織）的數(shù)據(jù)。
表格的基本結(jié)構(gòu)：
<table> <thead> <tr> <th>序號(hào)</th> <th>姓名</th> <th>愛好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>Yuan</td> <td>日天</td> </tr> </tbody> </table>
屬性:
- border: 表格邊框.
- cellpadding: 內(nèi)邊距
- cellspacing: 外邊距.
- width: 像素 百分比.（最好通過(guò)css來(lái)設(shè)置長(zhǎng)寬）
- rowspan: 單元格豎跨多少行
- colspan: 單元格橫跨多少列（即合并單元格）
form
功能：
表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互
表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標(biāo)簽。
表單屬性
屬性描述accept-charset規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁(yè)面字符集）。action規(guī)定向何處提交表單的地址（URL）（提交頁(yè)面）。autocomplete規(guī)定瀏覽器應(yīng)該自動(dòng)完成表單（默認(rèn)：開啟）。enctype規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。method規(guī)定在提交表單時(shí)所用的 HTTP 方法（默認(rèn)：GET）。name規(guī)定識(shí)別表單的名稱（對(duì)于 DOM 使用：document.forms.name）。novalidate規(guī)定瀏覽器不驗(yàn)證表單。target規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）。
表單元素
基本概念：
HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動(dòng)態(tài)頁(yè)面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容。
表單一般用來(lái)收集用戶的輸入信息
表單工作原理：
訪問(wèn)者在瀏覽有表單的網(wǎng)頁(yè)時(shí)，可填寫必需的信息，然后按某個(gè)按鈕提交。這些信息通過(guò)Internet傳送到服務(wù)器上。
服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。當(dāng)數(shù)據(jù)完整無(wú)誤后，服務(wù)器反饋一個(gè)輸入完成的信息。
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> 元素會(huì)根據(jù)不同的 type 屬性，變化為多種形態(tài)。
type屬性值表現(xiàn)形式對(duì)應(yīng)代碼text單行輸入文本<input type=text" />password密碼輸入框<input type="password" />date日期輸入框<input type="date" />checkbox復(fù)選框<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" />
屬性說(shuō)明:
- name：表單提交時(shí)的“鍵”，注意和id的區(qū)別
- value：表單提交時(shí)對(duì)應(yīng)項(xiàng)的值
- type="button", "reset", "submit"時(shí)，為按鈕上顯示的文本年內(nèi)容
- type="text","password","hidden"時(shí)，為輸入框的初始值
- type="checkbox", "radio", "file"，為輸入相關(guān)聯(lián)的值
- checked：radio和checkbox默認(rèn)被選中的項(xiàng)
- readonly：text和password設(shè)置只讀
- disabled：所有input均適用
select標(biāo)簽
<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>
屬性說(shuō)明：
- multiple：布爾屬性，設(shè)置后為多選，否則默認(rèn)單選
- disabled：禁用
- selected：默認(rèn)選中該項(xiàng)
- value：定義提交時(shí)的選項(xiàng)值
label標(biāo)簽
定義：<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
說(shuō)明：
- label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。
- <label> 標(biāo)簽的 for 屬性值應(yīng)當(dāng)與相關(guān)元素的 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"> 默認(rèn)內(nèi)容 </textarea>
屬性說(shuō)明：
- name：名稱
- rows：行數(shù)
- cols：列數(shù)
- disabled：禁用
