前端-html簡介
1.HTTP協議
超文字傳輸協議（英文：HyperText Transfer Protocol，縮寫：HTTP）是一種用於分散式、協作式和超媒體資訊系統的應用層協議。HTTP是全球資訊網的資料通訊的基礎。
在瀏覽器位址列鍵入URL，按下回車之後會經歷以下流程： 1. 瀏覽器向 DNS 伺服器請求解析該 URL 中的域名所對應的 IP 地址; 2. 解析出 IP 地址後，根據該 IP 地址和預設埠 80，和伺服器建立TCP連線; 3. 瀏覽器發出讀取檔案(URL 中域名後面部分對應的檔案)的HTTP 請求，該請求報文作為 TCP 三次握手的第三個報文的資料傳送給伺服器; 4. 伺服器對瀏覽器請求作出響應，並把對應的 html 文字傳送給瀏覽器; 5. 釋放 TCP連線; 6. 瀏覽器將該 html 文字並顯示內容;
1.1 HTTP協議特性
1）支援客戶/伺服器模式。
2）簡單快速：客戶向伺服器請求服務時，只需傳送請求方法和路徑。請求方法常用的有GET、HEAD、POST。每種方法規定了客戶與伺服器聯絡的型別不同。由於HTTP協議簡單，使得HTTP伺服器的程式規模小，因而通訊速度很快。
3）靈活：HTTP允許傳輸任意型別的資料物件。正在傳輸的型別由Content-Type加以標記。
4）無連線：無連線的含義是限制每次連線只處理一個請求。伺服器處理完客戶的請求，並收到客戶的應答後，即斷開連線。採用這種方式可以節省傳輸時間。
5）無狀態：HTTP協議是無狀態協議。無狀態是指協議對於事務處理沒有記憶能力。缺少狀態意味著如果後續處理需要前面的資訊，則它必須重傳，這樣可能導致每次連線傳送的資料量增大。另一方面，在伺服器不需要先前資訊時它的應答就較快。
1.2 HTTP請求協議與響應協議
-
請求協議
請求首行 GET： URL路徑？資料 POST：資料在請求體
請求頭
請求體
import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('127.0.0.1', 8000)) sock.listen(3) while True: conn, addr = sock.accept() data = conn.recv(1024) print("has data:", data.decode()) conn.sendall("HTTP/1.1 200 ok \r\n\r\n Hello world!".encode()) conn.close()has data: GET / HTTP/1.1 Host: 127.0.0.1:8000 Upgrade-Insecure-Requests: 1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15 Accept-Language: zh-cn Accept-Encoding: gzip, deflate Connection: keep-alive # 空資料 has data: GET /favicon.ico HTTP/1.1 # 圖示請求 Host: 127.0.0.1:8000 Connection: keep-alive Accept: */* User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15 Accept-Language: zh-cn Referer: http://127.0.0.1:8000/ Accept-Encoding: gzip, deflate -
響應報文
HTTP/1.1 200 OK
協議版本 狀態碼 狀態碼的原因
響應首部欄位
主體即顯示內容
2.HTML概述
- HTML 超文字標記語言，也叫web頁面
- HTML不是程式語言，只是標記語言
2.1HTML標準結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
2.2 標籤語法
<h1> 內容 </h1> 閉合標籤
<img src=''/> 自閉合標籤
塊級標籤（block）--獨佔一行
h,div
內聯標籤（inline）--按內容佔位
br,b,strong,i,em,del,span,a
原則上：
塊級標籤可以巢狀塊級和內聯
內聯標籤只可以巢狀內聯
<標籤名 屬性1="屬性值" 屬性2="屬性值"...>內容部分</標籤名>
2.3 基本標籤
<!--標題標籤-->
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h5>標題6</h5>
<!--換行標籤-->
本是後山人 <br>
偶做前堂客。<br>
醉舞經閣半卷書，<br>
坐井說天闊。<br>
<!--文字格式化標籤-->
not Bold
<b>Bold</b>
<strong>Bold</strong>
<i>inline</i>
<em>inline</em>
<del>劃線</del>
<!--特殊符號-->
word tex
2.4 div標籤和span標籤
<div></div> 塊級標籤
<span></span> 內聯標籤
這二者都是無樣式的標籤
2.5 超連結標籤
<a href="https://www.baidu.com">點選此處進入百度</a>
<a href="本地標籤.html">本地資源</a>
target="_blank"開啟新視窗
title="內容" 懸停顯示內容
客戶端（遊覽器）向服務端傳送請求的形式：
- 位址列請求 get
- 超連結標籤 get
- form表單 get，post
- ajax
2.6 錨點應用
<a href="#c1">第1章</a><br>
<a href="#c2">第2章</a><br>
<a href="#c3">第3章</a>
<span id="b1">返回頂部</span>
<div id="c1">第一章內容<a href="#b1">返回頂部</a></div>
<div id="c2">第二章內容<a href="#b1">返回頂部</a></div>
<div id="c3">第三章內容<a href="#b1">返回頂部</a></div>
2.7 img標籤
<img height="300px" width="500" src="background_pic.jpg" title="背景">
屬性:
src:資源所在位置
height,width:高度和寬度
title:懸停時顯示內容
border:邊框粗細
alt:圖片無法載入顯示內容
2.8 列表
<!--unordered list 無序列表-->
<ul>
<li>張三</li>
<li>李四</li>
<li>王五</li>
</ul>
<!--order list 有序列表-->
<ol>
<li>張三</li>
<li>李四</li>
<li>王五</li>
</ol>
2.9 表單標籤
表單主要用來收集使用者資訊，是web中間資訊溝通的橋樑
表單三要素：
-
表單標籤
包含了表單處理程式所在的URL以及資料提交到伺服器的方法等表單資訊
-
表單域
包含文字庫，密碼框，隱藏框等表單控制元件
-
表單按鈕
提交表單
<form action="" method="" enctype=""></form>
action代表域名
method代表請求方式
enctype代表打包方式
資料打包格式
Content_Type:multipart/form-data 傳送檔案
Content_Type:application/x-www-form-urlencoded
Content_Type:json
部分標籤的屬性：
- 明文：input+text
- 密文：input+password
- 複選框：input+checkbox
- 單選框：input+radio
- 日期：input+date
- 下拉選單：select+option
- 多行文字框：textarea
- 按鈕：input+button
- 重置:input+reset
- label屬性:label+for