Python应用-web应用开发（上）前端part-Toy模板网

这篇具有很好参考价值的文章主要介绍了Python应用-web应用开发（上）前端part。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

包括HTML+CSS+BootStrap+JavaScript+jQuery的前端知识

参考视频：Python的web开发全家桶

参考学习曲线：Python入门技能树

python前端开发,python,web,前端

在网页右键点检查可查看源码

python前端开发,python,web,前端

选中点击想要的区域可以得到对应源码区域 styles中为样式定义

目的：开发一个平台（网站）
	- 前端开发：HTML、CSS、JavaScript
	- Web框架：接收请求并处理
	- MySQL数据库：存储数据地方
快速上手：
	基于Flask Web框架让你快速搭建一个网站出来。
深入学习：
	基于Django框架（主要）

快速开发网站

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()			# 创建一个本地开发服务器，并监听指定的主机和端口

咱们网站与别人的不一样：

Flask框架为了让咱们写标签方便，支持将字符串写入到文件里。

from flask import Flask,render_template
app = Flask(__name__)
@app.route("/show/info")
def index():
    # Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
    # 默认：去当前项目目录的templates文件夹中找。
    return render_template("index.html")
if __name__ == '__main__':
    app.run()

网站给用户返回的本质：字符串

项目结构

python前端开发,python,web,前端

如果要修改templates文件夹

app = Flask(__name__, template_folder="xxx")

如果要定义端口和主机名

app.run(host=" ", port=8000)

HTML

1 编码（head）

<meta charset="UTF-8">

2 title（head）

<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>

3 标题

headline

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
</body>
</html>

4 div和span

<div>内容</div>

<span>asdfa</span>

division，占一整行。【块级标签】

常用来分割行内标签！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <div>山东蓝翔</div>
    <div>挖掘机哪家强</div>
</body>
</html>

span，自己多大占多少。【行内标签、内联标签】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <span>山东蓝翔</span>
    <span>挖掘机哪家强</span>
</body>
</html>

5 超链接

href是HTML中锚点标签的一个属性，全称为Hypertext Refrence

跳转到其他网站
<a href="http://www.chinaunicom.com.cn/about/about.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>

6 图片

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

直接显示别人的图片地址（防盗链）：
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />

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

关于设置图片的高度和宽度

<img src="图片地址" style="height:100px; width:200px;" />
<img src="图片地址" style="height:10%; width:20%;" />

小结

学习的标签

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

划分

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

嵌套

<div>
    <span>xxx</span>
    <img />
    <a></a>
</div>

案例：商品列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商品列表</h1>
# target="_blank"在点击链接后打开新的网页
<a href="https://www.mi.com/redmiwatch2" target="_blank">
    <img src="/static/a1.jpeg" style="width: 150px">
</a>
<a href="https://www.mi.com/shouhuan6/nfc" target="_blank">
    <img src="/static/a2.jpeg" style="width: 150px">
</a>
</body>
</html>

7 列表

# 无序列表
<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>

# 有序列表
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

8 表格

<table>
    <thead>			# 表头
    	<tr>  <th>ID</th>  <th>姓名</th>   <th>年龄</th>  </tr>
    </thead>
    <tbody>			# 表体
    	<tr>  <td>10</td>  <td>武沛齐</td>  <td>19</td>   </tr>
        <tr>  <td>11</td>  <td>吴阳军</td>  <td>19</td>   </tr>
        <tr>  <td>12</td>  <td>刘东</td>  <td>19</td>    </tr>
        <tr>  <td>13</td>  <td>郭智</td>  <td>19</td>    </tr>
        <tr>  <td>14</td>  <td>电摩</td>  <td>19</td>    </tr>
    </tbody>
</table>

9 input系列

<input type="text" />
<input type="password">    # 输入密码
<input type="file">		 # 选择文件
// 单选框，name一样时互斥
<input type="radio" name="n1">男
<input type="radio" name="n1">女
// 多选框
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球
// onclick表示单击 ondbclick表示双击（db=double）
<input type="button" value="点击添加"	onclick="函数">  -->普通的按钮
<input type="submit" value="提交">  -->提交表单

10 下拉框

# 单选下拉框
<select name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="sz">深圳</option>
</select>
# 多选下拉框
<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

11 多行文本

<textarea></textarea>
# 指定行数
<textarea row="5"></textarea>

12 GET请求和POST请求

浏览器向后端发送请求时

GET请求【URL方法 / 表单提交】

在url框回车
- 现象：GET请求、跳转、向后台传入数据数据会拼接在URL上。
```
https://www.sogou.com/web?query=安卓&age=19&name=xx
```
  注意：GET请求数据会在URL中体现。
POST请求【表单提交】

在网页界面回车
- 现象：提交数据不在URL中而是在请求体中。

案例：用户注册

新创建项目

创建Flask代码

from flask import Flask, render_template, request
app = Flask(__name__)
# 只支持 GET请求 或 POST请求
@app.route('/register', methods=['GET', "POST"])
def register():
    # 访问时先看到注册界面
    if request.method == "GET":
        return render_template('register.html')
    else:	# post_register() 部分
        # 接收用户通过POST形式发送过来的数据 print(request.form)
        user = request.form.get("user")
        pwd = request.form.get("pwd")
        gender = request.form.get("gender")
        #  爱好会提交多个，用getlist()
        hobby_list = request.form.getlist("hobby")
        city = request.form.get("city")
        skill_list = request.form.getlist("skill")
        more = request.form.get("more")
        print(user, pwd, gender, hobby_list, city, skill_list, more)
        # 将用户信息写入文件中实现注册、写入到excel中实现注册、写入数据库中实现注册
        # 2.给用户再返回结果
        return "注册成功"
if __name__ == '__main__':
    app.run()

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户注册</h1>
# 指定 提交方式 和 提交地址
<form method="post" action="/register">
    <div>		# 写上name才会被添加到url中，有点像构造字典
        用户名：<input type="text" name="user"/>
    </div>
    <div>
        密码：<input type="password" name="pwd"/>
    </div>
    <div>
        性别：	# value才是name生成字典时对应的值
        <input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="2">女
    </div>
    <div>
        爱好：
        <input type="checkbox" name="hobby" value="10">篮球
        <input type="checkbox" name="hobby" value="20">足球
        <input type="checkbox" name="hobby" value="30">乒乓球
        <input type="checkbox" name="hobby" value="40">棒球
    </div>
    <div>
        城市：
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>
    </div>
    <div>
        擅长领域：
        <select name="skill" multiple>
            <option value="100">吃饭</option>
            <option value="101">睡觉</option>
            <option value="102">打球</option>
        </select>
    </div>
    <div>
        备注：<textarea name="more"></textarea>
    </div>
    <input type="submit" value="submit按钮">
</form>
</body>
</html>

页面上的数据，想要提交到后台：

form标签包裹要提交的数据的标签。
- 提交方式：method="get"
- 提交的地址：action="/xxx/xxx/xx"
- 在form标签里面必须有一个submit标签。
在form里面的一些标签：input/select/textarea
- 一定要写name属性 <input type="text" name="uu"/>

总结

HTML标签

- 浏览器能够识别HTML标签。
- 什么是HTML？
超文本传输语言（与浏览器搭配），是一种标记语言。
一般是默认格式样式，以后通过CSS(层叠样式表)可以修改

提醒：HTML标签比较多，标签还有很多很多，不必逐一学会。

CSS

css，专门用来“美化”标签

实际应用中一般只用模板来改。

1 快速了解

<img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>

2 CSS应用方式

1. 在标签上写style

<img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>

2. 在head标签中写style标签（*）

方便对样式进行复用，比较常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>		# 样式选择器
        .c1{				
            color:red;
        }
    </style>
</head>
<body>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
</body>
</html>

3.写到文件中（*）

common.css文件内容，便于样式集成

必须放在static目录，右键new->stylesheet->CSS File创建

.c1{
    height:100px;
}
.c2{
    color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/common.css" />		# css样式文件导入
</head>
<body>
<h1 class='c1'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
</body>
</html>

问题：用Flask框架开发不方便

每次都需要重启
规定有些文件必须要放在特定的文件夹
新创建一个页面
- 函数
- HTML文件

有没有一种方式，可以让我快速的编写前端的代码并查看效果呢，最后再讲页面集成到Flask中。

Pycharm为我们提供了一种非常便捷开发前端页面的工具。可以先基于它开发然后集成到Flask.

VScode可以安装live server插件。

python前端开发,python,web,前端

3 选择器

ID选择器（#号与id关联）
```
#c1{   
}
<div id='c1'></div>
```
类选择器（.与class关联）（使用得最多）
```
.c1{
}
<div class='c1'></div>
```

标签选择器（给某一类标签加样式）

li{
    color:pink ;
}
<ul>
		<li>北京</li>
		<li>上海</li>
</ul>

属性选择器

# 对某一类输入标签加边框
input[type='text']{
	border: 1px solid red;
}

.v1[xx="456"]{
	color: gold;
}

<input type="text">
<input type="password">

<div class="v1" xx="123">s</div>
<div class="v1" xx="456">f</div>
<div class="v1" xx="999">a</div>

后代选择器

# yy类子孙中的li标签  空格表示后代元素
.yy li{
    color: pink;
}
# yy类子孙中的a   > 表示直接子元素
.yy > a{
    color: dodgerblue;
}

<div class="yy">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>

关于选择器：

多：类选择器、标签选择器、后代选择器
少：属性选择器、ID选择器

关于多个样式 & 覆盖的问题：

#  跟样式的定义顺序有关，跟引用顺序无关。
#  如果不重名则一起引用，重名下面的会覆盖上面的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

补充：下面的不要覆盖我。加上!important

.c1{
            color: red !important;
            border: 1px solid red;
}
.c2{
            font-size: 28px;
            color: green;
}

4 具体样式

1. 高度和宽度

.c1{
    height: 300px;
    width: 500px;
}

注意事项：

宽度，支持百分比。
行内标签：默认设置无效。
块级标签：默认设置有效（霸道，右侧区域空白，也不给你占用）

2. 块级和行内标签

块级
行内
css样式：既具有块级标签的功能又有行内标签的功能 -> display: inline-block

主动变为行内标签 -> display: inline

主动变为块级标签 -> display: block

示例：行内&块级特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;

            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">中国</span>
    <span class="c1">联通</span>
    <span class="c1">联通</span>
    <span class="c1">联通</span>
</body>
</html>

示例：块级和行内标签的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
</head>
<body>
    <div style="display: inline;">中国</div>
    <span style="display: block;">联通</span>
</body>
</html>

注意：块级 + 块级&行内。

3.字体设置

颜色
大小
加粗
字体格式

.c1{
          color: #00FF7F;		/* RGB颜色*/
          font-size: 58px;	
          font-weight: 600;	/*加粗*/
          font-family: Microsoft Yahei;  /*字体*/
}

4.文字对齐方式

text-align: center; /* 水平方向居中 */
line-height: 59px; /* 垂直方向居中 */

5.浮动

/*放到右边*/
<span style="float: right">右边</span>

div默认块级标签（霸道），如果浮动起来，就变成自己有多宽占多宽。

<style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
</style>
<body>
    <div style="background-color: dodgerblue">
        <div style="clear: both;"></div>	/* 否则可能会掩盖父类的属性 */
    </div>
</body>

6.内边距

内边距，我自己的内部设置一点距离。

<style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            /*padding: 20px;*/
            /*padding: 20px 10px 5px 20px;*/
        }
</style>

7.外边距

外边距，与别人加点距离。margin-top margin-left margin-left margin-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
</body>
</html>

8.trick

body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？
```
body{
	margin: 0;
}
```

内容居中

文本居中，文本会在这个区域中居中。

<div style="width: 200px; text-align: center;">武沛齐</div>

区域居中，自己要有宽度 + margin-left:auto;margin-right:auto

.container{
    width: 980px;
    margin: 0 auto;
}
<div class="container">
	adfasdf
</div>

父亲没有高度或没有宽度，被孩子支撑起来。
a标签是行内标签，行内标签的高度、内外边距，默认无效。
垂直方向居中
- 本文 + line-height
- 图片 + 边距
a标签默认有下划线。
设置透明度
```
opacity:0.5;    /* 0 ~ 1 */
```

5 CSS样式补充

通过 : 加的被称为伪类

1 hover悬停效果（伪类）

鼠标悬停时的样式变化

<style>
        .c2 {
            height: 300px;
            width: 500px;
            border: 3px solid red;
        }
        .c2:hover {
            border: 3px solid green;
        }
        .download {
            display: none;
        }
        .app:hover .download {
            display: block;			/*鼠标移进来有内容，移出没有*/
        }
        .app:hover .title{
            color: red;
        }
 </style>
<body>
<div class="c2">广西</div>
<div class="app">
    <div class="title">下载APP</div>
    <div class="download">
        <img src="images/qcode.png" alt="">
    </div>
</div>
</body>

2 after追加内容（伪类）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:after{
            content: "大帅哥";
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;  	/*效果相当于style="clear: both;"	 清除浮动*/
        }
        .item{
            float: left;
        }
    </style>
</head>
<body>
    <div class="c1">吴阳军</div>
    <div class="clearfix">
        <div class="item">1</div>
     </div>
</body>
</html>

3 position

fixed

将元素相对于视窗固定定位

position: fixed;
relative

保留元素在正常文档流中的位置，并相对于其原始位置定位。

position: relative;
absolute

元素完全脱离正常文档流，并相对于其非静态父元素（或根元素）定位。

position: absolute;

relative内部嵌套absolute，相对于relative内容调整位置。

4.border

边框

<style>
        .c1{
            border: 1px solid red;		/*整体边框*/
            border-left: 3px solid #00FF7F;		/*只有左边框*/
            border-left: 2px solid transparent;			/*transparent表示透明色	一般跟hover结合时使用*/
        }
</style>

5.背景色

<style>
        .c1{
            background-color: #5f5750;
        }
</style>

注意：以上不是所有的CSS样式。

总结

至此，CSS部分的知识全部讲完。

大家：大致了解了页面的样式和标签。
模板：
- 模板的基本使用逻辑。
- 模板 + 自己CSS知识点（开发页面）

BootStrap

BootStrap是别人写好的CSS样式，我们如果想要使用这个BootStrap：

下载BootStrap
使用
- 在页面上引入BootStrap
- 编写HTML时，按照BootStrap的规定来编写 + 自定义。

1、初识

https://v3.bootcss.com/

<!DOCTYPE html>
<!--BootStrap引入-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- HTML注释：开发版本 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <!-- 生产版本 -->
    <!-- <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css"> -->
</head>

目录结构

python前端开发,python,web,前端

2、导航

去官网拷贝对应代码，粘贴到pycharm中点击导航栏的code->reformat code进行代码的自动格式化

如果要修改样式，打开网页的检查，找到对应的样式，可以在styles中进行预览

在头部加以下代码进行修改，或者在body中找到对应位置修改。

<style>
        .navbar {
            border-radius: 0;
        }
</style>

3、栅格系统

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

分类

响应式，不根据屏幕调整，保持不变

.col-lg-   1170px
.col-md-   970px
.col-sm-   750px

非响应式，根据屏幕调整

<div class="col-xs-6" style="background-color: red">1</div>					/*6格*/
<div class="col-xs-6" style="background-color: green">2</div>

列偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
    <div>
        <div class="col-sm-offset-2 col-sm-6" style="background-color: green">2</div>
    </div>
</body>
</html>

4、container

<div class="container-fluid">
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>

<div class="container">
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>

5、面板

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

注册界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .account {
            width: 400px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-shadow: 5px 5px 20px #aaa;

            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            padding: 20px 40px;
        }

        .account h2 {
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="account">
    <h2>用户登录</h2>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名">			/*placeholder是默认不操作时的占位符*/
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
        </div>

        <input type="submit" value="登 录" class="btn btn-primary">
    </form>
</div>
</body>
</html>

6、图标

bootstrap提供，不多。
fontawesome组件

https://fontawesome.dashgame.com/

7、BootStrap依赖

BootStrap依赖JavaScript的类库，jQuery。

下载 jQuery，在页面上应用上jQuery。
在页面上应用BootStrap的JavaScript类库。

python前端开发,python,web,前端

8、提前聊JavaScript

HTML，裸体
CSS，穿衣服
JavaScript，活动
- 编程语言
- 类库（模块）【jQuery是javaScript的类库】

JavaScript

JavaScript，是一门编程语言。浏览器就是JavaScript语言的解释器。

写在<script type="text/javascript"></script>标签内

DOM（ Document Object Model）和BOM（Browser Object Model）

相当于编程语言内置的模块。
例如：Python中的re、random、time、json模块等。

jQuery（Query JavaScript）

相当于是编程语言的第三方模块。
例如：requests、openpyxl

1. JavaScript

JavaScript的意义是什么？

让程序实现一些动态的效果。

# οnclick="myFunc()"函数启动script内部定义的函数
<body>
    <div class="menus">
        <div class="header" onclick="myFunc()">大标题</div>
        <div class="item">内容</div>
    </div>
    <script type="text/javascript">
        function myFunc() {
            //alert("你好呀");
            confirm("是否要继续？")
        }
    </script>
</body>

1.1 代码位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2SX9Rg8M-1685875910414)(E:\桌面\Python最新Web开发-课件\day13 前端开发\assets\image-20211122084910405.png)]

JS代码的存在形式：

当前HTML中（推荐放在body文件的最后，耗时久且代码解析是从上到下的，放最后利于用户体验）
```
<script type="text/javascript">
	// 编写JavaScript代码
</script>
```

在其他js文件中，导入使用。

<script src="static/my.js"></script>
<script type="text/javascript">
	// 编写JavaScript代码
</script>

1.2 注释

HTML的注释
```

```
CSS的注释，style代码块
```
/* 注释内容 */
```
JavaScript的注释，script代码块
```
// 注释内容

/* 注释内容 */
```

1.3 变量

Python，编程语言。

name = "高倩"			# 定义一个字符串
print(name)				# 输出

JavaScript，编程语言。

<body>
    <script type="text/javascript">
        var name = "高倩"; 		// 定义一个字符串
        console.log(name);			// 输出	浏览器右键检查->console
    </script>
</body>

1.4 字符串类型

支持循环遍历

var name = "高倩";		<!--用" "定义-->
var name = String("高倩");			<!--用String(" ")定义-->

// 常见功能
var name = "中国联通";

var v1 = name.length; 	//	获取长度
var v2 = name[0];   // name.charAt(0)		 js没有负数索引
var v3 = name.trim();		// 去除字符串的空白
var v4 = name.substring(0,2); 		// 切片   左闭右开

1.5 数组

支持循环遍历

var v1 = [11,22,33,44];		// [ ]定义
var v2 = Array([11,22,33,44]);		// Array([ ])定义

// 操作
var v1 = [11,22,33,44];
v1[1]		// 通过索引获取值
v1[0] = "高倩";		// 通过索引修改值
v1.push("联通");        // 尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通");     // 尾部追加 ["联通", 11,22,33,44]
v1.splice(索引位置, deleteCount, 元素);		// deleteCount为要删除的元素个数。如果为0，不会删除元素，仅插入新元素。
v1.splice(1,0,"中国");  // 尾部追加 [11,"中国",22,33,44]
v1.pop()     //尾部删除
v1.shift()   //头部删除

1.6 对象（字典）

支持循环遍历

info = {
    "name":"高倩",
    "age":18
}
info = {
    name:"高倩",
    age:18
}

info.age		//  获取值
info.name = "郭智"	//  设置值

info["age"]
info["name"] = "郭智"

delete info["age"]		// 删除值

1.7 条件语句

if ( 条件 )  {
}else{
}
if (1==1){  
}else{ 
}

if ( 条件 ){   
}else if ( 条件 )
}else if ( 条件 ){  
}else{
}

1.8 函数

def func():
    函数的内容...
func()

function func(){
    ...
}    
func()

2.DOM

DOM（Document Object Model），就是一个模块，模块可以对HTML页面中的标签进行操作。

// 根据ID获取标签
var tag = document.getElementById("xx");
// 获取标签中的文本
tag.innerText
// 创建标签 <div>哈哈哈哈哈</div>
var tag = document.createElement("div");
// 设置或修改标签中的文本
tag.innerText = "哈哈哈哈哈";

2.1 事件的绑定

// onclick事件绑定上addCityinfo()函数
<body>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
</ul>
<script type="text/javascript">
    function addCityInfo() {
        var newTag = document.createElement("li");
        newTag.innerText = "联通";
        var parentTag = document.getElementById("city");
        parentTag.appendChild(newTag);
    }
</script>
</body>

注意：DOM中还有很多操作。

DOM可以实现很多功能，但是比较繁琐。
页面上的效果：jQuery来实现 / vue.js / react.js

jQuery

jQuery是一个JavaScript第三方模块（第三方类库）。

1 快速上手

下载jQuery
```
https://jquery.com/
```
应用jQuery

// 先将jQuery引用进来
<script src="static/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    // 利用jQuery中的功能实现某些效果。
    // $("#txt") 表示找到 id=txt 的标签。 用.text()获取/修改内容。
    $("#txt").text("广西移动");
</script

2 寻找标签（直接寻找）

ID选择器

<h1 id="txt">中国联通</h1>
<h1>中国联通</h1>
<h1>中国联通</h1>

$("#txt")		// 找到所有 id=txt 属性

样式选择器

<h1 class="c1">中国联通1</h1>
<h1 class="c1">中国联通2</h1>
<h1 class="c2">中国联通3</h1>

$(".c1")		//找到所有 class=c1 属性

标签选择器

<h1 class="c1">中国联通1</h1>
<div class="c1">中国联通2</div>
<h1 class="c2">中国联通3</h1>

$("h1")		// 找到所有 h1 标签

层级选择器

$(".c1 .c2 a")			// 用空格表示下一层

多选择器

$("#c3,#c2,li")			// 用 , 表示共同选择

属性选择器

<input type='text' name="n1" />
<input type='text' name="n1" />
<input type='text' name="n2" />

$("input[name='n1']")		// 找到所有name='n1'的标签

3 间接寻找

以一个标签为一个个体

找到兄弟

$("#c1").prev()        // 该属性同级标签的上一个
$("#c1")
$("#c1").next()        // 该属性同级标签的下一个
$("#c1").next().next() // 下一个、下一个

$("#c1").siblings()    // 所有的同级标签

找父子

$("#c1").parent()            // 父亲
$("#c1").parent().parent()   // 父亲、父亲

$("#c1").children()                // 所有的儿子
$("#c1").children(".p10")          // 所有的儿子中寻找class=p10

$("#c1").find(".p10")              // 去所有子孙中寻找class=p10
$("#c1").find("div")              // 去所有子孙中寻找class=p1

4 操作样式

addClass
removeClass
hasClass

5 值的操作

<div id='c1'>内容</div>

$("#c1").text()        // 获取文本内容
$("#c1").text("休息")   // 设置文本内容

<input type='text' id='c2' />

$("#c2").val()            // 获取用户输入的值
$("#c2").val("哈哈哈")     // 设置值

6 事件

<input type="button" value="提交" onclick="getInfo()"/>
<script>
    function getInfo() {   
    }
</script>

<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
    $("li").click(function () {			  // 点击li标签时，自动执行这个函数
        var text = $(this).text();		// $(this) 表示当前点击的标签。
        console.log(text);
    });
    $("li").click(function () {			// 点击谁就将谁删除
        $(this).remove();
    });
    
      $(function () { 
        // 当页面的框架加载完成之后，自动就执行。
        $("li").click(function () {
            $(this).remove();
        });
    });
</script>

在jQuery中可以删除某个标签。

<div id='c1'>内容</div>
$("#c1").remove();

想知道更多可以查阅 jQuery手册文章来源地址https://www.toymoban.com/news/detail-759858.html

前端整合

HTML
CSS
JavaScript、jQuery
BootStrap（动态效果依赖jQuery）

到了这里，关于Python应用-web应用开发（上）前端part的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Python应用-web应用开发（上）前端part

包括HTML+CSS+BootStrap+JavaScript+jQuery的前端知识

快速开发网站

HTML

1 编码（head）

2 title（head）

3 标题

4 div和span

5 超链接

6 图片

小结

7 列表

8 表格

9 input系列

10 下拉框

11 多行文本

12 GET请求和POST请求

案例：用户注册

总结

CSS

1 快速了解

2 CSS应用方式

1. 在标签上写style

2. 在head标签中写style标签（*）

3.写到文件中（*）

问题：用Flask框架开发不方便

3 选择器

4 具体样式

1. 高度和宽度

2. 块级和行内标签

3.字体设置

4.文字对齐方式

5.浮动

6.内边距

7.外边距

8.trick

5 CSS样式补充

1 hover悬停效果（伪类）

2 after追加内容（伪类）

3 position

4.border

5.背景色

总结

BootStrap

1、初识

2、 导航

3、栅格系统

4、container

5、面板

注册界面

6、图标

7、BootStrap依赖

8、提前聊JavaScript

JavaScript

1. JavaScript

1.1 代码位置

1.2 注释

1.3 变量

1.4 字符串类型

1.5 数组

1.6 对象（字典）

1.7 条件语句

1.8 函数

2.DOM

2.1 事件的绑定

jQuery

1 快速上手

2 寻找标签（直接寻找）

3 间接寻找

4 操作样式

5 值的操作

6 事件

前端整合

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

2、导航