HTML介绍
HTML是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
1，建立（通过flask框架）
from flask import Flask,render_template #flask环境配置：pip install flask app = Flask(__name__) @app.route("/1") #进入网站后需要url后拼接“/1”， def index(): return render_template("1.html") #自动返回到templates文件夹内的1.html文件 #html文件需要放在temlates文件夹内 if __name__ == '__main__': app.run(host="",port=5418) #host为地址，port为端口
利用python建立一个前端网站
2，HTML
HTML网站基础
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">编码方式 <title>Title</title>网站名 </head> <body> 网站内容 </body> </html>
标签(body)
块级标签 <h1></h1>~~~<h2></h2>#随着h1的增加，字体变小，该标签单独占一行 <div>自己单独站一整行</div> 行内标签 <span style标签内的格式='color:red'>自己多大</span><span>就占多大</span> <a></a> <img /> 标签可以结合使用
超链接
<a href="URL"></a>跳转到其他网站 <a href="URL" target="_blank"></a>通过新标签跳转到其他网站 <a href="/xxx/xxx"></a>跳转到templates下的网站， eg：1.html
图片
<img src="图片URL"/>添加其他网站的图（小心防盗链） <img src="/static/图片"/>添加自己的图片，需要先建立static文件夹 <img src="URL" style="height:111px; width:222px"/> px为像素 <img src="URL" style="height:11%; width:22%"/> 缩减到原来的%xx <a></a>与<img />结合可建立超链接图片 eg：<a href="URL" target="_blank"> <img src="URL" style=""/> </a>
列表及表格
列表： 无序排列 <u1> <1i>1</1i> <1i>2</1i> <1i>3</1i> </u1> 有序排列（前面带数字） <ol> <1i>1</1i> <1i>2</1i> <1i>3</1i> </ol> 表格： <table border="1">边框 <thead>表头 <tr> <th>1</th> <th>2</th> <th>3</th> </tr>tr：一行，th：一列 </thead> <tbody>内容 <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table> 表格实例： <table border="1"> <thead> <tr> <th>姓名</th> <th>头像</th> <th>性别</th> <th>生日</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>派蒙</td> <td> <a href="https://baike.baidu.com/item/%E6%B4%BE%E8%92%99/22793938"> <img src="/static/派蒙.png" style="width: 50px"> </a> </td> <td>女</td> <td>6月1日</td> <td>蜜酱胡萝卜煎肉</td> </tr> </tbody> </table>
input
</table> <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="yes" /> 普通按钮 <input type="submit" value="yes" /> 可以提交数据的按钮，与<form>结合使用
下拉框及多行文本
下拉框： 单选下拉框 <select> <option>1</option> <option>2</option> <option>3</option> </select> 多选下拉框 <select multiple> <option>1</option> <option>2</option> <option>3</option> </select> 多行文本： <textarea rows="3"></textarea>rows为输入框高度
表单与提交
python
from flask import Flask,render_template, request app = Flask(__name__) @app.route('/first',methods=['POST','GET']) def first(): if request.method=="GET": return render_template("2.heml") else: user = request.form.get("user") password = request.form.get("password") a = request.form.get("性别") b = request.form.get("爱好") c = request.form.get("梦想") d = request.form.get("自我介绍") print(user,password,a,b,c,d,end='\n') print(request.args) return render_template("1.html") #@app.route('/first',methods=['GET'])#限制仅为get请求进入 @app.route("/nixt",methods=['POST'])#限制仅为post请求进入 def nixt(): print(request.form) return render_template("2.html") @app.route("/user") def user(): return render_template("user.html")
html（post与get提交）
<body> <div> <form method="get" action="/first"> <div> user <input type="text" name="user"/> <div/> <div> password<input type="text" name="password"/> </div> <div> <input type="radio" name="xingbie" value="男"/>男 <input type="radio" name="xingbie" value="女"/>女 </div> <input type="submit" value="登录"> </form> </div> <div> <form method="post" action="/nixt"> user <input type="text" name="user"/> password<input type="text" name="passwprd"/> <input type="submit" value="登录"/> </form> </div> </body>
