一，web服務的本質：
瀏覽器中敲入網站回車發生的幾件事？
1.游覽器向服務端發送請求
2.服務端接受請求
3.服務端返回相應的響應
4.瀏覽器接受響應 根據特定的規則渲染頁面展示給用戶看
二： HTTP 協議
HTML是一種標記語言（markup language），它不是一種編程語言。
HTML使用標簽來描述網頁。
超文本傳輸協議
規定了瀏覽器與服務器之間消息傳輸的數據格式
四大特性：
1.基於請求響應
2.基於TCP/IP 之上的作用於應用層的協議
3.無狀態（服務端無法保存用戶的狀態，一個人來一千次，都是和第一次一樣，都是初戀
4.無連接（請求來一次響應一次，之后立馬斷開連接，兩者之間就再無任何關系
websocket相當於http協議的一個大補丁，可以長連接
請求數據格式：
請求首行 （標識HTTP協議的版本，當前請求方式）
請求頭 （ 一大堆的k，v鍵值對） 下面一行是固定句式的空格\r\n
請求體 （攜帶的是一些敏感信息，密碼，身份證號等）
響應數據格式：
響應首行 （標識HTTP協議的版本，當前請求方式）
響應頭 （ 一大堆的k，v鍵值對） 下面一行是固定句式的空格\r\n
響應體 （返回給瀏覽器頁面的數據 通常響應響應體都是HTML頁面）
響應狀態碼 (我的理解：就是響應之后的結果，用某個數字表示結果的狀態）
用一串簡單的數字來表示一些復雜的狀態或者提示信息
1XX：服務端已經成功接收瀏覽器發來的數據，正在處理
2XX: 服務端成功響應 你所要的數據，請求成功 例如：200
3XX: 重定向（當你在訪問一個需要登錄之后才能訪問的頁面，窗口會自動調到登錄頁面，例如301 302
4XX: 請求錯誤（當你請求的數據不存在404，請求不合法或者權限不夠時就是403
5XX: 服務器內部錯誤
請求方式：
1.get請求
向服務端要資源（比如瀏覽器窗口輸入www.baidu.com）# 就是從服務端獲取你要的數據
2，post請求
向服務端提交數據（比如密碼，用戶登錄，提交用戶名等等）
URL:統一資源定位符(大白話 就是網址)
三： HTML 超文本標記語言 注意是一種標記語言，不是編程語言
要想讓你的頁面能夠正常的被瀏覽器顯示出來，你就必須遵循html標記語法
也就是說，所有能夠被瀏覽器顯示出來的頁面， 內部都是HTML代碼
瀏覽器只認識 html css js
web 本質
瀏覽器
服務器
文件（后綴名是.html或者htm 結尾的文件，也就意味着，只要看到.html結尾的文件，他都是一個前端頁面文件
#文件的后綴名僅僅是給人看的 計算機無所謂 因為都是二進制數據
HTML 注釋
寫網頁的一套標准
注釋是代碼之母
<!--單行注釋--> ctrl+/
<!--
多行注釋
多行注釋
-->
一般情況下 html的注釋都會按照下面的方式書寫
<!--導航條樣式開始--> # 大白話說導航就是快速查找的作用
<!--導航條樣式結束-->
HTML文檔結構
<html>
<head></head>:head內的標簽 不是用來展示給用戶看的 而是定義一些配置 主要是給瀏覽器看的
<body></body>:body內的標簽 就是瀏覽器展示給用戶看的內容
</html>
打開html頁面的兩種方式
1.找到文件路徑 選擇瀏覽器打開
2.pycharm快捷方式直接打開
標簽的分類一：
1，雙標簽 (<h1></h1> <a></a>)
2，單標簽(自閉和標簽 <img/>)
head內常用標簽
title 標題標簽， 用來顯示網頁標題
style用來控制樣式 內部支持寫css代碼
script內部支持寫js代碼， 也支持導入外界的js文件
link 專門用來引入外部的css文件
標簽的分類2
1.塊兒級標簽（獨占瀏覽器一行）
div 結構框架標簽
p 段落標簽
h 標題標簽
1，塊兒級標簽可以修改長寬， 修改長度等比例縮放，一般只修改長
2，塊兒級標簽內部可以嵌套任意的塊級標簽，
但是p標簽雖然是塊級標簽，但是內部不能嵌套 塊兒級標簽 包括自身也不能
但是可以嵌套行內標簽
總結：就是只要是塊兒級標簽，都可以嵌套行內標簽，p標簽只能嵌套行內標簽，
其他塊兒級標簽可以嵌套任意塊兒級標簽
即：p標簽不能包含塊級標簽，p標簽也不能包含p標簽。*******************
2，行內標簽：（自身文本多大就占多大）
span b加粗標簽 i 斜體標簽 u 下划線標簽 s 刪除標簽
3，div和span通常都是用來構建網頁布局的
div標簽和span標簽
div標簽用來定義一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
span標簽用來定義內聯(行內)元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
Meta標簽介紹：
<meta>元素可提供有關頁面的元信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標簽位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的。
案例：
<!--告訴IE以最高級模式渲染文檔(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
案列：
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
注：開發網頁時用的較多， 此時content關鍵字后面跟的是 用戶輸入有關內容的關鍵，
只要用戶輸入你所在這里有的內容關鍵字，瀏覽器就會把與之相關的內容響應給用戶
<meta name="description" content="老男孩教育Python學院">
注：開發網頁時，此時content= 后跟的是此網頁的簡介，也就是說明書，說明此網頁內容是什么
body內常用標簽
基本標簽：*************************
<b>加粗</b>
<i>斜體</i>
<u>下划線</u>
<s>刪除</s>
<p>段落標簽</p>
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<!--換行-->
<br>
<!--水平線--><hr>
特殊字符：**********
空格
> >
< <
& &
¥ ¥
版權 ©
注冊 ®
img 標簽:
src存放的是圖片的路徑(該路徑可以是本地的也可以是網上的)
1.也可以放url(會自動請求該url獲取相應數據)
2.也可以直接放圖片的二進制數據 會自動轉換成圖片
alt當圖片加載不出來的時候 顯示的提示信息
title當鼠標懸浮在圖片上 提示的信息
height,width 當你只指定一個參數的時候 另外一個會等比例縮放
a 超鏈接標簽：
href后面存放url的時候 點擊跳轉到該url
如果該鏈接沒有被點過 那么默認是藍色,只要點過依次 之后都是紫色
target 默認是_self當前頁面跳轉
_blank新建頁面跳轉
錨點功能(回到頂部)
href還可以寫另一個a標簽的id值,點擊就會跳到id值所對應的a標簽
每一個標簽都應該有三個比較重要的屬性
1.id值 該值就類似於人的身份證號 在用一個html文檔id應該保證唯一不重復
2.class值 該值就類似於面向對象里面的繼承 可以寫多個
3.style(不是必備) 支持在標簽內直接寫css代碼 屬於行內樣式 優先級最高
補充 任何標簽都支持自定義屬性!!!
列表標簽***************
<table>
<thead></thead>
<tbody></tbody>
</table>
tr表示一行
th和td都是文本
建議在thead內用th 因為加粗的
tbody內用td
th顯示出來的結果字體比td粗
colspan表示的水平方向
rowspan表示的豎直方向
表單標簽(******)
能夠接收用戶輸入(輸入 選擇 上傳)並將其發送給后端
能夠將圖片，文字，，選擇按鈕等，一塊打包統一發送給后端服務器
action:能夠控制數據提交的目的地
（是向阿里，新浪，谷歌等等提交）
1，不寫的情況下，默認提交到當前頁面所在的路徑（即當前瀏覽器網站）
2，寫全路徑(https://www.baidu.com)
3，路徑后綴(/index/)
input input標簽就類似於是前端變形金剛
type
text:普通文本
password:密文 不展示明文
date:日期
submit:觸發提交動作
button:普通按鈕 沒有實際意義 但是可以通過js綁定事件實現自定義動作
reset:重置表單內容
radio:單選 可以通過checked控制默認選擇(當屬性值和屬性名相同的情況下 可以簡寫 checked) checked="checked"
checkbox:多選 同上 可以設置默認值
file:獲取用戶上傳的文件
select標簽
默認是單選 可以通過multiple變成多選
如果想默認選擇 用selected (selected="selected")
textarea標簽
獲取用戶輸入的大段文本
form表單默認是get請求 你需要通過method參數 換成post提交
form表單中 要想觸發提交動作
只有兩種情況可以
1.input標簽type指定成submit
2.直接寫button標簽
獲取用戶輸入(輸入 選擇 上傳...)的標簽 都必須有一個name屬性
這個name屬性就類似於字典的key,而標簽獲取到的用戶寫入的值就類似於字典的value
<input type="text" id="d1" name="username" value="默認值">
name就相當於是字典的key
value就是字典的值
獲取都的用戶輸入都會被放入value屬性中
form表單傳文件的時候 需要指定enctype參數
from表單：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>注冊頁面</h2>
<form action="">
<!--此時顯示效果在一行，要想使分行顯示就用p標簽包一下-->
<!--<label for="">username：<input type="text"></label>-->
<!--<label for="">password：<input type="text"></label>-->
<!--分行顯示就用p標簽包一下-->
<!--<p><label for="">username：<input type="text"></label></p>-->
<!--<p><label for="">password：<input type="text"></label></p>-->
<!--當鼠標在username或者password上面點擊時，游標會自動在對應的框內等待輸入，
這時就增加個id就可以了，id要唯一不能有重復的，第一種寫法-->
<p><label for="d1">username：<input type="text" id="d1"></label></p>
<p><label for="d2">password：<input type="password" id="d2"></label></p>
<!--disabled禁用，即密碼這個框動不了-->
<p><label for="d2">password：<input type="password" id="d4" disabled></label></p>
<!--第二中寫法，-->
<p>
<label for="d3">生日</label>
<input type="date" id="d3">
</p>
<p>性別：
<!--type="radio" radio表示單選 選擇性別，顯示出來是一個原點-->
<!--當兩個name="gender"都一樣時就會只能二選一-->
<!--checked="checked"默認值，就是默認為男，如果標簽名和標簽值相等的話，可簡寫成checked-->
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
</p>
<p>
<input type="text" name="tank">將是
<input type="text" name="tank">會喜歡
</p>
<p>愛好:
<!--checkbox 默認多選，name可寫可不寫，如果是博彩網站，可以設為默認，還是用checked-->
<input type="checkbox" name="hobby">籃球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby" checked>雙色球
</p>
<p>省市:
<!--select標簽，默認市單選，可以通過multiple變成多選-->
<!--如果要在此標簽里多選，用selected （selected="selected"）-->
<!--select 表示效果是下拉框選擇 ，此時沒有multiple就是單選-->
<select name="" id="">
<!--option 表示選項的意思-->
<option value="">上海市</option>
<option value="">北京市</option>
<option value="">深圳市</option>
</select>
</p>
<p>伴侶:
<!--multiple 表示可以選多個，選多個時按住ctrl鍵即可-->
<select name="" id="" multiple>
<option value="">向遠介意</option>
<option value=""selected="selected">斯嘉麗</option>
<option value="">吉澤老師</option>
</select>
</p>
<p>省市1：
<!--直接選擇區，前面默認市自動選擇，不用選擇市-->
<select name="" id="">
<optgroup label="上海市">
<option value="">靜安區</option>
<option value="">浦東區</option>
<option value="">閔行區</option>
</optgroup>
<optgroup label="北京市">
<option value="">朝陽區</option>
<option value="">海淀區</option>
<option value="">昌平區</option>
</optgroup>
</select>
</p>
<p>頭像:
<!--獲取用戶選擇的文件，自己點擊，自動選擇好-->
<input type="file">
</p>
<p>個人簡介:
<!--textarea 獲取用戶輸入的大段文本-->
<textarea name="" id="" cols="30"
rows="10"></textarea>
</p>
<p>隱身:
<!--hidden隱身，把input框隱藏起來了-->
<input type="hidden">
</p>
<!-- input在p包起來時：這樣注冊，密碼是明文
1，type="text" 表示普通文本，輸入什么，顯示的就是什么
type="password" 此時密碼就變成了密文，password是自帶規定用法
type="date" 此時生日就變成了日期格式，有客戶直接選擇，在不需要輸入
-->
<!--input在外部時：
用type="submit" 此時顯示的是提交按鈕，單擊此按鈕，就會刷新提交一次-->
<!--<input type="submit">-->
<!--所有的input標簽都有value值-->
<!--value="注冊"，value用來指定值 value后面可輸入值，你輸入什么，按鈕上就是什么-->
<input type="submit" value="注冊1">
<!--type="button" 表示就是一個普通的按鈕，此時無任何作用，一般都是與js中合用-->
<input type="button" value="注冊2">
<!--type="reset" 表示重置，清空了所有內容，不刷新，只是清空了輸入的內容-->
<input type="reset" value="注冊3">
<!--普通的button標簽，產生的按鈕，也和submit一樣，是給后端提交任務，提交一次頁面刷新一次，-->
<button>普通的button標簽</button>
<!--防呆措施-->
</form>
</body>
</html>
