国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Python Web開發(fā)記錄 Day1：HTML

2年前作者：Code_流蘇分類：Toy博客閱讀(20)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了Python Web開發(fā)記錄 Day1：HTML。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

名人說(shuō)：莫道桑榆晚，為霞尚滿天?！?jiǎng)⒂礤a（劉夢(mèng)得，詩(shī)豪）
創(chuàng)作者：Code_流蘇(CSDN)（一個(gè)喜歡古詩(shī)詞和編程的Coder??）

一、HTML

1、前端引入和HTML標(biāo)簽

①前端引入

安裝fllask

pip install flask

#從flask庫(kù)中導(dǎo)入Flask類
from flask import Flask
#創(chuàng)建一個(gè)簡(jiǎn)單的Flask應(yīng)用

app = Flask(__name__)

@app.route("/show/info")
def index():
    return "中國(guó)聯(lián)通"

if __name__ == '__main__':
    app.run()

咱們的網(wǎng)站與別人的不一樣：

瀏覽器可以識(shí)別很多標(biāo)簽+數(shù)據(jù)，例如：
    <h1>中國(guó)</h1>             ----》瀏覽器可以看到加大加粗
    <span style='color:red;'>聯(lián)通</span>  ----》瀏覽器看見字體顏色變紅
如果我們能把瀏覽器所能識(shí)別的標(biāo)簽都學(xué)會(huì)，我們?cè)诰W(wǎng)站就可以控制頁(yè)面到底長(zhǎng)什么樣子。

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

Flask框架為了讓咱們寫標(biāo)簽方便，支持將字符串寫入到文件里面

#從flask庫(kù)中導(dǎo)入Flask類
from flask import Flask,render_template
#創(chuàng)建一個(gè)簡(jiǎn)單的Flask應(yīng)用

app = Flask(__name__)

# 創(chuàng)建了網(wǎng)址 /show/info 和函數(shù) index 的對(duì)應(yīng)關(guān)系
# 以后用戶在瀏覽器上訪問(wèn) /show/info，網(wǎng)站自動(dòng)執(zhí)行 index
@app.route("/show/info")
def index():
    # return "中<h1>國(guó)</h1>聯(lián)通"
    # Flask內(nèi)部會(huì)自動(dòng)打開這個(gè)文件，并讀取內(nèi)容，將內(nèi)容給用戶返回
    # 默認(rèn)：去當(dāng)前項(xiàng)目目錄的templates文件夾中尋找
    return render_template("index.html")
if __name__ == '__main__':
    app.run()

②瀏覽器能識(shí)別的標(biāo)簽

1.編碼 charset （head）

<meta charset = "UTF-8">

2.標(biāo)題 title （head）

<head>
    <meta charset="UTF-8">
    <title>我的聯(lián)通</title>
</head>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

3.標(biāo)題

<h1>1級(jí)標(biāo)題</h1>
<h2>2級(jí)標(biāo)題</h2>
<h3>3級(jí)標(biāo)題</h3>
<h4>4級(jí)標(biāo)題</h4>
<h5>5級(jí)標(biāo)題</h5>
<h6>6級(jí)標(biāo)題</h6>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

4.div和span

<div>
    內(nèi)容
</div>

<span>asdfa</span>

div，一人占一行。【塊級(jí)標(biāo)簽】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的聯(lián)通</title>
</head>
<body>
    <div>山東藍(lán)翔</div>
    <div>挖掘機(jī)哪家強(qiáng)</div>
</body>
</html>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

span，自己有多大就占多大。【行內(nèi)標(biāo)簽，內(nèi)聯(lián)標(biāo)簽】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的聯(lián)通</title>
</head>
<body>
    <span>山東藍(lán)翔</span><span>挖掘機(jī)哪家強(qiáng)</span>
</body>
</html>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

注意，這兩個(gè)標(biāo)簽比較簡(jiǎn)潔，未來(lái)引入CSS樣式后，會(huì)更好看。

綜合練習(xí)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的聯(lián)通</title>
</head>
<body>
    <h1>中國(guó)聯(lián)通</h1>
    <div>
        <span style="color:red">時(shí)間：</span>
        <span>2023-11-11</span>
    </div>
    <div>
        北京天壇公園祈年殿前游客密密麻麻，上海南京路上游人摩肩接踵，西安大唐不夜城里游人如織，成都大熊貓繁育基地門口早早排起長(zhǎng)隊(duì)……熱鬧的人群和豐富的文旅活動(dòng)共同織就了春節(jié)繁華的旅游畫卷?！奥糜问竭^(guò)年”已成為新年俗。這個(gè)春節(jié)，人們都去了哪里？央視在“數(shù)據(jù)看春運(yùn)”系列報(bào)道中公布的一組由中國(guó)聯(lián)通智慧足跡提供的數(shù)據(jù)，為我們揭開了答案。
    </div>
    <h2>河南聯(lián)通分部</h2>
    <div>
        <span style="color:red">時(shí)間：</span>
        <span>2023-11-11</span>
    </div>
    <div>
        重慶、武漢、西安、北京、開封等城市成為當(dāng)下熱門的文旅目的地。當(dāng)?shù)鼐哂形幕瘍?nèi)涵和歷史底蘊(yùn)的特色景點(diǎn)，如開封宋都皇城、武漢楚河漢街、石家莊正定古城、北京前門大街、重慶解放碑洪崖洞等，是大家最愿意去的熱門景點(diǎn)。
    </div>
</body>
</html>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

2、HTML - 超鏈接

①超鏈接

跳轉(zhuǎn)到其它網(wǎng)站
<a href="https://www.chinaunicom.com.cn/">點(diǎn)擊跳轉(zhuǎn)</a>

跳轉(zhuǎn)到自己網(wǎng)站的其它地址
<a href="http://127.0.0.1:5000/get/news">點(diǎn)擊跳轉(zhuǎn)</a>
<a href="/get/news">點(diǎn)擊跳轉(zhuǎn)</a>

# 當(dāng)前頁(yè)面打開
<a href="/get/news">點(diǎn)擊跳轉(zhuǎn)</a>

# 新的Tab頁(yè)面打開
<a href="/get/news" target="_blank">點(diǎn)擊跳轉(zhuǎn)</a>

3、HTML - 圖片

①圖片

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

直接顯示別人的圖片地址（可能有防盜鏈，無(wú)法顯示）：
<img src="content="https://picx.zhimg.com/50/v2-0e28f8d5f385f53f8560890bbae5e79b_720w.jpg?source=b6762063"" />

顯示自己的圖片：
<img src="圖片地址" />
- 自己項(xiàng)目中創(chuàng)建：static目錄，圖片要放在static文件中
- 在頁(yè)面上引入圖片
  <img src ="/static/1.jpg"

關(guān)于設(shè)置圖片的高度和寬度

<img src="圖片地址" style="height:100px; width:200px;" />
<img src="圖片地址" style="height:10%; width:20%;" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的聯(lián)通</title>
</head>
<body>
    <h1>中國(guó)聯(lián)通</h1>
    <div>
        <span style="color:red">時(shí)間：</span>
        <span>2023-11-11</span>
    </div>
    <div>
        北京天壇公園祈年殿前游客密密麻麻，上海南京路上游人摩肩接踵，西安大唐不夜城里游人如織，成都大熊貓繁育基地門口早早排起長(zhǎng)隊(duì)……熱鬧的人群和豐富的文旅活動(dòng)共同織就了春節(jié)繁華的旅游畫卷?！奥糜问竭^(guò)年”已成為新年俗。這個(gè)春節(jié)，人們都去了哪里？央視在“數(shù)據(jù)看春運(yùn)”系列報(bào)道中公布的一組由中國(guó)聯(lián)通智慧足跡提供的數(shù)據(jù)，為我們揭開了答案。

        <a href="https://www.chinaunicom.com.cn/">點(diǎn)擊跳轉(zhuǎn)</a>
        <img src="https://picx.zhimg.com/50/v2-0e28f8d5f385f53f8560890bbae5e79b_720w.jpg?source=b6762063"  style="height:100px; width:200px;" />
    </div>
    <h2>河南聯(lián)通分部</h2>
    <div>
        <span style="color:red">時(shí)間：</span>
        <span>2023-11-11</span>
    </div>
    <div>
        重慶、武漢、西安、北京、開封等城市成為當(dāng)下熱門的文旅目的地。當(dāng)?shù)鼐哂形幕瘍?nèi)涵和歷史底蘊(yùn)的特色景點(diǎn)，如開封宋都皇城、武漢楚河漢街、石家莊正定古城、北京前門大街、重慶解放碑洪崖洞等，是大家最愿意去的熱門景點(diǎn)。

        <img src ="https://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402191626527.jpg" />
        <a href="/get/news">點(diǎn)擊跳轉(zhuǎn)</a>
    </div>

</body>
</html>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

②小結(jié)

學(xué)習(xí)的標(biāo)簽

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

劃分

- 塊級(jí)標(biāo)簽
   <h1></h1>
   <div></div>
- 行內(nèi)標(biāo)簽
   <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.mi.com/shop/buy/detail?product_id=19436" target="_blank">
      <img src="/static/a1.png" style="width: 150px">
  </a>
  <a href="https://www.mi.com/shop/buy/detail?product_id=19432" target="_blank">
  <img src="/static/a2.png" style="width: 150px">
  </a>
  <a href="https://www.mi.com/shop/buy/detail?product_id=19437" target="_blank">
  <img src="/static/a3.png" style="width: 150px">
  </a>
</body>
</html>

4、HTML - 表格和列表等

①列表標(biāo)簽

1.無(wú)序列表

<ul>
    <li>中國(guó)移動(dòng)</li>
    <li>中國(guó)聯(lián)通</li>
    <li>中國(guó)電信</li>
</ul>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

2.有序列表

<ol>
    <li>中國(guó)移動(dòng)</li>
    <li>中國(guó)聯(lián)通</li>
    <li>中國(guó)電信</li>
</ol>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

②關(guān)于HTML注釋

在HTML中，注釋是用來(lái)向代碼添加說(shuō)明的，但它們不會(huì)在網(wǎng)頁(yè)上顯示。注釋對(duì)于開發(fā)者來(lái)說(shuō)非常有用，因?yàn)樗鼈兛梢杂脕?lái)解釋代碼的功能或目的，或者暫時(shí)禁用某段代碼而不完全刪除它。

要在HTML中添加注釋，你需要使用以下語(yǔ)法：

<!-- 這是一個(gè)注釋，它不會(huì)在網(wǎng)頁(yè)上顯示。 -->

任何放在之間的內(nèi)容都會(huì)被瀏覽器忽略，不會(huì)在網(wǎng)頁(yè)上渲染。這意味著你可以在HTML文檔中的任何位置添加注釋，無(wú)論是在元素內(nèi)部、元素之間，還是在文檔的頭部或尾部。

例如：

<!DOCTYPE html>
<html>
<head>
    <title>示例頁(yè)面</title>
    <!-- 這是head部分的注釋 -->
</head>
<body>
    <!-- 頁(yè)面主體的開始 -->
    <p>這是一個(gè)段落。</p>
    <!-- <p>這是一個(gè)被注釋掉的段落，不會(huì)顯示。</p> -->
    <!-- 頁(yè)面主體的結(jié)束 -->
</body>
</html>

③表格標(biāo)簽

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <style>
        table {
            border-collapse: collapse; /* 將邊框合并為單一邊框，避免雙線邊框的出現(xiàn) */
            /*width: 100%; !* 根據(jù)需要設(shè)置表格寬度 *!*/
        }
        th, td {
            border: 1px solid black; /* 設(shè)置單元格邊框?yàn)楹谏?px寬 */
            padding: 8px; /* 設(shè)置內(nèi)邊距，根據(jù)需要調(diào)整 */
            text-align: left; /* 文字對(duì)齊方式 */
        }
        th {
            background-color: #f2f2f2; /* 設(shè)置表頭背景顏色，可根據(jù)需要調(diào)整 */
        }
    </style>

</head>
<body>

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>10</td>
            <td>張三</td>
            <td>21</td>
        </tr>
        <tr>
            <td>11</td>
            <td>李四</td>
            <td>22</td>
        </tr>
        <tr>
            <td>12</td>
            <td>王五</td>
            <td>23</td>
        </tr>
        <tr>
            <td>13</td>
            <td>火鉗</td>
            <td>22</td>
        </tr>
        <tr>
            <td>14</td>
            <td>劉明</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

</body>
</html>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

綜合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse; /* 將邊框合并為單一邊框，避免雙線邊框的出現(xiàn) */
            /*width: 100%; !* 根據(jù)需要設(shè)置表格寬度 *!*/
        }
        th, td {
            border: 1px solid black; /* 設(shè)置單元格邊框?yàn)楹谏?px寬 */
            padding: 8px; /* 設(shè)置內(nèi)邊距，根據(jù)需要調(diào)整 */
            text-align: left; /* 文字對(duì)齊方式 */
        }
        th {
            background-color: #f2f2f2; /* 設(shè)置表頭背景顏色，可根據(jù)需要調(diào)整 */
        }
    </style>
</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="https://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg" alt="" style="height: 50px">
              </td>
              <td>張三</td>
              <td>nasx1357@163.com</td>
              <td>
                <a href="https://www.nowcoder.com" target="_blank">點(diǎn)擊查看詳細(xì)</a>
              </td>
              <td>
                  編輯
                  刪除
              </td>
          </tr>

          <tr>
              <td>1</td>
              <td>
                <img src="https://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg" alt="" style="height: 50px">
              </td>
              <td>李四</td>
              <td>nasx1357@163.com</td>
              <td>
                <a href="https://www.nowcoder.com" target="_blank">點(diǎn)擊查看詳細(xì)</a>
              </td>
             <td>
                  編輯
                  刪除
             </td>
          </tr>

          <tr>
              <td>1</td>
              <td>
                <img src="https://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg" alt="" style="height: 50px">
              </td>
              <td>王五</td>
              <td>nasx1357@163.com</td>
              <td>
                <a href="https://www.nowcoder.com" target="_blank">點(diǎn)擊查看詳細(xì)</a>
              </td>
              <td>
                  編輯
                  刪除
              </td>
          </tr>

          <tr>
              <td>1</td>
              <td>
                <img src="https://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg" alt="" style="height: 50px">
              </td>
              <td>火鉗</td>
              <td>nasx1357@163.com</td>
              <td>
                <a href="https://www.nowcoder.com" target="_blank">點(diǎn)擊查看詳細(xì)</a>
              </td>
              <td>
                  編輯
                  刪除
              </td>
          </tr>
      </tbody>
    </table>
</body>
</html>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

5、HTML - 表單標(biāo)簽

①input系列

<!--文本框-->
<input type="text" > 
<!--密碼框-->
<input type="password" > 
<!--上傳文件-->
<input type="file" > 
<!--單選框-->
<input type="radio" name="n1">男 
<input type="radio" name="n1">女
<!--復(fù)選框-->
<input type="checkbox">籃球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球
<!--按鈕-->
<input type="button" value="提交">
<!--表單-->
<input type="submit" value="提交">

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

②下拉框

<!--單選-->
<select>
    <option></option>
    <option>北京</option>
    <option>上海</option>  
    <option>深圳</option>    
</select>
<!--多選-->
<select multiple>
    <option></option>
    <option>北京</option>
    <option>上海</option>  
    <option>深圳</option>    
</select>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

③多行文本

<textarea></textarea>
<textarea rows="5"></textarea>

綜合案例：用戶注冊(cè)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>用戶注冊(cè)</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>
        <option>深圳</option>
    </select>
  </div>

  <div>
    擅長(zhǎng)領(lǐng)域：
    <select multiple>
        <option>學(xué)習(xí)</option>
        <option>睡覺(jué)</option>
        <option>吃飯</option>
        <option>旅游</option>
    </select>
  </div>

  <div>
    備注：<textarea></textarea>
  </div>

  <div>
    <input type="button" value="button按鈕">
    <input type="submit" value="submit提交">
  </div>
</body>
</html>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

④小結(jié)

網(wǎng)站請(qǐng)求的流程

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

各類標(biāo)簽

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

網(wǎng)絡(luò)請(qǐng)求

在瀏覽器的URL重寫入地址，點(diǎn)擊回車，訪問(wèn)。

瀏覽器會(huì)發(fā)送數(shù)據(jù)過(guò)去，本質(zhì)上發(fā)送的是字符串：
"GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n"

瀏覽器向后端發(fā)送請(qǐng)求時(shí)

GET請(qǐng)求【URL方法/表單提交】
- 現(xiàn)象：GET請(qǐng)求、跳轉(zhuǎn)、向后臺(tái)傳入數(shù)據(jù)，數(shù)據(jù)會(huì)拼接在URL上

 https://www.baidu.com/s?wd=%E5%AE%89%E5%8D%93&rsv_spt=1&rsv_iqid=0xdfd4d15c003351e9&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=4&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=%25E5%25AE%2589%25E5%258D%2593&rsp=7&inputT=1776&rsv_sug4=1895

注意：GET請(qǐng)求數(shù)據(jù)會(huì)在URL中體現(xiàn)。

POST請(qǐng)求【表單提交】
- 現(xiàn)象：提交數(shù)據(jù)不在URL中體現(xiàn)，而是在請(qǐng)求體（form data）中

6、HTML - form表單和提交

綜合案例：用戶注冊(cè)

新創(chuàng)建項(xiàng)目
創(chuàng)建Flask代碼

# -*- coding: utf-8 -*-
# @Time : 2024-02-20 10:55

from flask import Flask,render_template,request

app = 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.getlist("hobby")
        city = request.form.get("city")
        skill_list = request.form.getlist("skill")
        more = request.form.get("more")
        print(user,pwd,gender,hobby_list,city,skill_list,more)

        return "注冊(cè)成功    "

if __name__ == '__main__':
    app.run()

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>用戶注冊(cè)</h1>

  <form action="/register" method="post">
  <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="10">籃球
    <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="Beijing">北京</option>
        <option value="Shanghai">上海</option>
        <option value="Shenzhen">深圳</option>
        <option></option>
      </select>
    </div>

    <div>
      擅長(zhǎng)領(lǐng)域：
        <select name="skill" multiple>
          <option value="100">吃飯</option>
          <option value="101">睡覺(jué)</option>
          <option value="102">打球</option>
        </select>
    </div>

    <div>
      備注：<textarea name="more"></textarea>
    </div>

  <div>
    <input type="submit" value="注冊(cè)">
  </div>

  </form>
</body>
</html>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

頁(yè)面上的數(shù)據(jù)，想要提交到后臺(tái)：

form標(biāo)簽包裹要提交的數(shù)據(jù)。
- 提交方式：method=“get”
- 提交的地址：action=“/xxx/xxx/xx”
- 在form標(biāo)簽里面必須有一個(gè)submit標(biāo)簽
在form里面的一些標(biāo)簽：input/select/textarea
- 一定要寫name屬性

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

7、HTML-案例

①Python代碼（Flask框架）

# -*- coding: utf-8 -*-
# @Time : 2024-02-20 10:55

from flask import Flask,render_template,request

app = 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.getlist("hobby")
        city = request.form.get("city")
        skill_list = request.form.getlist("skill")
        more = request.form.get("more")
        print(user,pwd,gender,hobby_list,city,skill_list,more)

        return "注冊(cè)成功    "

@app.route('/login',methods=['GET',"POST"])
def login():
    if request.method == "GET":
        return render_template("login.html")
    else:
        print(request.form)
        user = request.form.get("username")
        pwd = request.form.get("password")
        print(user,pwd)
        return "登錄成功"

@app.route('/index',methods=["GET"])
def index():
    return render_template("index.html")

if __name__ == '__main__':
    app.run()

②HTML代碼

1.注冊(cè) register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>用戶注冊(cè)</h1>

  <form action="/register" method="post">
  <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="10">籃球
    <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="Beijing">北京</option>
        <option value="Shanghai">上海</option>
        <option value="Shenzhen">深圳</option>
        <option></option>
      </select>
    </div>

    <div>
      擅長(zhǎng)領(lǐng)域：
        <select name="skill" multiple>
          <option value="100">吃飯</option>
          <option value="101">睡覺(jué)</option>
          <option value="102">打球</option>
        </select>
    </div>

    <div>
      備注：<textarea name="more"></textarea>
    </div>

  <div>
    <input type="submit" value="注冊(cè)">
  </div>

  </form>
</body>
</html>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

2.登錄 login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <h1>用戶登錄</h1>
      <form method="post" action="/login">
          用戶名：<input type="text" name="username">
          密碼：<input type="text" name="password">
          <input type="submit" value="提交">
      </form>
</body>
</html>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

3.首頁(yè) index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse; /* 將邊框合并為單一邊框，避免雙線邊框的出現(xiàn) */
            /*width: 100%; !* 根據(jù)需要設(shè)置表格寬度 *!*/
        }
        th, td {
            border: 1px solid black; /* 設(shè)置單元格邊框?yàn)楹谏?px寬 */
            padding: 8px; /* 設(shè)置內(nèi)邊距，根據(jù)需要調(diào)整 */
            text-align: left; /* 文字對(duì)齊方式 */
        }
        th {
            background-color: #f2f2f2; /* 設(shè)置表頭背景顏色，可根據(jù)需要調(diào)整 */
        }
    </style>
</head>
<body>
    <h1>歡迎使用xxx系統(tǒng)</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="https://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg" alt="" style="height: 50px">
              </td>
              <td>張三</td>
              <td>nasx1357@163.com</td>
              <td>
                <a href="https://www.nowcoder.com" target="_blank">點(diǎn)擊查看詳細(xì)</a>
              </td>
              <td>
                  編輯
                  刪除
              </td>
          </tr>

          <tr>
              <td>1</td>
              <td>
                <img src="https://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg" alt="" style="height: 50px">
              </td>
              <td>李四</td>
              <td>nasx1357@163.com</td>
              <td>
                <a href="https://www.nowcoder.com" target="_blank">點(diǎn)擊查看詳細(xì)</a>
              </td>
             <td>
                  編輯
                  刪除
             </td>
          </tr>

          <tr>
              <td>1</td>
              <td>
                <img src="https://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg" alt="" style="height: 50px">
              </td>
              <td>王五</td>
              <td>nasx1357@163.com</td>
              <td>
                <a href="https://www.nowcoder.com" target="_blank">點(diǎn)擊查看詳細(xì)</a>
              </td>
              <td>
                  編輯
                  刪除
              </td>
          </tr>

          <tr>
              <td>1</td>
              <td>
                <img src="https://yueliusu.oss-cn-beijing.aliyuncs.com/imgs/202402210031123.jpg" alt="" style="height: 50px">
              </td>
              <td>火鉗</td>
              <td>nasx1357@163.com</td>
              <td>
                <a href="https://www.nowcoder.com" target="_blank">點(diǎn)擊查看詳細(xì)</a>
              </td>
              <td>
                  編輯
                  刪除
              </td>
          </tr>
      </tbody>
    </table>
</body>
</html>

Python Web開發(fā)記錄 Day1：HTML,# HTML,前端,python,html

③總結(jié)

1.稱呼

- 瀏覽器能夠識(shí)別的標(biāo)簽。（× 不專業(yè)）
- HTML標(biāo)簽（√）

什么是HTML？
超文本傳輸語(yǔ)言（與瀏覽器搭配）

2.HTML標(biāo)簽（默認(rèn)格式樣式、以后通過(guò)手段（CSS）可以修改）

3.HTML標(biāo)簽與編程語(yǔ)言無(wú)關(guān)

java +HTML
C# + HTML
PHP +HTML
Python + HTML
…

4.注意：HTML標(biāo)簽較多，不必一下全學(xué)會(huì)，先學(xué)會(huì)常用的，剩下的等用到的時(shí)候自己查找使用即可

很感謝你能看到這里，如有相關(guān)疑問(wèn)，還請(qǐng)下方評(píng)論留言。
筆記記錄來(lái)源：B站 python的web開發(fā)全家桶（django+前端+數(shù)據(jù)庫(kù)）
Code_流蘇(CSDN)（一個(gè)喜歡古詩(shī)詞和編程的Coder??）
如果對(duì)大家有幫助的話，希望大家能多多點(diǎn)贊+關(guān)注！這樣我的動(dòng)力會(huì)更足！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-832489.html

到了這里，關(guān)于Python Web開發(fā)記錄 Day1：HTML的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

LeetCode刷題記錄——day1
https://leetcode.cn/problems/h-index/description/?envType=study-plan-v2envId=top-interview-150 注：題目有點(diǎn)難理解，多讀幾遍可以這樣考慮，建立另一個(gè)臨時(shí)數(shù)組 temp ，當(dāng)?shù)?i 篇文章被引用 citiations[i] 次時(shí)，令 j=citiations[i] 的 temp[j] 均加一，也就是現(xiàn)在對(duì)于任意 j 至少有 temp[j] 篇論文引用次數(shù)大
2024年03月18日
瀏覽(24)
day1:前端緩存問(wèn)題
? 「目標(biāo)」 : 持續(xù)輸出！每日分享關(guān)于web前端常見知識(shí)、面試題、性能優(yōu)化、新技術(shù)等方面的內(nèi)容。篇幅不會(huì)過(guò)長(zhǎng)，方便理解和記憶。 ? ? 「主要面向群體：」前端開發(fā)工程師（初、中、高級(jí)）、應(yīng)屆、轉(zhuǎn)行、培訓(xùn)等同學(xué) ? Day1-今日話題「前端web項(xiàng)目緩存問(wèn)題如何處理？
2024年02月12日
瀏覽(20)
【前端】網(wǎng)頁(yè)開發(fā)精講與實(shí)戰(zhàn) HTML Day 2
???Write In Front?? ??個(gè)人主頁(yè)：令夏二十三 ??歡迎各位→點(diǎn)贊?? + 收藏?? + 留言?? ??系列專欄：前端 ??總結(jié)：希望你看完之后，能對(duì)你有所幫助，不足請(qǐng)指正！共同學(xué)習(xí)交流 ?? 目錄文章目錄前言正文一、列表 1. 列表簡(jiǎn)介 ?2. 無(wú)序列表 ?3. 有序列表 ?4. 定義列表
2024年02月15日
瀏覽(21)
【前端】網(wǎng)頁(yè)開發(fā)精講與實(shí)戰(zhàn) HTML Day 1
??Write In Front?? ??個(gè)人主頁(yè)：令夏二十三 ??歡迎各位→點(diǎn)贊?? + 收藏?? + 留言?? ??系列專欄：前端 ??總結(jié)：希望你看完之后，能對(duì)你有所幫助，不足請(qǐng)指正！共同學(xué)習(xí)交流 ?? 目錄文章目錄前言一、HTML的基本概念 1. HTML的定義?? ?2. 標(biāo)簽語(yǔ)法 3. 拓展知識(shí) 二、H
2024年02月13日
瀏覽(15)
前端學(xué)習(xí)——ajax (Day1)
axios 使用練習(xí) 練習(xí) 案例 axios 錯(cuò)誤處理 https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8 url好像失效了
2024年02月16日
瀏覽(19)
Nodejs前端學(xué)習(xí)Day1
媽的，這幾天真tm冷，前天上午還下了一整天的雪，大雪媽的，昨天沒(méi)學(xué)，上午練車去了，下午就當(dāng)了一下午廢物，操，真是個(gè)廢物。現(xiàn)在官網(wǎng)的描述：學(xué)習(xí)視頻中的描述（舊版本）：如果我們寫了一段js放到瀏覽器中運(yùn)行則證明在做前端開發(fā) 如果我們寫了一段js放到node
2024年01月25日
瀏覽(19)
前端學(xué)習(xí)——JS進(jìn)階 (Day1)
局部作用域全局作用域作用域鏈 JS垃圾回收機(jī)制閉包變量提升函數(shù)提升函數(shù)參數(shù) 動(dòng)態(tài)參數(shù) 剩余參數(shù) 展開運(yùn)算符箭頭函數(shù)（重要）基本寫法箭頭函數(shù)參數(shù) 箭頭函數(shù) this 數(shù)組解構(gòu) 練習(xí) 數(shù)組解構(gòu) 對(duì)象解構(gòu) 多級(jí)對(duì)象解構(gòu) for each 案例篩選
2024年02月16日
瀏覽(19)
Web前端開發(fā)：HTML、CSS
在介紹Web網(wǎng)站工作流程的時(shí)候提到，前端開發(fā)，主要的職責(zé)就是將數(shù)據(jù)以好看的樣式呈現(xiàn)出來(lái)，說(shuō)白了，就是開發(fā)網(wǎng)頁(yè)程序，如下圖所示： 1. ? 網(wǎng)頁(yè)有哪些部分組成 ? 文字、圖片、音頻、視頻、超鏈接、表格等等。 2.? 我們看到的網(wǎng)頁(yè)，背后的本質(zhì)是什么 ? 程序員寫的前端
2023年04月18日
瀏覽(23)
[CISCN 2019華北Day1]Web1
phar反序列化文件讀取打開題目，注冊(cè)用戶為admin 進(jìn)去發(fā)現(xiàn)有文件上傳的功能，我們隨便上傳個(gè)圖片然后就有下載和刪除兩個(gè)功能我們嘗試抓包下載文件的功能發(fā)現(xiàn)參數(shù)可控，我們嘗試讀取一下既然能讀出來(lái)，我們繼續(xù)讀一下源碼源碼繼續(xù)讀取class.php 分析一下class.php 我
2024年02月09日
瀏覽(41)
HTML5+CSS3+移動(dòng)web 前端開發(fā)入門筆記（二）HTML標(biāo)簽詳解
排版標(biāo)簽用于對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行布局和樣式的調(diào)整。下面是對(duì)常見排版標(biāo)簽的詳細(xì)介紹：標(biāo)題使用至標(biāo)簽進(jìn)行定義。定義最大的標(biāo)題，定義最小的標(biāo)題。具有align屬性，屬性值可以是：left、center、right。將給定的HTML代碼轉(zhuǎn)換為Markdown格式的標(biāo)題標(biāo)簽如下所示：效果演示： H3：
2024年02月07日
瀏覽(40)