前端开发学习笔记

已于 2024-09-17 16:35:38 修改
阅读量1.7k 收藏 50
点赞数 39
文章标签： python 开发语言
于 2024-07-20 13:07:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57002446/article/details/140565122
版权

1. 协程

概念：协程本质上就是让一个线程不要停，切换者做多个任务（微线程）

应用场景：开发中又IO等待，就适合用协程

使用第三方模块实现：

from greenlet import greenlet

def func1():
    print(1)  # 第2步：输出1
    gr2.switch()  # 第3步：切换到func2函数
    print(2)  # 第6步：输出2
    gr2.switch()  # 第7步：切换到func2函数，从上次执行的位置继续向后执行

def func2():
    print(3)  # 第4步：输出3
    gr1.switch()  # 第5步：切换到func1函数，从上次执行的位置继续向后执行
    print(4)  # 第6步：输出4

gr1 = greenlet(func1)
gr2 = greenlet(func2)
gr1.switch()  # 第1步：去执行func1函数

python3.8以后的协程实现：

import asyncio

async def func1():
    print(1)
    await asyncio.sleep(2)  # IO自动切换到其他任务
    print(2)

async def func2():
    print(3)
    await asyncio.sleep(2)
    print(4)

task = [
    asyncio.ensure_future(func1()),
    asyncio.ensure_future(func2())
]
loop = asyncio.get_event_loop()
loop.run_until_complete(asyncio.wait(task))

2. 快速开发网站

2.1 使用Flask框架搭建网站

from flask import Flask

app = Flask(__name__)

@app.route('/unicom/xxx')
def index():
    return "中国联通"

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

2.2 HTML概念

网站是做出来了，但是太丑了，需要用一些标签将文本包裹起来使其好看一点，这就是HTML

@app.route('/unicom/xxx')
def index():
    return "<h1>中国联通</h1> <a href='#'>青海分公司</a>"

2.3 CSS概念

对于上面的标签再经行修饰，使其更加好看一些，就是CSS，即层叠样式表

@app.route('/unicom/xxx')
def index():
    return "<h1 style='color:red;'>中国联通</h1> <a href='#'>青海分公司</a>"

2.4 JavaScript概念

上面的标签里面都是不能点的，比如说你想让某个标签点击之后做一些什么，实现动态的交互式的效果，就是JS，比如让下面的中国联通点击之后出现一个弹窗

@app.route('/unicom/xxx')
def index():
    return "<h1 style='color:red;' onclick='alert(123)'>中国联通</h1> <a href='#'>青海分公司</a>"

2.5 结构优化

对于上面的代码，标签是直接写道函数里面的，看起来不太直观，使用起来不方便，一般在开发时会将HTML写入到一个文件中，再在函数中打开，读取的对应用户的浏览器返回回去

导入render_template模块，在项目的根目录下创建一个templates目录，在里面创建一个HTML文件作为模板，将写好的内容copy过来放在body里面

@app.route('/unicom/xxx')
def index():
    return render_template("index.html")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style='color:red;' onclick='alert(123)'>中国联通</h1>
    <a href='#'>青海分公司</a>
</body>
</html>

2.6 HTML中的占位符

如果想让页面动态显示内容，可以在HTML中写一个占位符，然后通过Flask框架传入数据

@app.route('/unicom/xxx')
def index():
    return render_template("index.html", n1='开发团队', n2='2024/7/20')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style='color:red;' onclick='alert(123)'>中国联通</h1>
    <a href='#'>青海分公司</a>
    年度优秀团队{{n1}}
    当前时间{{n2}}
</body>
</html>

3. 前端开发概述

前端常用组件：HTML，CSS，JavaScript，JQuery，BootStrap

HTML->实现网站的骨架，CSS->使网站点缀更好，JavaScript->让网页动起来，JQuery->第三方模块，能够用少量的代码简单实现动态效果，相当于帮你封装了很多JavaScript的功能，BootStrap->为我们提供了很多CSS+JavaScript效果，帮你实现了80%的功能

4. HTML

HTML即超文本标记语言，浏览器能识别的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    网站上能看到的都写在这里
</body>
</html>

4.1 heda里的标签

4.1.1 编码

<meta charset="UTF-8">

4.1.2 title

<title>江西联通</title>

4.2 body里的标签

4.2.1 标题标签

从h1到h6由粗变细，块级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
    <h1>中国1</h1>
    <h2>中国2</h2>
    <h3>中国3</h3>
    <h4>中国4</h4>
    <h5>中国5</h5>
    <h6>中国6</h6>
</body>
</html>

4.2.2 div和span标签

比较素的标签，本身不涵盖其他特点，包裹起来没啥变化，可塑性比较强

4.2.2.1 div

一个人占据一整行，块级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
    <div>山东蓝翔</div>
    <div>新东方技校</div>
</body>
</html>

4.2.2.2 span

自己有多少就占多少，行内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
    <span>山东蓝翔</span>
    <span>新东方技校</span>
</body>
</html>

4.2.3 案例

学习以上标签主要是为了给页面做布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
<div>
    <h1>一号新闻</h1>
    <div>
        <span style="color:#ef0000;">作者：xxx</span>
        <span>时间：2024/7/20</span>
    </div>
    <div>
        出台了多项政策，开展了多项活动
    </div>
</div>
<div>
    <h1>二号新闻</h1>
    <div>
        <span style="color:#ef0000;">作者：xxx</span>
        <span>时间：2024/7/20</span>
    </div>
    <div>
        出台了多项政策，开展了多项活动
    </div>
</div>

</body>
</html>

4.2.4 a标签

4.2.4.1 用a标签做跳转用

点击后从当前页面直接跳转到新的页面

<a href="网址">点击查看详细</a>

点击后在新标签中打开页面

<a target="_blank" href="https://www.bilibili.com/">点击查看详细</a>

 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
<div>
    <h1>一号新闻</h1>
    <div>
        <span style="color:#ef0000;">作者：xxx</span>
        <span>时间：2024/7/20</span>
    </div>
    <div>
        出台了多项政策，开展了多项活动
        <a target="_blank" href="https://www.bilibili.com/">点击查看详细</a>
    </div>
</div>
<div>
    <h1>二号新闻</h1>
    <div>
        <span style="color:#ef0000;">作者：xxx</span>
        <span>时间：2024/7/20</span>
    </div>
    <div>
        出台了多项政策，开展了多项活动
        <a target="_blank" href="https://www.bilibili.com/">点击查看详细</a>
    </div>
</div>

</body>
</html>

4.2.4.2 用a标签做锚点用

锚点的意思是如果一个网址带#号，点击后直接跳到#号所对应的那个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
    <a href="#i1">点击跳转到对应颜色区域</a>
    <a href="#i2">点击跳转到对应颜色区域</a>
    <a href="#i3">点击跳转到对应颜色区域</a>
    <div id="i1" style="height: 1000px;background-color: red"></div>
    <div id="i2" style="height: 1000px;background-color: green"></div>
    <div id="i3" style="height: 1000px;background-color: pink"></div>
</body>
</html>

4.2.5 图片标签

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

引入别人的网站的图片，直接附上图片的链接，但别人可能会加防盗链

<img src="https://pics7.baidu.com/feed/d439b6003af33a874257be3316df47365343b577.jpeg" />

引入自己的图片，需要在项目根目录下创建static文件夹，再将图片拷贝进去，最后在HTML引入，除此之外还可以在里面设置图片的高度和宽度

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

也可以在div标签里面设置高度和宽度，style里面填写比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>江西联通</title>
</head>
<body>
    <div style="height: 100px;width: 200px;">
        <img style="width: 50%" src="/static/test.png" />
    </div>
</body>
</html>

4.2.6 小结 

目前所学的标签有h1，div，span，a，img

其中h1，a，img都有自带的功能，h1标签可做标题，a标签可坐跳转，img标签可以显示图片。而div，span标签比较素，一般用来做页面的布局，标签和标签之间的嵌套

4.2.7 练习

利用当前所学的知识实现博客园首页的这种标题页面的显示

思路：把这里分作三份，就是三个块级标签，一个就占了一整行，再在里面进行嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客园 - 开发者的网上家园</title>
</head>
<body>
    <div>
        <a href="https://www.cnblogs.com/sunstrikes/p/18313798">
            <h4>LLM并行训练6-激活优化</h4>
        </a>
    </div>
    <div>
        <img src="/static/test.PNG" style="height: 80px">
        <span>激活指的是一些在fp时计算得到的临时tensor, 会用于bp时的计算......</span>
    </div>
    <div>
        <a href="https://www.cnblogs.com/sunstrikes">SunStriKE</a>
        <span>2024-07-20</span>
    </div>
</body>
</html>

4.2.8 列表标签

有<ul>和<ol>两种，其中ul是显示成点的图标，ol是以序号排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客园 - 开发者的网上家园</title>
</head>
<body>
    <h2>三大运营商</h2>
    <ul>
        <li>中国移动</li>
        <li>中国联通</li>
        <li>中国电信</li>
    </ul>
    <h2>一线城市</h2>
    <ol>
        <li>上海</li>
        <li>北京</li>
        <li>深圳</li>
    </ol>
</body>
</html>

4.2.9 表格标签

<table>标签里面包裹了<thead>和<tbody>两个标签，<thead>里面写表头，如果表格里面有一行数据就用<tr>来表示，一个<tr>表示一行。如果一行里面有很多列，在<tr>里面嵌套<th>来表示，一个<th>表示一列；<tbody>里面写内容，也是用<tr>表示一行，在里面嵌套<td>表示一列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客园 - 开发者的网上家园</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>xxx</td>
                <td>11</td>
            </tr>
            <tr>
                <td>2</td>
                <td>xxx</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

4.2.10 input系列

实现用户交互，让用户输入或者选择数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
</head>
<body>
    文本框<input type="text" placeholder="请输入文本">
    密码<input type="password" placeholder="请输入密码">
    上传文件<input type="file">
    单选框：
    男<input type="radio" name="n1">
    女<input type="radio" name="n1">
    复选框：
    篮球<input type="checkbox">
    足球<input type="checkbox">
    乒乓球<input type="checkbox">
    <input type="button" value="普通的按钮">
    <input type="submit" value="可以提交表单的按钮">
</body>
</html>

4.2.11 下拉框标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
</head>
<body>
    <div>
        单选
        <select>
            <option>上海</option>
            <option>北京</option>
            <option>深圳</option>
        </select>
        多选
        <select multiple>
            <option>上海</option>
            <option>北京</option>
            <option>深圳</option>
        </select>
    </div>
</body>
</html>

4.2.12 多行文本标签

<textarea style="width: 500px;height: 100px;"></textarea>

4.2.13 form标签

from标签在提交数据时只会提交input系列，下拉框，多行文本框这些和用户交互的标签里的值

<form action="提交的网址" method="post或者get">

5. 综合练习

用户在网页上提交注册数据，Flask框架中接收用户提交的数据

思路：在html中使用form表单，用户输入的内容嵌套在form表单里面，其中表单的action指向需要对接收数据做处理的函数。其中对于select和input标签，需要给其赋一个值来表示当前用户所选的内容

5.1 使用get方式提交数据

method使用get方法，该方法会将传递的数据放到url中，如127.0.0.1/do/reg?user=123&pwd=456

网页通过form表单实现用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
</head>
<body>
    <form action="/do/reg" method="get">
        <div>
            用户名：<input type="text" placeholder="请输入用户名" name="user">
        </div>
        <div>
            密码：<input type="password" placeholder="请输入用密码" name="pwd">
        </div>
        <div>
            角色：
            <select name="role">
                <option value="1">管理员</option>
                <option value="2">学生</option>
                <option value="3">老师</option>
            </select>
        </div>
        <div>
            性别：
            <input type="radio" name="gender" value="f">男
            <input type="radio" name="gender" value="w">女
        </div>
        <div>
            爱好：
            <input type="checkbox" name="hobby" value="10">篮球
            <input type="checkbox" name="hobby" value="20">足球
            <input type="checkbox" name="hobby" value="30">乒乓球
        </div>
        <div>
            其他：<textarea name="others"></textarea>
        </div>
        <input type="submit" value="注册">
    </form>
</body>
</html>

Flask接收请求

from flask import Flask, render_template, request

app = Flask(__name__)


# 访问地址http://127.0.0.1:5000/register
@app.route('/register')
def register():
    return render_template("register.html")


@app.route('/do/reg', methods=['GET'])
def do_reg():
    # 1.接收用户提交的数据，接收到的数据格式为：http://127.0.0.1:5000/do/reg?user=xxxx&pwd=xxxx
    username = request.args.get('user')
    password = request.args.get('pwd')
    role = request.args.get('role')
    gender = request.args.get('gender')
    hobby_list = request.args.getlist('hobby')
    others = request.args.get('others')
    print(username, password, role, gender, hobby_list, others)
    # 2.将收到的用户名和密码写入数据库
    # 3.返回信息
    return "注册成功"


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

5.2 使用post方式提交数据

method使用post方法，该方法会将传递的数据放到请求体中，user=123&pwd=456

如果要上传文件只能用post，例如我们再新增一个上传文件的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
</head>
<body>
    <form action="/do/reg" method="post" enctype="multipart/form-data">
        <div>
            <input type="file" name="up_files">
        </div>
    </form>
</body>
</html>
from flask import Flask, render_template, request

app = Flask(__name__)


# 访问地址http://127.0.0.1:5000/register
@app.route('/register')
def register():
    return render_template("register.html")


@app.route('/do/reg', methods=['POST'])
def do_reg():
    # 1.接收用户提交的数据，接收到的数据放在form表单中
    file_obj = request.files.get('up_files')  # 获取到一个文件对象
    print(file_obj.name)  # 获取文件名
    file_obj.save("up_picture.png")  # 如果上传的是一个图片，将上传的文件另存为up_picture.png
    username = request.form.get('user')  # post请求使用form来获取数据
    password = request.form.get('pwd')
    role = request.form.get('role')
    gender = request.form.get('gender')
    hobby_list = request.form.getlist('hobby')
    others = request.form.get('others')
    print(username, password, role, gender, hobby_list, others)
    # 2.将收到的用户名和密码写入数据库
    # 3.返回信息
    return "注册成功"


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

5.3 代码优化

在实际使用场景中，用户注册成功之后不会只是单纯的打印一段文字，而是需要跳转到登录界面，下面以post方式来实现登录界面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>用户登录</h2>
    <form action="/do/login" method="post">
        用户名：<input type="text" name="user">
        密码：<input type="password" name="pwd">
        <input type="submit" value="提交">

    </form>
</body>
</html>
from flask import Flask, render_template, request, redirect

app = Flask(__name__)


# 访问地址http://127.0.0.1:5000/register
@app.route('/register')
def register():
    return render_template("register.html")


@app.route('/do/reg', methods=['POST'])
def do_reg():
    # 1.接收用户提交的数据，接收到的数据放在form表单中
    file_obj = request.files.get('up_files')  # 获取到一个文件对象
    print(file_obj.name)  # 获取文件名
    file_obj.save("up_picture.png")  # 如果上传的是一个图片，将上传的文件另存为up_picture.png
    username = request.form.get('user')
    password = request.form.get('pwd')
    role = request.form.get('role')
    gender = request.form.get('gender')
    hobby_list = request.form.getlist('hobby')
    others = request.form.get('others')
    print(username, password, role, gender, hobby_list, others)
    # 2.将收到的用户名和密码写入数据库
    # 3.返回信息，跳转到登录界面
    return redirect("http://127.0.0.1:5000/login")


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


@app.route('/do/login', methods=['POST'])
def do_login():
    username = request.form.get('user')
    password = request.form.get('pwd')
    if username == "root" and password == "123":
        return "登录成功"
    return "登录失败"


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

6. CSS

6.1 CSS的应用位置

6.1.1 应用在标签上

<h1 style='color: red; height: 300px'>中国联通</h1>

6.1.2 应用在head中

优点在于可以在当前页面中复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .color{
            background-color: red;
            color: green;
        }
    </style>
</head>
<body>
    <div class="color">测试文本</div>
    <div class="color">测试文本</div>
    <div class="color">测试文本</div>
</body>
</html>

6.1.3 应用在CSS文件中

在pycharm中创建一个Stylesheet文件

把上面写在style中的代码写到该CSS文件中

哪个模板要用就在head中导入即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="utils.css">
</head>
<body>
    <div class="color">测试文本</div>
    <div class="color">测试文本</div>
    <div class="color">测试文本</div>
</body>
</html>

6.2 选择器

概念：比如上面的CSS里面写的是.color，然后在html中我们用的是class="color"；如果用的是#color，那我们在html中要写成id="color"

6.2.1 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #high{
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="high">测试文本</div>
</body>
</html>

ID在html中一般都是唯一的，只针对这一个标签

6.2.2 class选择器

参见6.1.2，一般class选择器是用的最多的

6.2.3 标签选择器

在style中写标签名称，比如下面代码在style中写了a标签并设置字体颜色为红色，那么会将html中的所有a标签找到并设置字体颜色为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            color: red;
        }
    </style>
</head>
<body>
    <div>测试文本</div>
    <div>
        <a>a标签</a>
    </div>
    <span>span标签</span>
    <a>a标签</a>
</body>
</html>

6.2.4 后代选择器

适用于不想让所有标签都应用，只想让某些个特定的标签才应用的场景

以下的代码表示从.yy的子子孙孙中找到所有的li标签并设置字体颜色为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .yy li{
            color: red;
        }
    </style>
</head>
<body>
    <div class="yy">
        <a>百度</a>
        <div>
            <a>谷歌</a>
        </div>
        <ul>
            <li>美国</li>
            <li>日本</li>
            <li>韩国</li>
        </ul>
    </div>
</body>
</html>

如果写成.yy > a{}表示去找yy所有儿子中的a标签，孙子不行

如果写成.yy > div a{}表示先找所有儿子中的div标签，再去儿子子子孙孙中找所有a标签

综上所述，尖括号表示去儿子里面找，空格表示去所有子子孙孙里面找

6.2.5 属性选择器

以下代码表示去所有input下面找type='password'的标签并设置，去所有v1下面找xx='456'的标签并设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type='password']{
            color: red;
        }
        .v1[xx='456']{
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
    <div class="v1" xx="123">s</div>
    <div class="v1" xx="456">f</div>
    <div class="v1" xx="789">a</div>
</body>
</html>

6.2.6 一个标签应用多个样式

以下代码表示一个标签中同时应用了c1和c2的样式，如果c1和c2有相同的设置，下面的会覆盖上面的，如果不想被覆盖，可以在属性后面加上"!important"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            color: green !important;
        }
        .c2{
            height: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="c1 c2">文本样例</div>
</body>
</html>

6.3 常见样式

6.3.1 高度和宽度

对于块级标签可以生效，但是标签右边的空白区域也会占据，对于行内标签无效。对于高度和宽度也可使用百分比，百分比的宽度一定是根据它父亲有多大，占它父亲的百分之多少；百分比的高度一定要有一个固定的父亲高度才可以设置

<div style="height: 100px;width: 200px;background-color: pink"></div>
<div style="height: 100px;width: 50%;background-color: green"></div>
<span style="height: 100px;width: 200px;background-color: pink">中国</span>

6.3.2 块级标签or行内标签

块级标签可以变成行内标签，需要加上'display:inline'，行内标签也可以变成块级标签，需要加上'display:block'，如果两种标签的特点都要用上可以加上'display:inline-block'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: pink;display: inline">中国联通</div>
    <span style="background-color: green;display: block">江西联通</span>
    <a style="background-color: rebeccapurple;display: block">百度</a>
    <div style="background-color: red;width: 100px;display: inline-block">中国</div>
    <div style="background-color: green;width: 100px;display: inline-block">江西</div>
    <div style="background-color: pink;width: 100px;display: inline-block">九江</div>
    <div style="background-color: gold;width: 100px;display: inline-block">学院</div>
</body>
</html>

6.3.3 字体设置

设置字体颜色，大小，加粗，字体格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .xx{
            color: red;
            font-size: 60px;
            font-weight: 400;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="xx">中国联通</div>
</body>
</html>

6.3.4 文字对齐方式

6.3.4.1 水平方向对齐

在整个页面中对齐

<h2 style="text-align: center">用户注册</h2>

也可以包裹在div里面，再给div设置高度宽度，使其在div中对齐

<div style="width: 500px;border: 1px solid red">
    <h2 style="text-align: center">用户注册</h2>
</div>
6.3.4.2 垂直方向对齐

通过.header里面的line-height实现，使小米手机，小米电视，小米手环在红框区域中保持上下居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .header{
            background-color: red;
            height: 48px;
            line-height: 48px;
        }
    </style>
</head>
<body>
    <div class="header">
        <a>小米手机</a>
        <a>小米电视</a>
        <a>小米手环</a>
    </div>
</body>
</html>

6.3.5 浮动

实现两个span标签一个在页面左边一个在页面右边

<div style="width: 500px">
    <span style="float: left">中国</span>
    <span style="float: right">联通</span>
</div>

div标签会占据一整行，现在使div标签浮动起来，两个都往左边放，这样一行就能放两个div了

<div>
    <div style="float: left">中国</div>
    <div style="float: left">联通</div>
</div>

应用：基于float做页面布局，可以实现多个页面的图片挨着放的效果，下面用.item代表图片，body里面放了七张图片，这些图片会紧贴着往左边放，如果太多了会自动换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .item{
            float: left;
            width: 170px;
            height: 240px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

注意：如果让标签浮动起来，会脱离文档流（父亲管不住）

默认不浮动时，孩子会把父亲撑起来，如下面的代码，设置了一个粉色的背景色，里面放了青海和江西两个div标签，此时会占据两行，给江西标签设置一个高度，此时整个粉色区域也会跟着变高

<div style="background-color: pink">
    <div>青海</div>
    <div style="height: 200px">江西</div>
</div>

如果设置了浮动，一个在左边一个在右边，那么父亲的粉色区域撑不起来，页面只会显示白色

<div style="background-color: pink">
    <div style="float: left">青海</div>
    <div style="height: 200px;float: right">江西</div>
</div>

如何解决呢，只需在下面加上一行style="clear: both"即可，意思是清除浮动

<div style="background-color: pink">
    <div style="float: left">青海</div>
    <div style="height: 200px;float: right">江西</div>
    <div style="clear: both"></div>
</div>

6.3.6 内边距

可以理解成脂肪厚了，比如下面代码，有一个文本框，文本框里面的文字是紧贴着文本框边线的，如果想让他离文本框边线有一些距离，就用padding来设置。padding:20px表示上下左右都设置20的内边距；padding:10 20px表示上下设置为10，左右设置为20；padding:10 20 30 40px表示按照上右下左的顺时针顺序来设置，padding-left表示设置左边，padding-top表示设置上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .c1{
            width: 500px;
            height: 100px;
            border: 1px solid red;
            padding: 20px;
            padding: 10 20px;
            padding: 10 20 30 40px;
            padding-left: 10px;
            padding-top: 50px;
        }
    </style>
</head>
<body>
    <div class="c1">
        中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通中国联通
    </div>
</body>
</html>

6.3.7 外边距

指两个标签之间的间隔，我和你距离远了，使用方法和内边距类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .c1{
            height: 100px;
            background-color: pink;
        }
        .c2{
            height: 100px;
            background-color: green;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>
6.3.7.1 外边距必须知道的三个场景
6.3.7.1.1 整体区域居中显示

给内容设置了固定的高度和宽度后使其显示在页面中间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .content{
            height: 500px;
            width: 980px;
            background-color: pink;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>
6.3.7.1.2 居中窗体

比如让登录注册的那种窗口居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
    <style>
        .box{
            height: 400px;
            width: 450px;
            background-color: pink;
            border: 1px solid #dddddd;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
6.3.7.1.3 取消默认边距

比如下面的代码，设置了一个背景为粉色的div标签，理论上会把页面占满，但实际上在页面的上下左右还是有一点空白区域，这就是默认边距，以后开发过程中每个页面都需要将其去掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
</head>
<body style="margin: 0">
    <div style="height: 500px;background-color: pink"></div>
</body>
</html>

6.3.8 hover伪类

当鼠标放到标签上面之后才会应用该样式，否则不会应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: #b0b0b0;
        }
        .c1:hover{
            color: green;
        }
        .app .qcode{
            display: none;
        }
        .app:hover .title{
            color: red;
        }
        .app:hover .qcode{
            display: block;
        }
    </style>
</head>
<body>
    <a class="c1">百度</a>
    <div class="app">
        <div class="title">下载APP</div>
        <div class="qcode">
            <img src="images/code.jpg">
        </div>
    </div>
</body>
</html>

以上代码中，“.c1:hover”是仅对自己hover，而“.app:hover”是先对整体进行hover，再对里面不同的元素应用不同的效果 ，实现鼠标放上去之后就展示图片，不放上去就不展示的功能

6.3.9 after伪类

可以在标签尾部加上一些内容，比如在下面每个文字都加上大帅哥三个字，在里面写content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            color: red;
        }
        li:after{
            content: '大帅哥';
        }
    </style>
</head>
<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
    </ul>
</body>
</html>

还有一个非常重要的功能是清除浮动，比如下面的代码，没用到after之前需要在con clearfix和data-list clearfix的最后面加上<div style="clear: both"></div>才能把背景的绿色撑起来，使用伪类则可以将其提取出来写道style里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix{
            background-color: green;
        }
        .clearfix .item{
            width: 100px;
            height: 200px;
            border: 1px solid red;
            float: left;
        }
        .clearfix:after{
            content: "";
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
    <div class="con clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="data-list clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

 6.3.10 边框

下面代码里的border表示边框，1px表示边框的粗细，solid表示实线，#33333表示边框颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 100px;
            width: 100px;
            border: 1px solid #333333;
            border-left: 1px solid red;
            border-right: 1px solid green;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

注意：边框有额外的宽高，比如你设置的高度是100px，实际上有102px 

边框的实际应用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu-list{
            height: 800px;
            width: 200px;
            border: 1px solid #333333;
        }
        .menu-list a{
            display: block;
            padding: 8px;
            border-bottom: 1px solid #b0b0b0;
            border-left: 3px solid transparent;
        }
        .menu-list a:hover{
            border-left: 3px solid red;
        }
    </style>
</head>
<body>
    <div class="menu-list">
        <a>用户管理</a>
        <a>账户管理</a>
        <a>财务管理</a>
    </div>
</body>
</html>

6.3.11 背景色和背景图

背景色：

<div style="width: 100px;height: 50px;background-color: red"></div>

背景图：

 其中background-position: -205px -111px表示需要在这个设定的窗口内展示的图片的区域坐标。如果窗口大图片小，会默认将图片一个一个铺满整个窗口 ，如果不需要重复铺满，可以在style下面加一句background-repeat: no-repeat;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 32px;
            width: 103px;
            background-image: url("images/v1.png");
            background-position: -205px -111px;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

6.3.12 position

最常见的有三个属性：position:fixed; position:relative; position:absolute;

6.3.12.1 fixed

固定在窗口的某个位置，比如实现一个返回顶部的区域，上下滑动页面时这个区域始终处于右下角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .top-top{
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 60px;
            height: 60px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;background-color: #0dcaf0">
        页面内容
    </div>
    <div class="top-top">
        返回顶部
    </div>
</body>
</html>

 实现登录的对话框，弹出登录框的时候页面背景变的半透明的效果。其中z-index表示只要某个index比你大，那么它就比你后应用，比如下面代码表示先加遮罩层再加对话框，left，right，top，bottom表示离上下左右的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #333333;
            opacity: 0.8;
            z-index: 1000;
        }
        .dialog{
            position: fixed;
            top: 100px;
            left: 0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
            width: 400px;
            height: 300px;
            background-color: white;
            z-index: 1001;
        }
    </style>
</head>
<body>
    <div style="height: 3000px;background-color: pink">
        页面内容
    </div>
    <div class="bg"></div>
    <div class="dialog"></div>
</body>
</html>
6.3.12.2 relative+absolute 

将一个标签相对于你的某个标签放在哪里，以下代码中将绿框放在了整体框的左上部分，框里面也有文字信息，但绿框没有将文字截断，而是看上去飘在上面了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            position: relative;
        }
        .c2{
            width: 30px;
            height: 30px;
            background-color: green;
            position: absolute;
            left: 30px;
            top: 20px;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="c1">
        <p>qqqqqqqqqqqqqq</p>
        <p>qqqqqqqqqqqqqq</p>
        <p>qqqqqqqqqqqqqq</p>
        <div class="c2"></div>
    </div>
</body>
</html>

6.4 练习-小米商城

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        body{
            margin: 0
        }
        .header{
            height: 40px;
            background-color: #333;
            line-height: 40px;
            color: #b0b0b0;
            font-size: 12px;
        }
        .container{
            width: 1226px;
            margin-left: auto;
            margin-right: auto;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .header .left{
            float: left;
        }
        .header .right{
            float: right;
        }
        .header .menu{
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            color: #b0b0b0;
            text-decoration: none;
        }
        .header .menu:hover{
            color: white;
        }
        .header .menu .download{
            position: absolute;
            width: 100px;
            left: -13px;
            display: none;
        }
        .header .menu .download img{
            width: 100%;
        }
        .header .menu:hover .download{
            display: block;
        }
        .menus{
            height: 100px;
            line-height: 100px;
            border-bottom: 1px solid red;
        }
        .menus .logo_area{
            width: 234px;
        }
        .menus .logo_area .logo{
            background: url(//cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png) no-repeat;
            background-size: 56px;
            width: 56px;
            height: 56px;
            display: block;
            margin-top: 22px;
        }
        .menus .item_area .item{
            display: inline-block;
            margin-right: 20px;
            font-size: 16px;
            color: #333;
            text-decoration: none;
        }
        .menus .item_area .item:hover{
            color: #ff6700;
        }
        .bar img{
            width: 100%;
        }
        .news .functions{
            width: 234px;
            background-color: #5f5750;
            height: 170px;
            color: #fff;
        }
        .news .pic{
            width: 316px;
            height: 170px;
            background-color: #ff6700;
            margin-left: 15px;
        }
        .news .pic img{
            width: 100%;
            height: 100%;
        }
        .news .func{
            width: 70px;
            height: 64px;
            float: left;
            padding: 0 3px;
            font-size: 12px;
            padding-top: 18px;
        }
        .func img{
            width: 24px;
            height: 24px;
            display: block;
            margin: 0 auto 4px;
        }
        .main{
            background-color: #f5f5f5;
            min-height: 500px;
            margin-top: 20px;
            padding-top: 20px;
        }
        .main .title{
            font-size: 22px;
            color: #333;
            font-weight: 200;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="left">
                <a href="https://www.mi.com/shop" class="menu" style="padding-left: 0">小米官网</a>
                <a href="https://www.mi.com/shop" class="menu">小米商城</a>
                <a href="https://www.mi.com/shop" class="menu">小米澎湃OS</a>
                <a href="https://www.mi.com/shop" class="menu">小米汽车</a>
                <a href="https://www.mi.com/shop" class="menu">云服务</a>
                <a href="https://www.mi.com/shop" class="menu">IOT</a>
                <a href="https://www.mi.com/shop" class="menu">有品</a>
                <a href="https://www.mi.com/shop" class="menu">小爱开放平台</a>
                <a href="https://www.mi.com/shop" class="menu">资质证照</a>
                <a href="https://www.mi.com/shop" class="menu">协议规则</a>
                <a href="https://www.mi.com/shop" class="menu" style="position: relative">
                    下载app
                    <div class="download" style="position: absolute">
                        <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1">
                    </div>
                </a>
                <a href="https://www.mi.com/shop" class="menu">Select Location</a>
            </div>
            <div class="right">
                <a href="https://www.mi.com/shop" class="menu">登录</a>
                <a href="https://www.mi.com/shop" class="menu">注册</a>
                <a href="https://www.mi.com/shop" class="menu" style="padding-right: 0">消息通知</a>
            </div>
        </div>
    </div>
    <div class="menus">
        <div class="container clearfix">
            <div class="logo_area left">
                <a href="https://www.mi.com/shop" class="logo"></a>
            </div>
            <div class="item_area left">
                <a class="item">Xiaomi手机</a>
                <a class="item">Redmi手机</a>
                <a class="item">电视</a>
                <a class="item">笔记本</a>
                <a class="item">平板</a>
                <a class="item">家电</a>
                <a class="item">路由器</a>
                <a class="item">服务中心</a>
                <a class="item">社区</a>
            </div>
        </div>
    </div>
    <div class="bar">
        <div class="container">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/397f2569b126d8fba446b6bbf57ef771.jpg?thumb=1&w=1226&h=460&f=webp&q=90">
        </div>
    </div>
    <div class="news">
        <div class="container clearfix">
            <div class="left functions">
                <div class="func">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                    <div style="text-align: center">保障服务</div>
                </div>
                <div class="func">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48">
                    <div style="text-align: center">企业团购</div>
                </div>
                <div class="func">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48">
                    <div style="text-align: center">F码通道</div>
                </div>
                <div class="func">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48">
                    <div style="text-align: center">米粉卡</div>
                </div>
                <div class="func">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48">
                    <div style="text-align: center">以旧换新</div>
                </div>
                <div class="func">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48">
                    <div style="text-align: center">话费充值</div>
                </div>
            </div>
            <div class="left pic" style="margin-left: 14px">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340">
            </div>
            <div class="left pic">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8dede2520f8dfff9c9b690af498cafe8.jpg?w=632&h=340">
            </div>
            <div class="left pic">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ac77590368ff636d0b4f6a988133f55.png?w=632&h=340">
            </div>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="title clearfix">
                <div class="left">手机</div>
                <div class="right">查看更多</div>
            </div>
        </div>
    </div>
</body>
</html>

7. BootStrap

别人帮我们写好的一大堆写好的CSS+JS，一般用V3版本

网址：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

 7.1 快速上手

下载后解压放到项目的根目录下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
    <a class="btn-primary">点击</a>
    <a class="btn-danger">点击</a>
</body>
</html>

 7.2 栅格系统

如果是块级标签将一行划分为12个格，可以根据这个格对里面的数据进行划分谁占多少谁占多少

文档路径：全局CSS样式->栅格系统

分割是相对于它父亲的，比如下面的代码，分割成了两个6，那就是左边占一半右边占一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
    <div style="width: 500px">
        <div class="col-sm-6">左边</div>
        <div class="col-sm-6">右边</div>
    </div>
</body>
</html>

7.2.1 列偏移

比如下面代码中的提交按钮想和第二格对齐，可以定义前面的偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
    <div style="width: 500px">
        <div>
            <div class="col-sm-2">
                用户名
            </div>
            <div class="col-sm-10">
                <input type="text">
            </div>
        </div>
        <div>
            <div class="col-sm-offset-2 col-sm-10">
                <input type="button" value="提交">
            </div>
        </div>
    </div>
</body>
</html>

7.2.2 响应式布局

当屏幕尺寸变化时自动排列页面

7.3 container 

使容器居中显示，支持响应式布局。开发时一般用这个提供好的container

<div class="container">
    页面内容
</div>

 container-fluid：使页面平铺，直接占满

<div class="container-fluid">
    页面内容
</div>

7.4 claerfix

清除浮动。col-sm也是浮动，如果不加不会把父亲撑起来，无法显示背景色

<div style="background-color: #ff6700" class="clearfix">
    <div class="col-sm-2">xxxx</div>
    <div class="col-sm-10">xxxx</div>
</div>

7.5 练习-登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style>
        .box{
            width: 400px;
            margin-top: 100px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid #dddddd;
            padding-left: 30px;
            padding-right: 30px;
            padding-bottom: 30px;
            border-radius: 5px;
            -webkit-box-shadow: 10px 10px 10px rgb(0 0 0 / 5%);
            box-shadow: 10px 10px 10px rgb(0 0 0 / 5%);
        }
        .box h2{
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>用户登录</h2>
        <form>
          <div class="form-group">
            <!--这里的lable可以用来获取光标，意思是鼠标点到标题上输入框内就有光标了。for="user"和下面的id="user"对应-->
            <label for="user">用户名或手机号</label>
            <input type="text" class="form-control" id="user" placeholder="用户名或手机号">
          </div>
          <div class="form-group">
            <label for="pwd">密码</label>
            <input type="password" class="form-control" id="pwd" placeholder="密码">
          </div>
          <input type="submit" class="btn btn-primary" value="登 录">
        </form>
    </div>
</body>
</html>

7.6 导航

动态效果依赖：

1.下载jQuery

2.引入jQuery

<script src="js/jquery-3.7.1.min.js"></script>

3.引入BootStrap的js

<script src="bootstrap/js/bootstrap.js"></script>

效果：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<!--这里的style="border-radius: 0"可以去掉边框的圆角-->
<div class="navbar navbar-default" style="border-radius: 0">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">联通靓号系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">财务管理</a></li>
                <li><a href="#">系统配置</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">权限管理<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">周杰伦 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">修改密码</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">注销</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

7.7 面板

<div class="col-md-2">
    <div class="panel panel-primary">
        <div class="panel-heading">Panel heading without title</div>
        <div class="panel-body">
            Panel content
    </div>
</div>

7.8 表格

<table class="table table-bordered">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
    </tbody>
</table>

7.9 媒体对象 

<div class="media">
    <div class="media-left">
        <a href="#">
            <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                 src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTFjZjk1OWYxOCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5MWNmOTU5ZjE4Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                 data-holder-rendered="true" style="width: 64px; height: 64px;">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
        vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
</div>

7.10 分页 

<ul class="pagination">
    <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>

7.11 整体结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<!--这里的style="border-radius: 0"可以去掉边框的圆角-->
<div class="navbar navbar-default" style="border-radius: 0">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">联通靓号系统</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">财务管理</a></li>
                <li><a href="#">系统配置</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">权限管理<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">周杰伦 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">修改密码</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">注销</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</div>

<div class="container">
    <div class="row"><!--class="row"可以使导航栏和栅格的内容在一条水平列上-->
        <div class="col-sm-9">
            <div>
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                                 src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTFjZjk1OWYxOCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5MWNmOTU5ZjE4Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                                 data-holder-rendered="true" style="width: 64px; height: 64px;">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                        vulputate fringilla. Donec lacinia congue felis in faucibus.
                    </div>
                </div>
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                                 src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTFjZjk1OWYxOCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5MWNmOTU5ZjE4Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                                 data-holder-rendered="true" style="width: 64px; height: 64px;">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                        vulputate fringilla. Donec lacinia congue felis in faucibus.
                    </div>
                </div>
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                                 src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTFjZjk1OWYxOCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5MWNmOTU5ZjE4Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                                 data-holder-rendered="true" style="width: 64px; height: 64px;">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                        vulputate fringilla. Donec lacinia congue felis in faucibus.
                    </div>
                </div>
                <ul class="pagination">
                    <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                </ul>
            </div>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
                </tbody>
            </table>
            <ul class="pagination">
                <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
            </ul>
        </div>
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">24小时热门新闻资讯</div>
                <div class="panel-body">
                    <div>dqdqw</div>
                    <div>dqdqw</div>
                    <div>dqdqw</div>
                    <div>dqdqw</div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">24小时热门新闻资讯</div>
                <ul class="list-group">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>

        </div>
    </div>
</div>

<script src="js/jquery-3.7.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

7.12 图标

Bootstarp里面有图标，如果想要更多的图标也可以下载fontawesome，下载后在该网站把对应图标的代码粘贴过来即可

地址：Font Awesome，一套绝佳的图标字体库和CSS框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
    <i class="fa fa-camera-retro fa-5x"></i>
</body>
</html>

8. JavaScript 

JaveScript相关：

JaveScript是一门编程语言，运行在浏览器上

DOM，内置模块，一般是用于文档对象的操作，如清除标签内容，修改内容

BOM，内置模块，一般用于对浏览器做操作，如刷新，跳转

jQuery相关：

jQuery是别人写好的一大堆的JS代码，把常见的JS功能写好了，相当于Python中的第三方模块，引入进来就可以使用

扩展：

前后端不分离的开发模式使用到的有：HTML，CSS，JavaScript，jQuery，BootStrap

前后端分离的开发模式使用到的有：HTML，CSS，JavaScript，vue.js，elementui

我们当前学的是前后端不分离的模式

8.1 JavaScript编写的位置

1. 写在head里面或body的底部

<script>
    alert(123)
</script>

2. 在Pycharm上可以新建一个JS文件，写在JS文件里面

<script src="demo.js"></script>

以上两种方式都推荐放到body的底部

8.2 编译并执行代码

浏览器编译并执行JS代码，可以在浏览器右键点检查，再Console这里编写一些代码。一般用于测试和调试

8.3 关于注释

HTML注释

<!--<div>注释的内容</div>-->

CSS注释

<style>
    div{
        color: white;
        /*width: 100px;*/
    }
</style>

JavaScript代码注释

<script>
    // 注释的内容
    /* 多行注释 */
    // alert(123);
    /* alert(123); */
</script>

8.4 变量

使用var定义变量

<script>
    var name = "中国联通"
    alert(name);
    console.log(name);
</script>

8.5 字符串类型

<script>
    var name = "root"
    var v1 = name.length; //字符串长度
    var v2 = name[0]; //等价于name.charAt(1)，取下标对应的值
    var v3 = name.trim(); //去除字符串两边的空白
    var v4 = name.substring(0,2); //取字符串下标0和1两位数字
</script>

案例：滚动字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span id="txt">欢迎中国联通领导莅临指导</span>
    <script>
        // JavaScript中对于函数的定于，function+函数名，括号里面可以传参数，花括号里面是函数体
        function run() {
            // 1.获取文本原始内容
            var tag = document.getElementById("txt"); //找到当前的标签
            var data_string = tag.innerText; //获取中间的文本信息
            //2.生成新字符串
            var first_char = data_string[0]; //欢
            var other_staring = data_string.substring(1,data_string.length); //迎中国联通领导莅临指导
            var new_string = other_staring + first_char; //迎中国联通领导莅临指导欢
            //3.新内容替换到标签中
            tag.innerText = new_string;
        }
        //定时器
        setInterval(run, 1000) //第一个参数写函数名，第二个参数表示1000毫秒即1秒
    </script>
</body>
</html>

8.6 数组

<script>
    var v1 = [11,22,33,44]; //定义一个数组
    //通过for循环v1取到v1里面每个值的下标index，再通过v1[index]取到具体的值
    for (var idx in v1) {
        console.log(idx, v1[idx]);
    }
    // 先定义一个i等于0，当i小于数组长度的时候就加1
    for (var i = 0; i < v1.length; i++) {
        console.log(i, v1[i]);
    }
</script>

案例：动态添加数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="添加" onclick="creat_data();"> <!--绑定事件，只要一点击即可触发事件-->

    <ul id="city">
        <li>北京</li>
    </ul>

    <script>
        function creat_data() {
            var city_list = ["青海", "江西", "上海"] //定义一个数组
            for (var idx in city_list) {
                var text = city_list[idx]; //通过下标取具体的值

                var tag = document.createElement("li"); // 创建标签对象 <li>青海<li>
                tag.innerText = text; //指定标签对象里面的值

                var parent = document.getElementById("city"); // 获取city标签
                parent.appendChild(tag); // 往标签里面添加数组对象
            }
        }
    </script>
</body>
</html>

8.7 对象（字典）

<script>
    // 定义对象
    info = {"name": 123, "age": 456}
    info = {name: 123, age: "xxxx"}
    // 取值
    info["name"]
    info.name
    // 循环取值
    for (var k in info) {
        console.log(k, info[k])
    }
</script>

案例：动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="添加" onclick="creat_table();">
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
        </tbody>
    </table>

    <script>
        function creat_table() {
            var data_list = [
                {id:1, name:"周杰伦", age:40},
                {id:2, name:"Jay", age:30},
                {id:3, name:"Chou", age:20},
            ];

            var body = document.getElementById("body")
            for (var idx in data_list) {
                var info = data_list[idx];
                var tr = document.createElement("tr");
                for (var k in info) {
                    var text = info[k];
                    var td = document.createElement("td");
                    td.innerText = text;
                    tr.appendChild(td);
                }
                body.appendChild(tr)
            }
        }
    </script>
</body>
</html>

8.8 条件语句

<script>
    if (1==1) {
        
    }else if{
        
    }else if{
        
    }else {
        
    }
</script>

8.9 函数

<script>
    // 定义函数
    function 函数名 (a1) {
        //函数体
    }
    函数名(123) //执行函数
</script>

8.10 DOM

本质上就是对标签对象进行操作

<script>
    // 获取标签对象
    var tag = document.getElementById("id")
    // 读取标签内容
    tag.innerText
    // 修改标签内容
    tag.innerText = "哈哈哈"
    // 创建标签<div></>div>
    var tag = document.createElement("div")
    // 如果有一个标签，让另外一个标签对象加入到里面
    var body = document.getElementById("body")
    body.appendChild(标签对象)
</script>

案例：在网页上展示出用户输入的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="姓名" id="txtUser">
    <input type="button" value="获取数据" onclick="change_data();">
    <h1>
        数据：<span id="data"></span>
    </h1>
    <script>
        function change_data() {
            var user_obj = document.getElementById("txtUser")
            var span_obj = document.getElementById("data")
            span_obj.innerText = user_obj.value
        }
    </script>
</body>
</html>

8.11 BOM

浏览器提供的功能

consle.log

alert setinterval

location.reload()

confirm(可接收一个返回值，如var ret = confirm("是否想继续？");console.log(ret);)

9. jQuery

jQuery是一个javascript的第三方类库（模块）

下载并引入

学习语法

9.1 快速上手

$符号代替jQuery变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 id="i1">
        哈哈哈
    </h1>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        var old_string = $("#i1").text(); // 获取id为i1的标签内容
        var new_string = old_string + "666" // 将获取到的内容加上666构成新的字符串
        $("#i1").text(new_string) // 写入新的字符串
    </script>
</body>
</html>

9.2 选择器（直接寻找标签）

9.2.1 ID选择器

<h1 id="x1">中国联通</h1>
$("#i1")

9.2.2 样式选择器

<h1 class="c1">中国联通</h1>
<h1 class="c1">中国电信</h1>
<h1 class="c2">中国移动</h1>
$(".c1")

9.2.3 标签选择器

<h1>中国联通</h1>
<h2>中国电信</h2>
<h1>中国移动</h1>
$("h1")

9.2.4 层级选择器

<div class="c1">
    <a>百度</a>
    <span>谷歌</span>
</div>
$(".c1 span")

9.2.5 属性选择器

<input type="text">
<input type="password">
<input type="file">
$("input[type='text']")

9.3 筛选器（间接寻找标签 ）

9.3.1 找兄弟

<div>
    <span>南京</span>
    <span>北京</span>
    <span id="ct">上海</span>
    <span>天津</span>
    <span>广州</span>
</div>
$("#ct").prev().prev() // 上一个的上一个兄弟
$("#ct").prev() // 上一个兄弟
$("#ct") // 当前标签
$("#ct").next() // 下一个兄弟
$("#ct").next().next() // 下一个的下一个兄弟
$("#ct").siblings // 找到所有的兄弟

9.3.2 找父子

<div>
    <div id="info">
        <span>南京</span>
        <span class="c1">北京</span>
        <span>天津</span>
        <a class="c1">成都</a>
        <div>
            <span class="c1">达州</span>
        </div>
    </div>
    <div>
        <span>合肥</span>
        <span id="ct">安徽</span>
        <span>山西</span>
    </div>
</div>

$("#ct").parent() // 找它的父亲
$("#ct").parent().parent() // 找它父亲的父亲
$("#info").children() // 找儿子
$("#info").children("span") // 找儿子中的span标签
$("#info").children(".c1") // 找儿子中的c1
$("#info").find(".c1") // 找后代中的所有c1

9.3.3 案例：菜单切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu {
            width: 220px;
            height: 880px;
            border: 1px solid #dddddd;
        }
        .menu .header {
            padding: 10px 5px;
            background-color: goldenrod;
        }
        .menu .content a {
            display: block;
            padding: 5px;
            border-bottom: 1px solid #dddddd;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="header" onclick="ShowMe(this);">上海</div> <!--这里的this表示当前这个标签-->
            <div class="content hide">
                <a>宝山区</a>
                <a>浦东区</a>
                <a>普陀区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="ShowMe(this);">北京</div>
            <div class="content hide">
                <a>海淀区</a>
                <a>朝阳区</a>
                <a>西城区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="ShowMe(this);">成都</div>
            <div class="content hide">
                <a>双流区</a>
                <a>青羊区</a>
                <a>锦江区</a>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        function ShowMe(self) {
            // 这里的self代指上面的this，把DOM对象转换为了jQuery对象
            $(self).next().removeClass('hide'); // 谁去点击，那么它的下一级就去除hide
            $(self).parent().siblings().find(".content").addClass('hide') // 谁去点击，那么它的父亲的所有兄弟的content标签都加上hide
        }
    </script>
</body>
</html>

9.4 样式操作

addClass 添加样式
removeClass 移除样式
hasClass 是否有样式
toggleClass 有就移除，没有就添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .info {
            color: green;
        }
    </style>
</head>
<body>
    <input type="button" value="点击" onclick="change_class();">
    <div id="x1">
        中国联通
    </div>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
      $("#x1").addClass("xxx yyy")
      $("#x1").removeClass("yyy")
      var v = $("#x1").hasClass("xxx");
      console.log(v)
      function change_class() {
          $("#x1").toggleClass("info")
      }
    </script>
</body>
</html>

9.5 值操作

<input type="text" id="c1">
<div id="x1">青海联通</div>
<script>
  $("#c1").val() // 获取用户输入的文本
  $("#c1").val("联通") // 设置值
  $("#x1").text() // 获取文本内容
  $("#x1").text("内容") // 设置文本内容
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="用户名" id="txtUser">
    <input type="password" placeholder="密码" id="txtPwd">
    <input type="button" value="提交" onclick="click_me();">
    <div class="content"></div>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
      function click_me() {
          var user = $("#txtUser").val();  // 获取用户名
          var pwd = $("#txtPwd").val(); // 获取密码
          var data_string = user + "-" + pwd; // 拼接用户名和密码
          $(".content").text(data_string); // 写入div
      }
    </script>
</body>
</html>

9.6 创建标签对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="用户名" id="txtUser">
    <input type="password" placeholder="密码" id="txtPwd">
    <input type="button" value="提交" onclick="click_me();">
    <ul class="content">
    </ul>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
      function click_me() {
          // 1.获取值
          var user = $("#txtUser").val();  // 获取用户名
          var pwd = $("#txtPwd").val(); // 获取密码
          var data_string = user + "-" + pwd; // 拼接用户名和密码
          // 2. 创建li标签并加入到ul标签里面
          var tag = $("<li>").text(data_string)
          $(".content").append(tag)
          // 3.清空输入框
          $("#txtUser").val("")
          $("#txtPwd").val("")
      }
    </script>
</body>
</html>

9.7 关于对象

DOM对象

var tag = document.createElement("div")
tag.innerText

jQuery对象

$("xxx")
$("xxx").text()

DOM对象->jQuery对象

var tag = document.createElement("div")
$(tag)

jQuery对象->DOM对象

$("xxx")[0]

9.8 属性prop

用于选择按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
        <tr>
            <th>选择</th>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody id="body">
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>1</td>
            <td>周杰伦</td>
            <td>666</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>1</td>
            <td>周杰伦</td>
            <td>666</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>1</td>
            <td>周杰伦</td>
            <td>666</td>
        </tr>
        </tbody>
    </table>
    <input type="button" value="全选" onclick="check_all();">
    <input type="button" value="取消" onclick="cancel_all();">
    <input type="button" value="反选" onclick="check_reverse();">
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        // 找到所有input标签且type为checkbox，设置checked为true，表示选中
        function check_all() {
            $("#body").find("input[type='checkbox']").prop('checked', true)
        }
        // 找到所有input标签且type为checkbox，设置checked为false，表示取消选中
        function cancel_all() {
            $("#body").find("input[type='checkbox']").prop('checked', false)
        }
        // 使用each进行循环，获取每一个标签里checked的状态，如果为true则变成false，否则变成true
        function check_reverse() {
            $("#body").find("input[type='checkbox']").each(function () {
                var old = $(this).prop("checked"); // prop里面只写一个值表示获取这个值的状态
                if (old) {
                    $(this).prop("checked", false);
                } else {
                    $(this).prop("checked", true);
                }
            })
        }
    </script>
</body>
</html>

9.9 文档

<ul id="x1">
    <li>中国</li>
</ul>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
    var tag = $("<li>").text("北京") // 创建一个标签
    $("#x1").append(tag); // 从最后面加
    $("#x1").prepend(tag); // 加到第一个
</script>

9.10 事件

基于DOM和BOM的方式实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="单击" onclick="xxxx()">
    <input type="button" value="双击" ondblclick="xxxx()">
    <input type="button" value="鼠标放上去" onmouseover="xxxx()">
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        function xxxx() {
            console.log(123);
        }
    </script>
</body>
</html>

基于jQuery实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="单击" id="x1">
    <input type="button" value="双击" id="x2">
    <input type="button" value="鼠标放上去" id="x3">
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $("#x1").click(function () {
            console.log($(this).val());
        });
        $("#x2").dblclick(function () {
            console.log($(this).val());
        });
        $("#x3").mouseover(function () {
            console.log($(this).val());
        });
    </script>
</body>
</html>

9.11 事件委托

当你动态添加数据，又希望添加的数据也能绑定上事件的时候，就依赖于事件委托来进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="城市" id="city">
    <input type="button" value="添加" id="btnAdd">
    <ul id="cityList">
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
    </ul>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $("#btnAdd").click(function () {
            var data = $("#city").val();
            var li = $("<li>").text(data);
            $("#cityList").append(li);
        });
        // 事件委托关键代码，找到固定的cityList标签，.on里面的click表示事件名称，可以是单击也可以是双击，li表示cityList的子标签
        $("#cityList").on("click", "li", function () {
            var text = $(this).text();
            console.log(text)
        })
    </script>
</body>
</html>

9.12 框架加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">中国联通</div>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(function () {
            // 当页面框架加载完成之后，自动执行。
            // 比如页面要加载一个很大的图片，按照以前的方式写需要等图片加载完再执行jQuery代码，现在这样写只要页面的标签加载完了就会执行
            $("#i1").click(function () {
                console.log(123);
            });
        })
    </script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值