HTML簡介
阿新 • • 發佈：2021-07-01
昨日內容回顧
-
web的本質
""" 瀏覽器 服務端 檔案（html檔案） """ 課程web方向 前端 django bbs 路飛 -
HTTP協議
""" HTTP協議的由來（與sql語句一樣） 一個瀏覽器如何相容多個服務端 """ # 四大特性 1、基於請求響應 2、基於TCP/IP作用域應用層之上的協議 3、無狀態 無論來多少次 都跟第一次一樣，不會做記錄 如何做到儲存使用者狀態 cookie、session、token 4、無/短連結 請求來了，就響應，之後就沒有聯絡 長連結：websocket(群聊功能、服務端主動給客戶傳送資料) # 請求資料格式 請求首行(HTTP協議的版本，當前請求方式) 請求頭(一大堆的k、v鍵值對) \r\n 請求體(並不是所有的請求方式都有請求體、get沒有、post有) # 響應資料格式 響應首行(HTTP協議的版本，響應狀態碼) 響應頭(一大堆k、v鍵值對) 響應體(瀏覽器展示給使用者看的內容) # URL 統一資源定位符 類似於座標 # 請求方式 1、get請求 向別人要資料（也可以攜帶引數，只不過引數不是放在請求體裡面，而時直接放在url後面） url?username=jason&password=123 2、post請求 向別人提交資料 # 響應狀態碼 """用簡短的資料來表示一大串的提示資訊""" 1xx：服務端已經成功接收到了你的資料 正在處理你可以繼續提交 2xx：請求成功(200，ok) 3xx：重定向(你想訪問a頁面，但是由於條件不符合，跳轉到了b頁面) 4xx：請求錯誤(404請求資源不存在，403請求不符合條件) 5xx：服務端內部錯誤(500) ps:上述的狀態碼是HTTP協議規定的到了公司都是用公司設頂的狀態碼和提示資訊 -
HTML簡介
"""
超文字標記語言(在學習的時候只需要記憶每個標籤表是的什麼意思，沒有什麼邏輯可言，死記)
書寫網頁的一條標準
除了HTML可以書寫前端頁面之外
還有xml也可以書寫前端頁面
"""
# 註釋 <!--註釋-->
# 文件結構
<html>
<hesd></head>:不是給使用者看的，主要是給瀏覽器看的一些配置資訊
<body></body>書寫的內容都是給使用者看的
</html>
-
head常用的標籤
""" title:定義網頁標題 style:內部支援書寫css格式程式碼 link:引入外部css程式碼 script:內部可以書寫js程式碼並未也可以引入外部js檔案 meta: 定義網頁源資訊 keywords description """ -
body內的標籤
""" h1-h6 標題標籤 p 段落標籤 u 加粗 i 斜體 b s hr 分割線 br 換行 """ # 特殊符號 空格 大於 > 小於 < & ® © ¥ -
常用的標籤
""" div:塊兒及標籤 網頁儲器劃定範圍的 sapn：行及標籤 劃定文字的 """ # a標籤 連結標籤 <a href='' target=''></a> href 1、可以放一個url點選自動跳轉 2、還可以放一個其他id值 錨點功能 target 控制是否在當前頁面跳轉 _self _blank # img標籤 圖片標籤 <img src='' alt='' title='' height='' width=''/> src 1、可以存放圖片的路徑 本地路徑或者線上路徑 2、還可以放一個url 會自動向一個url提交get請求獲取圖片的資料展示 alt 圖片載入不出來的時候 展示的提示資訊 title 滑鼠懸浮在圖片上之後顯示出來的提示資訊 height、width 單獨調整某一個 另一個會自動等比例調節 # 標籤一般情況下都要有兩個重要的屬性 id值 唯一標識 同一個頁面不嫩有重複的 class值 類似於類的繼承 可以有多個 -
標籤的分類
""" 分類1 雙標籤：<h1></h1> 單標籤:<img/> 分類2： 塊兒及標籤：獨佔一行 可以設定長寬 div p 注意；塊兒及標籤內部可以巢狀任意的行內標籤和塊兒及標籤 但是p標籤只能巢狀行內標籤 行標籤：本身文字多大就佔多大 不能設定長寬 span a img ps；上述的規定知識HTML書寫規範 如果不遵尋 不會報錯 瀏覽器會自動幫你解除巢狀關係 """ -
列表標籤
ul li 頁面上只要是帶有規則的排序文字 一般用的都是無序列表 ol li 有序列表 dl dt dd 標題列表
今日內容概要
- 表格標籤(只要展示一些資料 一般都可能用到表格標籤)
- 表單標籤(重要：獲取前端使用者資料傳送給後端)
- 後端框架的基本使用(flask)
- css層貼央視表(選擇器)
表格標籤
一些資料按照表格的形式展示<table border="20"> <thead> 表頭(欄位資訊) <tr> 一個tr就表示一行 <th>username</th> th 加粗文字 <th>password</th> td 正常文字 <th>hobby</th> </tr> </thead> <tbody> 表單(資料資訊) <tr> <td>jason</td> 正常文字 <td>123 </td> <td>read</td> </tr> <tr> <td>egon</td> <td colspan="2">qwe</td> <td rowspan="2">dbj</td> </tr> <tr> <td>tank</td> <td>123</td> <td>DBJ</td> </tr> </tbody></table><table border="1"> 加外邊寬<td colspan="2">qwe</td> 水平方向站多行<td rowspan="2">dbj</td> 垂直方向佔多行# 原生的表格標籤很醜 但是後續我們一般使用的都是框架封裝好的 很好看
表單標籤
"""能夠獲取到前端使用者輸入的資料(使用者輸入的、使用者選擇的、使用者上傳的...)基於網路傳送給後端伺服器"""# 一個註冊功能<form action=""></form> 在該form標籤顳部書寫的獲取使用者的資料都會被form 標籤提交到後端action：控制資料提交的後端路徑（給哪個伺服器提交資料） 1、什麼都不寫 預設就是像當前頁面所在的url提交交資料 2、只寫路徑；https://www.baidu.com 像百度服務端提交 3、只寫路徑字尾action='/index/' 自動識別出黨親服務端的ip和port拼接到前面 host:port/index/ <label for='d1'>第一種直接將input框西寫在label內username:<input type='text' id='d1'> 第二種 通過連結id即可 無需巢狀<label for="d2">password:</label><input type="text" id="d2">ps:input 不跟label關聯也沒問題 """label 和 input都是行內標籤"""input標籤 就類似於前端的變形金剛 通過type變形 text：普通文字 password；密文 date ：日期 sumbit：用來觸發form表單的提交資料的動作 button：就是一個普普通的按鈕，沒有任何功能 但是他是最後用的 學完js之後就可以給他自定義任何功能 reset：重置表單 預設選中要加checked='checked' <input type="radio" name="gender" checked='checked'>男 name 要指定同一名字變成三選一 當標籤的屬性名和屬性值一樣的時候可以簡寫 <input type="radio" name="gender" checked>女 checkbox:多選 <p>hobby <input type="checkbox" name="hobby" checked>籃球 <input type="checkbox" name="hobby" checked>足球 <input type="checkbox" name="hobby">橄欖球 </p> file：獲取檔案 也可以一次性獲取多個 <input type='file' multiple> hidden:隱藏當前input框 釣魚網站 select 標籤 預設是單選可以加multiple引數變多選 預設選中 selected <p>province: <select name="province" id="" multiple> <option value="">上海</option> <option>北京</option> <option selected>深圳</option> </select> </p> textarea標籤 獲取大段文字 <textarea name="" id="" cols="30" rows="10"></textarea> # 能夠觸發form表單提交資料的按鈕有哪些（****重點） 1、<input type="submit" value="註冊"> 2、<button>點你</button> <p> <input type="submit" value="註冊"> 能 <input type="button" value="按鈕"> 不能 <input type="reset" value="重置"> 不能 <button>點你</button> 也能重新整理網頁 </p># 所有獲取使用者輸入的標籤 都應該有name屬性 name就相當於字典的key 使用者的資料就相當於是字典的value <p>gender: <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">其他 </p>
驗證form表單提交資料
# 驗證程式碼無需掌握。看一下效果form表單預設提交表單資料的方式是get請求 資料是直接放再url後面的 http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on你可以指定method指定提交的方式 <form action="http://127.0.0.1:5000/index/" method="post"> # 針對使用者選擇的標籤 使用者不需要輸入內容 但是你需要提前給這標籤新增內容value值<p>gender: <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" checked value="female">女 <input type="radio" name="gender" value="others">其他</p><p>hobby: <input type="checkbox" name="hobby" value="basketball">籃球 <input type="checkbox" checked name="hobby" value="football">足球 <input type="checkbox" checked name="hobby" value="doublecolorball">雙色球</p><p>province： <select name="province" id=""> <option value="sh">上海</option> <option value="bj" selected>北京</option> <option value="sz">深圳</option> </select></p>"""form 表單提交檔案需要注意 1、method必須是post 2、enctype="multipart/form-data" enctype類似於資料提交的編碼格式 預設是urlencoded 只能提交普通的資料文字 formdata 就可以支援提交檔案資料"""<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">"""後端flask框架實現"""from flask import Flask, requestapp = Flask(__name__)# 當前url既可以支援get請求也可以支援post請求 如果不寫預設只能支援get請求@app.route('/index/',methods=['GET','POST'])def index(): print(request.form) # 獲取form表單提交過來的非檔案資料 # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')]) print(request.files) # 獲取檔案資料 file_obj = request.files.get('myfile.png') file_obj.save(file_obj.name) return 'OK'app.run()# 針對使用者輸入的標籤 如果你加了value 那麼就是預設值<label for="d1">username:<input type="text" id="d1" name="username" value="預設值"></label>disable 禁用readonly只讀
css
層貼楊樣式表：就是給HTML標籤新增樣式的 讓他更加的好看
# 註釋/*單行註釋*//*多行註釋1多行註釋2多行註釋3*/通常在寫css樣式程式碼的時候會用註釋來劃分樣式區域(因為HTML程式碼多的所以對css程式碼也會很多)/*這是部落格園首頁的css樣式檔案*//*頂部導航條樣式*/.../*左側選單欄樣式*/.../*右側選單欄樣式*/...# css語法結構選擇器 { 屬性1:值1; 屬性2:值2; 屬性3:值3; 屬性4:值4;}# css引入的三種方式 1、style標籤直接書寫 <style> h1 { color: rosybrown; </style> 2、link標籤引入外部css檔案(最正規的方法 解耦合) <link rel="stylesheet" href="mycss.css"> 3、行內式（一般不用） <h1 style="color: blue">你好</h1>
"""css學習流程 1、先學習如何查詢標籤 css查詢標籤的方式要學學會 後面的框架封裝的查詢語句都是基於css來的 css選擇器很簡單 2、子後再學習如何新增樣式"""
css選擇器
基本選擇器
# id選擇器# 類選擇器# 元素/標籤選擇器# 通用選擇器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*id選擇器*/ # 找到id是d1的標籤 /*#d1 {*/ /* color: rosybrown;*/ /*}*/ /*類選擇器*/ # 找到class值李包含c2的標籤 /*.c2 {*/ /* color: yellow;*/ /*}*/ /* 元素選擇器*/ # 找到所有span的標籤 /* span {*/ /* color: blue;*/ /* }*/ /* 通用選擇器*/ # 將html的所有標籤找到 /* * {*/ /* color: blue;*/ /* }*/ </style></head><body> <h1 id="d1" class="c1 c2">你好啊</h1> <h1 class="c2">hello world</h1> <span> 111 </span></body></html>
組合選擇器
"""在前端 將用標籤的欠條用親戚關係表述層級 <div>div <p>div p</p> <p>div p <span>div p span</span> </p> <span>span</span> <span>span</span> </div> div裡面的p span都是div的後代 p是div的兒子 p裡面的span是p的兒子，是div的孫子 div是p的爹"""# 後代選擇器# 兒子選擇器# 毗鄰選擇器# 弟弟選擇器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*後代選擇器*/ # 要用空格隔開 /*div span {*/ /* color: blue;*/ /*}*/ /*兒子選擇器*/ # 用>表示 /*div>p {*/ /* color: red;*/ /*}*/ /*毗鄰選擇器*/ # 用加號表示 同級別緊挨下邊的第一個 /*div+span { */ /* color: red;*/ /*}*/ /*弟弟選擇器*/ # 同級別下面的所有的span /*div~p {*/ /* color: red;*/ /*}*/ </style></head><body> <div>div <p>div p</p> <p>div p <span>div p span</span> </p> <span>span</span> <span>span</span> </div> <span>11</span> <span>22</span> <p>qq</p></body></html>
屬性選擇器
"""1、含有某個屬性2、含有某個屬性並且含有某個值3、含有某個屬性並且含有某個值的某個標籤"""# 屬性選擇器是以[]為標誌的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*[username] {*/ # 將所有含有屬性名username的標籤的背景色改為藍色 /* background-color: blue;*/ /*}*/ /*[username='tank'] {*/ # 將找到所有的屬性名是username並且屬性值是jason的標籤 /* background-color: red;*/ /*}*/ /*input[username='jason'] {*/ # 找到所有的屬性名是username 並且屬性值是jason的input標籤 /* background-color: yellow;*/ /*}*/ </style></head><body> <input type="text" username="tank"> <input type="text" username="jason"> <input type="text" username="kevin"> <p username="tank">水箱老師</p> <div username="egon">矮子老師</div> <span username="jason">jason老師 </span></body></html>