<!DOCTYPE html> <!-- 聲明使用html5標準 --> <html lang="en"> <!-- html標籤開始(只能一個)，指定語言en --> <head> <!-- head標籤開始 --> <!--介紹head標籤--> <!--head當中 大多數標籤是看不到的--> <meta charset="UTF-8"> <!-- 聲明使用UTF-8字符集 --> <!--間隔x秒刷新後，跳轉到指定url--> <!--<meta http-equiv="refresh" content="1;url='http://www.imdsx.cn'">--> <!--關鍵字檢索,相似百度關鍵字搜索--> <meta name="keywords" content="大師兄,北京"> <!--網站的描述--相似百度搜索出來的描述> <meta name="description" content="j"> <!--瀏覽器tag的名字--> <title>測試小黑</title> <!--瀏覽器tag的圖標--> <link rel="shortcut icon" href="https://www.jd.com/favicon.ico"> <!--rel 屬性指示被連接的文檔是一個樣式表--> <link rel="stylesheet" type="text/css" href="theme.css" /> <!--<style> 標籤用於爲 HTML 文檔定義樣式信息。--> <style></style> <!--<script> 標籤用於定義客戶端腳本，好比 JavaScript。--> <!--script 元素既能夠包含腳本語句，也能夠經過 src 屬性指向外部腳本文件。--> <script></script> </head> <!-- head標籤結束 --> <body> </body> </html>
HTML_body標籤
經常使用符號：空格：  大於號：> 小於號： < javascript
塊級標籤：H標籤(加大加粗)，P標籤(段落間有間距)，DIV(白板)css
行內標籤：SPAN標籤(白板)html
body標籤：html5
一 基本標籤java
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.web
<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.ajax
<b> <strong>: 加粗標籤.django
<strike>: 爲文字加上一條中線.編程
<em>: 文字變成斜體.瀏覽器
<sup>和<sub>: 上角標 和 下角表.
<br>:換行.
<hr>:水平線
<div><span>
<!--標題標籤--> <h1>h1標籤</h1> <h2>h2標籤</h2> <h3>h3標籤</h3> <h4>h4標籤</h4> <h5>h5標籤</h5> <h6>h6標籤</h6> <!--白板標籤：沒有任何css樣式--> <!--內聯標籤真白板標籤：有多大佔多大--> <span>這是span標籤</span> <span>這是span標籤</span> <!--div標籤：塊級僞白板標籤：不管多大佔一行--> <div>這是div標籤</div> <!--段落標籤p 塊標籤：實現字與字之間的換行--> <!--換行標籤br：實現換行-->
塊級標籤和內聯標籤
塊級標籤：<p><h1><table><ol><ul><form><div>
內聯標籤：<a><input><img><sub><sup><textarea><span>
block（塊）元素的特色
① 老是在新行上開始；
② 高度，行高以及外邊距和內邊距均可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它能夠容納內聯元素和其餘塊元素
inline元素的特色
① 和其餘元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文本或者其餘內聯元素
對行內元素，須要注意以下
設置寬度width 無效。
設置高度height 無效，能夠經過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。
特殊字符：
< >；"引號；©版權號;®註冊標誌;
二 圖形標籤: <img> :
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<img src="1.jpg" height="100px" width="100px" alt="圖片不存在" title="nihao">
三 超連接標籤(錨標籤)<a>:
href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com"
target: _blank : 在新的窗口打開超連接. 框架名稱: 在指定框架中打開鏈接內容.
name: 定義一個頁面的書籤.
用於跳轉 href : #書籤名稱.
<a href="#abc">位置一</a> #必須有滾動條才能顯示效果 <a href="http://www.baidu.com" target="_blank">點我</a> <div id="abc">位置二</div>
四 列表標籤：
<ul>: 無序列表
<ol>:有序列表
<li>:列表中的每一項.
<dl> 定義列表
<dt> 列表標題
<dd> 列表項
<!--列表標籤--> <ul> <li>用例名稱</li> <li>用例方法</li> <li>返回參數</li> </ul> <!--數字列表--> <ol> <li>用例名稱</li> <li>用例方法</li> <li>返回參數</li> </ol> <!--分層列表--> <dl> <dt>黑龍江</dt> <dd>牡丹江</dd> </dl> <dl> <dt>河北</dt> <dd>保定</dd> </dl>
五 表格標籤: <table>:
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好經過css來設置長寬）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）
<th>: table header <tbody>(不經常使用): 爲表格進行分區.
<!--表格標籤--> <!--thead：表頭 th：表頭行 tbody：內容 tr：行 td：列 boder：表格的邊框 coslpan：td佔幾列 rowspan：tr佔幾列--> <table border="1" cellpadding="1" cellspacing="1" style="width:200px;height:200px"> <thead> <tr> <th>id</th> <th>caseName</th> <th>method</th> <th colspan="2">操做</th> <!--列合併--> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan="3">抽獎</td> <!--行合併--> <td rowspan="3">post</td> <td>編輯</td> <td>刪除</td> </tr> <tr> <td>2</td> <td>編輯</td> <td>刪除</td> </tr> <tr> <td>3</td> <td>編輯</td> <td>刪除</td> </tr> </tbody> </table>
六 表單標籤（django）<form>:
表單用於向服務器傳輸數據。
表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。
表單還能夠包含textarea、select、fieldset和 label 元素。
1.表單屬性
HTML 表單用於接收不一樣類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標籤, 要提交的全部內容都應該在該標籤中.
action: 表單提交到哪. 通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/web
method: 表單的提交方式 post/get 默認取值 就是 get（信封）
get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
get/post是常見的兩種請求方式.
2.表單元素
<input> type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(須要配合js使用.) button和submit的區別？
file 提交文件：form表單須要加上屬性enctype="multipart/form-data"
<!--input標籤：輸入框--> <!--name和value，是向後臺以{key:value}向後臺傳遞數據，name的值爲key，value的值爲value;--> <input type="text" name="username" value="" placeholder="請輸入用戶名"> <!--密碼框 type="password"--> <input type="password" name="passwd"> <!--多選框 type="checkbox"，checked 默認勾選--> <input type="checkbox" name="" checked="checked"> <!--單選框 type="radio"，name必須相同纔會互斥，實現單選--> <div> <span>男</span><input type="radio" name="sex"> </div> <div> <span>女</span><input type="radio" name="sex"> </div> <!--form表單標籤，表單提交會刷新頁面，ajax不會刷新頁面--> <!--action請求路徑，method請求方式--> <!--上傳文件時申明下,分段發送的意思:enctype="multipart/form-data"--> <form action="http://www.baidu.com" method="post" enctype="multipart/form-data"> <input type="text" value="zc"> <!--沒有任何外加操做--> <input type="button" value="增長"> <!--submit與form表單連用，會提交form表單中的數據--> <input type="submit" value="提交"> <!--必須與from表單連用纔能有重置的功能--> <input type="reset"> <p>用戶名<input type="text" name="query"></p> <p>密碼<input type="password" name="pwd"></p> <p>男<input type="radio" name="sex" value="1"></p> <p>女<input type="radio" name="sex" value="2"></p> <p>籃球<input type="checkbox" name="hobby" value="1"></p> <p>足球<input type="checkbox" name="hobby" value="2"></p> <p>棒球<input type="checkbox" name="hobby" value="3"></p> <p>小求<input type="checkbox" name="hobby" value="4"></p> <p><input type="button" value="btn"></p> <p><input type="file" name="file_name"></p> <p>提交<input type="submit" value="提交"></p> </form> <!--label標籤與input連用，經過for屬性 映射到input的id屬性，這樣點擊用戶名，就能夠獲取輸入框的焦點--> <label for="i1">用戶名：</label> <!--id屬性是選擇器--> <input id="i1" placeholder="請輸入用戶名" name="username" type="text">
def index(request):
print request.POST print request.GET print request.FILES for item in request.FILES: fileObj = request.FILES.get(item) f = open(fileObj.name, 'wb') iter_file = fileObj.chunks() for line in iter_file: f.write(line) f.close() return HttpResponse('ok')
name: 表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客戶端編程，而在css和javascript中使用的。
value: 表單提交項的值.
對於不一樣的輸入類型，value 屬性的用法也不一樣：
-
-
-
-
- type="button", "reset", "submit" - 定義按鈕上的顯示的文本
- type="text", "password", "hidden" - 定義輸入字段的初始值
- type="checkbox", "radio", "image" - 定義與輸入相關聯的值
-
-
-
checked: radio 和 checkbox 默認被選中
readonly: 只讀. text 和 password
disabled: 對所用input都好使.
<select> 下拉選標籤屬性：
name:表單提交項的鍵.
size：選項個數
multiple：multiple
<option> 下拉選中的每一項 屬性：value:表單提交項的值. selected: selected下拉選默認被選中
<optgroup>爲每一項加上分組
<textarea> 文本域 name:表單提交項的鍵. cols:文本域默認有多少列 rows:文本域默認有多少行
<label>
<label for="www">姓名</label>
<input id="www" type="text">
<fieldset>
<fieldset>
<legend>登陸吧</legend>
<input type="text">
</fieldset>
<!--多行文本,能夠用來寫備註--> <p>備註:<textarea name="content">這是textarea的內容</textarea></p> <!--select 下拉框標籤，在option上增長 selected 爲默認選擇--> <!--要實現按住ctrl 能夠多選的效果，須要使用multiple--> <select name="city" size="1" multiple="multiple"> <option value="1">黑龍江</option> selected="selected" 默認選中第二個 <option value="2" selected="selected">河北</option> <option value="3">河南</option> </select> <!--選黑龍江後，再選第二級--> <select size="7" multiple="multiple"> <optgroup label="黑龍江"> <option>牡丹江</option> <option>哈爾濱</option> <option>雞西</option> </optgroup> <optgroup label="河北"> <option>石家莊</option> <option>保定</option> <option>淶水</option> </optgroup> </select> <!--a標籤：超連接--> <a href="https://www.baidu.com/" target="_blank" style="text-decoration:none">百度一下</a> <!--image標籤：--> <!--alt屬性：當圖片加載失敗時所展現的文案--> <img src="logo.jpg" alt="這是logo" title="logo">
IP是由點分十進制來區分的
完成三次握手,客戶端與服務器開始傳送數據
A與B創建TCP鏈接時：首先A向B發SYN（同步請求），
而後B回覆SYN搜索+ACK（同步請求應答），
最後A回覆ACK確認，這樣TCP的一次鏈接（三次握手）的過程就創建了！
四次揮手斷開連接:
第一次揮手：Client發送一個FIN，用來關閉Client到Server的數據傳送;
第二次揮手：Server收到FIN後，發送一個ACK給Client;
第三次揮手：Server發送一個FIN，用來關閉Server到Client的數據傳送;
第四次揮手：Client收到FIN後，接着發送一個ACK給Server,Server進入CLOSED狀態，完成四次揮手。