堂-DayDayUP VIM Linux Life
堂-DayDayUP
VIM Linux Life

1.HTML标签

已发表 -更新

标签

html示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>中国联通</h1>
</body>
</html>

标准格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>内容</h1>
</body>
</html>

head

<head>
    <meta charset="UTF-8">      <!--编码格式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>

标题

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

div和span

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

这两上标签比较素 + CSS样式

<div>内容</div>

<span>abcd</span>

超链接

选择跳转自己网站的地址,或者跳转外部的网站

在新的 Tab 标签页打开链接

  • 添加 target="_blank"
<body>
    <a href="/get/news">点击跳转新闻页</a></br>
    <a href="https://v.vimll.com:9999">点击跳转自己的网站</a></br>
    <a href="http://www.baidu.com">点击跳转别人的网站百度</a>
    <!--标签的嵌套，点击图片跳转新标签页-->
    <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>

图片

<body>
    <h1>我是内部链接，显示图片，原比例</h1>
    <img src="https://t7.baidu.com/it/u=848096684,3883475370&fm=193&f=GIF"/>
    <!--style="height: 100px;width: 150px;"可只设置单一参数原比例自动缩放-->
    <h1>显示自己本地的图片只设置高</h1>
    <img style="width: 200px" src="/static/haha.png"/>
    <h1>显示自己本地的图片并设置宽高</h1>
    <img style="height: 100px" src="/static/haha.png"/>
</body>

小结

- 块级标签
    - <h1></h1>
    - <div></div>

- 行内标签
    - <span></span>
    - <a></a>
    - <img />

标签的嵌套

实现: 点击图片,跳转至指定页面

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

列表

无序列表

<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>

有序列表

<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

表格

<tr><th>ID</th><th>姓名</th><th>年龄</th></tr>   一行三列
<tr></tr>表示行
<th></th>表示列
<td>标签用于定义表格中的单元格。它是<tr>标签的子元素，表示表格中的每个数据单元。

为表格增加边框 <table border="1">
<body>
    <table border="1">    <!--border增加边框-->
        <thead>
            <tr><th>ID</th><th>姓名</th><th>年龄</th></tr>
        </thead>
        <tbody>
            <tr><td>10</td><td>张三</td><td>20</td></tr>
            <tr><td>11</td><td>李四</td><td>20</td></tr>
            <tr><td>12</td><td>王五</td><td>20</td></tr>
            <tr><td>13</td><td>赵六</td><td>20</td></tr>
        </tbody>
    </table>
</body>

imput系列

<!-- 文本与密码 -->
<input type="text" />
<input type="password" />

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

<!-- 单选框 同名互斥 -->
<input type="radio" name="n1" />男
<input type="radio" name="n1" />女

<!-- 复选框 -->
<input type="checkbox" />唱
<input type="checkbox" />跳
<input type="checkbox" />Rap
<input type="checkbox" />篮球

<!-- 按钮 -->
<input type="button" value="提交"/> 普通按钮
<input type="submit" value="提交"/> 提交表单

下拉框

<!-- 下拉框 multiple可多选 -->
<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
    <option>广州</option>
    <option>杭州</option>
    <option>南京</option>
    <option>成都</option>
</select>

多行文本

<!-- 多行文本 大小分别在cols属性（水平方向）和rows属性（垂直方向）中确定最大字符数 -->
<textarea cols="10" rows="3"></textarea>

用户注册案例

GET 方法与 POST 方法的区别

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

表单可以提交的前提条件:

  • 提交方式: method="get"
  • 提交地址: action="/xxx/xxx/xxx"
  • 在form标签里面必须有一个submit标签
  • 每个标签有name属性

GET 方式

修改app.py,导入request方法,使用/do/register接收用户数据并展示

from flask import Flask, render_template, request

app = Flask(__name__)

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

@app.route("/do/register", methods=['GET'])
def do_register():
    get_info = request.args
    return get_info

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5200, debug=True)

提交后URL变化：http://168.12.1.50:5100/do/register?username=tang&password=123

{
"password": "123",
"username": "tang"
}

<!--修改templates下的register.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>用户注册</h1>
    <form action="/do/register" method="get">
        <div>
            用户名: <input type="text" name="username">
        </div>
        <div>
            密码: <input type="password" name="passwd">
        </div>

        <input type="submit" value="提交">
    </form>
</body>
</html>

POST 方式

修改app.py

@app.route("/post/register", methods=['POST'])
def post_register():
    get_info = request.form
    return get_info

提交后URL变化：http://168.12.1.50:5100/post/register

{
"password": "123",
"username": "tang"
}

<!--修改register.html <form action="/post/register" method="post"> -->
<body>
    <h1>用户注册</h1>
    <form action="/post/register" method="post">
        <div>
            用户名: <input type="text" name="username">
        </div>
        <div>
            密码: <input type="password" name="passwd">
        </div>
        <input type="submit" value="提交">
    </form>
</body>

表单数据提交优化

修改 register.html 添加 name 与 value 属性

@app.route("/register", methods=['GET', 'POST'])
def register():
    if request.method == "GET":
        return render_template("register.html")
    else:
        # get_info = request.form

        username = request.form.get("username")
        password = request.form.get("password")
        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.getlist("备注")

        print(username, password, gender, hobby_list, city, skill_list, more)
        # tang 123456 男 ['篮球', '足球', '乒乓球'] 北京 ['吃饭', '睡觉', '游戏'] ['哈哈哈']
        get_info = request.form
        return get_info
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<body>
    <div><h3>用户注册</h3></div>

    <form action="/register" method="post">
        <div>
            用户名：<input type="text" name="username"/>
        </div>
        <div>
            密码：<input type="password" name="password" />
        </div>
        <div>
            性别：
                <input type="radio" name="gender" value="男" />男 
                <input type="radio" name="gender" value="女" />女
        </div>
        <div>
            爱好：
                <input type="checkbox" name="hobby" value="篮球"/>篮球
                <input type="checkbox" name="hobby" value="足球"/>足球
                <input type="checkbox" name="hobby" value="乒乓球" />乒乓球
        </div>
        <div>
            城市:
            <select name="city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="深圳">深圳</option>
            </select>
        </div>
        <div>
            特长:
            <select name="skill" multiple>
                <option value="吃饭">吃饭</option>
                <option value="睡觉">睡觉</option>
                <option value="游戏">游戏</option>
            </select>
        </div>
        <div>
            备注: <textarea cols="30" rows="10"  name="备注"></textarea>
        </div>
        <div>
            <input type="button" value="button提交">
            <input type="submit" value="submit提交">
        </div>
    </form>
</body>
</html>