python web开发(二):HTML标签语言

文章目录

  • 简介
  • 标签语法
      • 标题
      • div和span
      • 超链接
      • 插入图片
      • 列表
      • 表格
      • Input系列
      • 提交表单
  • 参考

简介

如下展示了一段简单的HTML模板, 标签中主要包含一些基本配置,如编码方式,标题等,注意标题的作用如下图所示
python web开发(二):HTML标签语言_第1张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hellotitle>
head>
<body>
    <div>hello worddiv>
body>
html>

标签语法

标题

每个标题单独占一行

<body>
    <h1>一级标题h1>
    <h2>二级标题h1>
    <h3>三级标题h1>
    <h4>四级标题h1>
    <h5>五级标题h1>
body>

div和span

<div>内容div>

<span>内容span>

div和span标签不会像标题h一样对字体大小进行改变,只展示最原始的文字,其两者的区别如下

  • div: 占一整行(块级标签)
  • span: 用多少占多少(行内标签/内联标签)
    两个 span 标签不在同一行,页面显示时会在同一行,中间以一个空格分隔
    两个 span 标签在同一行,页面显示时会在同一行,中间没有空格,连着

超链接

如下代码所示,使用标签来应用超链接,a标签中间的文字是超链接文字,href参数存放url地址,下面的代码段中展示了引用外部链接,以及引用内部链接两种方式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hellotitle>
head>
<body>
    <div>hello worddiv>
    <a href="https://mp.csdn.net/mp_blog/manage/article?spm=1011.2124.3001.5298">小方的博客链接a>br>
    <a href="/master">内部链接a>
body>
html>
from flask import Flask, render_template
app = Flask(__name__, template_folder="./templates")

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

@app.route("/master")
def master():
    return "byebye"

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

结果如下图所示
python web开发(二):HTML标签语言_第2张图片
在新的 Tab 标签页打开链接,添加 target=“_blank”

<body>
    <a href="https://www.mi.com/shop/buy/detail?product_id=16642" target="_blank">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210262033_ef39fca0e37395d07682124770fd3ad9.png" style="width: 150px;"/>
    a>
body>

插入图片

语法如下 即通过style设置图片大小,此处指定了宽和高,若只指定宽或高,则按比例放大缩小,此外style里可以直接填百分比,表示放大缩小,如style=“50%”

如果要插入本地图片,需要在当前项目下创建static文件夹,并将离线图片存放在static文件夹中
python web开发(二):HTML标签语言_第3张图片
我们得到如下效果
python web开发(二):HTML标签语言_第4张图片
标签嵌套:点击图片跳转到对应的网站

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hellotitle>
head>
<body>
    <div>
        <a href="https://consumer.huawei.com/cn/phones/" target="_blank">
            <img src="/static/img.png" style="width: 200px; height: 200px">
        a>
    div>
body>
html>

列表

无序列表

<body>
<ul>
  <li>中国移动li>
  <li>中国联通li>
  <li>中国铁塔li>
  <li>中国电信li>
ul>
<body>

有序列表

<body>
<ol>
  <li>中国移动li>
  <li>中国联通li>
  <li>中国铁塔li>
  <li>中国电信li>
ol>
body>

效果如下
python web开发(二):HTML标签语言_第5张图片

表格

<body>
  <h1>表格h1>
  <table border="1">
    <thead>
      <tr> <th>idth> <th>nameth> <th>ageth> tr>
    thead>
    <tbody>
      <tr> <td>01td> <td>xiaofangtd> <td>18td> tr>
      <tr> <td>02td> <td>xiaomingtd> <td>19td> tr>
      <tr> <td>03td> <td>xiaohuatd> <td>20td> tr>
    tbody>
  table>
body>

表格以

开头,中间包括表头和表主体代表一行,在表头中一列用
表示,在主体部分一列用表示,上述代码结果如下, border=1使得表格有线条(无该参数时只显示文字,没有线条分割)
python web开发(二):HTML标签语言_第6张图片

Input系列

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

<h2>文本和密码h2>
  
  <input type="text" />
  <input type="password" />

  
<h2>选择文件h2>>
  <input type="file" />

  
<h2>单选h2>
  <input type="radio" name="n1" /><input type="radio" name="n1" />
<h2>多选h2>
  <input type="checkbox" /><input type="checkbox" /><input type="checkbox" />Rap
  <input type="checkbox" />篮球

  
<h2>按钮:普通按钮和提交表单h2>
  <input type="button" value="提交"/>	普通按钮
  <input type="submit" value="提交"/>	提交表单

<h4>下拉框h4>
<select>
	<option>北京option>
	<option>上海option>
	<option>深圳option>
select>

<h4>多行文本h4>
<textarea rows="3">textarea>

body>
html>

在多行文本中通过参数rows指定文本行数,如果文本rows没有指定,会根据输入内容自动调整框的大小
python web开发(二):HTML标签语言_第7张图片
python web开发(二):HTML标签语言_第8张图片

提交表单

  • GET 方法与 POST 方法的区别
    GET: 可通过URL/表单提交
    POST: 只能通过表单提交,提交数据不在URL而是在请求体中

  • 表单可以提交的前提条件:
    提交方式: method=get or post
    提交地址: action=“/xxx/xxx/xxx”
    form标签里面必须有一个submit标签
    每个标签有name属性

如下所示

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册title>
head>
<body>
    
    <form method="post" action="/do/post/regist">
        <h4>用户注册h4>
        <div>
            用户名: <input type="text" name="username" />
        div>

        <div>
            
            密码: <input type="password" name="passwd" />
        div>

        <div>
            
            性别:
            <input type="radio" name="gender" value="1"><input type="radio" name="gender" value="2">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 value="bj">北京option>
                <option value="sh">上海option>
                <option value="hz">杭州option>
            select>
        div>

        <div>
            自我评价:
            <textarea name="slef review">textarea>
        div>
        <div>
        
        <input type="submit" value="submit提交">
        div>

        <div>
            <input type="button" value="button提交">
        div>
    form>

body>
html>

后端程序中通过request.argsrequest.form获取前端传递过来的信息

from flask import Flask, render_template, request

app = Flask(__name__, template_folder="./templates")

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


@app.route("/do/get/regist", methods=["GET"])
def do_get_regist():
    # GET方式提交信息获取
    submit_info = request.args
    print(submit_info)
    # POST方式提交信息获取
    # submit_info = request.form
    return str(submit_info)


@app.route("/do/post/regist", methods=["POST"])
def do_post_regist():
    # POST方式提交信息获取
    submit_info = request.form
    return str(submit_info)

if __name__ == "__main__":
    app.run(port=5001)

效果如下
python web开发(二):HTML标签语言_第9张图片
返回参数如下
在这里插入图片描述

  • 需要返回信息内容时,个标签都需设置name属性
  • 对于上面的性别、爱好、城市的标签,由于没有输入内容,需要设定value属性,对应选择对应的值
  • 对于表单,也可通过如下方式获取指定属性的值
@app.route("/do/post/regist", methods=["POST"])
def do_post_regist():
    # POST方式提交信息获取
    # submit_info = request.form
    # 也可获取单一的值
    usrname = request.form.get("username")
    pwd = request.form.get("passwd")
    # 多选的情况
    hobby_list = request.form.getlist("hobby")
    return str(usrname)
  • 在后端可以将POST和GET请求方式合并,如下所示

# 指定即可接收GET也可接收POST请求
@app.route("/regist", methods=["GET", "POST"])
def regist():
    if request.method == "GET":
        submit_info = request.args
        return str(submit_info)
    else:
        usrname = request.form.get("username")
        pwd = request.form.get("passwd")
        return str(usrname)
  • 此处仅介绍了非常常用的标签,能覆盖开发需要的90%,其余的可在具体开发中查手册

参考

Django web开发(一) - 前端
最新Python的web开发全家桶(django+前端+数据库)

你可能感兴趣的:(Python,前端,python,html)