编程技术

Document

前端引入和html标签

flask框架基本使用

在这里插入图片描述

  • web.py文件
from flask import Flask, render_template

app = Flask(__name__)


@app.route("/")
def index():
    return render_template("index.html")


if __name__ == '__main__':
    app.run()
  • index.html文件
<!DOCTYPE html>
<html lang="en">
<head> <!-- title-->
    <meta charset="UTF-8">  <!--编码-->
    <title>Title</title>
</head>
<body>
    <h1>中国联通</h1>
    <div>
        <span style="color:red">time:</span>
        <span>2023-07-16</span>
    </div>
    <div>
        中国联合网络通信集团有限公司（简称“中国联通”）于2009年1月6日由原中国网通和原中国联通合并重组而成，公司在国内31个省（自治区、直辖市）和境外多个国家和地区设有分支机构，以及130多个境外业务接入点，拥有覆盖全国、通达世界的现代通信网络和全球客户服务体系。 [97] “大联接”用户规模超过9亿。 [132]
    </div>
    <h3>广西联通</h3>
    <div>
        <span style="color:red">time:</span>
        <span>2023-07-16</span>
    </div>
    <div>
        根据工业和信息化部、国家发展和改革委员会、财政部联合发布的《关于深化电信体制改革的通告》精神及国家关于电信重组的整体工作要求，原中国网通和中国联通于2008年10月15日正式合并，合并后的公司名称为“中国联合网络通信有限公司”。中国联合网络通信有限公司南宁市分公司（简称：中国联通南宁市分公司），是中国联合网络通信有限公司在南宁的分支机构
    </div>
</body>
</html>

标签基本介绍

  • 标题
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
  • div和span
<div>一个人占一整行【块级标签】</div>
<span>自己多大占多少【行内标签，内联标签】</span>
  • 超链接
	<!--跳转到其他网站-->
    <a href="https://www.baidu.com/">点击跳转</a>
    <!--跳转到自己的网站其他地址-->
    <a href="get/news">查看更多</a>
  • 图片
<img src="图片地址" />

<!--直接显示别人的图片地址（可能有防盗链）：-->
    <img src="https://pica.zhimg.com/80/v2-a9c77d7a3101596c8b39e862956e3e42_720w.webp?source=1940ef5c"/>
    
<!--显示自己的图片：-->
<!--    -自己在项目中创建：static目录，图片要放在static-->
<!--    -在页面上引入图片-->
    <img src="/static/people.JPG"/>
    
<!--关于设置图片的高度和宽度-->
	<img src="图片地址" style="height:100px; width:200px;" />
	<img src="图片地址" style="height:10%; width:20%;"/>
  • 列表
<h1>中国三大运营商</h1>

<!--无序列表-->
<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>

<!--有序列表-->
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>
</body>
</html>
  • 表格
    <h1>数据表格</h1>
    <table border="1">
        <thead>
            <tr> <th>ID</th> <th>name</th> <th>age</th> </tr>
        </thead>
        <tbody>
            <tr> <td>10</td> <td>jason</td> <td>10</td> </tr>
            <tr> <td>11</td> <td>wang</td> <td>10</td> </tr>
            <tr> <td>12</td> <td>liu</td> <td>10</td> </tr>
            <tr> <td>13</td> <td>ad</td> <td>10</td> </tr>
            <tr> <td>14</td> <td>cd</td> <td>10</td> </tr>
        </tbody>
    </table>
  • input系列（7个）
    <input type="text" />
    <input type="password">
    <input type="file">

<!--    单选框，name的值保证一样，保证单选的效果-->
    <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="提交">    <!--提交表单-->
  • 下拉框
    <select>
        <option>beijing</option>
        <option>shanghai</option>
        <option>shengzheng</option>
    </select>

    <select multiple> <!--多行下拉框-->
        <option>beijing</option>
        <option>shanghai</option>
        <option>shengzheng</option>
    </select>
  • 多行文本输入
    <textarea rows="3"></textarea>  <!--rows可以控制行的数量，可以不写-->
  • form表单
    <!--
    页面上的数据，想要提交到后台：
    	-form标签包裹要提交的数据的标签
    		-提交方式：method="get或者post"
    		-提交地址：action="/xxx/xxx/xxx"
    		-在form标签里面必须有一个submit标签
    	-在form里面的一些标签：input、select、textarea
    		-一定要写name属性<input type="text" name="xx"/> 
    -->
    <form method="post" action="/register">  <!--可以写成get 或者 post-->
        <div>
            用户名：<input type="text" name="user">
        </div>        
        <div>
            密码 ：<input type="password" name="pwd">
        </div>        
        <div>
            <input type="submit" value="submit按钮">
        </div>
    </form>

案例效果


在这里插入图片描述

参考内容：
【最新Python的web开发全家桶（django+前端+数据库）】