【Python Web开发】前端学习笔记一【HTML】
发布时间
阅读量：
阅读量
目录
一、安装flask
二、flask快速开发网站
三、HTML标签（浏览器能识别的标签）
2.1 编码（head)
2.2 title(head)
2.3 标题
2.4 div和span
2.5、练习
2.6、超链接
2.7 图片
2.8 列表
2.9 表格
2.10 input系列
2.11 下拉框
2.12 多行文本
四、综合一下
一、安装flask
pip install flask二、flask快速开发网站
（1）
from flask import Flask
app = Flask(__name__)
#创建了网址/show/info和函数index之后
#在浏览器访问地址后，自动执行函数index
@app.route("/show/info")
def index():
return "中国联通"
if __name__ == "__main__":
app.run()
#在网址后面加/show/info即可
#注意：停止
（2）写入到文件
from flask import Flask,render_template
app = Flask(__name__) #app = Flask(__name__,templates="xxxx")
@app.route("/show/info")
def index():
#默认：当前目录的templates文件夹下
return render_template("index.html")#文件路径
if __name__ == "__main__":
app.run()
#定义端口：app.run(host=",poor=)三、HTML标签（浏览器能识别的标签）
2.1 编码（head)
<meta charset="UTF-8"> #编码类型2.2 title(head)
<head>
<meta charset="UTF-8">
<title>我的世界</title>
</head>
2.3 标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的世界</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
2.4 div和span
(1)div （块级标签，占一整行 ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的世界</title>
</head>
<body>
<div>世界1</div>
<div>世界2</div>
</body>
</html>
(2) span （行内标签，联内标签）有多大占多大
（I）分开,中间有空格
<body>
<span>世界3</span>
<span>世界4</span>
</body>
（2）连着 ，中间无空格
<body>
<span>世界5</span><span>世界6</span>
</body>
2.5、练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
<body>
<h1>中国联通</h1>
<div>
<span style="color:red">时间：</span>
<span>2021-11-11</span>
</div>
<div>
中国联合网络通新集团有限公司，（简称"中国联通"）于2009年1月6日由中国网通和原中国联通合并重组而成。
</div>
<h2>广西联通分部</h2>
<div>
<span style="color:red">时间：</span>
<span>2021-11-11</span>
</div>
<div>
中国联通是目前唯一一家在集团层面整体进行混合所有制改革试点的中央企业。
</div>
</body>
</html>
2.6、超链接
在当前页面打开
在新的Tab页面打开
（1）跳转到其他网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
<body>
<h1>中国联通</h1>
<div>
<span style="color:red">时间：</span>
<span>2021-11-11</span>
</div>
<div>
中国联合网络通新集团有限公司，（简称"中国联通"）于2009年1月6日由中国网通和原中国联通合并重组而成。
<a href="https://www.chinaunicom.com.cn/">点击跳转</a>
</div>
<h2>广西联通分部</h2>
<div>
<span style="color:red">时间：</span>
<span>2021-11-11</span>
</div>
<div>
中国联通是目前唯一一家在集团层面整体进行混合所有制改革试点的中央企业。
</div>
</body>
</html>
（2）跳转到自己网站的其他地址
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/show/info")
def index():
return render_template("index.html")
@app.route("/get/news")
def get_news():
return render_template("get_news.html")
if __name__ == "__main__":
app.run()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
<body>
<h1>中国联通</h1>
<div>
<span style="color:red">时间：</span>
<span>2021-11-11</span>
</div>
<div>
中国联合网络通新集团有限公司，（简称"中国联通"）于2009年1月6日由中国网通和原中国联通合并重组而成。
<a href="https://www.chinaunicom.com.cn/">点击跳转</a>
</div>
<h2>广西联通分部</h2>
<div>
<span style="color:red">时间：</span>
<span>2021-11-11</span>
</div>
<div>
中国联通是目前唯一一家在集团层面整体进行混合所有制改革试点的中央企业。
<a href="/get/news">查看更多</a>
</div>
</body>
</html>
get_news.htlm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>详细信息</h1>
</body>
</html>
2.7 图片
设置图片的高度和宽度
像素值<img style="height:100px; width:100px" " src="图片地址"/>
百分比 <img style="height:10%; width:10%" " src="图片地址"/>
（1）显示别人网站中的图片
（2）显示自己的图片，将图片放入到创建static目录中
R-C.jpj
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
<body>
<h1>中国联通</h1>
<div>
<span style="color:red">时间：</span>
<span>2021-11-11</span>
</div>
<div>
中国联合网络通新集团有限公司，（简称"中国联通"）于2009年1月6日由中国网通和原中国联通合并重组而成。
<a href="https://www.chinaunicom.com.cn/">点击跳转</a>
<img src="https://pic1.zhimg.com/v2-f03c27d20a3abf06339dbaa5df1234f0_r.jpg"/>
</div>
<h2>广西联通分部</h2>
<div>
<span style="color:red">时间：</span>
<span>2021-11-11</span>
</div>
<div>
中国联通是目前唯一一家在集团层面整体进行混合所有制改革试点的中央企业。
<a href="/get/news">查看更多</a>
<img style="height:100px; width:100px" src="/static/R-C.jpg"/>
</div>
</body>
</html>
2.8 列表
(1)
</div>
<h1>运营商列表</h1>
<div>
<ul>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ul>
</div>
(2)有序列表
<h1>运营商列表</h1>
<div>
<ol>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ol>
</div>
2.9 表格
<h1>用户信息</h1>
<table>
<thead>
<tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
</thead>
<tbody>
<tr> <th>1</th> <th>xiaoming</th> <th>19</th> </tr>
<tr> <th>2</th> <th>xiaomi</th> <th>18</th> </tr>
<tr> <th>3</th> <th>xiaomin</th> <th>20</th> </tr>
<tr> <th>4</th> <th>xiami</th> <th>19</th> </tr>
</tbody>
</table>
<table border="1">
</table>
2.10 input系列
<h1>输入内容</h1>
<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">乒乓球
<input type="checkbox">棒球
<input type="button" value="提交">
<input type="submit" value="提交">
2.11 下拉框
（1）单选
<h1>下拉框</h1>
<select >
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
（2）多选
<h1>下拉框</h1>
<select multiple>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
2.12 多行文本
<h1>多行文本</h1>
<textarea></textarea>
四、综合一下
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/register")
def register():
return render_template("register.html")
if __name__ == "__main__":
app.run()
templates/register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<div>
用户名：<input type="text"/>
</div>
<div>
密码：<input type="password"/>
</div>
<div>
性别：
<input type="radio"/>男
<input type="radio"/>女
</div>
<div>
爱好：
<input type="checkbox"/>篮球
<input type="checkbox"/>足球
<input type="checkbox"/>乒乓球
<input type="checkbox"/>排球
</div>
<div>
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
</div>
<div>
擅长领域：
<select multiple>
<option>python语言</option>
<option>C++语言</option>
<option>Java语言</option>
<option>C语言</option>
</select>
</div>
<div>
备注：
<textarea></textarea>
</div>
<div>
<input type="button" value="submit按钮">
<input type="submit" value="submit按钮">
</div>
</body>
</html>
全部评论 (0)
还没有任何评论哟~