前端与HTML1

hyhyxyx

已于 2023-05-24 21:32:43 修改

阅读量96

点赞数 1

文章标签：前端 flask python

于 2023-05-24 21:20:07 首次发布

本文链接：https://blog.csdn.net/hyhyxyx/article/details/130855636

版权

前端与HTML1

目的：开发一个平台
	-前端开发 ：HTML、CSS、JavaScript
	-Web框架：接受请求并处理
	-MySQL数据库：存储数据
基于Flask Web框架先快速搭建一个网站
深入学习：基于Django框架

1、快速开发网站

pip install flask

如果报错，请设置一下系统代理

下载完成后，来尝试一下：

from flask import Flask    
app = Flask(__name__)

#创建了网址/show/info 和 函数index的对应关系
#以后用户在浏览器上访问 /show/info ,网站自动执行 index
@app.route("/show/info")
def index():
    return "终于成功了呜呜呜呜"

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

运行，得到
在这里插入图片描述

打开浏览器，输入此网址，发现
在这里插入图片描述

这是因为没有加上“/show/info"

在结尾加上之后，成功得到
在这里插入图片描述

结束了之后，让我们来看看这段代码中的一些知识点【并不是此次学习的重点，仅作了解】

关于flask的应用，在本次的学习中仅作了解，但如果想深入了解可看此教程https://dormousehole.readthedocs.io/en/latest/tutorial/index.html
首先我们导入了 Flask 类。该类的实例将会成为我们的 WSGI 应用。
接着我们创建一个该类的实例。第一个参数是应用模块或者包的名称。 __name__ 是一个适用于大多数情况的快捷方式。有了这个参数， Flask 才能知道在哪里可以找到模板和静态文件等东西。
然后我们使用 route() 装饰器来告诉 Flask 触发函数的 URL 。
函数返回需要在用户浏览器中显示的信息。默认的内容类型是 HTML ，因此字符串中的 HTML 会被浏览器渲染。
其他具体基础知识见https://dormousehole.readthedocs.io/en/latest/quickstart.html

下面继续：

浏览器可以识别很多标签+数据，例如：
	<h1>呜呜呜呜</h1>                          ->浏览器看见加大加粗
	<span style='color:red;'>成功了</span>    ->浏览器看见字体变红色
	
如果我们可以学会浏览器可识别的标签，我们的网站就可以控制页面长什么样子

如图：

在这里插入图片描述

Flask框架为了我们写标签方便，支持将字符串写到文件中去。

from flask import Flask,render_template
app = Flask(__name__)

#创建了网址/show/info 和 函数index的对应关系
#以后用户在浏览器上访问 /show/info ,网站自动执行 index
@app.route("/show/info")
def index():
    #return "终于成功了呜呜呜呜"
    #Flask内部会自动打开这个文件，并读取内容，将内容给用户返回
    #默认：去当前项目目录的templates文件夹中找
    return render_template("index.html")

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

在这里插入图片描述

注意这里一定要把templates文件夹和web.py放到同一个文件夹下，否则会得到500报错

2、浏览器能识别的标签

2.1 编码(head)

<meta charset="UTF-8">

文件的编码方式

2.2 Title(head)

<head>
    <meta charset="UTF-8">
    <title>Thello,xyx</title>
</head>

在这里插入图片描述

2.3 标题

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

在这里插入图片描述

2.4 div和span

<div>内容</div>
<span>asdfa</span>

div,一个人占一整行。【块级标签】
span,自己有多大就占多少。【行内标签、内联标签】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello,xyx</title>
</head>
<body>
    <div>有点小困</div>
    <div>无所谓哦！！！</div>
    <span>加油加油</span>
    <span>冲冲冲</span><span>!!!</span>
</body>
</html>

在这里插入图片描述

注意：这两个标签比较素，适合加CSS样式。

娱乐time

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello,xyx</title>
</head>
<body>
    <div>
        <span style="color: red">时间</span>
        <span>2023-5-24</span>
    </div>
    <div>有点小困</div>
    <div>无所谓哦！！！</div>
    <span>加油加油</span>
    <span>冲冲冲</span><span>!!!</span>
    <h1 style="color: blue">人困了要怎么办？？？</h1>
    <div>
        <div>很多人一到下午就容易犯困，此时喝咖啡又会影响晚上的睡眠。近日，美国“MSN健康”网总结了6种可以提神的方法，帮助你在困倦时打起精神。</div>

　　     <span>吃点健康零食。人的咀嚼动作会刺激脑神经，赶走疲倦感。建议吃点苹果、杏仁、小胡萝卜等低糖低脂零食。</span>
　　
        <span>跟着音乐哼歌。研究表明，听着音乐哼歌可以提高人体的能量水平。如果觉得哼歌效果不佳，还可以站起来，边哼歌边扭动身体，前提是不要打扰他人。</span>
　　
        <span>站起来。犯困时，可以站起来，在桌子旁边活动一下四肢或做一下原地跑步，让血液流速变快，以此激活疲惫的大脑。</span>

        <span>做益智游戏。如果犯困时不能站起来，可以做填字游戏、数独等，这样也能活跃你的大脑。</span>
    </div>

    <h1><div style="color: red">xyx表示，无所谓，睡一会就不困啦！！！</div></h1>
</body>
</html>

得到的结果是这样的，好玩的嘞！！！！

在这里插入图片描述

2.4.5 超链接

跳转到其他的网站：
<a href="http://health.people.com.cn/n1/2016/0908/c21471-28700308.html">点这里哦</a>

在这里插入图片描述

跳转到自己网站其他的地址：
<a href="http://127.0.0.1:5000/get/news">点这里哦</a>
<a href="/get/news">点这里哦</a>

#当前页面打开
<a href="/get/news">点这里哦</a>

#在新的Tab页面打开
<a href="/get/news" target="_blank">点这里哦</a>

在这里插入图片描述

点击最下面的超链接

在这里插入图片描述

代码实现：

from flask import Flask, render_template
app = Flask(__name__)

#创建了网址/show/info 和 函数index的对应关系
#以后用户在浏览器上访问 /show/info ,网站自动执行 index
@app.route("/show/info")
def index():
    return render_template("index.html")

@app.route("/get/news")
def news_get():
    return render_template("news.html")


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

news.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>因为我懒，这里还没有什么news</h1>
</body>
</html>

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello,xyx</title>
</head>
<body>
    <div>
        <span style="color: red">时间</span>
        <span>2023-5-24</span>
    </div>
    <div>有点小困</div>
    <div>无所谓哦！！！</div>
    <span>加油加油</span>
    <span>冲冲冲</span><span>!!!</span>
    <h1 style="color: blue">人困了要怎么办？？？</h1>
    <a href="http://health.people.com.cn/n1/2016/0908/c21471-28700308.html">点这里哦</a>
    <div>
        <div>很多人一到下午就容易犯困，此时喝咖啡又会影响晚上的睡眠。近日，美国“MSN健康”网总结了6种可以提神的方法，帮助你在困倦时打起精神。</div>

　　     <span>吃点健康零食。人的咀嚼动作会刺激脑神经，赶走疲倦感。建议吃点苹果、杏仁、小胡萝卜等低糖低脂零食。</span>
　　
        <span>跟着音乐哼歌。研究表明，听着音乐哼歌可以提高人体的能量水平。如果觉得哼歌效果不佳，还可以站起来，边哼歌边扭动身体，前提是不要打扰他人。</span>
　　
        <span>站起来。犯困时，可以站起来，在桌子旁边活动一下四肢或做一下原地跑步，让血液流速变快，以此激活疲惫的大脑。</span>

        <span>做益智游戏。如果犯困时不能站起来，可以做填字游戏、数独等，这样也能活跃你的大脑。</span>
    </div>

    <h1><div style="color: red">xyx表示，无所谓，睡一会就不困啦！！！</div></h1>
    <a href="/get/news">点击这里，查看xyx最新news!!</a>
</body>
</html>

图片

<img src="图片地址"/>

直接引用别人的图片地址（防盗链）
<img src="别人的图片地址"/>

<img src="自己图片地址"/>
显示自己的图片：
	-自己项目中创建：static目录，图片要放在static
	-在页面上引入图片
		<img src="/static/first.webp">

在这里插入图片描述

还可以修改图片的高度和宽度：
<img style="height: 100px;width 100px" src="/static/first.webp">
可以更改比例：
<img style="height: 10%;width 10%" src="/static/first.webp">

小结

学习的标签

<h1></h1>
<div></div>
<span></span>
<a></a>
<img />

划分

-块级标签
	<h1></h1>
	<div></div>
-行内标签
	<span></span>
	<a></a>
	<img />

嵌套

<div>
    <span>xxx</span>
    <a><img src="xxx" /></a>
</div>

hyhyxyx

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫