Python开发之一（前端开发之HTML、CSS、Bootstap、Javascript、JQuery）

文章目录

一、Flask网页开发
- 1.1创建一个名为web1.py的python文件
- 1.2 templates目录
- - 创建文件index.html
二、html标签
- 2.1 编码
- 2.2title < head >
- 2.3 标题< h>
- 2.4 div和span
- 2.5超链接
- - 1.在index.xml文件中补充。
  - 2.修改web1.py文件
  - 3.添加get_self.html
  - 4.效果
- 2.6图片
- - 1.格式
  - 2.图片大小
  - 3.本地图片的存放
  - 效果
- 小结
- - 标签嵌套：
- 创建商品列表
- - 效果图
- 2.7列表
- - 2.7.1无序列表
  - 2.7.2有序列表
- 2.8表格
- 2.9 input系列
- 2.10 下拉框
- 2.11 多行文本
- 2.12 用户注册案例
- 2.13案例：简单的用户注册登录系统
- - 1.用户注册的页面
  - 2.用户登录页面
  - 3.用户登录后的页面
  - 4.flask框架搭建web
  - 5.效果
三、CSS
- 3.1CSS方式
- - 3.1.1在标签上
  - 3.1.2在head标签的style上(*)
  - 3.1.3 写到文件中(*)
- 3.2选择器
- - 1.ID选择器 #c1
  - 2.类选择器 .c2 **
  - 3.标签选择器 **
  - 4，属性选择器
  - 5.后代选择器 **
  - 6.样式覆盖问题
- 3.3样式
- - 1.高度和宽度
  - 2. 块级和行内标签
  - 3.字体和对齐方式：
  - 4. 浮动
  - 5. 内边距
  - 6. 外边距
  - 7.全图页面和内容居中
  - 8.hover：设置变色
  - 9.after 尾部添加东西
  - 10 fixed 返回顶部
  - 10.对话框
  - 11.border边框
- 3.4小米商城案例
- - 1. 案例1：小米顶部
  - 2.案例2：二级菜单
  - 3.案例3：顶部和菜单整合
  - 4.小结
  - 5.案例4：推荐区域
四、Bootstrap
- 4.1引入bootstrap
- - 1. 下载bootstrap
  - 2. 项目结构：
  - 3.引入bootstrap
- 4.2导航栏
- - 1. 修改样式
  - 2.修改body中的文本
- 4.3栅格
- 4.4 container
- 4.5 面板
- 4.6分页
- 4.7图标
- - 如何使用
- 案例一：登录页面
- 案例二：后台页面
- 4.8 Bootstrap动态效果
五、Javascript
- 5.1js放置位置
- 5.2HTML中相关代码的注释
- 5.3 变量
- - 5.3.1 字符串类型
  - 5.3.2 数组
  - 5.3.3 字典
- 5.4 条件语句
- 5.5 函数
- 5.6 DOM
- 5.7 事件绑定
- 5.8总结
6 Jquery
- 6.1快速上手
- 6.2 寻找标签（直接）
- - 6.2.1 ID选择器
  - 6.2.2样选择器
  - 6.2.3标签选择器
  - 6.2.4层级选择器
  - 6.2.5多选择器
  - 6.2.6属性选择器
- 6.3 寻标签（间接）
- - 6.3.1找兄弟
  - 6.3.1找父亲
  - 案例一: 菜单的切换
- 6.4值的操作
- 6.5事件
- - 案例: 表格操作
七、前端整合

知识总结：
Python_web前端开发

一、Flask网页开发

python 安装Flask web框架

pip install flask

1.1创建一个名为web1.py的python文件

from flask import Flask

app = Flask(__name__)

#创建了网址和函数的对应关系
#访问网址会自动调用函数
@app.route('/show/info')
def index():
    return 'hello word'

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

在这里插入图片描述

1.2 templates目录

简介：templates用来返回html的页面，而非文本。

创建文件index.html

结构如下
在这里插入图片描述
index.xml内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>hello world</h1> ->如果网页还需添加东西，可在<body>下添加
</body>
</html>

web1.py内容如下：

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()

重新运行后：

在这里插入图片描述

二、html标签

固定格式：h/div/span/a/img/ul/li/table/input/form

2.1 编码

通用的字符编码

< meta charset=“UTF-8”>

2.2title < head >

<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>

2.3 标题< h>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h1>
    <h3>三级标题</h1>
    ...
</body>

2.4 div和span


 <div>内容</div>
 <span>hello world</span>

div:一个人占一整行；
span：用多少占多少【行内标签、内联标签】
***span同行则内容相连，span不同行则内容间有空格。

2.5超链接

设置一个跳转到本地链接和一个跳转到非本地链接。

1.在index.xml文件中补充。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <h1 >自己的网址</h1>
    <a href="/show/get_self">点击跳转到自己的网址</a>
</body>
<body>
    <h1 >别人的网址</h1>
    <a href="https://www.csdn.net/">点击跳转别人的网站百度</a>
</body>
</html>

**注意：**本连链接可以只写路径即可，而非本地链接则需要完整的链接。

2.修改web1.py文件

在文件中添加一个读取自己网址

from flask import Flask, render_template

app = Flask(__name__)

#创建了网址和函数的对应关系
#访问网址会自动调用函数
@app.route('/show/info')
def index():
     #Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
     #默认：去当前项目目录的templates文件夹中找
     return render_template('index.html')

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

3.添加get_self.html

在templates目录下创建get_self.html，并添加以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>自己的网址</h1>
    <div>欢迎来到我的网站</div>
</body>
</html>

4.效果

项目结构：

运行后的效果。
在这里插入图片描述

2.6图片

1.格式

<imgsrc="图片链接 ”>

2.图片大小

方法一：百分比

< img style=“height:10% ;width:10% " src=”/static/1711707418779.jpg">
方法二：像素大小
<img style=“height:100px;width:100px “src=”/static/1711707418779.jpg”>

3.本地图片的存放

在项目中创建static目录下，用来存放自己的图片文件。
在这里插入图片描述

在index.html文件添加以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <h1 >自己的网址</h1>
    <a href="/show/get_self">点击跳转到自己的网址</a>
    <img style="height:100px;width:10% " src="/static/1711707418779.jpg">
</body>
<body>
    <h1 >别人的网址</h1>
    <a href="https://www.csdn.net/">点击跳转别人的网站百度</a>
    <img style="height:100px;width:100px " src="https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280">
</body>
</html>

效果

在这里插入图片描述

小结

块级标签
-< h1> < /h1>

< div>< /div>

行内标签

< span></ span>
< a>< /a>
< img />

标签嵌套：

可以实现点击图片跳转到其他链接。

创建商品列表

在static目录下添加三张图片：
在这里插入图片描述
在web1.py中添加一个获取货物链接的方法：

@app.route('/goods/list')
def get_product():
     return render_template('get_product.html')

添加get_product.html，内容如下

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

<body>

 <h1>商品列表</h1>
    <a href="https://www.mi.com/shop/buy/detail?product_id=19715">
        <img src="/static/product1.png" style="width: 150px;"/>
    </a>
   <a href="https://www.mi.com/shop/buy/detail?product_id=19715">
        <img src="/static/product2.png" style="width: 150px;"/>
    </a>
   <a href="https://www.mi.com/shop/buy/detail?product_id=19715">
        <img src="/static/product3.png" style="width: 150px;"/>
    </a>


</body>
</html>

效果图

在这里插入图片描述

2.7列表

2.7.1无序列表

在get_product.html文件中添加：

<ul>
	<li>中国移动</li>
	<li>中国联通</li>
	<li>中国电信</li>
</ul>

在这里插入图片描述

2.7.2有序列表

在get_product.html文件中添加：

中国移动
中国联通
中国电信

在这里插入图片描述

2.8表格

web1.py添加：

@app.route('/get/table')
def get_table():
     return render_template('get_table.html')

创建文件get_table.html并添加内容：

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


<body>
    <table border="1">
        <thead>
            <tr> <th>ID</th> <th>姓名</th> <th>年龄</th></tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>张三</td><td>20</td></tr>
            <tr><td>2</td><td>李四</td><td>20</td></tr>
            <tr><td>3</td><td>王五</td><td>20</td></tr>
            <tr><td>4</td><td>赵六</td><td>20</td></tr>
        </tbody>
    </table>

</body>
</html>

其中border="1”是添加格式框。

在这里插入图片描述

2.9 input系列

<!-- 文本与密码 -->
<div><input type= 'text'></div>

<input type="password">
<!-- 选择文件 -->
<input type="file">
<!-- 单选框 -->
<input type="radio" name="n1">男
<input type="radio" name="n2">女
<!-- 复选框 -->
<input type="checkbox" />篮球
<input type="checkbox" />游泳
<input type="checkbox" />羽毛球
<input type="checkbox" />篮球
<!-- 按钮 -->
<input type="button" value="提交">普通提交
<input type="submit" value="提交">提交表单

在这里插入图片描述

2.10 下拉框


.<select>
	<option>北京</option>
	<option>上海</option>
	<option>深圳</option>
</select>

2.11 多行文本

<textarea></textarea>

2.12 用户注册案例

在web1.py文件中添加

@app.route('/register')
def get_register():
     return render_template('register.html')

在register.html文件中添加：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
</head>
<body>
    <h1>用户注册</h1>
    <div>
        用户名:
        <input type="text" />
    </div>

    <div>
        密码:
        <input type="password" />
    </div>

    <div>
        性别:
       <input type="radio" name="sex"/>男
       <input type="radio" name="sex"/>女
    </div>

    <div>
        爱好:
        <input type="checkbox">唱
        <input type="checkbox">跳
        <input type="checkbox">Rap
        <input type="checkbox">篮球
    </div>

    <div>
        城市:
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </select>
    </div>

    <div>
        备注: <textarea cols="30" rows="10"></textarea>
    </div>
    <div>
        <input type="button" value="button提交">
        <input type="submit" value="submit提交">
    </div>
</body>

</html>

在这里插入图片描述

2.13案例：简单的用户注册登录系统

提交有两种方式：
GET: 可通过URL/表单提交
POST: 只能通过表单提交,提交数据不在URL而是在请求体中

form表单可以提交的前提条件:
提交方式: method=“get”
提交地址: action=“/xxx/xxx/xxx”
在form标签里面必须有一个submit标签
每个标签有name属性

项目结构：
在这里插入图片描述

1.用户注册的页面

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

<!-- get方法注册-->

```css
<h1>注册表1</h1>
<form method="post" action="/register">

    <div>
        用户名：<input style="text" name="user">
    </div>
    <div>
        密码：<input style="password" name="pwd">
    </div>

    <div>
        <input type="radio" name="gender" value="1"> 男
        <input type="radio" name="gender" value="2"> 女
    </div>
    <div>
        爱好
        <input type="checkbox" name="hobby" value="a">篮球
        <input type="checkbox" name="hobby" value="b">足球
        <input type="checkbox" name="hobby" value="c">棒球
    </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="1">打游戏</option>
        <option value="2">英语</option>
        </select>
    </div>
    <div>
        备注:<textarea name="more"></textarea>
    </div>
    <div>
            <input type="submit" value="submit提交">
    </div>

</form>
</body>
</html>

2.用户登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎登录</h1>
<form method="post" action="/login">
  账号：<input type="text" name="user">
  账号：<input type="text" name="pwd">
  提交：<input type="submit" name="button" value="submit">
</form>

</body>
</html>

3.用户登录后的页面

index.html，添加以下内容

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



<body>
    <table border="1">
        <thead>
            <tr> <th>ID</th> <th>姓名</th> <th>年龄</th></tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>张三</td><td>20</td></tr>
            <tr><td>2</td><td>李四</td><td>20</td></tr>
            <tr><td>3</td><td>王五</td><td>20</td></tr>
            <tr><td>4</td><td>赵六</td><td>20</td></tr>
        </tbody>
    </table>

</body>
</html>

4.flask框架搭建web

在web.py中添加

from flask import Flask,render_template,request

app = Flask(__name__)

@app.route('/register',methods=['GET','POST'])
def register():
    if request.method == "GET":
        return render_template('register.html')
    else:
        user = request.form.get('user')
        pwd = request.form.get('pwd')
        gender = request.form.get('gender')
        hobby_list = request.form.getlist('hobby_list')
        city = request.form.get('city')
        skill_list = request.form.getlist('skill_list')
        more = request.form.getlist('more')

        print(user,pwd,gender,hobby_list,city,skill_list,more)
        return "注册成功"

#get方式
@app.route('/login',methods=['GET','POST'])
def do_register():
    if request.method == "GET":
        return render_template('login.html')
    else:
        return render_template('index.html')


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

5.效果

注册页面
在pycharm后台拿到账号和密码
在登录页面登录
登录完跳转到

三、CSS

简介：专门用来”美化“标签。
高度/宽度/块级or行内or块级行内/浮动/字体/文字对齐方式/内边距/外边距
关于边距：
-body
-区域居中

3.1CSS方式

3.1.1在标签上

<img src="..." stype="height: 100px">
<div stype="height: 100px">hello</div>

3.1.2在head标签的style上(*)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            color:red
        }
    </style>
</head>
<body>

<h1  class="c1">hello</h1>

3.1.3 写到文件中(*)

在static目录下创建 common.css文件

.XX{
    color: red;
}

调用CSS样式::

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

<h1  class="XX">hello</h1>

</body>
</html>

3.2选择器

1.ID选择器 #c1

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #c1 {
	    color: red;
    }
    </style>
</head>
<body>

<h1  id="c1">hello</h1>

</body>

2.类选择器 .c2 **

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #c1 {
	    color: red;
    }
    .c2 {
	    color: green;
    }
    div {
	    color: red;
    }
    </style>
</head>
<body>

<h1  >x</h1>
<div id="c1">小明</div>
<div class="c2">小红宏</div>
<div>小丽丽里</div>

3.标签选择器 **

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    div {
	    color: red;
    }
    </style>
</head>
<body>
<div>小丽丽里</div>

4，属性选择器

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


 <div class="v1">小明</div>
<div class="v1" value="xx">小红宏</div>

找到标签为value=“xx”，才能做相应的操作。

5.后代选择器 **

指定对应的标签生效。

    .ss a{
        color:green;
    }
<div class="ss">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>美国</li>
        <li>英国</li>
    </ul>
</div>

指定ss 类下的a标签生效

6.样式覆盖问题

 .c1 {
        color:red;
    }
     .c2 {
        color:gold;
    }
   <div class="c2 c1" value="xx">小红宏</div>

按style的顺序来生效的。class=“c1 c2”或者class=“c2 c1” 都是选择c2进行生效，c1则被覆盖，要使c1不被覆盖则需要增加！important；
eg：

.c1 {
        color:red ！important;
    }

3.3样式

1.高度和宽度

.c1{
height:300px;
widht:30%
}
注意事项：

支持百分比
行内标签: 默认无效
块级标签: 默认有效(右边的剩余空白区域也会被占用)

2. 块级和行内标签

display:inline-block 使行内标签对 height 和 width 生效

.c4 {
        display: inline-block;
        height: 300px;
        width: 500px;
        border: 1px solid red;
    }
    </style>


<body>
<span class="c3">块级和行内标签</span>
</body>

在这里插入图片描述

块级与行内标签的转换

<div style="display: inline;">块级转行内</div>
 <span style="display: block;">行内转块级</span>

注意：块级+块级&行内

3.字体和对齐方式：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .c1 {
            color: #00FF7F;                   /* 字体颜色 */
            font-size: 20px;                  /* 字体大小 */
            font-weight: 600;                 /* 字体粗细 */
            font-family: Microsoft Yahei;     /* 字体样式 */
            text-align: center;               /* 水平方向居中 */
            line-height: 50px;                /* 垂直方向居中 */
            border: 1px solid red;            /* 边框 */
        }
    </style>
</head>

4. 浮动

如果在块级标签中，加入了float属性，那么这个块级标签奖不会再占用一整行，而是自己有多大就占用多大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .item {
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <div>
        <div class="item"></div>

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

在这里插入图片描述

如果你让标签浮动起来之后，就会脱离文档流。
例如下面的例子中，我们给div的父标签赋予了一个蓝色的背景，但是你不会看到蓝色背景。因为他被浮动的div字标签挡住了。

<body>
    <div style="background-color: blue;">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
           </div>
</body>

此时父标签中的背景blue是没有显示的，如图在这里插入图片描述

解决办法: 在同级子标签的最下面添加 style=“clear: both;”

<body>
    <div style="background-color: blue;">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>
    </div>
    </body>

在这里插入图片描述

5. 内边距

格式：
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;

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

        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }

</style>



<div class="outer">
  <div>小明</div>
  <div>w小红</div>

</div>

6. 外边距

margin

<body>
    <div style="height: 200px; background-color: aquamarine;"></div>
    <div style="height: 200px; background-color:blueviolet; margin-top: 20px;"></div>
</body>

在这里插入图片描述

7.全图页面和内容居中

全图页面：

body{
	margin:0;
}

内同居中：

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

<div style="width：200px; text-align:center;">橙汁</div>

在这里插入图片描述
2. 区域居中,自己要有宽度+margin-left:auto;margin-right:auto;

 <style>
  .container{
  width:500px;
  margin:0 auto;
  }
    </style>


<div class="container">橙汁2</div>

在这里插入图片描述

父亲没有高度或者宽度，被孩子支撑起来

8.hover：设置变色

简介：鼠标接触目标就会显示不同的信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .c1 {
            color:brown;
        }
        .c1:hover {
            color: red;
            font-size: 20px;
        }

        .c2 {
            width: 300px;
            height: 300px;
        }
        .c2:hover {
            border: 3px solid red;
        }

        .download {
            display: none;
        }

        .app:hover .download {
            display: block;
        }

    </style>
</head>
<body>
    <div class="c1">鼠标靠近我变成red</div>
    <div class="c2">鼠标靠近我变成red</div>
    <div class="app">
        <div>鼠标放我这里触发显示二维码</div>
        <div class="download">
            <img src="static/img_1.png" alt="">
        </div>
    </div>
</body>
</html>

9.after 尾部添加东西

用来清除掉浮动，不用每次都写stype=“clear: both;”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfie:after {
            content: "";
            display:block;
            clear:both
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="item">1</div>
        <div class="item">1</div>
        <div class="item">1</div> 
      </div>
</body>
</html>

10 fixed 返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .back {
     position: fixed;
     width: 60px;
     height: 60px;
     border: 1px solid red;

     right: 50px;
     bottom: 50px;}
  </style>
</head>
<body>
<div style="height:1000px;background-color:#b0b0b0"></div>
<div class="back"></div>
</body>
</html>

在这里插入图片描述

10.对话框

.app{
            position: relative;
        }

        .app .download {
            position: absolute;
            display: none;
            height: 100px;
            width: 100px;
        }

        .app:hover .download {
            display: block;
        }



 <a href="https://www.mi.com" class="app" >下载app
<div class="download"> <img src="static/img_5.png" ></div>
</a>

在这里插入图片描述

11.border边框

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

        .left {
            float: left;
        }

        .c1 {
            height: 200px;
            width: 300px;
            border: 3px dotted #00FF7F;
            margin: 50px;
        }

        .c2 {
            height: 200px;
            width: 300px;
            border: 3px solid red;
            border-left: 10px solid green;
            margin: 50px;
        }

        .c3 {
            height: 200px;
            width: 300px;
            margin: 50px;
            background-color: bisque;
            border-left: 2px solid transparent;  /* 透明色 */
        }

        .c3:hover {
            border-left: 2px solid rgb(35, 211, 19);
        }

    </style>
</head>
<body>
    <div class="c1 left">虚线~</div>
    <div class="c2 left">实线</div>
    <div class="c3 left">透明色，碰到我会变色哦</div>
    <div style="clear: both;"></div>
</body>
</html>

在这里插入图片描述

3.4小米商城案例

1. 案例1：小米顶部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      margin:0
    }

    .site-topbar {
      height: 40px;
      font-size: 12px;
      color: #b0b0b0;
      background: #333;
}

.container{
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
.site-topbar .menu {
    float: left;
    height: 40px;
    line-height: 40px;
}
.site-topbar .accont {
    float: right;
    height: 40px;
    line-height: 40px;
}


  </style>
</head>
<body>

<div class="site-topbar">
  <div class="container">
    <div  class="menu">
      <a>小米官网 </a>
      <a> 小米商城 </a>
      <a>小米澎湃OS</a>
      <a> IoT </a>
      <a> 云服务</a>
    </div>
    <div class="accont">
      <a>登录 </a>
      <a> 注册 </a>
    </div>
  </div>
</div>



</body>
</html>

在这里插入图片描述

2.案例2：二级菜单

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

  <style>
    .body{
      margin:0;
     }
    .sub_header{
      height:100px;
    }
    .container{
      width:1128px;
      margin:0 auto;
  }

    .sub_header .logo_mi{
        width:234px;
        float:left;
     }
    .sub_header .logo_mi a{
        margin-top:22px;
        display:inline-block;
     }
     .sub_header .logo_mi a img{
        height:56px;
        width:56px;
     }

    .sub_header .menu{
        float:left;
        line-height:100px;


     }
     .sub_header .menu a{
        display:inline-block;
        padding:0 15px;
        color:#333;
        font-size: 16px;
        text-decoration:none;

     }
     .sub_header .menu a:hover{
        color:#ff6700;

     }

    .sub_header .search{

        float:left;
     }
  </style>

</head>
<body>


<div class="sub_header">
  <div class="container">
      <div class="hw logo_mi">
        <!--a行内标签;默认设置高度、边距无效,转成块级&行内+块级-->
        <a href="https://www.mi.com/" >
          <img src="static/img_1.png">
        </a>
      </div>
          
      <div class="hw menu">
        <a href="https://www.mi.com/">xiaomi手机</a>
        <a href="https://www.mi.com/">redmi手机</a>
        <a href="https://www.mi.com/">电视</a>
        <a href="https://www.mi.com/">笔记本</a>
      </div>
      <div class="hw search"></div>
      <div style="clear:both;"></div>
  </div>

</div>



</body>
</html>

在这里插入图片描述

3.案例3：顶部和菜单整合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        /* 去掉body的边距 */
        body {
            margin: 0;
        }

        .header {
            background-color: #333;
        }

        /* 让中间内容居中 */
        .container {
            width: 1226px;
            margin: 0 auto;     /* 上下为0, 左右为auto */
        }

        /* header class 下的标签 a 自动应用这个样式 */
        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
        }

        .header .menu {
            float: left;
            color: white;
        }

        .header a {
            text-decoration: none;
        }

        .header a:hover {
            color: white;
        }

        .header .account {
            float: right;
            color: white;
        }

    .sub_header{
      height:100px;
    }

    .sub_header .logo_mi{
        width:234px;
        float:left;
     }
    .sub_header .logo_mi a{
        margin-top:22px;
        display:inline-block;
     }
     .sub_header .logo_mi a img{
        height:56px;
        width:56px;
     }

    .sub_header .menu{
        float:left;
        line-height:100px;


     }
     .sub_header .menu a{
        display:inline-block;
        padding:0 15px;
        color:#333;
        font-size: 16px;
        text-decoration:none;

     }
     .sub_header .menu a:hover{
        color:#ff6700;

     }

    .sub_header .search{

        float:left;
     }
    </style>

</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com">小米商城</a>
                <a href="https://www.mi.com">MIUI</a>
                <a href="https://www.mi.com">云平台</a>
                <a href="https://www.mi.com">有品</a>
                <a href="https://www.mi.com">小爱开放平台</a>
            </div>
            <div class="account">
                <a href="https://www.mi.com">登录</a>
                <a href="https://www.mi.com">注册</a>
                <a href="https://www.mi.com">消息通知</a>
            </div>'
            <div style="clear: both;"></div>
        </div>
    </div>
<div class="sub_header">
  <div class="container">
      <div class="hw logo_mi">
        <!--a行内标签;默认设置高度、边距无效,转成块级&行内+块级-->
        <a href="https://www.mi.com/" >
          <img src="static/img_1.png">
        </a>
      </div>

      <div class="hw menu">
        <a href="https://www.mi.com/">xiaomi手机</a>
        <a href="https://www.mi.com/">redmi手机</a>
        <a href="https://www.mi.com/">电视</a>
        <a href="https://www.mi.com/">笔记本</a>
      </div>
      <div class="hw search"></div>
      <div style="clear:both;"></div>
  </div>

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

在这里插入图片描述

4.小结

a. a标签是行内标签，行内标签的高度、内外边距、默认无效
b. 垂直方向居中
1）文本—>line-height
2）图片 —> 边距
c. a标签默认有下划线。
1）通过加样式去除。text-decoration:none
d.鼠标放上去之后可变色
1）增加hover

.header a:hover {
        color: white;
    }

5.案例4：推荐区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        body {
            margin: 0;
        }
        img{
            width:100%;
            height:100%;
        }
        .left{
            float:left;
        }
        .header {
            background-color: #333;
        }


        /* 让中间内容居中 */
        .container {
            width: 1226px;
            margin: 0 auto;     /* 上下为0, 左右为auto */
        }

        /* header class 下的标签 a 自动应用这个样式 */
        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
        }

        .header .menu {
            float: left;
            color: white;
        }

        .header a {
            text-decoration: none;
        }

        .header a:hover {
            color: white;
        }

        .header .account {
            float: right;
            color: white;
        }

    .sub_header{
      height:100px;
    }

    .sub_header .logo_mi{
        width:234px;
        float:left;
     }
    .sub_header .logo_mi a{
        margin-top:22px;
        display:inline-block;
     }
     .sub_header .logo_mi a img{
        height:56px;
        width:56px;
     }

    .sub_header .menu{
        float:left;
        line-height:100px;


     }
     .sub_header .menu a{
        display:inline-block;
        padding:0 15px;
        color:#333;
        font-size: 16px;
        text-decoration:none;

     }
     .sub_header .menu a:hover{
        color:#ff6700;

     }

    .sub_header .search{

        float:left;
     }



     .slider img{
        width: 1226px;
        height: 460px;
     }

     .news{
      margin-top: 14px;
     }
     .news .channel{
        width:228px;
        height:164px;
        background-color:#5f5750;
        padding:3px;
     }
      .news .list-item{
        width:316px;
        height:170px;
     }

     .news .channel .item{
        height:82px;
        width:76px;
        float:left;
        text-align:center;

     }
    .news .channel .item img{
        height:26px;
        width:26px;
        display:block;
        margin:0 auto 4px;
     }
         .news .channel .item a{
        display:inline-block;
        font-size:12px;
        padding-top:18px;
        color:#fff;
        opacity:0.7;
        text-decoration:none;
     }
  .news .channel .item a:hover{
    opacity:1;
  }

    </style>

</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com">小米商城</a>
                <a href="https://www.mi.com">MIUI</a>
                <a href="https://www.mi.com">云平台</a>
                <a href="https://www.mi.com">有品</a>
                <a href="https://www.mi.com">小爱开放平台</a>
            </div>
            <div class="account">
                <a href="https://www.mi.com">登录</a>
                <a href="https://www.mi.com">注册</a>
                <a href="https://www.mi.com">消息通知</a>
            </div>'
            <div style="clear: both;"></div>
        </div>
    </div>
    <div class="sub_header">
  <div class="container">
      <div class="hw logo_mi">
        <!--a行内标签;默认设置高度、边距无效,转成块级&行内+块级-->
        <a href="https://www.mi.com/" >
          <img src="static/img_1.png">
        </a>
      </div>

      <div class="hw menu">
        <a href="https://www.mi.com/">xiaomi手机</a>
        <a href="https://www.mi.com/">redmi手机</a>
        <a href="https://www.mi.com/">电视</a>
        <a href="https://www.mi.com/">笔记本</a>
      </div>
      <div class="hw search"></div>
      <div style="clear:both;"></div>
  </div>

</div>
    <div class="slider">
      <div class="container">
        <div class="sd_img">
          <a>
            <img src="static/img_3.png" alt="">
          </a>
        </div>
      </div>
    </div>

<div class="news">
  <div class="container">
      <div class="channel left">
          <div class="item">
              <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_6.png" alt="">
                  <span>保障服务</span>
              </a></div>
          <div class="item">
          <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_7.png" alt="">
                  <span>企业团购</span>
              </a></div>
          <div class="item"><a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_8.png" alt="">
                  <span>F码通道</span>
              </a></div>
          <div class="item">
              <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_9.png" alt="">
                  <span>米粉卡</span>
              </a></div>
          <div class="item">
              <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_10.png" alt="">
                  <span>以旧换新</span>
              </a></div>
          <div class="item"><a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                  <img src="static/img_11.png" alt="">
                  <span>话费充值</span>
              </a></div>
      </div>
      <div class="list-item left" style="margin-left:10px">
          <img src="static/img_4.png" />
      </div>
      <div class="list-item left" style="margin-left:10px">
          <img src="static/img_5.png" />
      </div>
      <div class="list-item left" style="margin-left:10px">
          <img src="static/img_4.png" />
      </div>
      <div class="clear:both"></div>
  </div>
</div>

</body>
</html>

在这里插入图片描述

四、Bootstrap

简介：别人写好的CSS样式。

使用方式:
在页面上引入 Bootstrap
编写HTML时,按照Bootstrap的规定来编写或者自定制

4.1引入bootstrap

1. 下载bootstrap

https://v3.bootcss.com/getting-started/#download
在这里插入图片描述

2. 项目结构：

将下载好的bootstrap放在plugins目录下。

3.引入bootstrap

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

    <!-- 开发版本 -->
    <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>
<body>
    <input type="button" value="提交">
    <input type="button" value="提交" class="btn btn-primary">
    <input type="button" value="提交" class="btn btn-success">
    <input type="button" value="提交" class="btn btn-danger">
    <input type="button" value="提交" class="btn btn-danger btn-xs">
</body>
</html>

在这里插入图片描述

4.2导航栏

地址：https://v3.bootcss.com/components/#nav

借用代码，进行开发成自己想要的页面。

在这里插入图片描述

<!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>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 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="#">Brand</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="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

</body>
</html>

在这里插入图片描述

1. 修改样式

在head中添加相关的样式进行覆盖即可

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
      .navbar {
        border-radius:0;
      }
    </style>
</head>

原本引用的插件的样式为border-radius:4; 将其改成了 border-radius:0;

2.修改body中的文本

修改相应的数据即可，

4.3栅格

栅格介绍

栅格主要有4种共分为两种格式：

响应式:根据你的页面的大小来进行调整
.col-sm- : 750px
.col-md- : 970px
.col-lg- : 1170px

<div class="col-md-7" style="background-color: brown;">1</div>
<div class="col-md-5" style="background-color: green;">2</div>

非响应式：固定栅格的比例，不会随页面的大小进行变换
.col-xs-

<div class="col-xs-7" style="background-color: brown;">1</div>
<div class="col-xs-5" style="background-color: green;">2</div>

列偏移
.col-sm-offset-

<div class="col-xs-1" style="background-color: brown;">1</div>
<div class="col-sm-offset-2 col-xs-1" style="background-color: green;">2</div>

在这里插入图片描述

4.4 container

container

    <div class="container clearfix">
        <div class="col-sm-6">左边</div>
        <div class="col-sm-6">右边</div>
    </div>

container-fluid

    <div class="container-fluid clearfix">
        <div class="col-sm-6">左边</div>
        <div class="col-sm-6">右边</div>
    </div>

在这里插入图片描述

4.5 面板

面板介绍

    <div>
      <div class="col-sm-6">左边</div>
      <div class="col-sm-6">
        <div class="panel panel-default"></div>
        <div class="panel-body">Basic panel example</div>
      </div>
      <div class="col-sm-6">左边</div>
      <div class="col-sm-6">
        <div class="panel panel-default"></div>
        <div class="panel-body">Basic panel example</div>
      </div>
      <div class="col-sm-6">左边</div>
      <div class="col-sm-6">
        <div class="panel panel-default"></div>
        <div class="panel-body">Basic panel example</div>
      </div>

    </div>

在这里插入图片描述

4.6分页

分页地址

分页有多种形式可以选择。
在这里插入图片描述

4.7图标

> 下载地址

在这里插入图片描述
下载完放在plugins文件夹下

如何使用

引入插件

<link href="static/plugins/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">

选取想要的图标

在这里插入图片描述

<td>
<button class="btn btn-primary btn-xs" type="button">
<i class="fa fa-address-card-o" aria-hidden="true"></i>保存</button>
<button class="btn btn-warning btn-xs" type="button">退出</button>
</td>

在这里插入图片描述

案例一：登录页面

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

    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">

    <style>
        .ct {
            margin-left: auto;                  /* 水平居中 */
            margin-right: auto;
            margin-top: 200px;
            width: 300px;
            height: 300px;
            border-radius: 10px;                /* 圆角*/
            box-shadow: -5px 5px 10px #aaa;    /* 阴影 水平 垂直 厚度 颜色*/
            border: 2px solid black;
            padding: 20px 40px;                 /* 内边距 */
        }

        .ct h1 {
            text-align: center;
            margin-top: 10px;
        }

        .ct button {
            margin: 20px;
        }
    </style>

</head>


<body>
    <div class="ct">
        <div>
            <h1>用户登录</h1>
        </div>
        <div>
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">用户名</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div style="text-align: center">
                    <button type="submit" class="btn btn-primary">登 录</button>
                    <button type="submit" class="btn btn-default">注 册</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

案例二：后台页面

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

<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1"
                    data-toggle="collapse" type="button">
                <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="#">Brand</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="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"
                       href="#"
                       role="button">Dropdown <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 class="divider" role="separator"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider" role="separator"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input class="form-control" placeholder="Search" type="text">
                </div>
                <button class="btn btn-default" type="submit">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"
                       href="#"
                       role="button">Dropdown <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 class="divider" role="separator"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container clearfix">

    <div style="">
        <div class="panel panel-default">
            <div class="panel-heading">表单列表</div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">账号</label>
                        <input class="form-control" id="exampleInputName2" placeholder="邮箱账号" type="text">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail2">密码</label>
                        <input class="form-control" id="exampleInputEmail2" placeholder="例如:jane.doe@example.com"
                               type="email">
                    </div>
                    <button class="btn btn-default" type="submit">保存</button>
                </form>
            </div>
        </div>
    </div>
    <div class="bs-example " data-example-id="contextual-table" style="margin-top:10px">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>Column heading</th>
                <th>Column heading</th>
                <th>Column heading</th>
            </tr>
            </thead>
            <tbody>
            <tr class="active">
                <th scope="row">1</th>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>
            <tr class="success">
                <th scope="row">3</th>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>

            </tbody>
        </table>
    </div>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a aria-label="Previous" href="#">
                    <span aria-hidden="true">&laquo;</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 aria-label="Next" href="#">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

</body>
</html>

在这里插入图片描述

4.8 Bootstrap动态效果

想要实现页面动态效果，则Bootstrap需要依赖JS（Javascript）和JQuery。且JQuery 是 Javascript 的类库。

下载JQuery

复制链接到中IDM中下载

将下载的文件放在js文件夹中
引入js，因为bootstrap依赖js，故也需要将bootstrap下的js引入。

<body>
······
<script src="static/js/jquery-3.7.1.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
</body>

效果图

五、Javascript

简介：实现页面动态画面

## 5.1间单案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .menus {
            width: 200px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: green;
            padding: 20px 10px;
        }

    </style>
</head>
<body>
    <div class="menus">
        <div class="header" onclick="myFunc()">大标题</div>
        <div class="item">内容</div>
    </div>

    <script type="text/javascript">
        function myFunc() {
        <!--confirm("是否要继续?")-->
            alert("hello word")
        }
    </script>

</body>
</html>

在body中间添加script代码，点击绿色部分会弹出相关内容，如图所示：在这里插入图片描述

5.1js放置位置

在HTML中可放在head和body中。

一般放在body体中，执行完html代码再执行JS代码。

放在单独的文件夹中，一般的结构如下

在html文件的body体中添加：

<body>
	<script src="static/js/my.js"></script>
</body>

5.2HTML中相关代码的注释

HTML的注释

CSS的注释

/* 注释内容 */
Javascript的注释
有两种，如下
// 注释内容
/* 注释内容 */

5.3 变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var name = "变量";
        console.log(name);   //打印变量
    </script>
</body>
</html>

会在控制台下打印相关的变量。
在这里插入图片描述

5.3.1 字符串类型

声明变量

var name = "helloworld";
var name = String("helloworld");

字符串常见功能

var name = "中国联通"
var v1 = name.length; //获取长度
var v2 = name[0]; //获取第一个字符
var v3 = name.trim();			//去除空白
var v4 = name.substring(0,2)	//切片, 前取后不取

案例: 跑马灯

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <div id="txt">欢迎光临</div>

    <script type="text/javascript">

        function show() {
            //1.去HTML中找到某个标签并获取他的内容 (DOM)
            var tag = document.getElementById("txt");
            var dataString = tag.innerText;

            //2.动态起来,把文本中的第一个字符放在字符串的最后面
            var firstChar = dataString[0];
            var otherString = dataString.substring(1, dataString.length);
            var newText = otherString + firstChar;

            //3.在HTML标签中更新内容
            tag.innerText = newText;
        }

        //Javascript中的定时器
        //每秒钟执行这个show函数
        setInterval(show, 1000);    //毫秒
    </script>
</body>
</html>

在这里插入图片描述

5.3.2 数组

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

//操作
var v1 = [11,22,33,44];

v1[1]
v1[0] = "poker"

//追加
v1.push("联通");			//尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通");		//头部追加 ["联通",11,22,33,44]
v1.splice(索引,0,元素);
v1.splice(1,0,"中国");	//指定位置追加 [11,"中国",22,33,44]

//删除
v1.pop();				//尾部删除
v1.shift();				//头部删除
v1.splice(索引位置,1);
v1.splice(2,1);			//索引为 2 的元素删除 [11,22,44]



//循环
var v1 = [11,22,33,44];
//循环的是索引
for(var index in v1){
	//data=v1[index]
	...
}


for(var i=0; i<v1.length; i++){
	...
}

案例: 动态数据
动态创建

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

    <ul id="city">
        <!-- <li>广东</li>
        <li>深圳</li>
        <li>汕头</li> -->
    </ul>

    <script type="text/javascript">
        var cityList = ["广东","深圳","汕头"];
        for(var idx in cityList) {
            var text = cityList[idx];

            //创建 <li></li> 标签
            var tag = document.createElement("li");
            //在 li 标签中写入内容
            tag.innerText = text;

            //添加到 id=city 那个标签的里面 DOM
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>
</body>
</html>

在这里插入图片描述

5.3.3 字典

info = {
	"name":"poker",
	"age":18,
}

info.age;
info.name = "toker"

info["age"]
info["name"] = "toker";

delete info["age"]

//循环
for(var key in info){
	//key值 data=info[key]
	...
}

案例：动态表格

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
            <tr>
                <!-- <td>1</td>
                <td>poker</td>
                <td>25</td> -->
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">

        var dataList = [
            { id: 1, name: "poker", age: 25 },
            { id: 1, name: "poker", age: 25 },	
        ];

        for (var idx in dataList) {
            var info = dataList[idx]
            //1.创建 tr 标签
            var tr = document.createElement("tr")
            for (var key in info) {
                var text = info[key];
                //2.创建 td 标签
                var td = document.createElement("td");
                td.innerText = text;
                tr.appendChild(td);
            }
            //3. 追加数据
            var bodyTag = document.getElementById("body");
            bodyTag.appendChild(tr);
        }
    </script>
</body>
</html>

在这里插入图片描述

5.4 条件语句

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

5.5 函数

//函数定义
function func(){
	...
}

//调用函数
func()

5.6 DOM

简介：DOM是一个模块，该功能是对html中的标签进行相应的操作

//根据 ID 获取标签
var tag = doucment.getElementById("xx");

//获取标签中的文本
tag.innerText

//修改标签中的文本
tag.innerText = "hhhhhhh";

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>



<body>

    <ul id="city">
        <!-- <li>广东</li>
        <li>深圳</li>
        <li>汕头</li> -->
    </ul>

    <script type="text/javascript">
        var cityList = ["广东","深圳","汕头"];
        for(var idx in cityList) {
            var text = cityList[idx];

            //创建 <li></li> 标签
            var tag = document.createElement("li");
            //在 li 标签中写入内容
            tag.innerText = text;

            //添加到 id=city 那个标签的里面 DOM
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>
</body>

</body>
</html>

在这里插入图片描述

5.7 事件绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <input type="text" placeholder="请输入内容" id="content">
    <input type="button" value="点击添加" onclick="addCityInfo()">

    <ul id="city">
    </ul>

    <script type="text/javascript">
        function addCityInfo() {
            //1.找到标签
            var userContent = document.getElementById("content");
            //2.获取input中用户输入的内容
            var newString = userContent.value;
            //判断用户输入是否为空
            if (newString.length > 0) {
                //3.创建 li 标签,传入用户输入的内容
                var newTag = document.createElement("li");
                newTag.innerText = newString;
                //4.标签添加到 ul 中
                var parentTag = document.getElementById("city");
                parentTag.appendChild(newTag);
                //5.将 input text 内容清空
                userContent.value = "";
            }else{
                alert("输入不能为空!")
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

5.8总结

了解其大概的作用即可，自己手写SJ代码很繁琐，一般都是用别人做好的DOM，即Jquery。

6 Jquery

简介：是一个简化Javascript的库

6.1快速上手

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

    <h1 id="txt">广东</h1>

    <script src="static/js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        //使用JQuery修改内容
        $("#txt").text("汕头");
    </script>

</body>
</html>

这里输出的的是汕头而不再是广州了。
在这里插入图片描述

6.2 寻找标签（直接）

6.2.1 ID选择器

再HTML中的代码：

<h1 id="txt">广东</h1>

JQuery操作：

$("#txt")

6.2.2样选择器

再HTML中的代码：

<h1 class="c1">广东</h1>

JQuery操作：

$("h1")

6.2.3标签选择器

再HTML中的代码：

<h1 class="c1">广东</h1>
<h1 class="c2">汕头</h1>

JQuery操作：
会选择h1的所有标签

$("h1")

6.2.4层级选择器

再HTML中的代码：

<div class="c1">
	<div class="c2">
		<h1>123</h1>
	</div>
</div>

JQuery操作：

$(".c1 .c2 h1")

6.2.5多选择器

<div class="c1">
	<div class="c2">
		<h1>123</h1>
	</div>
</div>
<div class="c3">
	<div class="c4">
		<h1>123</h1>
		<li>456</li>
	</div>
</div>

JQuery操作：

$("#c1,#c3,li")

6.2.6属性选择器

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

JQuery操作：

$("input[name='n1']")

6.3 寻标签（间接）

本节操作类似如树查zhao的操作。

6.3.1找兄弟

<div>
	<div>北京</div>
	<div id="c1">上海</div>
	<div>深圳</div>
	<div>广州</div>
</div>

JQuery操作:

$("#c1").prev()			//上一个
$("#c1")				
$("#c1").next()			//下一个
$("#c1").next().next()	//下一个的下一个
$("#c1").siblings()		//所有的

6.3.1找父亲

<div>
	<div>
		<div>北京</div>
		<div id="c1">
			<div>浦东新区</div>
			<div>静安区</div>
			<div>奉贤区</div>
		</div>
		<div>深圳</div>
		<div>广州</div>
	</div>
	<div>
		<div>北京</div>
		<div id="c1">上海</div>
		<div>深圳</div>
		<div>广州</div>
	</div>
</div>

JQuery操作:
$("#c1").parent()			//父亲
$("#c1").parent().parent()	//父亲的父亲

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

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

案例一: 菜单的切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .menus {
            width: 200px;
            height: 1000px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: green;
            padding: 5px 5px;
            border-bottom: 1px dotted gray;
            cursor: pointer;
        }

        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted gray;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>

    <div class="menus">
        <div class="item">
            <div class="header" onclick="clickMe(this);">天津</div>
            <div class="content">
                <a>静海区</a>
                <a>东丽区</a>
                <a>西青区</a>
                <a>宝坻区</a>
                <a>滨海新区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海</div>
            <div class="content hide">
                <a>静安区</a>
                <a>奉贤区</a>
                <a>浦东新区</a>
                <a>徐汇区</a>
                <a>青浦区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海1</div>
            <div class="content hide">
                <a>静安区</a>
                <a>奉贤区</a>
                <a>浦东新区</a>
                <a>徐汇区</a>
                <a>青浦区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海2</div>
            <div class="content hide">
                <a>静安区</a>
                <a>奉贤区</a>
                <a>浦东新区</a>
                <a>徐汇区</a>
                <a>青浦区</a>
            </div>
        </div>
    </div>

    <script src="static/js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        function clickMe(self) {
            //1.让菜单展示出来
            $(self).next().removeClass("hide");

            //2.找父亲,父亲的所有兄弟,再去每个兄弟的子孙中寻找 class="content", 添加 hide 样式
            $(self).parent().siblings().find(".content").addClass("hide");
        }
    </script>
</body>
</html>

点击绿色标签会弹出子标题内容，而其他绿色的子标题都会关闭。
在这里插入图片描述

6.4值的操作

<div id="c1">内容</div>
<input type="text " id="c2"/>

JQuery操作:

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

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

案例: 动态创建数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <input type="text" id="txtUser" placeholder="用户名">
    <input type="text" id="txtEmail" placeholder="密码">
    <input type="button" value="提交" onclick="getInfo()">

    <ul id="view">
    </ul>

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

        function getInfo() {
            //1.获取用户输入的用户名与密码
            var username = $("#txtUser").val();
            var email = $("#txtEmail").val();

            dataString = username + ":" + email

            //2.创建li标签, 在li内部写入内容
            var newLi = $("<li>").text(dataString);

            //3.把新创建的li标签添加到ul里面
            $("#view").append(newLi);
        }

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

在这里插入图片描述

6.5事件

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

    <ul>
        <li>广东</li>
        <li>深圳</li>
        <li>汕头</li>
    </ul>

    <script src="static/js/jquery-3.7.1.min.js"></script>
    <script>
        $("li").click(function(){
            // 点击li标签时,自动执行这和函数
            // $(this) 当前你点击的是哪个标签
        });
    </script>
</body>
</html>

在JQuery可以删除指定的标签

 <script src="static/js/jquery-3.6.1.min.js"></script>
<script>
    $("li").click(function(){
        // 点击li标签时,自动执行这和函数
        // $(this) 当前你点击的是哪个标签
        $(this).remove();
    });
</script>

案例: 表格操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
            <tr>
                <td>1</td>
                <td>橙汁</td>
                <td>
                    <input type="button" value="删除" class="delete" />
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>橙汁</td>
                <td>
                    <input type="button" value="删除" class="delete" />
                </td>
            </tr>

        </tbody>
    </table>

    <script src="static/js/jquery-3.7.1.min.js"></script>
    <script>
        $(
            function () {
                $(".delete").click(function () {
                    $(this).parent().parent().remove();
                });
            }
        )
    </script>
</body>
</html>

点击删除会删除相关联的一整行。
在这里插入图片描述

七、前端整合

HTML、CSS、JS、JQuery的整合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">

    <style>

    </style>

</head>

<body>


    <div class="container">
        <form class="form-horizontal" style="margin-top: 30px;">
            <!-- 引入栅格系统 -->
            <!-- 姓名和年龄 -->
            <div class="row clearfix">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="姓名">
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="年龄">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 部门和薪资 -->
            <div class="row clearfix">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-10">
                            <select class="form-control">
                                <option>IT部</option>
                                <option>运营部</option>
                                <option>销售部</option>
                                <option>售前部</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">薪资</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="薪资">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 入职时间和密码 -->
            <div class="row clearfix">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">入职时间</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" placeholder="入职时间">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row clearfix">
                <div class="col-xs-6">
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">Sign in</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

</body>
</html>

在这里插入图片描述