Python制作网页Day 2 （书目检索系统初步构建）

最新推荐文章于 2024-02-26 07:00:00 发布

原创最新推荐文章于 2024-02-26 07:00:00 发布 · 1.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#Python #网页

Python Study 专栏收录该内容

3 篇文章

订阅专栏

博客记录了书目检索系统的初步构建，涉及Lib.py和Lib.Html。还包含一些笔记，如html解析要用UTF - 8保存，介绍了在网页主题中添加ico小图标的方法，最后布置了做两个表格的作业，并提及表格的调整和边框添加。

完成书目检索系统的初步构建：

Lib.py

from flask import Flask,render_template

app = Flask(__name__)

@app.route("/lib")
def index():
    return render_template('lib.html')

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

Lib.Html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书目检索系统</title>
    <link rel="icon" href="C:/Users/77045/Desktop/hhh.ico" type="image/x-icon"/>
</head>
<body>
<img width="450"src="{{url_for('static',filename = 'image/lib.jpg')}}"/>
<table>
   <!-- 书目检索 -->
   <h1>书目检索</h1>

<form method="post" action="">
    <!-- 搜索框 -->
   <table>
   <tr>
      <td><select id="">
         <option value="1" select="selected">题名</option>
         <option value="2">出版社</option>
         </select>
      </td>
      <td><input type="text" id=""></td>
      <td><input value="查询" type="submit"></td>
   </tr>
   </table>
    <!-- 图书排序 -->
    <table>
   <tr>
      <td>1、机器人Python极客入门实战</td>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td><img width="60" src="{{url_for('static',filename="book/java.jpg")}}"></td>
               <td>
               <ul>
                  <li>Python极客团队著</li>
                  <li>电子工业出版社2017.9</li>
                  <li>查看馆藏</li>
               </ul>
               </td>
               <td>
               <ul>
                  <li>馆藏副本：</li>
                  <li>可借副本：</li>
               </ul>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td>2、Learning Python=学习Python</td>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td><img width="60" src="{{url_for('static',filename="book/Python.jpg")}}"></td>
               <td>
                  <ul>
                  <li>Luiz Mark</li>
                  <li>东南大学2008</li>
                  <li>查看馆藏</li>
                  </ul>
               </td>
               <td>
                  <ul>
                  <li>馆藏副本：</li>
                  <li>可借副本：</li>
                  </ul>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   </table>
</form>
</body>
</html>

在这里插入图片描述
一些笔记：

1、html中部分是：
告诉我们，解析它要用UTF-8，所以EditPlus要用UTF-8保存。

2、如何在网页主题中添加ico小图标

何为Icon小图标？（以下绿色框框内的图标即是）
在这里插入图片描述
添加方法：

A、用在线转换器（百度搜索）将一张图片转换为ico图片
B、将ico图标拖入static文件夹下的image文件夹中
C、在html的部分输入如下代码：

 <link rel="icon" href="{{url_for('static',filename = 'image/squ.ico')}}" type="image/x-icon"/>

/squ.ico为图片命名+后缀名

添加效果如下图：

在这里插入图片描述

作业：尝试做两个表格
一、
在这里插入图片描述
html 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style type="text/css">
        table tr td,th{border:1px solid #000;}
    </style>
</head>
<body>
<div style="text-align:center">
 <table>

  <tr><!-- 第一行 -->
   <td colspan="2" width="500">书本基本信息表</td>
  </tr>

  <tr><!-- 第二行 -->
   <td width="250">书名</td>
   <td width="250"><input type="text" name="bookname"></td>
  </tr>

  <tr><!-- 第三行 -->
   <td width="250">作者</td>
   <td width="250"><input type="text" name=""></td>
  </tr>

  <tr><!-- 第四行 -->
   <td width="250">出版日期</td>
   <td width="250"><input type="text" name=""></td>
  </tr>

  <tr><!-- 第五行 -->
   <td width="250">出版社</td>
   <td width="250">
      <select>
      <option value="" select="selected">华中师范大学出版社</option>
      <option value="">华中科技大学出版社</option>
      <option value="">武汉大学出版社</option>
      </select>
   </td>
  </tr>

  <tr><!-- 第六行 -->
   <td width="250">ISBN</td>
   <td width="250"><input type="text" name=""></td>
  </tr>

  <tr><!-- 第七行 -->
   <td colspan="2" width="500">

            <input type="submit" value="提交">&nbsp;&nbsp;<input type="reset"  value="重置">

    </td>
  </tr>
 </table>
</div>
</body>
</html>

二、
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格2</title>
     <style type="text/css">
        table tr td,th{border:1px solid #000;}
    </style>
    <style>
        .td{width:100px;overflow:hidden}
    </style>

</head>
<body>

<div style="text-align:center">

 <table width="300"><!-- 第一张表 -->
  <tr><!-- 第一行 -->
   <td colspan="2" class="td">书本详情表</td>
  </tr>

  <tr><!-- 第二行 -->
   <td class="td">出版社</td>
   <td class="td">XXXX</td>
  </tr>

  <tr><!-- 第三行 -->
   <td class="td">作者</td>
   <td class="td">XXXX</td>
  </tr>

  <tr><!-- 第四行 -->
   <td class="td">内容简介</td>
   <td class="td">XXXX</td>
  </tr>

  <tr><!-- 第五行 -->
   <td class="td">作者简介</td>
   <td class="td"">XXXX</td>
  </tr>
</table>
<br>
<table width="300"><!-- 第二张表 -->
  <tr><!-- 第一行 -->
   <td colspan="2" class="td">书本馆藏记录表</td>
  </tr>

  <tr><!-- 第二行 -->
   <td class="td">馆藏副本</td>
   <td class="td">馆藏副本可借</td>
  </tr>

   <tr><!-- 第三行 -->
   <td class="td">5</td>
   <td class="td">2</td>
  </tr>
 </table>
<br>
 <table width="300"><!-- 第三张表 -->
  <tr><!-- 第一行 -->
   <td colspan="2" width="500">书本借阅记录表</td>
  </tr>

  <tr><!-- 第二行 -->
   <td class="td">读者</td>
   <td class="td">借阅时间</td>
  </tr>

  <tr><!-- 第三行 -->
   <td class="td">a</td>
   <td class="td">XXXX</td>
  </tr>

  <tr><!-- 第四行 -->
   <td class="td">b</td>
   <td class="td">XXXX</td>
  </tr>

  <tr><!-- 第五行 -->
   <td class="td">c</td>
   <td class="td">XXXX</td>
  </tr>

     <tr><!-- 第六行 -->
   <td colspan="2" class="td">总计:CONT</td>
  </tr>
</table>
<br>
<table width="450"><!-- 第四张表 -->
   <tr>
   <td class="td" colspan="3"> 书本评分记录表</td>
   </tr>
   <tr>
   <td class="td">读者</td>
   <td class="td">评分</td>
   <td class="td">评论</td>
   </tr>
   <tr>
   <td class="td">a</td>
   <td class="td">XXXX</td>
   <td class="td">XXXX</td>
   </tr>
   <tr>
   <td class="td">b</td>
   <td class="td">XXXX</td>
   <td class="td">XXXX</td>
   </tr>
   <tr>
   <td class="td">c</td>
   <td class="td">XXXX</td>
   <td class="td">XXXX</td>
   </tr>

   <tr>
   <td class="td">总计：COUNT</td>
   <td class="td">平均：AVG</td>
   <td class="td">XXXXXXX</td>
   </tr>
</table>

</div>
</body>
</html>

总结：
<调整单元格宽度>

<style>
	.td{width:100px;overflow:hidden}
</style>

<table width="400">
<tr>
<td class="td"></td>
<td class="td"></td>
<td class="td"></td>
<td class="td"></td>
</tr>
<table>

<给表格加边框>

<style type="text/css">
        table tr td,th{border:1px solid #000;}
</style>

<table border=”1”> </table>