前端基础

前端基础

前端内容概述

  • HTML标签，裸体人。 a, p, div, span 等等的标签
  • CSS样式， 着装 + 打扮。
  • JavaScript 页面动态效果， 动态。
  • 模块 + 框架 的基础上来进行开发。

HTML标签

HTML，超文本标记语言。

1.两种打开方式

  • 通过网站去运行。例如flask, 或者Django 后端程序访问相关的url 展示相关的前端页面。
  • 平时开发（本地打开 + Pycharm)。
  • 其他方式（本地文件打开)。

2.标签

head 标签中的一些标签

<!DOCTYPE html>
<html lang="en">
<head>
    <!--html 文件的编码方式，以什么样的编码方式编码， 需要以同样的方式解码 -->
    <meta charset="UTF-8">

    <!-- 页面的标签标题 -->
    <title>页面的title</title>

    <!-- 网页说明/搜索引擎 根据 meta 中的 keywords 内容，收录网页，展示网页-->
    <meta name="keywords" content="python 前端， 数据库">

    <!-- 搜索引擎，收录网站时，收录的 描述信息/网页的描述信息-->
    <meta name="description" content="说明信息">

</head>
<body>

</body>
</html>

body 标签中的标签

  • 块级标签： 一个标签占一行。 比如： h1 标签。
  • 行内标签：内容占多大，就占多大的空间。 比如： a 标签。

常见标签

div 标签和 span 标签

div 是一个块级标签， span 是一个行内标签。没有任何的自带特效，后期结合css 样式 可以构造出许多效果。

<body>
    <div style="background-color: red; color: white">北京</div>
    <span>上海</span>
</body>

h 标签

h1 ~ h6 标题标签 块级标签

<body>
    <h1 style="color:red;font-size:12px;font-weight:300">hello</h1>
    <h2>你好</h2>
</body>

a 标签

超链接， 网站点击跳转。

<body>
<a href="https://www.baidu.com">百度网站</a>
</body>


<body>
<!--超链接，href 属性指定跳转的网址， target 属性 等于 ‘_blank' 在新的页面打开网址，如果不指定这个参数的话， 在
原网页打开网址-->
<a href="https://www.baidu.com" target="_blank">百度网站</a>
<a href="https://www.baidu.com">百度网站</a>
</body>

基于a 标签做锚点, 点击 href 内容 跳转到相对应的 id 相关的 div 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
<h1>目录</h1>
<a href="#n1">第一章</a>
<a href="#n2">第二章</a>
<a href="#n3">第三章</a>
<a href="#n4">第四章</a>

<div id="n1" style="background:bisque; height: 1000px">第一章：今天</div>
<div id="n2" style="background:pink; height: 1000px">第二章：明天</div>
<div id="n3" style="background:brown; height: 1000px">第三章：后天</div>
<div id="n4" style="background:yellow; height: 1000px">第四章：这一天</div>

</body>
</html>

image-20250614160621940

img 标签

显示图片 自闭合标签

<img src="图片地址" />
<!-- 图片地址可以是网络地址，或者本地地址, 有些网络地址，可能无法展示(网站加入了防盗链)。
-->

<!-- 可以使用 width 设置图片的大小  高度和宽度只设置一个的话，会等比例展示， 都设置的话，有可能
会使图片失真，图片长宽 比例不正常-->
<img src="" style="width:200px;"/>

table表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>age</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>小小</td>
                <td>18</td>
            </tr>

            <tr>
                <td>2</td>
                <td>小大</td>
                <td>90</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

image-20250614163042993

合并单元格，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <!-- 一个 th 占三列-->
                <th colspan="3">人员信息表</th>
            </tr>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>age</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>小小</td>
                <!-- 一个td 占两行-->
                <td rowspan="2">18</td>
            </tr>

            <tr>
                <td>2</td>
                <td>小大</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

image-20250614163542903

列表标签

无序列表 ul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
    </ul>
</body>
</html>

image-20250614163909437

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ol>
        <li>小红</li>
        <li>小名</li>
    </ol>
</body>
</html>

image-20250614164106813

image-20250614164248910

标签之间的嵌套

标签之间可以进行嵌套，来完成我们所需的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="https://www.baidu.com">
        <img src="imgs/baidu.png" style="width: 200px" alt="">
    </a>
</body>
</html>

image-20250614165707008

以上的标签都是用来做数据的展示的，不包含交互的功能（用户输入内容）

input标签系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <!-- text 类型的文本是明文的   -->
    <input type="text">
    <!-- password 类型的文本是 密文的    -->
    <input type="password">

    <!-- 多选框   -->
    <input type="checkbox">
    <input type="checkbox">

    <!--下面两个 input 具有相同的name, 只能 选择一个   -->
    <input type="radio" name="n1">
    <input type="radio" name="n1">

    <!-- file 类型的input 可以上传文件   -->
    <input type="file">
</body>
</html>

image-20250614170743214

下拉框select 单选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <select name="" id="">
        <option value=""> 北京</option>
        <option value=""> 上海</option>
        <option value=""> 深圳</option>
    </select>
</body>
</html>

image-20250614171109857

下拉框 多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <!-- select标签 多了一个 multiple 属性， 下拉框变成多选的下拉框 -->
    <select multiple name="" id="">
        <option value=""> 北京</option>
        <option value=""> 上海</option>
        <option value=""> 深圳</option>
    </select>
</body>
</html>

image-20250614171240217

多行文本框 textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">
    你好吗？
    什么是好， 什么是坏？
    ooo
    000
</textarea>
</body>
</html>

image-20250614171701337

注意： 对于用于用户交互的标签来说， 如果想要将数据提交到某个地方，需要将这些全部包括在form 标签中。

<form>
    <input type='text'>
</form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="">
        <input type="text">
        <input type="password">

        <input type="submit" value="提交">
    </form>
</body>
</html>

image-20250614173004202

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <!-- action 参数，数据提交的地址，提交的数据需要有 name 属性，用于后端接收相关的信息
	form 表单的method 是get 时 数据是以键值对的方式拼接到路径中的，
-->
    <form action="" method="get">
        <input type="text" name="username">
        <input type="password" name="password">

        <input type="submit" value="提交">
    </form>
</body>
</html>

image-20250614173437600

想要提交数据必须具备的三要素：

  • form 标签需要将用户交互的标签包裹
  • 需要type="submit" 按钮，来触发提交表单的动作。
  • 用户交互的标签必须有name 属性， form 标签必须有: action, 提交地址， method, 提交方式。（get/post/ ...)

CSS样式

CSS（Cascading Style Sheets) 称为层叠样式表， 用于对页面进行美化。

本质上就是对标签进行点缀。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>hello, 小明</div>
    <div style="color:red; font-size:18px; background-color:pink">hello, 小明</div>
</body>
</html>

image-20250615140411706

CSS的选择器

类选择器

如果一个样式在多个标签中都有使用，可以将样式提取出来，写到head 标签中的 style 标签中，再应用到需要该样式的标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>hello, 小明</div>
    <div style="color:red; font-size:18px; background-color:pink">hello, 小明</div>
    <div style="color:red; font-size:18px; background-color:pink">hello, 小明</div>
    <div style="color:red; font-size:18px; background-color:pink">hello, 小明</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .xx{
            color:red;
            font-size:18px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div>hello, 小明</div>
    <div class="xx">hello, 小明</div>
    <div class="xx">hello, 小明</div>
    <div class="xx">hello, 小明</div>
</body>
</html>

image-20250615141132038

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        <!-- 将所有的div 标签都应用下面的样式 -->
        div{
            color:red;
            font-size:18px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div>hello, 小明</div>
    <div class="xx">hello, 小明</div>
    <div class="xx">hello, 小明</div>
    <div class="xx">hello, 小明</div>
</body>
</html>

id 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        <!--  ID 选择器，
        一般情况下，一个标签的id 是唯一的，不能重复，
        给 id 为 n1 的标签添加下面的css 样式
        -->
        #n1{
            color:red;
            font-size:18px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <!-- 加样式的标签 -->
    <div id="n1">hello, 小明</div>
    
    <div>hello, 小明</div>
    <div>hello, 小明</div>
    <div>hello, 小明</div>
    <h1>你好</h1>
</body>
</html>

后代相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        <!--  给li下的 a 标签添加如下样式  -->
        li a{
            color:red;
            font-size:18px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>mpp</li>
            <li>mp0</li>
            <li>
                <!-- 加样式的标签 -->
                <a href="https://www.baidu.com">百度</a>
                
            </li>
        </ul>
    </div>

    <div>
        <a href="https://www.baidu.com">百度</a>
    </div>
</body>
</html>

image-20250615204712785

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        <!--  给具有 header 类的标签下的 a 标签添加如下样式  -->
        .header a{
            color:red;
            font-size:18px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div class="header">
        <ul>
            <li>mpp</li>
            <li>mp0</li>
            <li> 
                <!-- 加样式的标签 -->
                <a href="https://www.baidu.com">百度</a>
                
            </li>
        </ul>
    </div>

    <div class="footer">
        <a href="https://www.baidu.com">百度</a>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        <!--  给具有 footer 类的标签下的 下一级（儿子） 不包括孙子标签（下两级） a 标签添加如下样式  -->
        .footer > a{
            color:red;
            font-size:18px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div class="header">
        <ul>
            <li>mpp</li>
            <li>mp0</li>
            <li>
                <a href="https://www.baidu.com">百度</a>
            </li>
        </ul>
    </div>

    <div class="footer">
        
        <!-- 加样式的标签 -->
        <a href="https://www.baidu.com">百度</a>
        
        <div>
            <a href="https://www.baidu.com">000</a>
        </div>
    </div>
</body>
</html>

分组

多个标签应用同一个样式,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        <!-- 用逗号分隔，div 或者 a, 或者 span, 或者 h1 标签应用如下样式-->
        div, a, span, h1{
            color:red;
        }
    </style>
</head>
<body>
    <div>ooo</div>
    <a href=""> 000</a>
    <span>xxxx</span>
    <h1>-----</h1>
</body>
</html>

image-20250615210031254

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input[type='text']{
            color:red;
        }
    </style>
</head>
<body>
     <!-- 加样式的标签 -->
    <input type="text">
    
    <input type="password">
</body>
</html>

image-20250615210648500

从css 文件中引入css 样式

如果多个页面都会用到相同的样式，可以将样式写到单独的css文件，页面想要使用的话，直接导入即可。

static/v1.css

.xx{
    color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/static/v1.css">
</head>
<body>
    <h1 class="xx">hello, world</h1>
</body>
</html>

image-20250615211655941

image-20250615211713175

在页面中引用CSS 样式， 有哪些方式：

  • 标签中直接书写样式
  • 页面 head 标签中的 style标签中， 涉及到选择器
  • css 文件， 涉及到选择器

常见的样式

高度和宽度

默认情况下，高度和宽度无法应用在行内标签上。

div 标签是块级标签，可以设置高度和宽度， span 是行内标签，默认情况下设置高度和宽度不起效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/static/v1.css">
</head>
<body>
    <div style="height: 100px; width: 200px; background-color:red;">windows</div>
    <div style="height: 100px; width: 200px; background-color:magenta">linux</div>

    <span style="height: 100px; width: 200px; background-color:blue">黑嘿嘿</span>
</body>
</html>

image-20250615214907340

行内标签可以变成 块级标签，加样式 display:block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/static/v1.css">
</head>
<body>
    <div style="height: 100px; width: 200px; background-color:red;">windows</div>
    <div style="height: 100px; width: 200px; background-color:magenta">linux</div>
	<!-- display:block -->
    <span style="display:block; height: 100px; width: 200px; background-color:blue">黑嘿嘿</span>
</body>
</html>

image-20250615215236718

默认情况下，块级标签虽然设置有宽度，但是右边空白区域也不许被占用。

行内和块级标签

  • 块级标签

  • 行内标签， 无法应用高度和宽度。

  • 行内& 块级，样式 (style) 添加 display: inline-block

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/static/v1.css">
</head>
<body>
    <div>信息</div>
    <span>hello</span>
    <!-- span 是行内标签 加上 display:inline-block 后， 可以设置高度和宽度了-->
    <span style="display: inline-block; height:100px; background-color:red;">学习方法</span>
</body>
</html>

    image-20250615220015349

行内标签和块级标签可以添加样式相互转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/static/v1.css">
</head>
<body>
    <!-- div 原本是块级标签， 增加 display:inline 将块级标签改成了行内标签   -->
    <div style="display: inline;">信息</div>
    <!--  span 原来是行内标签， 增加 display:block 将行内标签改成了块级标签-->
    <span style="display: block">hello</span>
    <div>000</div>
    <span>ooo</span>
</body>
</html>

文本的对齐方式

水平方向 text-align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/static/v1.css">
</head>
<body>
    <!-- h1 标签中的 文本，处在500px 的中间    -->
    <h1 style="text-align: center; width:500px; background-color:green;">hello</h1>

    <!-- h1 标签中的 文本，处在500px 的右边    -->
    <h1 style="text-align: right; width:500px; background-color:red;">hello</h1>

    <!-- h1 标签中的 文本，处在500px 的左边    -->
    <h1 style="text-align: rightf; width:500px; background-color:pink;">hello</h1>

    <!-- h1 标签中的 文本，如果不指定宽度，因为h1 是块级标签，处在整行的 中间， 左边，
        右边-->
    <h1 style="text-align: center; background-color:yellow;">hello</h1>
</body>
</html>

image-20250615222139274

垂直方向 line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/static/v1.css">
</head>
<body>
    <h1 style="text-align: center; width:500px; height:200px; background:olive; line-height:200px">学习方法</h1>
</body>
</html>

image-20250615222438405

内外边距

外边距

两个标签之间的距离 margin-top:10px; 上边距 10像素。

/* 可以给每一边分别设置外边距 */
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px

/* 也可以统一设置, 和上面等效  上下左右 */
margin:10px;

margin: 10px 20px  /* 上下是10px, 左右是20px*/

margin: 10px 20px 9px 4px; /* 上 10px, 右 20px, 下：9px, 左： 4px  顺时针方向 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div style="background-color:red; height:100px">000</div>
    <div style="background-color:red; height:100px; margin-top:10px">000</div>
</body>
</html>

image-20250615223852175

特殊的 margin, 左右边距自动 ==> 标签居中。

区域居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .login-box{
            height: 300px;
            width: 500px;
            background: #b0b;

            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="login-box">你好吗？</div>
</body>
</html>

image-20250615225254665

常见的布局会使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body{
            margin:0;
        }
        .header{
            background-color:#333;
            height: 50px;
        }

        .container{
            width:200px;
            background-color:brown;
            margin-left:auto;
            margin-right:auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            温故而知新
        </div>
    </div>
</body>
</html>

image-20250615230010432

内边距

内边距， 再胖一点。

注意：自己变大

/* 和外边距相似 */
padding-left: 10px;
padding-right: 10px;
padding-top：10px;
padding-bottom: 10px;

padding:10px;

padding: 10px 20px  /*左右内边距10px,  上下内边距20px*/

padding: 10px 20px 5px 6px  /*上右下左  顺时针方向 */

内容离标签边缘距离 padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
</head>
<body>
    <div style="background-color:red; height:50px;"></div>
    <div style="width:500px; height:500px;background-color:gold; padding-top:20px; padding-left:20px;">
        <div>mac</div>
        <div>linux</div>
        <div>windows</div>
    </div>
</body>
</html>

image-20250615230829675

提醒： 行内标签设置外边距 & 内边距 都是无效的。

float 浮动

float 是页面布局必不可少的一个样式。

float 可以让你的标签浮动展示。”飘起来， 脱落文档流“

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
</head>
<body>
    <div>
        <div style="float:left;">左边</div>
        <div style="float:right;">右边</div>
    </div>
</body>
</html>

image-20250615232136380

页面布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body{
            margin:0;
        }
        .item{
            height: 270px;
            width: 180px;
            background-color:olive;
            margin:10px;
            float:left;
        }
    </style>
</head>
<body>
    <div class="course">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

image-20250616085120827

左右飘
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
</head>
<body>
    <div class="course">
        <div class='color1' style="float:left;">左边</div>
        <div class='color1' style="float:right;">右边</div>
    </div>
</body>
</html>

image-20250616085539732

父标签没有内容， 父标签内的子标签中的内容将把父标签撑起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
 
    </style>
</head>
<body>
    <div style="background-color:green;">
       
    </div>
</body>
</html>

image-20250616090127066

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body{
            margin:0;
        }
        .color1{
            background-color:red;
        }

    </style>
</head>
<body>
    <div style="background-color:green;">
        <div>ooooo</div>
    </div>
</body>
</html>

image-20250616090025972

如果父标签中的子标签有float,那么即使 子标签有内容，也无法把父标签撑起来了。

float 样式使标签脱离文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
</head>
<body>
    <div style="background-color:green;">
        <div style="float:left;">000</div>
    </div>
</body>
</html>

image-20250616090445789

如果出现了float 标签无法撑起来父标签的情况， 可以使用 clear:both 清除浮动（笨方法）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
</head>
<body>
    <div style="background-color:green;">
        <div style="float:left;">000</div>

        <!-- 将浮动的子标签拉回来，清除浮动        -->
        <div style="clear:both;"></div>
    </div>
</body>
</html>

image-20250616090839233

:::<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .bg{
            background:green;
        }
        .clearfix:after{
            display: block;
            content: "";
            clear:both;
        }
    </style>
</head>
<body>
    <div class="bg clearfix">
        <div style="float:left;">000</div>
    </div>
</body>
</html>

image-20250616093435376

伪类

伪类（伪造的元素，在html 中不是真实存在的）:after :before

hover伪类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .c1{
            color:red;
        }
        /* 当鼠标放到标签上时， 应用如下样式*/
        .c1:hover{
            color:green;
        }
    </style>
</head>
<body>
    <div class="c1">ooo</div>
</body>
</html>

image-20250616094622641

image-20250616094705080

边框

border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .c1{
            height: 100px;
            width: 300px;
            /*border: 1px solid #ff6700;*/
            border-left: 1px solid #ff6700;
            border-bottom: 1px solid #ff6700;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

image-20250616101947183

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .menu{
            display:inline-block;
            padding: 10px;
            margin-right: 10px;
            border-bottom: 2px solid transparent;
        }
        .menu:hover{
            border-bottom: 2px solid red;
        }
    </style>
</head>
<body>
    <div>hello1</div>
    <div class="menu">菜单1</div>
    <div class="menu">菜单2</div>
    <div>hello2</div>
</body>
</html>

image-20250616102647272

为边框设置圆角 border-radius

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .c1{
            height: 100px;
            width: 300px;
            border: 1px solid #ff6700;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

position

  • flexed 固定： 永远固定在窗口的指定位置。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
</head>
<body>
    <div style="height:5000px; background-color:#b0b0b0">ooo</div>
    <div style="position: fixed; right:10px; bottom:10px;">返回顶部</div>
</body>
</html>

    image-20250616112210851

    position:fixed, 会使文档 在不同的层

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
</head>
<body>
    <div style="height:5000px; background-color:#b0b0b0">ooo</div>
    <div style="position: fixed; left:10px; top:10px;">返回顶部</div>
</body>
</html>

    image-20250616112614009

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .login-box{
            border: 1px solid red;
            height: 300px;
            width: 500px;
            margin: 0 auto;
            /* 指定left, right, margin, postion 可以是 标签固定居中*/
            position:fixed;
            top: 200px;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div style="height:5000px; background-color:#b0b0b0">ooo</div>
    <div class="login-box"></div>
</body>
</html>

    image-20250616165543166

    使用position:fixed 实现三层布局

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .middle{
            position: fixed;
            background-color: #333333;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            /*设置透明度*/
            opacity: 0.8;
        }

        .outer{
            position: fixed;
            background-color: white;
            height: 300px;
            width: 500px;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 200px;
        }
    </style>
</head>
<body>
    <div style="height:5000px;">
        <div>000</div>
        <div>000</div>
        <div>000</div>
    </div>

    <div class="middle"></div>
    <div class="outer">哦哦哦</div>
   
</body>
</html>

    image-20250616170639800

    可以通过 z-index 设置 层级的高度

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .middle{
            position: fixed;
            background-color: #333333;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            /*设置透明度*/
            opacity: 0.8;
            z-index:1000;
        }

        .outer{
            position: fixed;
            background-color: white;
            height: 300px;
            width: 500px;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 200px;
            z-index:1001;
        }
    </style>
</head>
<body>
    <div style="height:5000px;">
        <div>000</div>
        <div>000</div>
        <div>000</div>
    </div>

    <div class="middle"></div>
    <div class="outer">哦哦哦</div>

</body>
</html>

  • absolute & relative

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
</head>
<body>
    <!-- 给父标签添加一个position:relative样式， 儿子标签添加一个position: absolute样式，指定
      right, left, top, bottom 可实现相对与父亲相对位置-->
    <div style="height: 500px; width: 500px; border: 1px solid red; position:relative">
        <div style="position: absolute; right:0; bottom:0;">0000</div>
    </div>
</body>
</html>

    image-20250616171653047

总结

会写一些简单的页面（后面在框架的基础上修改）

javascript

JavaScript ， 后面简称JS。

JavaScript, 是一门编程语言，代码交给浏览器去运行。

DOM，js 代码去操作HTML 标签。【内置模块】

BOM，浏览器内置的功能。【内置模块】

输入一个文本框的一些内容，点击按钮，调整另一个文本框的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
</head>
<body>
    <input type="text" placeholder="请输入内容" id="content">
    <input type="button" value="点击" onclick="clickMe();">
    <h1>显示内容</h1>
    <div id="txt">无</div>

    <script>
        function clickMe(){
            // 1. 获取用户输入的内容；
            var tag = document.getElementById('content');
            var userInputData = tag.value;

            // 2. 找到div,并将内容赋值。
            var tagTxt = document.getElementById("txt");
            tagTxt.innerText = userInputData;


        }
    </script>
</body>
</html>

image-20250616175048860

javascript 代码的存放位置

1.建议将 js 代码放到 html 文档 body 的最下方，防止加载js 代码时间过长，影响页面元素的显示。

2.将js 代码写到单独的js文件中， 然后在html 文件中导入

image-20250616175829905

v1.js

    function clickMe(){
        // 1. 获取用户输入的内容；
        var tag = document.getElementById('content');
        var userInputData = tag.value;

        // 2. 找到div,并将内容赋值。
        var tagTxt = document.getElementById("txt");
        tagTxt.innerText = userInputData;


    }

关于注释

html

<!--这里是注释 -->

css

<style>
/* 这里是注释*/
</style>

javascript

<script>
   // 这里是单行注释
    
   /* 
   多行注释
   */
    alert(111);
</script>

变量

var userName = 'ooo';

全局变量：代码块顶格。

局部变量：函数中变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
</head>
<body>
    <script>
        // 全局变量
        NAME = "mpp";

        function fun1(){
            //局部变量
            var age = 21;

            // 全局变量， 一般不推荐这样写
            gender = "男"
        }
    </script>
</body>
</html>

数据类型

var age = 19;

var name = "mpp";

var data = true;

var dataList = [11, 22, 33];

var info = {"name":'mop', 'age': 25}

语句

条件判断

var age = 19;
if (age < 19){
    ...
}else{
    ...
}
    
    
if (age < 19){
    ...
}else if(age == 19){
    ...
}

循环语句

var dataList = [11, 22, 33, 44];

for(var i=0; i < dataList.length; i++){
    console.log(i);   // 相当于 python 中的print
}


for (var idx in dataList){
    var data = dataList[idx]
    console.log(idx, data);
}

函数

function do1(a1, a2){
    var a3 = a1 + a2;
    return a3;
}

var res = do1(11, 22);
console.log(res);   //33

匿名函数, 没有名字的函数。

// 定时器  setInterval(函数， 1000) ， 每一秒中执行一下定时器中的函数。

function func1(){
    console.log(123124);
}

setInterval(func1, 1000);


// 匿名函数
setInterval(function(){
    console.log(111);
}, 1000);

自执行函数, 自动执行（闭包）。

function func(a1){
    console.log(1);
}
func(123);

// 自执行函数， 先写两个圆括号，在第一个圆括号中写一个匿名函数，第二个函数中写相关的参数。
(function(a1, a2){
    console.log(a1, a2);
})("xxx", "123")

序列化相关

  • JSON.stringify(对象)： js 中的对象 转换成 JSON字符串

    var info = {name:"mpp", age:999};
var infoStr = JSON.stringify(info);

console.log(infoStr);  // {"name":"mpo","age":999}

    image-20250616183910913

  • JSON.parse(字符串)： JSON 字符串转换成js 对象

    var dataString = '{"name":"mpo","age":999}';
var info = JSON.parse(dataString);
console.log(info)   //  {name: 'mpo', age: 999}

    image-20250616184429373

提示： ES5 语法， 已经有 ES6(很多前后端分离项目) + ES6 编译转换成ES5

DOM 和 BOM简绍

DOM： 对页面上的 HTML标签进行操作

// 根据 id 对 标签进行选择
var tag = document.getElementById("content");

BOM：对浏览器进行操作

alert
confirm
setInterval

注意：用 DOM 和 BOM 这两个模块可以实现页面的所有效果，但是比较费劲

jQuery

一个别人封装好了的(类库)， 代码量更少的实现我们想要的功能。

  • 下载jQuery

  • 代码中引入

  • 根据 jQuery 的用法进行操作即可。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 id="info"></h1>
    <script src="jquery-3.7.1.js"></script>
    <script>
        $("#info").text("hello,");
    </script>
</body>
</html>

    image-20250617134649937

image-20250617134702981

选择器

寻找想要的标签

ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 id="info"></h1>
    <h1 id="info1"></h1>
    <script src="jquery-3.7.1.js"></script>
    <script>

        // 通过 $("#id") 选择相关的标签
        $("#info").text("hello,");
        $("#info1")
    </script>
</body>
</html>

类选择器 .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 class="info">0000</h1>
    <h1 class="info">1111</h1>
    <h2 class="info">3333</h2>
    <script src="jquery-3.7.1.js"></script>
    <script>
        // 类选择器
        // 通过 $(". + 类属性") 选择相关的标签
        $(".info");

    </script>
</body>
</html>

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 class="info">0000</h1>
    <h1 class="info">1111</h1>
    <h2 class="info">3333</h2>
    <script src="jquery-3.7.1.js"></script>
    <script>
        // 标签选择器
        // 通过 $("标签") 选择相关的标签
        // 找到所有的h1 标签
        $("h1");

    </script>
</body>
</html>

多选择器

使用 逗号分隔多个选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 class="info">0000</h1>
    <h1 class="info">1111</h1>
    <h2 class="info">3333</h2>
    <div id="v1">4444</div>
    <script src="jquery-3.7.1.js"></script>
    <script>
        // 多选择器
        // 找到 所有的 h1标签，类属性中包含 info 的标签 和 id 为 "v1" 的标签, 使用逗号分隔
        $("h1, .info, #v1")
    </script>
</body>
</html>

层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 class="info">0000</h1>
    <h1 class="info">1111</h1>
    <h2 class="info">3333</h2>
    <div id="v1">
        <ul>
            <li></li>
        </ul>
    </div>
    <script src="jquery-3.7.1.js"></script>
    <script>
        // 层级选择器 找到id 为 v1 下面所有的 li 标签
        $("#v1 li").text("nnnn");
    </script>
</body>
</html>

筛选器

使用 选择器 找到一些标签后， 还想根据现有的标签进一步筛选的时候。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>
        <div>000</div>
        <span id="xx">
            <ul id="menus">
                <li>3</li>
                <li id="yy">2</li>
                <li class="v2">-</li>
            </ul>
        </span>
    </h1>
    <script src="jquery-3.7.1.js"></script>
    <script>
        // 找到选择标签的父级
        $("#xx").parent();

        // 孩子
        $("#menus").children();

        // 兄弟 上一个兄弟 prev()   下一个兄弟 next(), 所有的兄弟 siblings()
        $("#yy").prev();
        $("#yy").next();
        $("#yy").siblings();

        // 子孙中寻找
        $("#xx").find("li");
        $("#xx").find("#yy");
        $("#xx").find(".v2");

    </script>
</body>
</html>

样式操作

// 给某些 选择的标签添加样式
$("#v1").addClass("样式名称");

// 给某些 选择的标签删除样式
$("#v1").removeClass("样式名称");

// 看某个标签是否有某个样式
$("#v1").hasClass("样式名称");

// 在某些标签没有 某个样式时添加样式， 有的时候移除样式
$("#v1").toggleClass("样式名称");

补充： jQuery 支持链式编程。

$("#v1").addClass("xxx").text("xxx").xxx().xxx()....;

使用 jQuery 给 标签绑定点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div>000</div>
    <div class="header">111</div>
    <span>222</span>
    <script src="jquery-3.7.1.js"></script>
    <script>
        // 给所有 class=header 的标签设置点击事件
        $(".header").click(function(){
            // $(this)   // 指的是点击的对象
            $(this).next().toggleClass("hide")
        });

    </script>
</body>
</html>

值和文本的操作

  • 值

    <input type="text" id ="v1">

<!-- 获取值 -->
$("#v1").val();

<!-- 设置值 -->
$("#v1").val("xxxx");

  • 文本操作

    <div id="xx">
    111
</div>

<!--获取文本内容 -->
$("#xx").text();

<!-- 设置文本-->
$("#xx").text("111");

基于 jQuery 添加标签

$("<a>").text("xxxx");

属性操作

可以获取属性值， 也可以设置属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <a id="t1" href="https://www.baidu.com" name="x1">baidu</a>

    <script src="jquery-3.7.1.js"></script>
    <script>
        // 获取属性
        // var data = $("#t1").attr("href");
        // console.log(data);
        
        // 设置 属性
        $("#t1").attr("href", "https://www.bilibili.com");
    </script>
</body>
</html>

prop属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>

    <input type="text" id="v1">
    <!-- 加 checked  默认选中-->
    篮球<input type="checkbox" id="v2" checked>
    足球<input type="checkbox" id="v3" >

    <script src="jquery-3.7.1.js"></script>
    <script>
        $("#v1").val();
        $("#v1").val("xxx");

        // 通过 prop 更改 checkbox 类型的 input 标签的选中情况。
        $("#v2").prop("checked", false);
        $("#v3").prop("checked", true);
    </script>
</body>
</html>

image-20250617150356780

文档操作

  • 创建标签

    $("<div>")
$("<a>")

  • 删除标签

    <div id="v1">
    000
    <h1 id="v2">
        
    </h1>
</div>

$("#v2").remove();

  • 追加标签

    <div id="content">
    <div>0000</div>
    <div>hello, hello</div>
</div>

<script>
    // 创建标签
    var tag = $("<div>").text("hello, hello");
    
    // 追加标签
    $("#content").append(tag);
</script>

  • 添加：顶部插入

    <div id="content">
    <div>hello, hello</div>
    <div>0000</div>
</div>

<script>
    // 创建标签
    var tag = $("<div>").text("hello, hello");
    
    // 添加标签到 顶部
    $("#content").prepend(tag);
</script>

  • 添加： 外部插入

    <div>hello, hello</div>
<div id="content">
    <div>
        0000
    </div>
</div>

<script>
    // 创建标签
    var tag = $("<div>").text("hello, hello");
    
    // 添加标签到 顶部
    $("#content").before(tag);
</script>

    <div id="content">
    <div>
        0000
    </div>
</div>
<div>hello, hello</div>

<script>
    // 创建标签
    var tag = $("<div>").text("hello, hello");
    
    // 添加标签到 顶部
    $("#content").before(tag);
</script>

  • 清空文本内容

    <div id='xx'>
    iiiii
</div>

$("#xx").empty();

    注意： 如果是input 框清空， $("#xx").val("");

事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>

    <input type="text" id="txt">
    <input type="button" value="添加" id="btnAdd">
    <ul id="dataList">
        <li>000</li>
        <li>111</li>
        <li>222</li>
    </ul>

    <script src="jquery-3.7.1.js"></script>
    <script>
        $("#btnAdd").click(function(){
            $("#dataList").append($("<li>").text($("#txt").val()));
        });
    </script>
</body>
</html>

image-20250617153129055

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>

    <input type="text" id="txt">
    <input type="button" value="添加" id="btnAdd">
    <ul id="dataList">
        <li>000</li>
        <li>111</li>
        <li>222</li>
    </ul>

    <script src="jquery-3.7.1.js"></script>
    <script>
        $("#btnAdd").click(function(){
            $("#dataList").append($("<li>").text($("#txt").val()));
        });

        // $("li").click(function(){
        //     $(this).remove();
        // });
        // 点击新添加的标签， 无法绑定删除 事件， 这个时候就要使用 事件委托了

        // 先找到一个一定有的， 再找到里面的标签给绑定事件。
        $("#dataList").on("click", "li", function(){
            $(this).remove();
        });


    </script>
</body>
</html>

image-20250617153851557

框架加载

    <script src="jquery-3.7.1.js"></script>
    <script>
        // 当页面框架加载完成之后执行的。
        $(function(){
            // 官方推荐将 jQuery 代码写在这里面；
        });

    </script>

BootStrap

别人写好的 javascript ， css 代码。后期项目就可以在他的基础上进行开发。

  • 下载

  • 引入

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/bootstrap-5.3.6-dist/css/bootstrap.min.css">
</head>
<body>

<!-- bootstrap 依赖 jquery, 所以也需要引入jquery-->
<script src="jquery-3.7.1.js"></script>
<script src="static/bootstrap-5.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>

  • 使用

    • 看官方文档， 示例。
    • 拿来直接用 或者修改。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/bootstrap-5.3.6-dist/css/bootstrap.min.css">
</head>
<body>
    <input type="button" class="btn btn-success" value="000">
    <a class="btn btn-success" href=""></a>

    <!-- bootstrap 依赖 jquery, 所以也需要引入jquery-->
    <script src="jquery-3.7.1.js"></script>
    <script src="static/bootstrap-5.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>

    image-20250617172425887

容器

container 可以使内容居中显示

container-fluid, 平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/bootstrap-5.3.6-dist/css/bootstrap.min.css">
</head>
<body>

    <div style="background-color: #dddddd">
        <div class="container">ooo1111</div>
        <div style="background-color: white">111</div>
        <div class="container-fluid">0000</div>
    </div>
    <!-- bootstrap 依赖 jquery, 所以也需要引入jquery-->
    <script src="jquery-3.7.1.js"></script>
    <script src="static/bootstrap-5.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>

image-20250617173225825

导航条，bootstrap 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/bootstrap-5.3.6-dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">学习训练系统</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">更多</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>


    <!-- bootstrap 依赖 jquery, 所以也需要引入jquery-->
    <script src="jquery-3.7.1.js"></script>
    <script src="static/bootstrap-5.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>

image-20250617174253978

栅格

image-20250617175912581

https://v3.bootcss.com/css/#grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/bootstrap-5.3.6-dist/css/bootstrap.min.css">
</head>
<body>
<div>
    <div class="row">
        <div class="col-lg-6" style="background-color: red;">左边</div>
        <div class="col-lg-6" style="background-color: green;">右边</div>
    </div>
</div>


    <!-- bootstrap 依赖 jquery, 所以也需要引入jquery-->
    <script src="jquery-3.7.1.js"></script>
    <script src="static/bootstrap-5.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>

image-20250617182013058

上面几个的区别是比如 lg 如果 整个页面宽度 小于1200px, 就会变成两行显示， md 960px sm 769px

image-20250617180822699

栅格： 占位的功能

image-20250617182503801

sign in 前面的空白 用 col-sm-offset-2 占二格

<div class="col-sm-offset-2 col-sm-10">

面板

image-20250617223929325

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
    <div class="container clearfix">
        <div class="col-md-9">

        </div>
        <div class="col-md-3">
            <div class="panel panel-success">
                <span style="color:red" class="glyphicon glyphicon-flag" aria-hidden="true"></span>
              <div class="panel-body" style="background-color:green;">
                Panel content
              </div>
              <div class="panel-footer">Panel footer</div>
            </div>
        </div>

    </div>
    
    <!-- bootstrap 依赖 jquery, 所以也需要引入jquery-->
    <script src="jquery-3.7.1.js"></script>
    <script src="static/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

image-20250617224014745

表格

image-20250617224247239

分页

image-20250617224933029

扩展：

  • 前后端不分离： django + BootStrap/ flask + BootStrap
  • 前后端分离： django + vue.js + elementui / flask + vue.js + elementui
posted @ 2025-06-17 22:59  Ref-brief  阅读(26)  评论(6)    收藏  举报