• 【web开发】1、flask入门和html开发

    文章目录

    一、前端三剑客是什么？

    HTML：标签具有模式特点。
    CSS：修改标签的特点。
    JavaScript：动态效果。

    二、快速开发网站

    1.安装flask

    在终端输入下面代码：

    pip install flask

    • 1

    在这里插入图片描述

    2.根目录下创建templates目录及web.py文件

    要保证templates目录及web.py文件在同一级
    web.py代码如下（示例）：

    from flask import Flask,render_template

app =Flask(__name__)
@app.route("/get/news/")    #自己创建的链接
def get_news():
    return render_template("get_news.html")
if __name__== '__main__':
	app.run(host='0.0.0.0', port=5100, debug=False)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    并在templates目录下创建对应的get_news.html文件。
    get_news.html文件代码如下：

    `DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h1>获取新闻h1>
<div>cjsgceivukdiv>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    运行web.py文件：鼠标右键点击在这里插入图片描述或点击运行按钮在这里插入图片描述，在下方处点击链接在这里插入图片描述
    在链接后输入刚才自己创建的/get/news/,如图，即可获得在get_news.html输入的内容在这里插入图片描述

    三、HTML

    3.1常用标签

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Titletitle>
head>
<body>

    <h1>1.一级标签【加大加粗】h1>
    <div>2.内容占一行【块级标签】div>
    <span>3.内容多少占多少【行内标签】span>
 <div>
     <a href="https://www.baidu.com/">4.1 链接，可跳转到其他网站a>
 div>
<div>
    <a href=“/get/news/”>4.2 跳转到自己网站其他位置(当前页面)a>
div>
<div>
    <a href="/show/info/"  target="_blank">4.3 跳转到自己网站的其他位置(新的Tab页面打开)a>
div>
<div>
    <img  style="height:100px;width:100px"  src="/static/img.jpg"/>5.1内部图片(与templates目录同级的static目录下的图片img.jpg)
div>
<div>
   <img src="https://img1.baidu.com/it/u=1899045995,881885928&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1696560790&t=52d6f8ae945cd8c5c8d637772547cd04">5.2外部链接图片
div>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

    3.2列表标签

    ul表示无序列表，ol表示有序列表

    <div>
    <h1>运营商列表h1>
        <ul>
            <li>中国移动li>
            <li>中国联通li>
            <li>中国电信li>
        ul>
    <h1>运营商列表h1>
        <ol>
            <li>中国移动li>
            <li>中国联通li>
            <li>中国电信li>
        ol>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    3.3表格标签

    th列名，td数据

    <div>
        <h1>数据表格h1>
            <table border="1">
                <thead>
                   <tr>  <th>IDth> <th>姓名th>  <th>年龄th>  tr>
                thead>
                <tbody>
                    <tr> <td>10td> <td>aatd> <td>22td> tr>
                    <tr> <td>11td> <td>bbtd> <td>23td> tr>
                    <tr> <td>12td> <td>cctd> <td>12td> tr>
                    <tr> <td>13td> <td>ddtd> <td>23td> tr>
                tbody>
            table>
    div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    3.4INPUT系列（7个）

        <div>
        <h1>input系列h1>
        <div>文本框
            <input type="text">
        div>
        <div>（密码框***）
            <input type="password">
        div>

        <div>（上传文件）
            <input type="file">
        div>
        <div>(单选)
            <input type="radio" name="n1">男
            <input type="radio" name="n1">女

        div>
        <div>(多选)
            <input type="checkbox">老婆
            <input type="checkbox">baby
            <input type="checkbox">女朋友
            <input type="checkbox">好朋友
        div>
        <div>(两种提交方式)
            <input type="button" value="提交">
            <input type="submit" value="提交">
        div>

    div>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    在这里插入图片描述

    3.5下拉框

        <div>
        <h1>下拉框h1>
        <select> -->单选下拉框
            <option>北京option>
            <option>上海option>
            <option>云南option>
        select>
        
        <select multiple> -->多选下拉框（长按shift多选）
            <option>北京option>
            <option>上海option>
            <option>云南option>
        select>
    div>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    3.6多行文本

    <div>
        <h1>多行文本h1>
        <textarea rows="3">textarea>
    div>

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述

    3.7案例：用户注册页面

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            color:red;
        }
        .c2{
            height:50px
        }
    style>
head>
<body>
<h1 class="c1">用户注册h1>
<form method="POST" action="/new/info">
<div class="c2">
  用户名:<input type="text" name="uu">
div>
<div>
  密码:<input type="password" name="pp">
div>
<div>
  选择性别:
    <input type="radio" name="n1">男
    <input type="radio" name="n1">女
div>
<div>
  爱好: <input type="checkbox" name="hobby" value="1">唱歌
       <input type="checkbox" name="hobby" value="2">看跑男
       <input type="checkbox" name="hobby" value="3">睡觉
div>
<div>
  城市:
    <select  name="city">
        <option>晋城option>
        <option>西安option>
        <option>洛阳option>
    select>
div>
<div>
  擅长领域:
    <select multiple name="area">
        <option>打代码option>
        <option>写代码option>
        <option>抄代码option>
    select>
div>
<div>
    备注:<textarea rows="5">textarea>
div>

<div>
    <input type="submit" value="submit按钮">
    <input type="button" value="button按钮">
div>
form>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    在这里插入图片描述

  • 相关阅读:
    【Linux C】Linux如何执行一个程序（程序存储空间、系统调用、内核调用）
    刷题 BFS 广度优先算法 : 大胖子走迷宫 （python, java）
    Code For Better 谷歌开发者之声——使用TensorFlow的时间序列预测
    c++继承
    管理员已经阻止软件运行bug的解决
    小白入手实现AI客服机器人demo
    计算器的简化版
    vue项目路由使用history模式，nginx配置，刷新页面显示404
    react项目中使用mobx
    MySQL 开启SSL无效问题
  • 原文地址：https://blog.csdn.net/qq_46644680/article/details/132708659