目錄
我看到不少初級運維，連前後怎麼向後端提交數據的都不懂！一問就回了一句“沒學過開發”，那個汗顏啊~~
所以本章打算教一下前後使用HTML，後端使用PHP，做一個簡單的向網站提交數據，主要使用GET和POST兩種方式
如果沒基礎，沒關係直接看《HTML教程》主要使用的是的表單部分，如果你真的很懶，你也可以直接不看
php可以看《PHP教程》，也可以不看，主要是輸出你提交的數據而已。
此教程
TML使用的是本地win7編寫的，我這裏使用webStorm進行HTML編寫，也可以不要，直接複製我的代碼也行。
PHP使用的是LNMP，搭建可以看我的《hualinux2.5 環境搭建：centos8安裝LNMP》，使用PHPStorm編寫PHP，也可不要
一、HTML語法（熟悉可跳過）
1.1 使用語法
<標籤>內容</標籤>
注：新的html5如果內容沒有可以寫成<標籤/>
- HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
- HTML 標籤通常是成對出現的，比如 <b> 和 </b>
- 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
- 開始和結束標籤也被稱爲開放標籤和閉合標籤
固定格式爲：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--在這裏寫內容就行了-->
</body>
</html>
上面的每對標籤只能出現一次，在<body>...</body>之間寫東西就行了，可以嵌套其它標籤，有興趣可以看《HTML教程》
1.2 HTML標籤英文全稱
有些人反映老是記不住HTML標籤，這裏我貼出全稱
|
HTML標籤 |
英文全稱 |
中文釋義 |
|
a |
Anchor |
錨 |
|
abbr |
Abbreviation |
縮寫詞 |
|
acronym |
Acronym |
取首字母的縮寫詞 |
|
address |
Address |
地址 |
|
dfn |
Defines a Definition Term |
定義定義條目 |
|
kbd |
Keyboard |
鍵盤（文本） |
|
samp |
Sample |
示例（文本 |
|
var |
Variable |
變量（文本） |
|
tt |
Teletype |
打印機（文本） |
|
code |
Code |
源代碼（文本） |
|
pre |
Preformatted |
預定義格式（文本 ） |
|
blockquote |
Block Quotation |
區塊引用語 |
|
cite |
Citation |
引用 |
|
q |
Quotation |
引用語 |
|
strong |
Strong |
加重（文本） |
|
em |
Emphasized |
加重（文本） |
|
b |
Bold |
粗體（文本） |
|
i |
Italic |
斜體（文本） |
|
big |
Big |
變大（文本） |
|
small |
Small |
變小（文本） |
|
sup |
Superscripted |
上標（文本） |
|
sub |
Subscripted |
下標（文本） |
|
bdo |
Direction of Text Display |
文本顯示方向 |
|
br |
Break |
換行 |
|
center |
Centered |
居中（文本） |
|
font |
Font |
字體 |
|
u |
Underlined |
下劃線（文本） |
|
s/ strike |
Strikethrough |
刪除線 |
|
div |
Division |
分隔 |
|
span |
Span |
範圍 |
|
ol |
Ordered List |
排序列表 |
|
ul |
Unordered List |
不排序列表 |
|
li |
List Item |
列表項目 |
|
dl |
Definition List |
定義列表 |
|
dt |
Definition Term |
定義術語 |
|
dd |
Definition Description |
定義描述 |
|
del |
Deleted |
刪除（的文本） |
|
ins |
Inserted |
插入（的文本） |
|
h1~h6 |
Header 1 to Header 6 |
標題1到標題6 |
|
p |
Paragraph |
段落 |
|
hr |
Horizontal Rule |
水平尺 |
|
href |
hypertext reference |
超文本引用 |
|
alt |
alter |
替用(一般是圖片顯示不出的提示) |
|
src |
Source |
源文件鏈接 |
|
cell |
cell |
巢 |
|
cellpadding |
cellpadding |
巢補白 |
|
cellspacing |
cellspacing |
巢空間 |
|
nl |
navigation lists |
導航列表 |
|
tr |
table row |
表格中的一行 |
|
th |
table header cell |
表格中的表頭 |
|
td |
table data cell |
表格中的一個單元格 |
<a> anchor 定義錨
<abbr> abbreviation 定義縮寫
<acronym> 定義只取消首字母的縮寫
<address> 定義地址元素
<area> 定義圖像映射內部的區域
<b> bold 定義粗體字
<base> 定義頁面當中的所有鏈接的基準鏈接
<bdo> bidirectional override 定義文字的顯示方向
<big> 定義大號字
<blockquote> 定義長的引用
<body> 定義body元素
<br> break 插入一個回車
<button> 定義按鈕
<caption> 定義表格標題
<cite> citation 定義引用
<code> computer code 定義計算機代碼文本
<col> column 定義用於表格列的屬性
<h1>to<h6> 定義標題1到標題6
<head> 定義關於文檔的信息
<hr> horizontal 定義水平線
<html> hypertext markup language 定義html文檔
<i> italic 定義斜體字
<iframe> inline frame 定義內聯框架
<img> image 定義圖像
<input> 定義輸入域
<ins> inserted 定義被插入的文本
<kbd> keyboard 定義鍵盤文本
<label> 定義針對表單控件的標籤
<legend> 定義框架集的標題
<li> list item 定義列表的項目
<link> 定義資源引用
<map> 定義圖像映射
<meta> 定義元信息
<noframe> 定義無框架的節
<noscript> 定義無腳本的節
<object> 定義內嵌對象
<ol> ordered list 定義有序列表
<optgroup> option group 定義選項組
<option> 定義下拉列表的選項
<p> paragraph 定義段落
<param> 定義對象的參數
<pre> preformatted 定義預格式文本
<q> quotation 定義短的引用
<samp> sample 定義計算機代碼樣本
<script> 定義腳本
<select> 定義選擇列表
<small> 定義小字體文本
<span> 定義文檔中的節
<strong> stronger empasis定義強調文本
<style> 定義樣式的定義
<sub> subscript 定義下標文本
<sup> superscript 定義上標文本
<table> 定義表格
<tbody> table body 定義表格的主體部分
<td> table data cell定義表格單元
<textarea> 定義文本區域
<tfoot> table foot定義表也的腳註
<th> table header cell定義表格的表頭單元格
<thead> table head定義表格的標題
<title> 定義文檔的標題
<tr> table row定義表格的行
<tt> teletype 定義打字機文本
<ul> unordered list 定義無序列表
<var> variable 定義變量
二、PHP語法（可以跳過）
<?
;php代碼
php語法很簡單可以看《PHP教程》和《PHP官方中文文檔》
本文只用到 “$_GET 變量”和“$_POST 變量”
三、編寫交互代碼
3.1 需求及講解
3.1.1 需求
上圖填寫“名字”“留言”點提交，就顯示你的名字和留言的內容，
名字：hua 留言：php是世界上最好的語言效果如下圖所示：
要求使用get和post兩種方式提交，並對比一下不同的地方
3.1.2 分析
HTML提交數據使得的是表單，表單是用於向服務器傳輸數據用的，
表單能夠包含 input 元素，比如文本字段、複選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
有興趣的可以看一下《HTML表單》
我在這裏HTML中可以使用的是<input>的text和 <textarea>實現
php的get方法可以使用$_GET，而post可以使用 $_POST
3.2 GET方式實現
3.2.1 HTML代碼及解說
html代碼，我放在桌面了，大家可以用記事本編寫，然後另存爲index.html就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<form method="get" action="http://192.168.3.11/note.php" enctype="application/x-www-form-urlencoded">
名字：<input type="text" name="username"><br>
留言：<br><textarea name="note" cols="30" rows="5" placeholder="請輸入你的留言"></textarea><br>
<input type="submit" value="提交">
</form>
</body>
</html>
註解：
form屬於解說：
method="get"：表示使用get方式，如果使用post可以把get改爲post
action="http://192.168.3.11/note.php"：表示處理這個get請求的文件路徑，我的php文件在服務器上，路徑是http://192.168.3.11/note.php
enctype： 屬性規定在發送到服務器之前應該如何對錶單數據進行編碼。默認地，表單數據會編碼爲 "application/x-www-form-urlencoded"。就是說，在發送到服務器之前，所有字符都會進行編碼（空格轉換爲 "+" 加號，特殊符號轉換爲 ASCII HEX 值）。
值 描述 application/x-www-form-urlencoded 在發送前編碼所有字符（默認） multipart/form-data 不對字符編碼。
在使用包含文件上傳控件的表單時，必須使用該值。
text/plain 空格轉換爲 "+" 加號，但不對特殊字符編碼。
input說明：標籤用於蒐集用戶信息。
根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。
type="text"：表示是文本框，還有其它一堆類型，我這裏就不說了，有求個可以看一下<input>
name：表示這個控制的名字，一定要寫的！
from提交數據是 name屬的值，以及value的值，如果少了name屬性是不會提交 的！！
就是因爲見到不少初學者都犯這個錯誤
提交按鍵 type="submit"：必需寫！這個是提交的意思，沒有name，因爲它只負責把form標籤中包含有name的都提交到服務器中。
textarea：標籤定義多行的文本輸入控件。
文本區中可容納無限數量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。
可以通過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。
屬性不說了，自己看
3.2.2 php代碼及解說
我在PHP服務器上note.php代碼爲
<?php
echo $_GET['username'].'留言是：</br>';
echo '<pre style="border: 3px solid olivedrab;width: 25%">'.$_GET['note'].'</pre>';
解說：
echo：輸出的意思，如果有個字符串連接使用點號.
$_GET：
預定義的 $_GET 變量用於收集來自 method="get" 的表單中的值。
從帶有 GET 方法的表單發送的信息，對任何人都是可見的（會顯示在瀏覽器的地址欄），並且對發送信息的量也有限制。
<pre style="border: 3px solid olivedrab;width: 25%">：
我加入的html標籤，效果就是加一個綠色的框圍着
3.2.3 運行效果並get分析
打開HTML我的放在桌面上，用的是火狐瀏覽器打開，輸入如下圖內容：
，
效果如下：
在上圖中我們看URL地址的變化
http://192.168.3.11/note.php?username=hua¬e=php是世界上最好的語言，get方式上面中
http://192.168.3.11/note.php：訪問的是PHP服務器的note.php文件
問號?：連接作用，一般表示後是傳參數的，可以理解爲連接參數的作用
username=hua¬e=php是世界上最好的語言，get方式：
這些就是參數，對應的是form表單標籤中含有name屬性及值，第一個是我在html使用的是input的文本，name設置爲username，value的值爲hua，它們形式是
name的值=value的值所以我這裏是username=hua，同理那2個也一樣，這裏不就說了
&：不同參數的間隔符，我這裏有2對參數，所以使用了&連接號
有些眼尖的人還看到你自己發送的內容在URL上顯示了！！！對，這就是get方式，直接以明文方式在URL使用參數提交的！所以使用用戶名和密碼登陸方式，不能使用get方式！！
我這裏再在火狐瀏覽器上按F12，會彈出開發者工具菜單，選擇“網絡”
再退回再次提交看一下，發現會有很多東西可以看，如下圖所示：
再點一下響應頭
這些東西我就不理解了，有興趣可以看一下《圖解HTTP》
3.3 使用post方式提交
3.3.1 HTML代碼
只需要把method方式改爲post就行了，其它不需要修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<form method="post" action="http://192.168.3.11/note.php" enctype="application/x-www-form-urlencoded">
名字：<input type="text" name="usernmae"><br>
留言：<br><textarea name="note" cols="30" rows="5" placeholder="請輸入你的留言"></textarea><br>
<input type="submit" value="提交">
</form>
</body>
</html>
3.3.2 PHP代碼
把$_GET改爲$_POST
<?php
echo $_POST['username'].'留言是：</br>';
echo '<pre style="border: 3px solid olivedrab;width: 25%">'.$_POST['note'].'</pre>';
3.3.3 效果並分析
按下圖輸入內容並提交：
效果如下圖所示：
發現post提交併不像get提交URL上會多出一些東西，連提交的內容都是明文顯示的。這裏是什麼都沒有看到，但數據的確提交到服務器上了。
所以說post提交適合於
1.不想別人看到內容的，如用戶名和密碼
2.提交大的數據，一般get提交的數據不能超過4k，有的瀏覽器是8k，決定於瀏覽器，畢竟URL長度是有限的
四、補充內容
如果做運維久的人會發現有的人用get提交時，發現也並不是所有的傳參用？分隔的啊，有的用/，這是因爲是進行了修改了，使用的不是默認風格而是PATH_INFO用斜槓把參數隔開了。
