前端基礎（HTML+CSS+JS）-day12
阿新 • • 發佈：2017-07-22
轉載 xhtml 規範 pla desc 響應狀態 pos 怪異 splay
寫在前面
上課第12天，打卡：
理想三旬；
前言
HTTP協議：
短連接：因為服務器的鏈接數是有限的。
如果一直維持一個長鏈接，那麽資源會很快就被耗盡；
並且大部分情況下長鏈接都處在沒有使用的情況：
比如你瀏覽博客園一個博文，只是在看文章，這種情況下鏈接就被浪費了。
無狀態：即服務器端不保存客戶端的任何狀態。
參考：http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html
HTTP協議詳解之請求篇
http請求由三部分組成，分別是：請求行、消息報頭、請求正文
請求行以一個方法符號開頭，以空格分開，後面跟著請求的URI和協議的版本，格式如下：
Method Request-URI HTTP-Version CRLF
Method表示請求方法；
Request-URI是一個統一資源標識符；
HTTP-Version表示請求的HTTP協議版本；
CRLF表示回車和換行（除了作為結尾的CRLF外，不允許出現單獨的CR或LF字符）。
請求方法（所有方法全為大寫）有多種，各個方法的解釋如下：
GET 請求獲取Request-URI所標識的資源
POST 在Request-URI所標識的資源後附加新的數據
HEAD 請求獲取由Request-URI所標識的資源的響應消息報頭
PUT 請求服務器存儲一個資源，並用Request-URI作為其標識
DELETE 請求服務器刪除Request-URI所標識的資源
TRACE 請求服務器回送收到的請求信息，主要用於測試或診斷
CONNECT 保留將來使用
OPTIONS 請求查詢服務器的性能，或者查詢與資源相關的選項和需求
應用舉例：
GET方法：在瀏覽器的地址欄中輸入網址的方式訪問網頁時，
瀏覽器采用GET方法向服務器獲取資源，
eg:GET /form.html HTTP/1.1 (CRLF)
POST方法要求被請求服務器接受附在請求後面的數據，常用於提交表單。
eg：POST /reg.jsp HTTP/ (CRLF)
Accept:image/gif,image/x-xbit,... (CRLF)
...
HOST:www.guet.edu.cn (CRLF)
Content-Length:22 (CRLF)
Connection:Keep-Alive (CRLF)
Cache-Control:no-cache (CRLF)
(CRLF) //該CRLF表示消息報頭已經結束，在此之前為消息報頭
user=jeffrey&pwd=1234 //此行以下為提交的數據
HEAD方法與GET方法幾乎是一樣的;
對於HEAD請求的回應部分來說，它的HTTP頭部中包含的信息與通過GET請求所得到的信息是相同的。
利用這個方法，不必傳輸整個資源內容，就可以得到Request-URI所標識的資源的信息。
該方法常用於測試超鏈接的有效性，是否可以訪問，以及最近是否更新。
HTTP協議詳解之響應篇
在接收和解釋請求消息後，服務器返回一個HTTP響應消息。
HTTP響應也是由三個部分組成，分別是：狀態行、消息報頭、響應正文
1、狀態行格式如下：HTTP-Version Status-Code Reason-Phrase CRLF
HTTP-Version表示服務器HTTP協議的版本；
Status-Code表示服務器發回的響應狀態代碼；
Reason-Phrase表示狀態代碼的文本描述。
狀態代碼有三位數字組成，第一個數字定義了響應的類別，且有五種可能取值：
1xx：指示信息--表示請求已接收，繼續處理
2xx：成功--表示請求已被成功接收、理解、接受
3xx：重定向--要完成請求必須進行更進一步的操作
4xx：客戶端錯誤--請求有語法錯誤或請求無法實現
5xx：服務器端錯誤--服務器未能實現合法的請求
常見狀態代碼、狀態描述、說明：
200 OK //客戶端請求成功
400 Bad Request //客戶端請求有語法錯誤，不能被服務器所理解
401 Unauthorized //請求未經授權，這個狀態代碼必須和WWW-Authenticate報頭域一起使用
403 Forbidden //服務器收到請求，但是拒絕提供服務
404 Not Found //請求資源不存在，eg：輸入了錯誤的URL
500 Internal Server Error //服務器發生不可預期的錯誤
503 Server Unavailable //服務器當前不能處理客戶端的請求，一段時間後可能恢復正常- 不遵循http協議的response
import socket
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
sock.bind((‘localhost‘,8090))
sock.listen(5)
while True:
print("server is working.....")
conn, address = sock.accept()
request = conn.recv(1024)
print(request.decode(‘utf-8‘))
# 只返回一個字符串
conn.sendall(bytes("Hello standby"))
conn.close()
if __name__ == ‘__main__‘:
main()
---server端崩了---
server is working.....
Traceback (most recent call last):
File "D:/soft/work/Python_17/day12/coding01.py", line 24, in <module>
main()
File "D:/soft/work/Python_17/day12/coding01.py", line 18, in main
conn.sendall(bytes("Hello standby"))
TypeError: string argument without an encoding
GET / HTTP/1.1
Host: 127.0.0.1:8090
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.8- 遵循http協議的response
import socket
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
sock.bind((‘localhost‘,8090))
sock.listen(5)
while True:
print("server is working.....")
conn, address = sock.accept()
request = conn.recv(1024)
print(request.decode(‘utf-8‘))
# 必須按照http協議定義好的規則進行response才可以（有響應頭和響應體並且要換行...）
conn.sendall(bytes("HTTP/1.1 200 OK\r\n\r\n<h1>Hello standby</h1>","utf8"))
conn.close()
if __name__ == ‘__main__‘:
main()
---在瀏覽器打開：http://127.0.0.1:8090/---
頁面輸出結果：
Hello standby
server端輸出結構：
server is working.....
GET / HTTP/1.1
Host: 127.0.0.1:8090
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.8
server is working.....
GET /favicon.ico HTTP/1.1
Host: 127.0.0.1:8090
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://127.0.0.1:8090/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.8
server is working.....# 把文件的內容讀出來作為響應體返回給瀏覽器
# index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="xxx">
<meta name="description" content="miaosu">
<title>standby</title>
</head>
<body>
<h1>Hello standby666</h1>
</body>
</html>
# 執行文件
import socket
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
sock.bind((‘localhost‘,8080))
sock.listen(5)
while True:
print("server is working.....")
conn, address = sock.accept()
request = conn.recv(1024)
print(request.decode(‘utf-8‘))
f = open(‘index.html‘,mode=‘r‘,encoding=‘utf-8‘)
ret = f.read()
conn.sendall(bytes("HTTP/1.1 200 OK\r\n\r\n{}".format(ret),"utf8"))
conn.close()
if __name__ == ‘__main__‘:
main()
---結果---
server is working.....
GET / HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.8
server is working.....
GET /favicon.ico HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://127.0.0.1:8080/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.8
server is working.....
一、HTML
參考：http://www.cnblogs.com/yuanchenqi/articles/6835654.html
1.簡單介紹
超文本標記語言（Hypertext Markup Language，HTML）通過標簽語言來標記要顯示的網頁中的各個部分。一套規則，瀏覽器認識的規則； 瀏覽器按順序渲染網頁文件，然後根據標記符解釋和顯示內容。 但需要註意的是，對於不同的瀏覽器，對同一標簽可能會有不完全相同的解釋（兼容性） 靜態網頁文件擴展名：.html 或 .htm；
# HTML格式
<!DOCTYPE html>
<html lang="en">
<head>
<!--文件頭-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--文件體-->
</body>
</html>
標簽屬性
閉合標簽
自閉和標簽
標簽分類
塊級標簽，自己獨占一行，例如 hn(1~6),<p>,<div></div>>...
內聯標簽，所占大小取決於內容
塊級標簽可以嵌套塊級/內聯標簽
內聯標簽只能嵌套內聯標簽
2.<!DOCTYPE>標簽
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標簽之前。 此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。 作用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。 document.compatMode： BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。 CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。 這個屬性會被瀏覽器識別並使用， 但是如果你的頁面沒有DOCTYPE的聲明，那麽compatMode默認就是BackCompat；
3.<head>內常用標簽
4.<body>內常用標簽
- 基本標簽
- div和span標簽
- img圖形標簽
- 超鏈接標簽
- 列表標簽（有序、無序、自定義）
- 表格標簽
- form表單標簽
- input系列標簽
- select標簽
- textarea多行文本標簽
- label標簽
- fieldset標簽
二、CSS
參考：http://www.cnblogs.com/yuanchenqi/articles/6856399.html
一個頁面主最本的元素就是 HTML的標簽 css 就是著裝和布局 js 所有的動態操作實現動態效果
三、JS（JQuery）
四、ajax
四、day12課後作業
作業要求：
1.實現一個登陸頁面，如下：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
border: 1px solid darkgray;
width: 80%;
height: 440px;
text-align: center;
margin: 0 auto;
/*background-color: wheat;*/
}
#pic1{
margin-top: 20px;
margin-left: 140px;
margin-bottom: 30px;
}
.left_box{
float: left;
background-color: wheat;
margin: 0 auto;
height: 440px;
width: 50%;
}
.right_box{
float: right;
background-color: darkgray;
height: 439px;
width: 50%;
/*border:1px blue solid;*/
}
#pic2{
height: 400px;
padding-left: -10px;
padding-right: 25px;
/*margin: 0 auto;*/
padding-top: 20px;
/*vertical-align: middle;*/
}
.right_box_inner{
margin-top: 30px;
height: 400px;
padding-top: 50px;
padding-right: 80px;
}
.right_box_inner > p > .btn1{
background-color: red;
border: none;
color: white;
text-align: center;
font-size: 16px;
padding: 10px 100px;
border-radius: 4px;
margin-right: -50px;
width: 290px;
}
.right_box_inner > p > .btn2{
background-color: green;
border: none;
color: white;
text-align: center;
font-size: 20px;
padding: 10px 2px;
margin-right: -500px;
width: 120px;
margin-top: 5px;
}
.pass{
margin-top: 30px;
margin-bottom: 30px;
}
.forget_pass{
margin-top: 30px;
margin-bottom: 30px;
margin-right: 75px;
}
.right_box_inner > p > input{
width: 270px;
border: 1px solid #ccc;
padding: 7px 10px;
border-radius: 3px; /*css3屬性IE不支持*/
/*padding-left:5px;*/
}
.right_box_inner > p > input[name=auth_code]{
width: 100px;
}
.input_3{
padding-right: 185px;
}
.footer{
text-align: center;
color: darkgray;
}
</style>
</head>
<body>
<img id="pic1" src="img/mll_logo.gif" alt="美樂樂首頁圖表">
<div class="box">
<div class="left_box">
<a href="http://www.cnblogs.com/standby/" target="_blank">
<img id="pic2" src="img/login_logo.png" alt="發羊財圖片" title="點擊有驚喜">
</a>
</div>
<div class="right_box">
<div class="right_box_inner">
<p>
<label for="user_name">姓名：</label>
<input type="text" name="user_name" id="user_name" placeholder="請輸入姓名" size="22">
</p>
<p class="pass">
<label for="user_pass">密碼：</label>
<input type="password" name="user_pass" id="user_pass" placeholder="請輸入密碼" size="22">
</p>
<p class="input_3">
<label for="auth_code">驗證碼：</label>
<input type="text" name="auth_code" id="auth_code">
</p>
<p class="forget_pass">
<span>
<input type="checkbox" name="auto_login" value="auto_login" checked="checked">自動登錄
<a href="http://www.cnblogs.com/standby/" target="_blank">忘記密碼？</a>
</span>
</p>
<P>
<input class="btn1" type="button" name="btn1" value="登錄">
</P>
<p>
<input class="btn2" type="button" name="btn2" value="免費註冊>>">
</p>
</div>
</div>
</div>
<div class="footer">
<p>
© http://www.cnblogs.com/standby/ ®謝絕轉載！
</p>
</div>
</body>
</html>
效果：
2.實現一個註冊頁面，如下：
代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
border: 1px solid darkgray;
width: 74%;
height: 420px;
text-align: center;
margin: 0 auto;
/*background-color: wheat;*/
}
.nav {
background-color: #53e3a6;
text-align: center;
line-height: 20px;
position: fixed;
top: 0;
left: 10%;
width: 80%;
height: 40px;
padding-bottom: 10px;
z-index: 99;
}
.nav li a:hover{
background: yellowgreen;
}
.nav_left > li {
display: inline;
float: left;
margin-left: 150px;
}
.nav_right {
margin-right: 150px;
}
.nav_right > li {
display: inline;
float: right;
margin-right: 30px;
}
.pic1 {
/*margin-top: 15px;*/
margin-top: 60px;
margin-left: 180px;
margin-bottom: 15px;
}
.body_left {
float: left;
margin: 0 auto;
height: 420px;
width: 50%;
/*background-color: wheat;*/
}
.body_between {
float: left;
width: 15%;
height: 420px;
/*background-color: yellowgreen;*/
}
#hr_line {
float: right;
margin-top: 50px;
width: 1px;
height: 320px;
background-color: #53e3a6;
}
.body_right {
float: right;
margin: 0 auto;
height: 420px;
width: 35%;
/*background-color: #53e3a6;*/
/*border-left: 1px solid darkgray;*/
}
.body_left > p > input {
width: 270px;
border: 1px solid #ccc;
padding: 7px 10px;
border-radius: 3px; /*css3屬性IE不支持*/
/*border-left: 10px solid red;*/
/*padding-left:5px;*/
}
.new_register {
margin-right: 300px;
}
.pass1,.pass2 {
margin-left: -16px;
}
.auth_code_input {
margin-left: -150px;
}
#auth_code {
width: 120px;
}
.read_protocal {
margin-left: 50px;
}
.btn1 {
width: 290px;
height:38px;
background-color: red;
border: none;
color: white;
text-align: center;
font-size: 16px;
border-radius: 4px;
margin-right: -70px;
}
.login_direct {
margin-top: 75px;
margin-bottom: 20px;
}
.label_to_login {
font-size: 20px;
margin-left: -16px;
}
.btn_login {
font-size: 20px;
}
.footer{
text-align: center;
color: darkgray;
}
</style>
</head>
<body>
<div class="nav">
<ul class="nav_left">
<li><a href="">*收藏本站</a></li>
</ul>
<ul class="nav_right">
<li><a href="">登錄</a></li>
<li><a href="">免費註冊</a></li>
<li><a href="">我的訂單</a></li>
<li><a href="">VIP會員俱樂部</a></li>
<li><a href="">客戶服務</a></li>
</ul>
</div>
<div class="pic1">
<a href="http://www.cnblogs.com/standby/" TARGET="_blank">
<img id="pic1" src="img/mll_logo.gif" alt="美樂樂首頁圖表" title="跳轉到首頁">
</a>
</div>
<div class="box">
<div class="body_left">
<h2><label for="user_name" class="new_register">註冊新用戶</label></h2>
<p>
<label for="user_name">用戶名：</label>
<input type="text" name="user_name" id="user_name" placeholder="請輸入姓名" size="22">
</p>
<p>
<label for="user_tel">手機號：</label>
<input type="text" name="user_tel" id="user_tel" placeholder="請輸入手機號" size="22">
</p>
<p class="pass1">
<label for="user_pass1">登錄密碼：</label>
<input type="password" name="user_pass1" id="user_pass1" placeholder="請輸入密碼" size="22">
</p>
<p class="pass2">
<label for="user_pass2">確認密碼：</label>
<input type="password" name="user_pass2" id="user_pass2" placeholder="請確認密碼" size="22">
</p>
<p class="auth_code_input">
<label for="auth_code">驗證碼：</label>
<input type="text" name="auth_code" id="auth_code">
</p>
<p class="read_protocal">
<span>
<input id="check_box" type="checkbox" name="auto_login" value="read_protocal" checked="checked">我已閱讀並同意
<a id="readed" href="http://www.cnblogs.com/standby/" target="_blank">《新用戶註冊協議》</a>
</span>
</p>
<input class="btn1" type="button" name="btn1" value="同意以上協議並註冊">
</div>
<div class="body_between">
<hr id="hr_line">
</div>
<div class="body_right">
<p class="login_direct">
<span>
<label class="label_to_login" for="">我已經註冊，現在就</label>
<a href="http://www.cnblogs.com/standby/" class="btn_login" target="_blank">登錄</a>
</span>
</p>
<a href="http://www.cnblogs.com/standby/" TARGET="_blank">
<img id="pic2" src="img/hongbao.jpg" alt="搶紅包" title="點擊進行紅包大戰">
</a>
</div>
</div>
<div class="footer">
<p>
© http://www.cnblogs.com/standby/ ®謝絕轉載！
</p>
</div>
</body>
</html>
效果：
前端基礎（HTML+CSS+JS）-day12