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

文章目录

  • 一、前端三剑客是什么?
  • 二、快速开发网站
    • 1.安装flask
    • 2.根目录下创建templates目录及web.py文件
  • 三、HTML
    • 3.1常用标签
    • 3.2列表标签
    • 3.3表格标签
    • 3.4INPUT系列(7个)
    • 3.5下拉框
    • 3.6多行文本
    • 3.7案例:用户注册页面


一、前端三剑客是什么?

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

二、快速开发网站

1.安装flask

在终端输入下面代码:

pip install flask

【web开发】1、flask入门和html开发_第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)

并在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>

运行web.py文件:鼠标右键点击在这里插入图片描述或点击运行按钮在这里插入图片描述,在下方处点击链接【web开发】1、flask入门和html开发_第2张图片
在链接后输入刚才自己创建的/get/news/,如图,即可获得在get_news.html输入的内容【web开发】1、flask入门和html开发_第3张图片

三、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>

【web开发】1、flask入门和html开发_第4张图片

3.2列表标签

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

      【web开发】1、flask入门和html开发_第5张图片

      3.3表格标签

      列名,数据
      <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>
      

      【web开发】1、flask入门和html开发_第6张图片

      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>
      
      

      【web开发】1、flask入门和html开发_第7张图片

      3.5下拉框

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

      【web开发】1、flask入门和html开发_第8张图片

      3.6多行文本

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

      【web开发】1、flask入门和html开发_第9张图片

      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>
      

      【web开发】1、flask入门和html开发_第10张图片

      你可能感兴趣的:(web开发,flask,web,python)