HTML(htyper text markup language)即超文本標記語言。超文本: 就是指頁面內能夠包含圖片、連接,甚至音樂、程序等非文字元素。標記語言: 標記(標籤)構成的語言。javascript
HTML文件固定結構以下css
<!DOCTYPE HTML> <html> <head>...</head> <body>...</body> </html>
首先,<!DOCTYPE HTML>是文檔聲明,必須寫在HTML文檔的第一行,位於<html>標籤以前。若是頁面添加了<!DOCTYPE html>,那麼就等同於開啓了標準模式,瀏覽器就得老老實實的按照W3C的html
標準解析渲染頁面,這樣一來,你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。java
一、<html></html> 稱爲根標籤,全部的網頁標籤都在<html></html>中。python
二、<head></head> 標籤用於定義文檔的頭部,它是全部頭部元素的容器。常見的頭部元素有<title>、<script>、<style>、<link>和<meta>等標籤django
三、在<body>和</body>標籤之間的內容是網頁的主要內容,如<h1>、<p>、<a>、<img>等網頁內容標籤,在<body>標籤中的內容(圖中淡綠色部份內容)最終會在瀏覽器中顯示出來。編程
一、是由一對尖括號包裹的單詞構成 例如: <html> 全部標籤中的單詞不可能以數字開頭. 二、標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫. 三、標籤分爲兩部分: 開始標籤<a> 和 結束標籤</a>. 兩個標籤之間的部分 咱們叫作標籤體. 四、有些標籤功能比較簡單.使用一個標籤便可.這種標籤叫作自閉和標籤.例如: <br/> <hr/> <input /> <img /> 五、標籤能夠嵌套.可是不能交叉嵌套. <a><b></a></b>
一、一般是以鍵值對形式出現的. 例如 name="aaaa" 2、屬性只能出如今開始標籤 或 自閉和標籤中 三、屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="aaaa" 四、若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly
標籤能夠分爲塊級標籤和內聯標籤json
塊級標籤:顧名思義就是以塊顯示的元素,高度寬度都是能夠設置的。好比咱們經常使用的<div>、<p>、<ul>默認狀態下都是屬於塊級元素。塊級元素比較霸道,默認狀態下每次都佔據一整個行,後面的內容也必須再新起一行顯示。固然非塊級元素也能夠經過css的display:block;將其更改爲塊級元素。此外還有個特殊的,float也具備此功能。後端
block(塊)元素的特色:瀏覽器
1、老是在新行上開始; 二、寬度缺省是它的容器的100%,除非設定一個寬度。 三、它能夠容納內聯元素和其餘塊元素
四、佔據整行,自帶換行效果。除了div之外,通常塊級標籤都會有內外邊距,寬度和高度
常見的塊級標籤:<h1-h6></h1-h6>,<p></p>,<div></div>
內聯標籤:通俗點來講就是文本的顯示方式,與塊級元素相反,內聯元素的高度寬度都是不能夠設置的,其寬度就是自身文字或者圖片的寬度。咱們經常使用到的<a>、<span>、<em>都屬於內聯元素。內聯元素的顯示特色就是像文本同樣的顯示,不會獨自佔據一個行。固然塊級元素也能變成內聯元素,那就是經過css的display:inline;和float來實現。
inline元素的特色:
1、和其餘元素都在一行上; 2、寬度就是它的文字或圖片的寬度,不可改變 三、內聯元素只能容納文本或者其餘內聯元素
常見的內聯標籤:<span></span>,<a></a>,<img/>
注意:在內聯標籤中,有一個標籤,img標籤,是有邊距和寬度和高度的,叫行內塊級標籤
head標籤都放在頭部分之間。這裏麪包含了:<title>、
<meta>
、<link>,<style>
一、<title>:指定整個網頁的標題,在瀏覽器最上方顯示。 二、<meta>:提供有關頁面的基本信息 三、<link>:定義文檔與外部資源的關係。 四、<style>:定義內部樣式表與網頁的關係
meta標籤介紹
元素可提供有關頁面的原信息(mata-information),針對搜索引擎和更新頻度的描述和關鍵詞。提供的信息是用戶不可見的。 meta標籤的組成:meta標籤共有兩個屬性,它們分別是http-equiv屬性和name屬性,不一樣的屬性又有不一樣的參數值,這些不一樣的參數值就實現了不一樣的網頁功能。
(1)http-equiv屬性
它用來向瀏覽器傳達一些有用的信息,幫助瀏覽器正確地顯示網頁內容,與之對應的屬性值爲content,content中的內容其實就是各個參數的變量值。
<!--重定向 2秒後跳轉到對應的網址,注意分號--> <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> <!--指定文檔的內容類型和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge">
(2)name屬性
主要用於頁面的關鍵字和描述,是寫給搜索引擎看的,關鍵字能夠有多個用 ‘,’號隔開,與之對應的屬性值爲content,content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
這些關鍵詞,就是告訴搜索引擎,這個網頁是幹嗎的,可以提升搜索命中率。讓別人可以找到你,搜索到。
<meta name="Description" content="網易是中國領先的互聯網技術公司,.........................................。" />
只要設置Description頁面描述,那麼百度搜索結果,就可以顯示這些語句,這個技術叫作SEO(search engine optimization,搜索引擎優化)。
非 meta標籤
如下標籤都屬於非meta標籤
<title>oldboy</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script>
想要在網頁上展現出來的內容必定要放在body標籤中。
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題. <p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白. <b> <strong>: 加粗標籤. <strike>: 爲文字加上一條中線. <em>: 文字變成斜體. <sup>和<sub>: 上角標 和 下角表. <br>:換行. <hr>:水平線 <div><span>
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
一個網頁除了有文字,還會有圖片。咱們使用<img/>標籤在網頁中插入圖片
語法
<img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "提示信息,鼠標放在上面會顯示" />
能夠爲圖片設置寬度(width)和高度(height),不設置就顯示圖片默認的寬度和高度
<img src="1.jpg" alt="圖片加載失敗時顯示的內容" title = "提示信息,鼠標放在上面會顯示" style="width:500px;height:500px" />
超級連接<a>標記表明一個連接點,是英文anchor(錨點)的簡寫。它的做用是把當前位置的文本或圖片鏈接到其餘的頁面、文本或圖像
href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com" target: 打開目標方式 。 _blank :新建標籤窗口頁,設置此屬性,點擊錨文本後對應新建標籤網頁窗口卡打開對應地址 。 _parent:父級打開網頁,此屬性能夠理解爲本頁網頁重新載入錨文本的網頁,針對html框架iframe網頁中,整個網頁將從新載入打開目標網址地址 name: 定義一個頁面的書籤. 用於跳轉 href : #id.(錨)
例子:
<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
<a href="a.zip">下載包</a>
錨跳轉例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--用css設置對應div標籤樣式--> <style> #div1{ height: 500px; background-color: #cc3399; } #div2{ height: 500px; background-color: yellow; } #div3{ height: 500px; background-color:blue; } </style> </head> <body> <div id="div_top">開始</div> <!--點第一章後會直接跳轉到id='div1'的div標籤的內容處--> <a href="#div1">第一章</a> <a href="#div2">第二章</a> <a href="#div3">第三章</a> <div id="div1">第一章</div> <!--點返回後會直接跳轉到id='div_top'的div標籤的內容處--> <a href="#div_top">返回</a> <div id="div2">第二章</div> <a href="#div_top">返回</a> <div id="div3">第三章</div> <a href="#div_top">返回</a> <div href="#div_top">test</div> </body> </html>
網站頁面上一些列表相關的內容好比說物品列表、人名列表等等均可以使用列表標籤來展現。一般後面跟<li>標籤一塊兒用,每條li表示列表的內容。
<li> 標籤訂義列表項目
<li> 標籤可用在有序列表 (<ol>) 和無序列表 (<ul>) 中
有序列表,編號列表標記。其功能是將文字段落向內縮進,並在段落的每一個項目前面加上1,2,3 有順序的數字。<ol>標記必須搭配<li>標記使用。
type:列表標識的類型 1:數字 a:小寫字母 A:大寫字母 i:小寫羅馬字符 I:大寫羅馬字符 start:規定有序列表的起始值 默認爲1
<ol type="1" start="2"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> 顯示: 2.咖啡 3.牛奶 4.茶
<ul>
:unordered lists的縮寫 無序列表無序列表,其功能是將文字段落向內縮進,並在段落前面加上圓形或空心圓形或方塊等項目符號,以達到醒目的效果。<ul>必須搭配<li>標記使用。
type:列表標識的類型
disc:實心圓(默認值)
circle:空心圓
square:實心矩形
none:不顯示標識
<ul type="circle"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ul>
顯示:
列表項包含在<dt></dt>標籤對中,<dd></dd>與定義項對應的每一個定義,自定義列表以<dl></dl>定義,項目前有符號縮進
<dl> <dt>第一章</dt> <dd>111</dd> <dd>222</dd> <dd>333</dd> <dt>第二章</dt> <dd>444</dd> <dd>555</dd> <dd>666</dd> </dl>
顯示
表格由<table> 標籤來定義。每一個表格均有若干行(由 <tr> 標籤訂義),每行被分割爲若干單元格(由<td>標籤訂義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。
border: 表格邊框. cellpadding: 內邊距 cellspacing: 外邊距. width: 像素 百分比.(最好經過css來設置長寬) <tr>: table row <th>: table head cell <td>: table data cell rowspan: 單元格豎跨多少行 合併行(豎着合併) colspan: 單元格橫跨多少列(即合併單元格) 合併列(橫着合併) <th>: table header <tbody>(不經常使用): 爲表格進行分區.
<div class="table"> <table border="1" cellspacing="0"> <!--表格頭--> <thead> <!--表格行--> <tr> <!--表格列,【注意】這裏使用的是th--> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主體--> <tbody> <!--表格行--> <tr> <td rowspan="3">上午</td> <!--表格列,【注意】這裏使用的是td--> <td>語文</td> <td>數學</td> <td>英文</td> <td>生物</td> <td>化學</td> </tr> <tr> <!--表格列,【注意】這裏使用的是td--> <td>語文</td> <td>數學</td> <td>英文</td> <td>生物</td> <td>化學</td> </tr> <tr> <!--表格列,【注意】這裏使用的是td--> <td>語文</td> <td>數學</td> <td>英文</td> <td>生物</td> <td>化學</td> </tr> <tr> <td rowspan ="2">下午</td> <!--表格列,【注意】這裏使用的是td--> <td>語文</td> <td>數學</td> <td>英文</td> <td>生物</td> <td>化學</td> </tr> <tr> <!--表格列,【注意】這裏使用的是td--> <td>語文</td> <td>數學</td> <td>英文</td> <td>生物</td> <td>化學</td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <td colspan="6">課程表</td> </tr> </tfoot> </table> </div>
表單是一個包含表單元素的區域。表單元素是容許用戶在表單中輸入內容,好比:文本域(textarea)、輸入框(input)、單選框()
表單用於向服務器傳輸數據。
語法:
<form>容許出現表單控件</form>
表單可以包含 input 元素,好比文本字段、複選框、單選框、提交按鈕等等。
表單還能夠包含textarea、select、fieldset和 label 元素。
HTML 表單用於接收不一樣類型的用戶輸入,用戶提交表單時向服務器傳輸數據,從而實現用戶與Web服務器的交互。表單標籤, 要提交的全部內容都應該在該標籤中.
action: 表單提交到哪. 通常指向服務器端一個程序,程序接收到表單提交過來的數據(即表單元素值)做相應處理
method: 表單的提交方式 post/get 默認取值 就是 get
get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制
<form action="/host/add/" method="post"> </form>
語法:
<input type="text"(input元素類型)name="fname"(input元素名稱) value="text"(input元素的值)/>
<input> 標籤的屬性和對應值
type: text 文本輸入框 password 密碼輸入框 radio 單選框 checkbox 多選框 submit 提交按鈕 button 按鈕(須要配合js使用.) button和submit的區別? file 提交文件:form表單須要加上屬性enctype="multipart/form-data" name: 表單提交項的鍵.注意和id屬性的區別:name屬性是和服務器通訊時使用的名稱;而id屬性是瀏覽器端使用的名稱,該屬性主要是爲了方便客
戶端編程,而在css和javascript中使用的
value: 表單提交項的值.對於不一樣的輸入類型,value 屬性的用法也不一樣:
1
2
3
4
5
|
type
=
"button"
,
"reset"
,
"submit"
-
定義按鈕上的顯示的文本
type
=
"text"
,
"password"
,
"hidden"
-
定義輸入字段的初始值
type
=
"checkbox"
,
"radio"
,
"image"
-
定義與輸入相關聯的值
|
checked: radio 和 checkbox 默認被選中 readonly: 只讀. text 和 password disabled: 對所用input都好使.
經常使用的例子:
文本框-語法 <p>姓名: <input type="text"(文本框) name="userName"(文本框名稱) value="用戶名"(文本框初始值通常不寫) size="30"(文本框長度) maxlength="20"(文本框可輸入最多字符) /> </p> 密碼框-語法 <p>密碼:<input type="password "(密碼框) name="pass"(密碼框的名稱) size="20"(密碼框的長度) /></p> 單選按鈕-語法 <p><input name="gen" type="radio"(單選按鈕框) value="男"(值) checked(單選按鈕選中狀態) />男</p> <p><input name="gen" type="radio" value="女" />女</p> 複選框-語法 <p><input type="checkbox"(複選框) name="interest" value="sports"(值)/>運動</p> <p><input type="checkbox" name="interest" value="talk" checked(複選框選中狀態) />聊天</p> <p><input type="checkbox" name="interest" value="play"/>玩遊戲</p> 按鈕-語法 <input type="reset" (重置按鈕) name="butReset" value="reset按鈕"(按鈕上顯示的文字)> <input type="submit"(提交按鈕) name="butSubmit" value="submit按鈕"> <input type="button"(普通按鈕) name="butButton" value="button按鈕"/>
多行文本域-語法
<textarea(多行文本域) name="showText" cols="x"(顯示的列數) rows="y"(顯示的行數)>文本內容 </textarea >
<select> 下拉選標籤屬性
name:表單提交項的鍵. size:選項個數 multiple:multiple multiple設置之後實現多選效果,ctrl+鼠標左鍵進行多選 <option> 下拉選中的每一項 屬性: value:表單提交項的值. selected: selected下拉選默認被選中 <optgroup>爲每一項加上分組
示例
<!--選擇框--> <!--滾動列表 multiple設置之後實現多選效果,ctrl+鼠標左鍵進行多選--> <p>籍貫: <select name="sel" size="3" multiple> <option value="廣州" selected>廣州</option> <optgroup label="深圳"> <option value="羅湖區">羅湖區</option> <option value="福田區">福田區</option> </optgroup> <option value="北京">北京</option> <option value="上海">上海</option> </select> </p> <!--下拉列表--> <p>意向工做城市: <select name="sel"> <option value="深圳">深圳</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="廣州" selected>廣州</option> </select> </p>
<label>
在HTML中<label>標籤不會向用戶展現任何特殊內容,它的做用是把本身與其餘標籤"綁定"起來,也能夠說是與其餘元素關聯到一塊兒。
<label>與其餘元素關聯的方式有兩種:
一、顯式聯繫:顯式聯繫經過<label>的 "for" 屬性和目標標籤的 ID 來完成 二、隱式聯繫:隱式聯繫可經過標籤嵌套完成
顯示聯繫例子:
<label for="www">姓名</label> <input id="www" type="text">
django的使用就很少介紹了,經過django相關命令建立project,而後建立app,編寫url以及views.py
url設置 url(r'^learn/$',learn) views.py from django.http import HttpResponse from django.views.decorators import csrf import requests def learn(request): #if request.method == "POST": print(request.POST) return HttpResponse('ok')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://192.168.149.129:8080/learn/" method="post"> <p>姓名: <input type="text" name="username") size="30" maxlength="20" /> </p> <p>密碼:<input type="password " name="pass") size="20" /></p> <p><input name="sex" type="radio" value="男" />男</p> <p><input name="sex" type="radio" value="女" />女</p> <p><input type="checkbox" name="hobby" value="sports"/>運動</p> <p><input type="checkbox" name="hobby" value="talk" />聊天</p> <p><input type="checkbox" name="hobby" value="play"/>玩遊戲</p> <!--選擇框--> <!--滾動列表 multiple設置之後實現多選效果,ctrl+鼠標左鍵進行多選--> <p>籍貫: <select name="jiguan" size="3" multiple> <option value="羅湖區">羅湖區</option> <option value="福田區">福田區</option> <option value="北京">北京</option> <option value="上海">上海</option> </select> </p> <!--下拉列表--> <p>意向工做城市: <select name="city"> <option value="深圳">深圳</option> <option value="北京">北京</option> <option value="上海">上海</option> </select> </p> <input type="reset" name="butReset" value="重置"> <input type="submit" name="butSubmit" value="提交"> </form> </body> </html>
打開html頁面填入數據提交,django便可獲取到用戶輸入的數據
經過django後端能夠看到程序後端已經拿到用戶輸入的相關數據,而後根據業務邏輯代碼便可進行相關數據處理
<QueryDict: {'username': ['admin'], 'pass': ['123456'], 'sex': ['男'], 'hobby': ['sports', 'play'], 'jiguan': ['北京'], 'city': ['上海'], 'butSubmit': ['提交']}>
文件上傳
實現django獲取用戶上傳的文件而後寫入服務器上
相關代碼
建立一個form表單,須要特別注意的是,在有文件上傳的form表單中,method屬性必須爲post,並且必須指定它的enctype爲"multipart/form-data",代表不對字符進行編碼。只有設置了enctype,這樣當request方法是POST時,處理這個form的view中才能接受到request.FILES中的文件數據,能夠經過request.FILES['file']來存取。若是不設置這個屬性,request.FILES則爲空。具體的代碼以下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://192.168.149.129:8080/learn/" method="post" enctype="multipart/form-data"> <p><input type="file" name="txt"></p> <input type="reset" name="butReset" value="重置"> <input type="submit" name="butSubmit" value="提交"> </form> </body> </html>
from django.shortcuts import render # Create your views here. from django.http import HttpResponse from django.views.decorators import csrf import json import requests import re import os def upload(request): #if request.method == "POST": print(request.POST) print(request.FILES) obj = request.FILES.get('txt',None) ## 獲取上傳的文件,若是沒有文件,則默認爲None print(obj) if not obj: return HttpResponse("no files for upload!") print(obj.name) f = open(os.path.join('file',obj.name), 'wb') for chunk in obj.chunks(): f.write(chunk) f.close() return HttpResponse('ok')
說明:
對於上傳的文件須要經過request.FILES["txt"]或者request.FILES.get("txt", None)來訪問,上傳的文件是保存在FILES這個字典中的
obj.read():從文件中讀取整個上傳的數據,這個方法只適合小文件;
obj.chunks():返回一個上傳文件的分塊生成器,按塊返回文件,經過在for循環中進行迭代,能夠將大文件按塊寫入到服務器中;
obj.multiple_chunks():這個方法根據myFile的大小,返回True或者False,當myFile文件大於2.5M(默認爲2.5M,能夠調整)時,該方法返回True,不然返回False,所以能夠根據該方法來選擇選用read方法讀取仍是採用chunks方法
obj.name:這是一個屬性,不是方法,該屬性獲得上傳的文件名,包括後綴,如:0711.txt
obj.size:這也是一個屬性,該屬性獲得上傳文件的大小
經過django後臺能夠看到用戶上傳文件相關信息
<QueryDict: {'butSubmit': ['提交']}> <MultiValueDict: {'txt': [<InMemoryUploadedFile: 0711.txt (text/plain)>]}> 0711.txt
在服務上看,文件已經上傳到相關目錄
[root@ myops]# ll file/ total 4 -rw-r--r--. 1 root root 267 Jul 12 02:34 0711.txt