系統開發 Day1

前端開發

目的： 開發一個平臺（網站）
- 前端開發：HTML CSS JavaScript
- web框架：接受請求和處理
- MySQL數據庫：存儲數據的地方快速上手：基于Flask Web框架快速搭建一個網站
深度學習：基于Django框架（主要）

1.快速開發網站

pip install flask

from flask import Flaskapp = Flask(__name__)# 創建了網址show/info和函數 index的對應關系
# 以后用戶在瀏覽器上訪問show/info，網站會自動執行 index@app.route("/show/info")
def index():return "中國聯通"
if __name__ == '__main__':app.run()

網站與別人不一樣：

瀏覽器可以識別多標簽+數據 例如：<h1>中國<h1>           ->瀏覽器看見加大加粗<span style='color:red,'>
  • Flask框架為了讓我們寫標簽方便，支持將字符串（網頁返回的本質是一個字符串）寫在文件里面
from flask import Flask ,render_templateapp = Flask(__name__)# 創建了網址show/info和函數 index的對應關系
# 以后用戶在瀏覽器上訪問show/info，網站會自動執行 index@app.route("/show/info")
def index():#Flask內部會自動打開文件并讀取，將內容給用戶返回#默認去templates文件夾中去尋找(需要自己添加，并創建html文件)return  render_template("index.html")
if __name__ == '__main__':app.run()

2.瀏覽器能識別的標簽

2.1 編碼（head)

<meta charset="UTF-8">

2.2 title(head)

<head><meta charset="UTF-8"><title>Title</title>
</head>

2.3 標題

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>學習web</title>
</head>
<body><h1>1級標題</h1><h2>2級標題</h2><h3>3級標題</h3><h4>4級標題</h4><h5>5級標題</h5><h6>6級標題</h6>
</body>
</html>

2.4 div和span

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>學習web</title>
</head>
<body><div>哈哈哈</div><div>啦啦啦啦啦</div>
</body>
</html>

  • div ：一個人占一整行【塊級標題】

    <div>哈哈哈</div>

  • span ：自己多大就占多少【行內標簽、內聯標簽】

    <span>哈哈哈</span>

注意:這兩個標簽比較素+CSS

2.5 超鏈接

跳轉到其他網站（絕對路徑）
<a href="https://www.csdn.net/">點擊跳轉</a>

跳轉到自己的網站（相對路徑）
<a href="http://127.0.0.1:5000/show/info">點擊跳轉</a>
簡化：<a href="/show/info">點擊跳轉</a>

2.6 圖片

<img src="圖片地址"/>

<img src="自己圖片地址"/>
顯示自己圖片：-自己的項目中創建：static目錄，圖片要放在里面-頁面上引用圖片 <img src="/static/圖片名字"/>

顯示別人的圖片（防盜鏈）
<img src="圖片地址"/>

設置圖片的高度和寬度
<img style="height:100px;width:100px" src="圖片地址"/>
<img style="height:10%;width:10%" src="圖片地址"/>

小結

  • 學習的標簽

    <h1></h1>
<div></div>
<span></span>
<a></a>
<img />

  • 劃分

    - 塊級標簽<h1></h1><div></div>
- 行內標簽(緊挨著放在一起)<span></span><a></a><img />

  • 嵌套

    <div><span>xxx</span><img /><a></a>
</div>

    案例：商品列表

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>商品名稱</h1><a href="https://www.zhihu.com/" target="_blank"><img src="/static/a2.jpg" style="height:150px"></a><a href="https://www.zhihu.com/" target="_blank"><img src="/static/a1.jpg" style="height:150px"></a><a href="https://www.zhihu.com/" target="_blank"><img src="/static/a3.jpg" style="height:150px"></a>
</body>
</html>

2.7 列表

<ul><li>中國移動</li><li>中國聯通</li><li>中國電信</li>
</ul>

<ol><li>中國移動</li><li>中國聯通</li><li>中國電信</li>
</ol>

2.8 表格

<table border="1">(加邊框)<thead><tr> <th>ID</th>    <th>姓名</th>  <th>年齡</th> </tr></thead><tbody><tr> <td>1</th>    <th>hh</th>  <th>59</th> </tr><tr> <th>2</th>    <th>dd</th>  <th>9</th> </tr><tr> <th>3</th>    <th>ww</th>  <th>5</th> </tr><tr> <th>4</th>    <th>ee</th>  <th>1</th> </tr><tr> <th>5</th>    <th>rr</th>  <th>3</th> </tr><tr> <th>6</th>    <th>tt</th>  <th>4</th> </tr></tbody>
</table>

案例：用戶列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用戶列表</h1>
<table border="1"><thead><tr><th>ID</th><th>頭像</th><th>姓名</th><th>郵箱</th><th>更多信息</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td><img src="/static/a1.jpg" style="height:50px"></td><td>wcx</td><td>123456@qq.com</td><td><a href="https://www.zhihu.com/">查看詳細</a></td><td>編輯 刪除</td></tr><tr><td>1</td><td><img src="/static/a1.jpg" style="height:50px"></td><td>wcx</td><td>123456@qq.com</td><td><a href="https://www.zhihu.com/">查看詳細</a></td><td>編輯 刪除</td></tr><tr><td>1</td><td><img src="/static/a1.jpg" style="height:50px"></td><td>wcx</td><td>123456@qq.com</td><td><a href="https://www.zhihu.com/">查看詳細</a></td><td>編輯 刪除</td></tr></tbody>
</table></body>
</html>

2.9 input系列(7個)

<input type="text">
<input type="password">
<input type="file">
<input type="radio" name="n1">男
<input type="radio" name="n1">女
<input type="checkbox" >籃球
<input type="checkbox" >乒乓球
<input type="checkbox" >網球
<input type="checkbox" >羽毛球
<input type="button" value="提交"> -->普通的按鈕
<input type="submit" value="提交"> -->提交表單

2.10 下拉框

<select><option>北京</option><option>上海</option><option>深圳</option>
</select>
<select multiple>（shift多選）<option>北京</option><option>上海</option><option>深圳</option>
</select>

2.11 多行文本

<textarea></textarea>

案例：用戶注冊

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用戶注冊</h1>
<div>用戶名: <input type="text">
</div>
<div>密碼:  <input type="password">
</div>
<div>性別: <input type="radio" name="n1">男<input type="radio" name="n1">女
</div>
<div>愛好： <input type="checkbox">籃球<input type="checkbox">乒乓球<input type="checkbox">羽毛球
</div>
<div>城市：<select ><option >北京</option><option >上海</option><option >重慶</option></select>
</div>
<div>備注：<textarea></textarea>
</div>
<div><input type="button" value="提交">
</div>
</body>
</html>

知識點回顧和補充

  1. 網站請求流程

  2. 一大堆標簽

    h/div/span/a/img/ul/li/table/input/textarea/select

3.網絡請求

  • 在瀏覽器的URL中輸入地址，點擊回車，訪問。

    瀏覽器會發送數據過去，本質上發送的是字符串：
"GET/explore httpxxxxxxxxxxxxxxxxx"
"POST/explore httpxxxxxxxxxxxxxxxxxxxxxxx"

  • 瀏覽器向后端發送請求

    • GET請求【URL訪問/表單提交】

      • 現象：跳轉、向后臺傳入數據會拼接在URL上

        https://www.sogou.com/web?query=%E5%AE%89%E5%8D%93&_ast=1754632236&_asf=www.sogou.com

        注意：GET請求的數據會在URL上體現

    • POST請求【表單提交】

      • 現象：提交數據不在URL中而是在請求體中

案例：用戶注冊

  • 新創建項目
  • 創建Flask代碼
from flask import Flask, render_template, requestapp = Flask(__name__)@app.route("/register",methods=["GET","POST"])
def register():if request.method== 'GET':return render_template("register.html")else:user = request.form.get("user")pwd = request.form.get("pwd")gender = request.form.get("gender")hobby_list = request.form.get("hobby")city = request.form.get("city")more = request.form.get("more")return "注冊成功"if __name__ == '__main__':app.run()
  • html代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用戶注冊</h1>
<form method="post" action="/register" >
<div>用戶名: <input type="text" name="user"></div><div>密碼:  <input type="password" name="pwd"></div><div>性別: <input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="2">女</div><div>愛好： <input type="checkbox" name="hobby" value="20">籃球<input type="checkbox" name="hobby" value="30">乒乓球<input type="checkbox" name="hobby" value="40">羽毛球
</div><div>城市：<select name="city"><option value="122">北京</option><option value="123">上海</option><option value="124">重慶</option></select>
</div><didv>備注：<textaera name="more"></textaera></didv><input type="submit" value="submit提交">
</form></body>
</html>
  • form標簽包裹要提交的數據
    • 提交方式：method=“”
    • 提交地址：action=“”
    • 在form標簽里面必須有一個submit
  • 在form里面的一些標簽：input/select/textarea
    • 一定要寫name屬性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用戶注冊</h1>
<div><form method="post" action="/post/reg" >用戶名: <input type="text" name="user">密碼:  <input type="password" name="pwd"><input type="button" value="button提交"><input type="submit" value="submit提交"></form>
</div>
</body>
</html>

總結

1.稱呼

-HTML標簽（超文本傳輸語言）與瀏覽器搭配

2.HTML標簽（默認格式樣式，可通過手段進行修改）

3.HTML標簽與編程語言無關

4.提醒：HTML標簽比較多，標簽還有很多，不必逐一學會

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/92699.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/92699.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/92699.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

機器視覺任務（目標檢測、實例分割、姿態估計、多目標跟蹤、單目標跟蹤、圖像分類、單目深度估計）常用算法及公開數據集分享

機器視覺任務（目標檢測、實例分割、姿態估計、多目標跟蹤、單目標跟蹤、圖像分類、單目深度估計）常用算法及公開數據集分享

本文按目標檢測、實例分割、姿態估計、多目標跟蹤、單目標跟蹤、圖像分類、單目深度估計七個任務分類&#xff0c;融合數據集介紹、評價指標及推薦算法&#xff0c;方便查閱&#xff1a; 一、目標檢測 目標檢測任務需定位圖像中目標的邊界框&#xff08;bounding box&#xff0…
閱讀更多...
MongoTemplate中setOnInsert與set方法的深度解析

MongoTemplate中setOnInsert與set方法的深度解析

MongoTemplate中setOnInsert與set方法的深度解析 在Spring Data MongoDB的MongoTemplate中&#xff0c;setOnInsert和set方法都是在更新文檔時使用的&#xff0c;但它們在處理upsert操作&#xff08;即&#xff0c;如果文檔不存在則插入&#xff0c;存在則更新&#xff09;時扮…
閱讀更多...
利用OJ判題的多語言優雅解耦方法深入體會模板方法模式、策略模式、工廠模式的妙用

利用OJ判題的多語言優雅解耦方法深入體會模板方法模式、策略模式、工廠模式的妙用

在線評測系統&#xff08;Online Judge, OJ&#xff09;的核心是判題引擎&#xff0c;其關鍵挑戰在于如何高效、安全且可擴展地支持多種編程語言。在博主的項目練習過程中&#xff0c;借鑒了相關設計模式實現一種架構設計方案&#xff0c;即通過組合運用模板方法、策略、工廠等…
閱讀更多...
[FOC電機控制]霍爾傳感器于角度問題

[FOC電機控制]霍爾傳感器于角度問題

如果電機有1對極(p1&#xff0c;那么每旋轉一圈的機械角度&#xff0c;電氣角度會轉動一圈&#xff08;360&#xff09;。如果電機有2對極(p2&#xff0c;那么每旋轉一圈的機械角度&#xff0c;電氣角度會轉動兩圈&#xff08;720&#xff09;。
閱讀更多...
阿里云 Flink

阿里云 Flink

阿里云 Flink 是阿里云基于Apache Flink打造的企業級實時計算平臺&#xff0c;旨在為用戶提供高效、穩定、易用的流處理與批處理能力&#xff0c;幫助企業快速構建實時數據處理鏈路&#xff0c;支撐實時業務決策。核心特性流批一體計算繼承 Apache Flink “流批一體” 的核心優…
閱讀更多...
企業級高性能web服務器

企業級高性能web服務器

1 web服務基礎 1.1 正常情況的單次web服務訪問流程&#xff1a; 正常情況下&#xff0c;單次 Web 服務訪問流程從用戶在客戶端發起請求開始&#xff0c;到最終在客戶端展示內容結束&#xff0c;涉及客戶端、網絡傳輸、服務器端等多個環節&#xff0c;以下是詳細過程&#xff…
閱讀更多...
免費PDF編輯軟件 pdf24-creator 及其安裝包

免費PDF編輯軟件 pdf24-creator 及其安裝包

最近發現了一款還算是不錯的PDF編輯和閱讀軟件 pdf24-creator&#xff0c;官方下載網站為&#xff1a;https://tools.pdf24.org/zh/creator&#xff0c;但是官方下載如果沒有魔法的話&#xff0c;下載速度很慢&#xff0c;比百度網盤下載還滿&#xff0c;因此我把它分享到網盤。…
閱讀更多...
openvela之ADB

openvela之ADB

ADB&#xff08;Android Debug Bridge&#xff09;是一款功能豐富的命令行工具&#xff0c;旨在實現開發工作站與設備&#xff08;如模擬器、實體設備&#xff09;之間的通信。通過 ADB&#xff0c;開發者可以便捷地在設備上執行命令、傳輸文件、調試應用等。本文將詳細介紹 AD…
閱讀更多...
如何控制需求交付節奏

如何控制需求交付節奏

有效控制需求的交付節奏&#xff0c;其核心在于將產品開發過程從一個不可預測的、時快時慢的混亂狀態&#xff0c;轉變為一套產出穩定、流程順暢、步調可持續的系統化交付機制。要成功構建這套機制&#xff0c;實現有節奏的價值交付&#xff0c;必須綜合運用五大關鍵策略&#…
閱讀更多...
匯編中常用寄存器介紹

匯編中常用寄存器介紹

X86-32位寄存器 4個數據寄存器&#xff1a;EAX、EBX、ECX和EDX; 2個變址和指針寄存器&#xff1a;ESI和EDI; 2個指針寄存器&#xff1a;ESP和EBP; 1個指令指針寄存器&#xff1a;EIP; 6個段寄存器&#xff1a;ES、CS、SS、DS、FS和GS; 1個標志寄存器&#xff1a;EFlags。 在X8…
閱讀更多...
SOMGAN：用自組織映射改善GAN的模式探索能力

SOMGAN：用自組織映射改善GAN的模式探索能力

論文信息 論文題目：Improving mode exploring capability ofgenerative adversarial nets by self-organizing map（利用自組織映射提高生成對抗網絡的模式探索能力） 期刊：Neurocomputing 摘要：生成對抗網絡(GANs)的出現將生成模型的研究推向了一個新的高潮。支持這一進步…
閱讀更多...
《匯編語言：基于X86處理器》第12章 復習題和練習

《匯編語言：基于X86處理器》第12章 復習題和練習

本篇記錄了《匯編語言&#xff1a;基于X86處理器》第12章 復習題和練習的筆記。12.6復習題和練習12.6.1 簡答題1.假設有二進制浮點數1101.01101&#xff0c;如何將其表示為十進制分數之和?答&#xff1a;1101.01101(1x)(1x)(0x)(1x)(0x)(1x)(1x)(1x)(1x) 13.406252.為什么十進…
閱讀更多...
ApacheCon Asia 2025 中國開源年度報告：Apache Doris 國內第一

ApacheCon Asia 2025 中國開源年度報告：Apache Doris 國內第一

上周剛落下帷幕的 ApacheCon Asia 2025 中&#xff0c;一個數據讓所有人都為之震撼&#xff1a;全球 Apache 基金會項目 OpenRank 排行榜中&#xff0c;Apache Doris 位居第二&#xff0c;在中國 Apache 項目中更是穩居第一。 這個排名意味著什么&#xff1f;在 Apache 基金會管…
閱讀更多...
Pytest中實現自動生成測試用例腳本代碼

Pytest中實現自動生成測試用例腳本代碼

&#x1f345; 點擊文末小卡片&#xff0c;免費獲取軟件測試全套資料&#xff0c;資料在手&#xff0c;漲薪更快在Python的測試框架中&#xff0c;我們通常會針對某個系統進行測試用例的維護&#xff0c;在對龐大系統進行用例維護時&#xff0c;往往會發現很多測試用例是差不多…
閱讀更多...
一周學會Matplotlib3 Python 數據可視化-標注 (Annotations)

一周學會Matplotlib3 Python 數據可視化-標注 (Annotations)

鋒哥原創的Matplotlib3 Python數據可視化視頻教程&#xff1a; 2026版 Matplotlib3 Python 數據可視化 視頻教程(無廢話版) 玩命更新中~_嗶哩嗶哩_bilibili 課程介紹 本課程講解利用python進行數據可視化 科研繪圖-Matplotlib&#xff0c;學習Matplotlib圖形參數基本設置&…
閱讀更多...
安全合規1--實驗：ARP欺騙、mac洪水攻擊、ICMP攻擊、TCP SYN Flood攻擊

安全合規1--實驗：ARP欺騙、mac洪水攻擊、ICMP攻擊、TCP SYN Flood攻擊

一、實驗環境 (思科的云實驗平臺)攻擊機&#xff1a;Kali Linux&#xff08;IP&#xff1a;192.168.234.128&#xff0c;MAC&#xff1a;00:00:29:35:64:EC&#xff09;目標1&#xff1a;網關&#xff08;IP&#xff1a;192.168.234.2&#xff0c;MAC&#xff1a;00:50:56:ED:D…
閱讀更多...
Linux下GCC的C++實現Hive到Snowflake數據遷移

Linux下GCC的C++實現Hive到Snowflake數據遷移

程序結構 ├── main.cpp ├── config.json ├── hive_export/ ├── parquet_data/ ├── sql_scripts/ └── logs/核心代碼實現 (main.cpp) #include <iostream> #include <fstream> #include <vector> #include <thread> #include <mut…
閱讀更多...
drippingblues靶機教程

drippingblues靶機教程

一、信息搜集首先將其在VirtualBOX中安裝&#xff0c;并將kali與靶機都設置為橋接模式緊接著我們掃描IP&#xff0c;來發現靶機地址&#xff0c;經過搜集&#xff0c;發現IP是192.168.1.9&#xff0c;我們去訪問一下緊接著我們掃一下開放了哪些端口。發現開放了21、22以及80端口…
閱讀更多...
39.【.NET8 實戰--孢子記賬--從單體到微服務--轉向微服務】--擴展功能--調整發布腳本

39.【.NET8 實戰--孢子記賬--從單體到微服務--轉向微服務】--擴展功能--調整發布腳本

這篇文章&#xff0c;我們要調整發布腳本。之所以要調整發布腳本&#xff0c;是因為現在我們的項目有三個環境&#xff1a;本地&#xff08;Local&#xff09;、開發&#xff08;Development&#xff09;、生產&#xff08;Production&#xff09;。Tip&#xff1a;我們的項目雖…
閱讀更多...
商品、股指及ETF期權五檔盤口Tick級與分鐘級歷史行情數據多維解析

商品、股指及ETF期權五檔盤口Tick級與分鐘級歷史行情數據多維解析

在金融數據分析領域&#xff0c;本地CSV文件是存儲高頻與低頻數據的常用載體。本文以期權市場數據為例&#xff0c;探討如何基于CSV格式處理分鐘級行情、高頻Tick數據、日頻數據、逐筆委托記錄、五檔訂單簿及歷史行情數據&#xff0c;并提供專業的技術實現方案。以下將從數據預…
閱讀更多...
最新文章

Copyright @ 2022~2023