python的web全家桶笔记1（前端+数据库+Django）

已于 2023-11-13 22:16:14 修改
阅读量152 收藏
点赞数
文章标签： python 笔记 django
于 2023-11-12 21:01:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74384334/article/details/134363298
版权

前端

HTML

目录

前端

HTML

1、h标签

1、div标签

3、span标签

4、图片标签<img />

5、列表标签：将你所要排列的内容进行排列

1、首先要导入模块flask——通过在cmd中pip install flask（Windows的操作方法）

基于本地ip开发一个极简网站：

from flask import Flask,render_template
app=Flask(__name__)
 
@app.route("/show/info")
#创建了网址 /show/info 和 函数index 的对应关系
def index():
     return "浩、辉、勇都好帅"
if __name__ == '__main__':
    app.run()

index()

结果：

2、对于flask模块，我们可以创建一个templates文件，再templates里面写一个html文件，我们可以把服务器能识别的所有标签都写进templates里面的html，Flask会自动读取这个文件的标签，在这之前我们要先导入render_template

创建template的步骤：点击Directory——取名templates——点击HTML File创建——取名

代码为：

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

@app.route("/show/info")
#创建了网址 /show/info 和 函数index 的对应关系
def index():
#我们可以把服务器能识别的所有标签都写进templates里面的html文件，在这里会自动找到这个文件并且读取内容
   return render_template("test.html")
if __name__ == '__main__':
    app.run()
index()

基础标签

1、标题标签

语法：<h1>内容</h1>，此处为一级标题

同样的我们还有：

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>中国联通</h1>
<h2>广东联通</h2>

</body>
</html>

属性：块级标签，自己占一行

结果：

1、标题标签

语法<div>内容</div>

属性：块级标签，自己占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</div>中国电信</div>
<div>中国移动</div>

</body>
</html>

结果：

3、span标签

语法：<span>asdfa</span>

属性：本身有多大就占多大，属于行内标签、内联标签

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span>中国电信</span>
<span>中国移动</span>

</body>
</html>

结果：

以上的标签都比较素，搭配css后变得多样

4、超链接和div

4.1 超链接：实现跳转到某个网页的a标签

语法：<a href="你要跳转到的网址">点击跳转</a>，eg：

<a href="https://iservice.10010.com/e5/index.html">点击跳转</a>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>中国联通</h1>
<div>
    <span style="color:red">时间：</span>
    <span>2021-11-11</span>
</div>
<div>中国联合网络通信集团有限公司（简称“中国联通”）于2009年1月6日由原中国网通和原中国联通合并重组而成，公司在国内31个省（自治区、直辖市）和境外多个国家和地区设有分支机构，以及130多个境外业务接入点，拥有覆盖全国、通达世界的现代通信网络和全球客户服务体系。“大联接”用户规模超过9亿。</div>
<a href="https://iservice.10010.com/e5/index.html">点击跳转</a>
<h2>中国移动</h2>
<span>中国电信</span>
<span>中国移动</span>

</body>
</html>

结果：

这个是跳转到其他网站

我们也可以跳转到自己网站的其他的地址

<a href="/get/news
">点击跳转</a>，我们可以不用写前面的标签，只需要写这个后缀就可以了
代码1：

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

@app.route("/show/info")
#创建了网址 /show/info 和 函数test 的对应关系
def test ():
#我们可以把服务器能识别的所有标签都写进templates里面的html文件，在这里会自动找到这个文件并且读取内容
   return render_template("text.html")



@app.route("/get/news")
#创建了网址 /get/news 和 函数 的对应关系
def get_news():
#我们可以把服务器能识别的所有标签都写进templates里面的html文件，在这里会自动找到这个文件并且读取内容
   return render_template("get_news.html")
if __name__ == '__main__':
      app.run()
test()

text.html文件的代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>中国联通</h1>
<div>
    <span style="color:red">时间：</span>
    <span>2021-11-11</span>
</div>
<div>中国联合网络通信集团有限公司（简称“中国联通”）于2009年1月6日由原中国网通和原中国联通合并重组而成，公司在国内31个省（自治区、直辖市）和境外多个国家和地区设有分支机构，以及130多个境外业务接入点，拥有覆盖全国、通达世界的现代通信网络和全球客户服务体系。“大联接”用户规模超过9亿。</div>
<a href="https://iservice.10010.com/e5/index.html">点击跳转</a>
<h2>中国移动</h2>
<a href="/get/news">查看更多</a>
<span>中国电信</span>
<span>中国移动</span>

</body>
</html>

get_news.html文件的代码3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好</title>
</head>
<body>
<h1>详细信息</h1>
<div>你好</div>
</body>
</html>

结果：

4、图片标签<img />

标签语法:<img src="图片的地址"/>

eg：<img src="//file.51pptmoban.com/images/hd/ppt5.jpg" alt="爱设计PPT免费模板" width="390" height="59">

如此便可以直接显示别人的图片地址（但会存在防盗链）

text.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>中国联通</h1>
<div>
    <span style="color:red">时间：</span>
    <span>2021-11-11</span>
</div>
<div>中国联合网络通信集团有限公司（简称“中国联通”）于2009年1月6日由原中国网通和原中国联通合并重组而成，公司在国内31个省（自治区、直辖市）和境外多个国家和地区设有分支机构，以及130多个境外业务接入点，拥有覆盖全国、通达世界的现代通信网络和全球客户服务体系。“大联接”用户规模超过9亿。</div>
<a href="https://iservice.10010.com/e5/index.html">点击跳转</a>
<h2>中国移动</h2>
<a href="/get/news">查看更多</a>
<img src="//file.51pptmoban.com/images/hd/ppt5.jpg" alt="爱设计PPT免费模板" width="390" height="59">
<span>中国电信</span>
<span>中国移动</span>

</body>
</html>

结果：

同样的我们可以：<img src="自己图片的地址"/> 

步骤：在directory中创建——命名为static的目录——把你的图片放进去

语法：<img src="/static/你命名的图片名.后缀"/> 

text.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>中国联通</h1>
<div>
    <span style="color:red">时间：</span>
    <span>2021-11-11</span>
</div>
<div>中国联合网络通信集团有限公司（简称“中国联通”）于2009年1月6日由原中国网通和原中国联通合并重组而成，公司在国内31个省（自治区、直辖市）和境外多个国家和地区设有分支机构，以及130多个境外业务接入点，拥有覆盖全国、通达世界的现代通信网络和全球客户服务体系。“大联接”用户规模超过9亿。</div>
<a href="https://iservice.10010.com/e5/index.html">点击跳转</a>
<h2>中国移动</h2>
<img src="/static/fan.jpg"/>
<a href="/get/news">查看更多</a>
<img src="//file.51pptmoban.com/images/hd/ppt5.jpg" alt="爱设计PPT免费模板" width="390" height="59">
<span>中国电信</span>
<span>中国移动</span>

</body>
</html>

结果：

我们可以通过style来设计图片的长*宽，也可以通过几%来按百分比缩放图片

代码1：

<img style="height:100px;width:100px" src="/static/fan.jpg"/>

结果：

代码2：

<img style="height:10%;width:20%" src="/static/fan.jpg"/>

结果：

 

 5、列表标签：将你所要排列的内容进行排列

语法：

<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

结果：

5.1 数字排列的标签 

代码：

<ol>
    <li>美女</li>
    <li>帅哥</li>
</ol>

结果：

5.2 表格标签

<table>
    <thead>
    <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
    </thead>
    <tbody>
    <tr> <td>13</td> <td>吴颜祖</td> <td>19</td> </tr>
    <tr> <td>14</td> <td>周杰轮</td> <td>20</td> </tr>
    <tr> <td>520</td> <td>泰哥尔</td> <td>21</td> </tr>
    </tbody>
</table>

table：说明在此创造表格

thead：表头

tr：行

th：表头的列

tbody：表尾

td：表尾的列

结果：

特殊：table后面加个border就可以出现不同的格子

<table border="1">
    <thead>
    <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
    </thead>
    <tbody>
    <tr> <td>13</td> <td>吴颜祖</td> <td>19</td> </tr>
    <tr> <td>14</td> <td>周杰轮</td> <td>20</td> </tr>
    <tr> <td>520</td> <td>泰哥尔</td> <td>21</td> </tr>
    </tbody>
</table>

结果：

结果以上的标签，做一个综合案例

代码：

<thead>
    <tr>
        <th>姓名</th> <th>邮箱地址</th>  <th>更多信息</th>   <th>恋爱关系</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张大炮</td> <td>lvxiaobuliaoji@qq.com</td>  <td> <a href="https://baike.baidu.com/item/%E5%BC%A0%E4%BC%9F%C2%A0/7177004">点击查看吕小布的僚机</a></td>
        <td>老年吃诸葛大力</td>
    </tr>
    <tr>
        <td>斯内克</td>  <td>zhuiqiuyifei@qq.com</td>   <td>  <a href="https://baike.baidu.com/item/%E5%A8%84%E8%89%BA%E6%BD%87/1124277">初次相亲看到美女的尴尬</a> </td>
        <td>此时单身一个，但看上了胡一菲</td>
    </tr>
    <tr>
        <td>张益达</td> <td>aishangduifanglvshi@qq.com</td>  <td> <a href="https://baike.baidu.com/item/%E8%89%BE%E4%BD%B3%E5%A6%AE/2759167">喜欢上一个女律师薇薇</a></td>
        <td>追求对方律师，短暂成功后又拔矛相见了</td>
    </tr>
    </tbody>
</table>

结果：

 6、input系列标签

joyneee
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值