文章目录
- 一、网站快速开发
- 二、浏览器识别标签
-
- 1.< head >
- 2.< body >
-
- 2.1 表题级别
- 2.2 div和span
- 2.3 超链接
- 2.4 图片
- 三、嵌套标签
- 小结
一、网站快速开发
#pip install flask
from flask import Flask app = Flask(__name__) ##创建网站//show/info 和函数 index 的对应关系 ##以后用户会访问浏览器 /show/info ，王者自动执行 index @app.route("/show/info") def index(): #return "练习快速发布网站" return "<h1>练习</h1><span style = 'color:red;'>快速开发网站</span>" if __name__ == '__main__': app.run() #需要手动停止 运行结果： 
输入结果网站，记得添加/show/info，你可以看到获得的网页
- 别人的好看vs咱们的难看
??浏览器可以识别许多标签 例如：
??< 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 "练习快速发布网站" #return "<h1>练习</h1><span style = 'color:red;'>快速开发网站</span>" #Flask本文件将自动打开并读取内容，并将内容返回给用户。 #默认:去当前项目目录的templates在文件夹中找到。 return render_template("index.html")#文件路径 if __name__ == '__main__': app.run() ??在当前目录中新建文件夹，命名为templates，并在文件夹中新建HTML文件命名为index”。 ??默认代码块将被获得，我们的文本将添加到自定义内容的位置。再次运行，您也可以得到刚才的网页。
二、浏览器识别标签
1.< head >
1.1 编码
<meta charset="UTF-8" >
1.2 浏览器表头
<title> 我的网页标题</title>
结果：
2.< body >
2.1 表题级别
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
结果：
2.2 div和span
<div> 内容 </div>
<span>内容</span>
- div，一个人占一整行。【块级标签】
- span，自己有多大就占多少。【行内标签、内联标签】
注意：这两个标签比较素，没有其他功能。后续可以用css改变样式。
2.3 超链接
跳转到其他的网站（写全）
<a href = "https://space.bilibili.com/374377" >点击跳转</a>
跳转到自己的网站（可以简写）会在当前网址跳转
<a href = "http://127.0.0.1:5000/get/news" > 点击跳转</a>
<a href = "/get/news" > 点击跳转</a>
若实现新建页面跳转，加上target="_blank"即可。
<a href="http://127.0.0.1:5000/get/news" target="_blank"> </a>
2.4 图片
自闭合标签
<img src = "图片地址"/>
直接显示别人的图片地址：
<img src = "https://i2.hdslb.com/bfs/archive/9a285b5eff9696ed1057dca77e494697bc40dd8d.jpg"/>
但是有风险
显示自己的图片：
- 自己项目中创建：ststic目录，图片要放在ststic中
- 在页面上引入图片
<img src = "/ststic/图片名"/>
设置图片大小
只设置高或宽时，图片按比例缩小
<img src = "/ststic/图片名" style= "height:100px"/>
可以按px像素设置高或宽
<img src = "/ststic/图片名" style= "height:100px;wight:100px"/>
也可以按百分比设置高或宽
<img src = "/ststic/图片名" style= "height:10%""/>
三、标签的嵌套
<body>
<h1>商品列表</h1>
<a href="https://www.mi.com/redmiwatch2">
<img src="/static/a1.png" style="width:150px">
</a>
<a href = "https://www.mi.com/shouhuan7">
<img src="/static/a2.png" style="width:150px">
</a>
</body>
能实现点击图片进行当前页面跳转的功能。
小结
以上就是今天要讲的内容，通过Flask快速搭建网页，并了解了浏览器能够识别的一些标签。
块级标签
<h1> </h1>
<div> </div>
行内标签
<span> </span>
<a> </a>
<img />
以及标签里的嵌套
<div>
<span>xxx </span>
<a>
<img />
</a>
</div>