文章目录
- 前言
- 一、快速开发网站最简模板
- 二、HTML标签
- 1.编码
- 2.title
- 3.标题
- 4.div和span
- 5.超链接
- 6.图片
- 7.列表
- 8.表格
- 9.input系列
- 10.下拉框
- 11.多行文本
- 三、GET方式和POST方式
-
前言
HTML的全称为超文本标记语言，是一种标记语言，是网站开发前端的一部分。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。且HTML与编程语言无关，是一门独立的语言。本篇博客将介绍HTML的基本内容。
一、快速开发网站最简模板
- 在Terminal中输入
pip install flask - 主要内容：
- 在Pycharm中创建.py文件，不用HMTL文件
| from flask import Flask,render_template |
| |
| app = Flask(__name__) |
| |
| |
| |
| @app.route("/show/info") |
| def index(): |
| return "中国联通" |
| |
| if __name__ == '__main__': |
| app.run() |
- 在Pycharm中创建.py文件，且用HMTL文件（存放在template文件夹中）
.py文件
| from flask import Flask,render_template |
| |
| app = Flask(__name__) |
| |
| |
| |
| @app.route("/show/info") |
| def index(): |
| |
| |
| return render_template("index.html") |
| |
| if __name__ == '__main__': |
| app.run() |
.html文件
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>我的国家</title> |
| </head> |
| <body> |
| <h1>中国</h1> |
| </body> |
| </html> |
文件布局：
- 运行后即可得到网址，加上/show/info即可访问
二、HTML标签
1.编码
2.title
3.标题
| <h1>一级标题</h1> |
| <h2>二级标题</h2> |
| <h3>三级标题</h3> |
| <h4>四级标题</h4> |
| <h5>五级标题</h5> |
| <h6>六级标题</h6> |
4.div和span
- 功能：实现划分板块
- div：一个占一整行，块级标签
- span：自己多大占多少，行内标签，内联标签
- 可以进行嵌套
| <div>内容</div> |
| <span>内容</span> |
5.超链接
- 功能：实现网站跳转
- 跳转到别人网站：网址必须全
- 跳转到自己网站：可以不需要前缀，比如：“/get/news”
6.图片
- 如果是自己的图片，要把图片放在static文件夹（自己创建）中
- 如果是别人的图片，要注意是否有防盗链
| |
| <img src="图片地址" style="height:100px; width:200px;"/> |
| |
| |
| <img src="图片地址" style="height:10%; width:20%;"/> |
7.列表
| <ul> |
| <li>内容</li> |
| <li>内容</li> |
| <li>内容</li> |
| </ul> |
8.表格
- thead是表头
- tbody是表主体
- <table border=“1”>添加边框
| <table> |
| <thead> |
| <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> |
| </thead> |
| |
| <tbody> |
| <tr> <th>1</th> <th>小明</th> <th>20</th> </tr> |
| <tr> <th>2</th> <th>小红</th> <th>20</th> </tr> |
| <tr> <th>3</th> <th>小亮</th> <th>20</th> </tr> |
| </tbody> |
| </table> |
9.input系列
| <input type="radio" name="n1"> 男 |
| <input type="radio" name="n1"> 女 |
| <input type="checkbox"> 篮球 |
| <input type="checkbox"> 足球 |
| <input type="checkbox"> 排球 |
| |
| <input type="button" value="提交"> |
| |
| |
| <input type="submit" value="提交"> |
| <form method="方式get或者post" action="提交地址"> |
| iput系列 |
| 按钮 |
| </form> |
10.下拉框
| <select> |
| <option>北京</option> |
| <option>上海</option> |
| <option>深圳</option> |
| </select> |
| <select multiple> |
| <option>北京</option> |
| <option>上海</option> |
| <option>深圳</option> |
| </select> |
11.多行文本
三、GET方式和POST方式
两种方式都要导入request方法
1.GET请求
- 实现：URL方法、表单提交
- 现象：向后台传入数据会拼接在URL上
.py文件
| 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) |
.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> |
2.POST请求
- 实现：表单提交
- 现象：提交数据不显示在URL上，而是在请求体中
.py文件部分
| @app.route("/post/register", methods=['POST']) |
| def post_register(): |
| get_info = request.form |
| return get_info |
.html文件部分
| <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> |
| |
- 表单数据提交优化：添加name和value属性
- 在控制台输出数据，依靠导入的request方法
| @app.route("/post/register", methods=['POST']) |
| def post_register(): |
| get_info = request.form |
| |
| username = request.form.get("username") |
| passwd = request.form.get("passwd") |
| sex = request.form.get("sex") |
| hobby_list = request.form.getlist("hobby") |
| city = request.form.get("city") |
| more = request.form.getlist("textarea") |
| |
| print(username, passwd, sex, hobby_list, city, more) |
| |
| return get_info |
| @app.route("/post/register", methods=['GET','POST']) |
