小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

web 前端开发_wed前端开发网页设计之标题为要求设计wde前端开发内容

作者：小蓝xlanll | 2024-02-07 15:45:05

踩

wed前端开发网页设计之标题为要求设计wde前端开发内容

WEB前端开发

课程⽬的：①.为制作动态网页奠定基础

②.做一些简单的静态页面，静态网站

讲解前端的重要性前端：视觉和功能的连接，不可缺少

b / s 网站 b:浏览器 s:服务器

c / s 应用软件

第一部分 HTML部分

第一章初始HTML

1.1HTML简介

HTML：超文本标签语言

语法：html （所有符号都是英文的）

标签：开始标签：< >
结束标签：</ >

HTML不区分大小写

基础认知

网页都有啥？----文字、图片、音频、视频、超链接打开网页看见的

网页的背后：前端程序员写的代码京东网页源代码（不要害怕）

前端代码通过什么转换成网页：：：浏览器（渲染和解析）

1.2HTML历史

HTML版本：HTML4.01 HTML 5 （微信小程序基本上都用 5）

1.3HTML特点：

·简单灵活
·可扩展

·平台无关性（基于W3C机构标准：不同浏览器平台、不同版本系统一样运行）

但是要考虑不同浏览器的兼容性问题，网页开发之后需要在不同浏览器中运行调试

第二章开发准备工作

2.1 环境的安装和配置

任何的文本工具都可以用来编写网页

例：记事本（名字.html)—效率较低

网页标题要出现一些关键字（搜索频率较高）—利于搜索引擎对网站的搜索，方便对网站进行一个宣传

注：文件后缀必须更改为.html

网页的源代码要注意对齐

2.1.1 开发环境

HBuilder：

一个项目建成之后，目录有： css—样式表 img—图片 js—脚本 index.html—网页

是对当前网页做出一个辅助性的说明
charset—字符集 “utf-8”—中文

网页编写示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>欢迎学习Html网页制作</title>
    </head>
    <body>
    很高兴大家很快就可以编写网页了...    
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

2.1.2 运行环境

选择相应的浏览器：Chrome ,微软的Edge, IE ,Firefox，Opera

2.2 几款主要的浏览器

Chrome ,微软的Edge, IE ,Firefox，Opera

Chrome浏览器兼容性很高

2.3 W3C简介（万维网联盟）

2.3.1 W3C的由来

万维网：World Wide Web

总之，HTML网页制作的的标准是由（W3C—万维网联盟—W3C理事会）复制完善

W3C最重要的工作是发展Web规范：标签语言要语义化结构化

结构化：例如头部结构，正文结构

正文结构中：

–快标签中在套一些其它内容如：—表格：—行：

—单元格

1defaded-7d37-496f-b3a9-307752131f19 aa868e56-604b-43ff-ab8a-6613fd558df1

表格中不加边框，所以没有显示表格的样子

名称属性语法取值

2.3.2 中国W3C大事件

2011年1月11日，腾讯公司签约加入万维网联盟

2011年9月15日，百度加入万维网联盟

2013年1月21日，北京航空航天大学（BUAA）成为全球第四所高校加入万维网联盟

2.4 HTML语法

语法结构：HTML标签

<标签属性=“值”>内容</标签>

注：一个标签可以有多个属性，或者不拥有属性

<p>是HTML  中的段落标签，下面以<p>为例来详细解释标签
1

语法格式：HTML 标签，如下：

<p  align ="center" >  标签中的内容  </p>
1

标签：开始标签：< > 结束标签：</ >

HTML不区分大小写 p/P都一样

2.5 网页分类

HTML 使用标签编写网页

·静态网页HTML

不修改网页源文件的情况下，网页内容不会发生变化。静态网页文件的扩展名包括：html,htm 等。

·动态交互网页

交互式网页是指用户可以提供给网站信息，网站根据用户提交的信息响应用户的要求。交互是网页文件的扩展名包括 aspx, jsp, php,asp等。

补：

Web架构：

客户端 ------> Web服务器 ------> 数据库服务器
** <----- <------**

.html css js .jsp 数据

客户端技术服务器：tomcat 数据库：sqiserver—微软的一个数据库

浏览器 mysql oracle

第3章 HTML的常用标签

注：遇到不会的标签查询 mdn 网站

3.1第一个HTML程序

第一步：创建一个文本文档，命名为xxx.html, 名称任意，但是后缀名必须是HTML

第二步：使用工具打开这个文档，在里面编写如下代码
开发工具:记事本，HB等

注：代码编写好之后，一定要按 ctrl+s 保存

3.2 常用标签

3.2.1 标签骨架

开始标签

head头部标签: 头部标签中可以放title标签（标题）、meta标签（对当前的网页做出一个辅助性说明或设置，例：charset=“UTF-8” 把字符节设置为中文，否则会出现乱码）、style标签（写样式表，对网页进行美化）

body主体标签，网页所有要显示的内容都放在这个标签内

结束标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>欢迎学习Html网页制作</title>
    </head>
    <body>
         <!--在这里注释-->
    很高兴大家很快就可以编写网页了...    
    </body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13

补：

<!- -->：注释标签，是注释的结束。

作用：提醒自己或帮助用户了解该文件的内容，所以注释标签不会显示在浏览器中。

在HB中，同时按ctrl+shift+/ 就会显示注释

DOCTYPE ：网页文档声明，用来声明HTML遵循的标准，建议都遵循HTML5这个标准。

网页常用编码：

GB2312、UTF-8、 BIG5 、GBK

GB2312 是简体中文字符集，主要用于中国大陆和新加坡

UTF-8 可以理解为通用字符集（最常用）

BIG5 是繁体中文字符集，主要用于台湾，香港地区

GBK 是GB2312 的后续标准，添加了更多的汉字和特殊符号

3.2.2 重要标签

标签	说明
b/strong	字体变粗体
i/em	文字变斜体
u	文字加下划线
del	删除线
br	换行
p	段落
pre	预格式化段落
span	标准行内标签，一般用来修饰文本
div	标准块标签，一般用来布局页面
sub	下标
sup	上标
hr	水平分割线（有始无终）
hn	标题标签（共有6级，h1、h2…h6)

注：br 一个特殊标签

相当于
或者
也可以

1. b/strong i/em u del br 等标签

例子：

2. hr br 水平分割线和换行标签

提：

有自动居中的效果

<hr width="800" size="5" color="green"> 煮豆燃豆萁
 标签 属性  数值  属性 数值  属性    数值       文本
  长度（单位是像素）粗细     颜色

1
2
3
4

3. center 对齐居中标签

一般来说如果不用居中对齐，也可以用编辑里的整理代码格式整理

4. P 段落标签

提：①相邻的两个P 标签会隔一行

②有始有终

③在网页中描述一个段落

5. sub 、sup、pre、span 上下标、预格式化段落、标准行内标签

提：pre–用来原样输出内容

网页展示：

6.hn、div 标签

① hn 标签指的是h1、h2、h3、h4、h5、h6 者六个标题标签，主要用来修饰标题。（效果：控制字体大小，加粗，每个标签之间距离变大0 ，自动换行）

它还是一个块级标签–使用之后自动换行不用写

补：块级标签：hn hr div

②div 标签是一个标准的块标签，主要用来布局。

div还是一个层级标签，相当于两个区域

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I3Op2qgF-1689252027337)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/539d4ec2-34ce-4ada-8ade-e4267828e882.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-58sbg5AR-1689252027338)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b68d10fe-af26-45ed-b907-54facea0c7ce.png)]

7.图片标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Ow9Xyjx-1689252027338)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/266ac712-a1ce-437b-8dc2-b5fae482e1fd.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ybd9Am6n-1689252027338)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ad62fae4-5626-473f-977c-67f415c61662.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a9EYn9ux-1689252027339)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/701315be-9833-4ae1-8aae-867dc60d94bc.png)]

8.视频标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RsLGV3mn-1689252027339)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3c2e95ca-a83e-4a13-8991-c5026dd857c3.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kd7MvRy4-1689252027339)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/7f164253-3293-4fbb-922c-7a3ec29b326d.png)]

9.音频标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ITfIaNRo-1689252027340)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/054d02e9-aa3e-4de3-bf9e-8680806aab95.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OfCsb2R6-1689252027340)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/42bfad50-970f-48ad-8383-3040dfaffeb8.png)]

注：…/ 表示上一个目录 ./ 表示当前目录

9.链接标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R2LVi7hE-1689252027341)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b53079fa-23c4-4500-9aaf-41c29005baaa.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GtdIDvez-1689252027341)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/56c4b8aa-1e1b-47fb-bf93-2666f44f402a.png)]

10.锚链接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ewgdefsw-1689252027341)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/fa8478ce-9ea9-4f72-bbc7-e1e378a36fe2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OPj1KK3K-1689252027341)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d15e2a32-0014-4961-8753-408793b246b4.png)]

练习（段落，标题，音频，视频）

mp3标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pbgrMHKs-1689252027341)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/385a76e0-5707-4d26-b0a5-5e2d9483c690.png)]

mp4标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WlgPNzCP-1689252027342)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/52508000-2a94-41ca-a585-fa98035e1032.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZMuIAjWJ-1689252027342)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2fad8bf4-8812-410d-a85a-d48c7b4774b6.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Ne1PSLP-1689252027342)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b8fbea9a-f250-438c-9c8c-fecec0a9a9fe.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tTnJ8xNQ-1689252027342)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c67deadf-bdeb-4e10-8f7f-f40eb797631b.png)]

11.有序列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tMozBwKg-1689252027342)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/7bee0ecb-2fea-4c13-b6c9-b655f1b00d05.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HTGzXIkg-1689252027343)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/8be146c0-d081-4f60-8e20-a51c39371bf3.png)]

12.无序列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jVwbsmpv-1689252027343)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/5a238c7c-1b17-484e-99c9-3e6b5405a0c4.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OuQTIQ6F-1689252027343)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/21560123-d607-4fd8-923e-1535ff39c519.png)]

13.自定义列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xU7RhEur-1689252027343)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/288a86d8-e85e-4ff1-9630-7b645478cb93.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W92z8vnK-1689252027344)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/fbb6801f-8c50-47c8-bdc9-b36384257222.png)]

注：HTML <dl> 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据（键 - 值对_列表_）。

HTML <dt> 元素（或 HTML 术语定义_元素_）用于在一个定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着 <dd> 元素，然而，多个连续出现的元素都将由出现在它们后面的第一个 <dd> 元素定义。<dt>

14.iframe框架

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mODVUuT9-1689252027344)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b3c54e83-d931-454c-8eff-be26933a4e9c.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TPA7ZQGo-1689252027344)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ca8ffe59-57fa-4531-98d7-d8c10b02ad87.png)]

15.特殊字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uVC6UrpU-1689252027344)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/8912dc7d-ea8e-48ee-a06e-9342dd212504.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BrPCDLk5-1689252027344)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d7fa63f6-8c17-4dab-8624-1df9a8f059e8.png)]

16.元素显示模式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uszlwsTG-1689252027345)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d04191f2-1b68-4157-a9fe-f6e1d6033993.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8AVF5Y56-1689252027345)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/52158faf-96fa-4a90-9659-4c3530547bea.png)]

作业跳转案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SuFU0bWN-1689252027345)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2d71cc1b-58c4-4cf8-8c87-5d0919040110.png)]

0f019679-9a8a-4a60-8ef4-1abe99768c86 67461fe8-ec0f-45f8-b285-019a417f9b8e

d04ba92d-527b-4ba9-bb13-cfb685e21130 fee0b314-a8cc-4229-908d-74c154a69b20

6437d010-ed84-43a5-a32d-710201c89bb0 a5c2b181-4bdd-4dfc-ba3c-b79c5769236c

17.表格标签

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <!-- 表头 rows  data-->
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计:4人</td>

            </tr>


        </tfoot>


    </table>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RqjRwmNs-1689252027345)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f33abe5a-bc41-4f5b-8b41-b29e7490bf70.png)]

18.表格标签属性

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="10px" width="900px" height="400px" cellspacing="0">
        <!-- 表头 rows  data
        table：border（只控制最外围大小）、width、height(tbody 值是底线，只高不低)、cellspacing(单元格与单元格之间的距离)
        caption；通过css更改
        thead、tr、tbody、tfoot:height\align（水平）\valign（垂直）

        -->
        <caption>学生信息</caption>
        <thead height="200px" align="center" valign="middle">
            <tr height="400px" align="center" valign="center">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody height="600px" align="center" valign="middle">
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot height="600px" align="center" valign="middle">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计:4人</td>

            </tr>


        </tfoot>


    </table>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q4GGjkuA-1689252027345)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/482b1fbf-59df-4adc-8fae-98f2e6bf3088.png)]

19.单元格合并

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- td   跨行：rowspan
              跨列：colspan
    -->
    <table border="1px" width="800px" cellspacing="0">
        <!-- 表头 rows  data-->
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="right">
                <td colspan="5">共计:4人</td>
            </tr>


        </tfoot>


    </table>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aK5RUE6q-1689252027345)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b56d3282-5752-40cc-8620-ef3b84e3f60f.png)]

20.details详情标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rylgqcFb-1689252027346)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/fe346c6e-003e-410b-bfff-e492183101bf.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qubwykA4-1689252027346)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/8235963c-8f58-4d59-a865-9e09475b9648.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6rjY9x3-1689252027346)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/795afd00-e68d-43d7-b1c5-95f8105c9052.png)]

21.tabindex标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XfW04s8Q-1689252027346)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/9c44592b-b95c-4e6d-99ba-308488458bff.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RPoTXodN-1689252027346)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/33c57dcb-ec70-47ab-8aa3-fbde04a94458.png)]

22.表单的基本结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jDfVJYx4-1689252027347)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3382fe6c-7500-4965-a073-ed5d09a7fec0.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DDZ6v7lI-1689252027347)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/64a7a355-3d75-4a21-a09c-d1cd8bd3cee4.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tkofsgcs-1689252027347)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d43b28c6-1984-4f67-9eab-b71c2b1b89f4.png)]

23.★常见的表单元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3uM4mphG-1689252027347)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/68472638-72f1-4680-ada1-346922eb7f10.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ad133AZ-1689252027347)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2116aa18-9d7f-4188-9339-824b88b1c1ed.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oQk9SXlM-1689252027348)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/884e7b15-9cc5-4be1-ab56-43be80dc061f.png)]

24.html的全局属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0W8oQBWH-1689252027348)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/21aa17fa-b104-4cdf-9661-24a8be0791ad.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8LUxFMD-1689252027348)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/a0605964-2d88-48ec-a37a-084f1c710964.png)]

25.html5语义标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fFP02rsM-1689252027348)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/5ced5b3f-edb8-4748-8fc1-4ae02f22b48b.png)]

26.★html5表单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OX4pNZJz-1689252027348)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/340f2e91-6f7c-4bf4-b614-280320934c74.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c86ZdBt3-1689252027348)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f863fcf2-ea5d-4cb9-aba0-e9d26b16d189.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zw8Qv8sR-1689252027349)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/85aa0655-9fa1-49d5-ab06-3ddb01438644.png)]

第四章 css—样式表

4.1css体验

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-52wtW211-1689252027349)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/8fb14961-3dae-4d03-a39e-a7042f2fa894.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B4X4wTqC-1689252027349)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2ee5ad6d-d5cc-404d-8d34-5de39fe68766.png)]

4.2css的三种引入方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tlMWAXnN-1689252027349)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b3fd7001-1dd2-45a2-a795-5f1b209232c1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZmObGsUY-1689252027349)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/53c6b1e2-88e5-4020-82b5-9eb3d5125921.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2zug8Dap-1689252027349)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/25fa0807-7ddc-4302-b0b0-f9a5d0d2eb92.png)]

注：CSS（层叠样式表）是用于描述网页上元素外观和布局的语言。在CSS中，有三种方式可以应用样式：外部样式、内部样式和行内样式。

外部样式表：
外部样式表是将CSS代码保存在一个单独的文件中，然后通过链接（link）标签引入到HTML文档中。这样可以将样式应用到整个站点或多个页面上，实现样式的复用和统一管理。外部样式表的文件扩展名通常是.css。例如，在HTML文档中使用外部样式表的方法是：
```
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
1
2
3
```
其中，href属性指定了样式文件的路径。
内部样式：
内部样式是将CSS代码直接放置在HTML文档的<style>标签中。该样式只会应用于包含该样式的HTML文档。在<head>标签内添加<style>标签，然后在其中编写CSS代码即可。例如：
```
<head>
<style>
 .myClass {
   color: red;
   font-size: 16px;
 }
</style>
</head>
1
2
3
4
5
6
7
8
```
上述代码中，.myClass是一个选择器，定义了一个类选择器，它会将特定的样式应用于具有class="myClass"属性的元素。
行内样式：
行内样式是将CSS代码直接应用于HTML元素的style属性中。它的优先级最高，会覆盖外部和内部样式。通过在元素标签的style属性中写入CSS样式声明即可。例如：
```
<p style="color: blue; font-size: 18px;">这是一个示例段落。</p>
1
```
在上述示例中，style属性中的CSS样式声明被应用于该段落元素。

需要注意的是，尽管行内样式可以快速应用样式，但它通常不推荐在大规模项目中使用，因为它会导致样式不易管理和维护。一般情况下，建议使用外部样式表或内部样式。

★选择器（网安高级会用到）

4.3基本选择器

（标签选择器，id选择器，类选择器，通配符选择器–所用）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5JbMoRzJ-1689252027350)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/fc83d02a-e68b-45c7-8f77-8bebef710a69.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H9xT0tLP-1689252027350)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f58d1461-8258-46e2-8d81-4c62219a381b.png)]

4.4包含选择器

（子代选择器，后代选择器）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OjEPR1Am-1689252027350)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2dce8beb-ea13-4a8c-937d-5e33a79c1498.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aHosKhOC-1689252027350)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/95b45bc2-7ee0-4cf8-b36d-bb45c9a9005c.png)]

字体样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-INlNkdUi-1689252027350)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/a96721c9-d182-4d29-99eb-cbc1aec0d670.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aOP27MTx-1689252027350)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e053bd64-10c4-4919-b456-c74ee3b6f71f.png)]

4.5复合选择器

（选择所有）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qLj1MwRV-1689252027351)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/914f2f61-f5ae-4d52-875b-c75279247fa6.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3o7ejiw-1689252027351)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/33a7706e-7d7f-46c8-8cf5-d715b759681d.png)]

4.6属性选择器

（标签后的属性）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xiCw3ZdB-1689252027351)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/1556e082-2f26-4956-bfc4-2ed94d5bec21.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x5FcXDNr-1689252027351)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e1c7296a-a456-4120-ba37-52f8461b3c5d.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5TcCG6IU-1689252027351)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2cdff4e1-ae18-44fc-8dc2-b6ede60f2908.png)]

首行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uNUKC4Rm-1689252027351)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/20ff2195-27ac-4925-ab8b-0048e2460f0e.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fDqmoPq5-1689252027352)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/4be201e2-4a69-4097-a60e-fa0bb995808d.png)]

作业：表单案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s6rkXyUl-1689252027352)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/4ca6d52d-9a96-4ada-9634-3590416c30cb.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tsHERImL-1689252027352)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/187ab456-c066-45f9-a942-f6c29e9613de.png)]

4.7伪类选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BTXxTJMK-1689252027352)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ef28ca10-e133-4f4a-9c2f-8d579366c5ce.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OG92PlsT-1689252027352)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ecd81144-bdf5-46c8-8405-eb245bfe2d1b.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DaQKcFoZ-1689252027353)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/4bd6f07c-02a6-47c7-b027-07eb3f391dc7.png)]

4.8结构伪类选择器

例一：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0xmzUghD-1689252027353)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/9069e146-1532-453b-9aeb-e1e0f4c6a1f2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uhQ6APfD-1689252027353)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/23ff0fa6-43d3-403c-ba4e-bb37c6bbc2ac.png)]

例二：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hk5yNzKS-1689252027353)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d7d3f5cc-7ad3-4582-a44a-de9274490434.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-meGaUkLC-1689252027353)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/89a8e36b-7db3-4b35-bdaa-584f386170de.png)]

选择器复习：

基础选择器：
标签选择器：一次性把网页所有一类的标签选出来 p div a li
类选择器： .one

class人名
id选择器：#one

身份证号：每个网页不能重复

包含选择器：子代选择器 ul>li 亲生儿子

后代选择器 ul li

逗号选择器：

div{
}
a{
} =》 div,
a,
p{
}
p {
}

属性选择器：
input[type=“password”]{}

：包含
input[type=“m”]{}

^以……开头
input[type^=“te”]{}

$：以……结尾

伪类选择器：
:hover================鼠标经过时

a:hover div{
对div的更改
}

a:hover+div{
对div更改的
}

结构伪类：
E:nth-child() ；先看nth-child
E:nth-of-type（）先看E，对所有的E进行编码，然后再看:nth-of-type（）

伪元素：
：：before content:“~”
::after content:“~”
::selection

4.9伪元素选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NdTx53oW-1689252027353)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/631baf99-e265-46ad-8613-766ecbe6a222.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yHKSzYrP-1689252027354)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/a91cb509-83f1-452e-a57c-81a619081660.png)]

4.10文本相关样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cpi1ShiP-1689252027354)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b2146dfa-f035-4639-859a-824e71e14c55.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kyr9GBta-1689252027354)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/6c071e95-cb2b-4150-981f-0a2e81fa0170.png)]

★4.11css盒子，类选择器案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZXo5kOuD-1689252027354)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/50632293-1cd9-4729-a1d1-ed15a700df01.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v2rpvRYe-1689252027354)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ae169e50-a31a-45f2-a3d9-1a202307ef69.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A15RYq7h-1689252027354)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/6e0d084d-4088-4888-8bf3-d67a5109d22d.png)]

4.12list

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GmqWWPwf-1689252027355)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/60b0e589-23ba-455f-91e5-800f53e0a2f6.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AnKzLXm2-1689252027355)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/8a1c291e-e17e-4bf2-b742-050557cbe600.png)]

★4.13元素显示模式转换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CjJSnW1a-1689252027355)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b91bc9d9-4bfc-41db-805d-81cfd9395269.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R1QzUODT-1689252027355)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/7b9a389a-cc69-4fa1-8bc1-59145ef892a1.png)]

4.14背景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dIUMOIUl-1689252027355)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3cec6b07-5e53-4a5c-bc20-e67f6a7876d7.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IVjNjltp-1689252027355)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/61b5a709-5601-4ca7-a3cd-5949e4b39131.png)]

★4.15css类选择器，hover，绝对定位案例

五彩导航栏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9qYOv8aE-1689252027356)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2bfa0f1d-7826-4fa3-b113-adfb46e98df2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cpY1S3nE-1689252027356)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/cd773879-381a-4197-83bc-8446038e52c3.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38wUzvCu-1689252027356)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b5598a89-8fae-4ae3-aa8e-9820a7dcf014.png)]

注：悬停

该 hover CSS @media 可以根据用户的主要输入机制是否可以悬停在元素之上来应用样式。
语法

悬停功能指定为从下面列表中选择的关键字值。

none

主要输入机制无法悬停或不方便悬停（例如，当用户执行不方便的长按操作时，许多移动设备模拟悬停），或者没有主指示输入机制。

hover

主要输入机制可以方便地悬停在元素上。

4.16边框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Exxn1WBH-1689252027356)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/090adb0f-b896-4140-b847-591de3e405b9.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OYr7kmHC-1689252027356)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/91e3cddc-9cf5-46ed-a177-df4f443edd1e.png)]

4.17合并相邻边框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hA2ObWoR-1689252027356)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3c4bff4f-818a-4039-a6b4-6ae0def7198c.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-88qyPal1-1689252027358)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3cf1e499-20b0-40ec-abf6-744dfbf1fbf4.png)]

4.18阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oK9hQaMk-1689252027358)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/4d437173-d530-402b-a39b-0a625f76f449.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cdKO7kpV-1689252027358)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/a11fdfa6-8f08-47d7-8901-a84b2da9e6ef.png)]

4.19轮廓线

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BdTGcW7I-1689252027358)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ab610d57-c1da-4d52-a769-1bf8b69a4980.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-duL5M8a7-1689252027358)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/74da258f-be9d-44d5-9171-b52ea455b022.png)]

4.20防拖拽

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mszOhUD1-1689252027359)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/a1747524-51d3-491e-bcf4-334d32ef1058.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWrZTz9r-1689252027359)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/1eba5182-a984-4b51-8886-30477b8649b9.png)]

4.21隐藏元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WdQbFS89-1689252027359)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/74ec6ea5-b310-4de2-ba0e-2573d2e3cbf9.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4tihDzox-1689252027359)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/36add626-8271-4b29-85cd-e1a10aed1319.png)]

★定位

4.22绝对定位，相对定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U8d8cMPr-1689252027359)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/981088e9-093f-49b8-91ad-66b56a9c7e66.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fKuuNats-1689252027360)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b944e19b-e116-4586-87f0-5d37d8ccea41.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpS6lppC-1689252027360)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/99c0c045-cff3-4dd6-bea1-9d9941432fca.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HNz1ne71-1689252027360)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b8e1f620-1190-40fc-bebc-5fec20a9ffee.png)]

4.23固定定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSXFl6vc-1689252027360)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/1ef016a0-8a62-438b-bcf7-e785380b30c3.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NIhuyS7j-1689252027360)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e22adb4c-81a6-45c0-a66b-3e52c9066004.png)]

4.24粘性定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CdZGBJh2-1689252027361)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3ef25927-c5c9-4f01-a1bf-a45fba09ec47.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jzTvCPYg-1689252027361)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/0bfa52e2-0e2d-4752-a8c6-a1ae9104306a.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xs6mkIJ4-1689252027361)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2089c04c-a190-4c91-9c65-f4711fc37425.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LRupGajj-1689252027361)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/cddbbeb0-5204-4bd8-94bc-8c63caf357bd.png)]

4.25子绝父相定位案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-stFNOcX8-1689252027361)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/689ffef2-18b5-4e4e-9c79-8ba8fbbf310e.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7mU8nCpl-1689252027361)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ef1f7acf-221a-4d8e-be5b-c611a3650830.png)]

★4.26盒子案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bIiVJDMa-1689252027362)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c8613b43-6483-4c08-a16b-f800b2da1e84.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-na5SpU5m-1689252027362)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/82bda957-865c-4ea2-a3bc-d1077f51a630.png)]

注：CSS中的盒子模型由以下四个部分构成：

内容区域（Content）: 盒子的实际内容，通常由文本、图像或其他媒体组成。
内边距（Padding）: 内边距是内容区域与边框之间的空白区域。它可以提供一些额外的空间，用于分隔内容与边框。
边框（Border）: 边框是盒子的边界线，位于内边距的外侧。它可以设置边框样式、宽度和颜色。
外边距（Margin）: 外边距是盒子与其它元素之间的空白区域。它可以用来控制元素之间的间隔。

盒子模型是CSS布局的基础，这些部分结合在一起决定了元素在页面中的占用空间和相互位置关系。

4.27内边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5FEbwVYf-1689252027362)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/be78f987-a38c-46ff-90fc-4ac5be8960ba.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDhY7kBU-1689252027362)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/30999260-1bce-49fb-84ea-1aba3496e973.png)]

4.28外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDUHeWzf-1689252027362)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/584a7ec9-c5be-4dd9-bedc-f509c35c0685.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4nv50INs-1689252027363)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/311cb347-efd2-44f3-89c3-45578e19e620.png)]

4.29外边距塌陷问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3DjyckKC-1689252027363)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/1559a2aa-fd97-4c6f-9e6b-dc2336296c43.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YEtbrg6W-1689252027363)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/65ad5729-cc37-4d81-80a6-176cba1c1fe5.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qVH0HGpU-1689252027363)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/9717adcf-eb6f-4580-8693-6aba43ed443d.png)]

4.30文本溢出

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DgpK6czB-1689252027363)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2841b009-f287-446b-a9d7-6fb84e3bdf18.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JP6bHF34-1689252027363)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c0e8f099-65aa-4e9f-ba29-a12aa832a4d2.png)]

4.31样式继承

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rjniVYSu-1689252027364)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/62fd39ff-97a3-4974-bb1e-7c3cec2fc048.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SPxNszTJ-1689252027364)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/123ad534-9a09-4968-b08c-ea0f543ec3ef.png)]

4.32解决padding（内边距）影响盒子大小问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edksZL1b-1689252027364)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/8362eea6-c431-4eb6-8ac8-ccc40c8215d7.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HiGs0doi-1689252027364)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/47808220-9797-4b20-bbce-844908174edf.png)]

注；如果要解决内边距（padding）对盒子的大小产生影响的问题，可以使用以下两种方法：

使用box-sizing属性：将盒子的box-sizing属性设置为border-box，这样盒子的大小就会包括内边距和边框的尺寸，而不仅仅是内容的尺寸。通过这种方式，可以确保盒子的总尺寸不会因为内边距的增加而改变。

.box {
  box-sizing: border-box;
}
1
2
3

调整盒子的宽度和高度：如果不想使用box-sizing属性，可以手动调整盒子的宽度和高度，以考虑内边距的影响。例如，如果你希望盒子的宽度为200px，同时有10px的内边距，那么你可以将盒子的宽度设置为180px（200px - 2 * 10px）。

.box {
  width: 180px;
  padding: 10px;
}
1
2
3
4

这样做的效果是盒子的内容区域会相应地减小，以适应内边距的增加。注意，边框的尺寸仍然会增加盒子的总尺寸。

★4.33flex布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UUKIojUX-1689252027364)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/706684e0-1b51-411a-9b33-f790209979d8.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6RuGEQS3-1689252027364)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/56589169-d0a5-4696-8d41-3b6c85c4a7a0.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bhnhhq2a-1689252027365)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/024e2215-c16b-45c4-a635-283eb03bbbef.png)]

注：在CSS中的Flex布局中，主轴和侧轴是两个重要的概念。以下是涉及主轴和侧轴的代码及其含义：

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
1
2
3
4
5
6

.container：选择器，表示要应用这些样式的元素类。
display: flex;：将所选元素设置为Flex容器。
flex-direction: row;：设置主轴的方向为水平方向（行），默认值为行（水平方向）。也可以设置为flex-direction: column来设置主轴的方向为垂直方向（列）。
justify-content: center;：决定Flex项在主轴上的对齐方式，这里设置为居中对齐。
align-items: center;：决定Flex项在侧轴上的对齐方式，这里设置为居中对齐。

这些样式的组合将使.container内的元素在Flex容器中水平居中对齐，并在侧轴方向上居中对齐。假设Flex项在容器中是水平方向的，那么主轴就是水平方向，侧轴就是垂直方向。

.item {
  flex: 1;
  text-align: center;
  align-self: flex-end;
  padding: 10px;
}
1
2
3
4
5
6

.item：选择器，表示要应用这些样式的元素类。
flex: 1;：指定Flex项的三个flex属性的简写形式。在这里，它表示每个Flex项将等分可用的空间。
text-align: center;：将Flex项中的文本内容居中对齐。
align-self: flex-end;：设置单个Flex项在侧轴上的对齐方式，这里设置为侧轴末尾对齐。align-self作用于单个Flex项，可以覆盖容器的align-items属性。
padding: 10px;：添加10像素的内边距到Flex项的内部。

这些样式将应用于Flex容器内的每个Flex项。Flex项将等分可用的空间，并根据text-align: center;将文本内容水平居中对齐。同时，单个Flex项使用align-self: flex-end;在侧轴末尾进行对齐，并添加10像素的内边距。

4.34flex

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-10u9oxIY-1689252027365)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e03f254d-a4de-417f-afff-080446013e4c.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GPvc6N9A-1689252027365)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/9727173f-5a13-4c8f-bb66-34d93134e6cc.png)]

4.35定位补充-优先级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GCYxjHhJ-1689252027365)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ec168cce-71c3-411c-b927-2115cb5eb167.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OwC54uvZ-1689252027365)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b95d2b93-241a-41a1-aec0-6f6e2cf4c774.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-axR8YHUE-1689252027365)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/a306dc39-b5b9-4d88-a3af-4c1dd19a2c41.png)]

★4.36小米布局练习

（flex布局练习）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cq70p79B-1689252027366)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e486a902-590b-4a99-90ea-ab78bdfa7527.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qb794wmU-1689252027366)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f0759149-5e62-46f1-a14b-d925cc14aa2c.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w1BtH995-1689252027366)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e2173c9f-c2d6-46cb-9dd9-74bffd217291.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7X3o3ni7-1689252027366)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/fd3894c5-80c4-4dbc-b0ed-37fce55ccff7.png)]

★★小米官网flex布局

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        input {
            outline: none;
        }
      /*基本所有布局都可以用/*

        .container {
            width: 1226px;
            margin: 0 auto;
        }

        .header .left img {
            width: 56px;
            height: 56px;
        }

        .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .head .mid ul {
            display: flex;
        }

        .head .mid ul li {
            margin-right: 30px;
        }

        .head .mid ul a {
            color: #757575;
        }

        .head .mid ul a:hover {
            color: orange;
        }

        .head .right {
            position: relative;
        }

        .head .right input {
            width: 245px;
            height: 40px;
            border: 1px solid #757575;
            border-radius: 5px;
        }

        .head .right span {
            display: inline-block;
            width: 52px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            right: 0;
        }


        /* banner */
        .banner {
            position: relative;
            margin-top: 20px;
        }

        .nav {
            position: absolute;
            top: 0;
            left: 0;
        }

        .nav ul {
            background-color: rgba(105, 101, 101, .6);
            width: 234px;
            height: 460px;
            font: 18px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
            padding: 20px 0px;
        }

        .nav ul li {
            display: flex;
            justify-content: space-between;
            padding: 0px 30px;

        }

        .nav ul li a {
            display: inline-block;
            width: 234px;
            height: 42px;
            line-height: 42px;

            color: aliceblue;
        }

        .nav ul li:hover {
            background-color: orange;

        }

        .banner i {
            display: inline-block;
            width: 41px;
            height: 69px;
            font-size: 30px;

        }

        .a {
            position: absolute;
            top: 50%;
            margin-top: -33.5px;
            left: 240px;
        }

        .b {
            position: absolute;
            top: 50%;
            margin-top: -33.5px;
            right: 0;

        }

        .banner .circle {
            width: 200px;
            position: absolute;
            right: 15px;
            bottom: 15px;
        }

        .banner .circle span {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: pink;
            border-radius: 50%;


        }

        /* banner end */
    </style>
</head>

<body>
    <div class="header">
        <div class="container  head">
            <div class="left"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png"
                    alt=""></div>
            <div class="mid">
                <ul>
                    <li><a href="#">Xiaomi手机</a></li>
                    <li><a href="#">Redmi手机</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">社区</a></li>


                </ul>
            </div>
            <div class="right">
                <input type="text">
                <span>搜索</span>
            </div>
        </div>
    </div>
    <div class="banner container">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0942f8338bc19a2cde9394479fc123c8.jpg?thumb=1&w=1226&h=460&f=webp&q=90"
            alt="">
        <div class="nav">
            <ul>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
                <li>
                    <a href="#">
                        电器商品
                    </a>
                    <span>></span>
                </li>
            </ul>
        </div>
        <i class="a"> <</i>
        <i class="b">></i>
        <div class="circle">
            <span></span>
            <span></span>
            <span></span>
            <span></span>

        </div>


    </div>



</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nq7D4dHm-1689252027366)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/9bd47c5f-4959-43e5-a98e-772052a7f7de.png)]

4.37浮动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-airZb28n-1689252027367)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f803e2a1-7516-4014-ad8f-bc68866d9b61.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yzhkoGHe-1689252027367)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/03b47dd9-4147-4e83-a1c5-a9f9ffc8d687.png)]

4.38float讲解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GGg0gauC-1689252027367)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3aab1bb8-88bc-49dc-9ac4-d72bbd2aa128.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SwB4t6nD-1689252027367)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/da804a6f-8a2d-48b8-a0a1-eca66f88fc66.png)]

4.39float问题解决办法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wKa74V3S-1689252027367)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/7705bd04-d44e-494f-a0ce-31b70abb8108.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qzp69njv-1689252027368)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/33bdeeed-4dfa-416e-ad72-e7d383637381.png)]

4.40渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pDZbE62r-1689252027368)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/cabcc0c4-8658-4dbf-80ed-54dff1101bc4.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BcYJw5RS-1689252027368)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f4351d5d-afcd-44c6-8ff9-cc1677dbc0a9.png)]

4.41字体图标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M21Jc8rI-1689252027368)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3afa67de-548c-4fc1-98df-ce0d10b32261.png)]

4.42媒体查询

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tqrCEX6U-1689252027368)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/6935b733-84e3-477f-846b-c5d2cbb1f438.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QS3RShNK-1689252027368)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/12a30f9e-9d75-4bb8-949a-5027341a6bad.png)]

4.43默认外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-adsKa85O-1689252027369)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/aaaa8978-fe07-44d9-b35b-99f719549840.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oWRysq9e-1689252027369)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b3e26ca1-4be5-4b5d-b7f9-62afcee11850.png)]

4.44转换

（平面旋转）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DyoyJCor-1689252027369)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/44f141d1-fc4a-43de-97f0-c00ab44600db.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9HQH7sIT-1689252027369)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/59f93476-83e4-4cb5-a95c-0f0a4adbcdae.png)]

4.453d

（空间翻转）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lCfFzlMd-1689252027369)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d1fedbfd-6149-4e35-8bae-ae25187d1477.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Ngm0Bms-1689252027369)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/8eed32f4-cd38-4a22-97fe-885ade3767f6.png)]

4.46过渡

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PlcdJwmq-1689252027370)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/9a4b73f2-d26d-4862-b508-4248a6c60ee3.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wCD32wCG-1689252027370)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/75573ded-29ce-423d-b394-c06d639b9b0d.png)]

4.47动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QCFFviZU-1689252027370)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e12009a3-5dae-4c77-af21-cd7bd51cc8a7.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4joMJtIA-1689252027370)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/51006479-b7a6-4830-b13e-d484719cf878.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SZxNlnao-1689252027370)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3a403b08-1912-4182-a3ae-a934a509d332.png)]

作业：3d旋转相册

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zsqfe1vu-1689252027370)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/6f7f653a-063a-44ab-98e8-d043a598a43a.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pMLlpA0N-1689252027371)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ab44209c-ecb8-45d2-a2d1-27c0338024af.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ATqLFSS-1689252027371)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/476b1091-0bfb-4cd9-9dbc-1b38141b64ae.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mg54kpqk-1689252027371)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2e6ff2f6-b279-4113-b445-98abf0447c6e.png)]

这段代码是一个简单的 HTML 页面，用来实现一个 3D 旋转相册效果。

<!DOCTYPE html>: 定义文档类型为 HTML。

<html>: HTML 页面的根元素。

<head>: 包含页面的元数据和引用的外部资源。

<title>3D 相册</title>: 设置页面的标题为"3D 相册"。

<style>: 内联 CSS 样式。

.container: 定义一个名为 “container” 的 CSS 类，设置相册容器的样式，包括透视效果、宽高和居中显示。

.carousel: 定义一个名为 “carousel” 的 CSS 类，设置相册内部元素的样式，包括宽高、相对定位、3D 变换和过渡效果。

.carousel img: 定义相册内部图片元素的样式，包括宽高、绝对定位、边框、阴影和 3D 变换。

.carousel img:nth-child(n): 使用 :nth-child() 选择器选择第 n 个图片，并设置其在 Y 轴上的旋转角度和 Z 轴上的平移距离，产生不同的3D 效果。

.prev 和 .next: 定义两个 CSS 类，用于前进和后退按钮，并设置其样式和位置。

<body>: HTML 页面的主体部分。

<div class="container">: 创建一个类为 “container” 的容器，用于包含相册和按钮。

<div class="carousel">: 创建一个类为 “carousel” 的元素，用于容纳相册内部的图片。

<img src="image1.jpg" alt="Image 1">: 创建一个图片元素，设置图片源和替代文本，用于展示其中一张照片。这里使用了6张图片，通过更改 src 和 alt 属性可以替换图片。

<div class="prev"><</div> 和 <div class="next">></div>: 创建两个类为 “prev” 和 “next” 的按钮元素，用于向前和向后切换相册中的图片。这里使用了 HTML 实体 < 和 > 分别代表"小于"和"大于"符号。

<script>: 在这里编写 JavaScript 代码。

var carousel = document.querySelector('.carousel');: 使用 document.querySelector() 方法获取具有类名 “carousel” 的元素，并将其赋值给变量 carousel。

var prevButton = document.querySelector('.prev'); 和 var nextButton = document.querySelector('.next');: 使用 document.querySelector() 方法获取具有类名 “prev” 和 “next” 的元素，并将它们分别赋值给变量 prevButton 和 nextButton。

prevButton.addEventListener('click', function() { ... });: 为前进按钮添加点击事件监听器，在点击时触发一个匿名函数。

carousel.style.transform = 'rotateY(-60deg)';: 在点击前进按钮时，将相册的样式属性 transform 设置为 rotateY(-60deg)，即相册向左旋转 60 度。

nextButton.addEventListener('click', function() { ... });: 为后退按钮添加点击事件监听器，在点击时触发一个匿名函数。

carousel.style.transform = 'rotateY(60deg)';: 在点击后退按钮时，将相册的样式属性 transform 设置为 rotateY(60deg)，即相册向右旋转 60 度。

通过上述代码，我们创建了一个 3D 旋转相册的效果，并为前进和后退按钮添加了交互功能。

第五章.JavaScript

介绍

JavaScript是一种高级的、解释性的编程语言，广泛用于开发网页和Web应用程序*。它被用来为网页添加动态交互性，使用户可以与页面进行实时互动。*

JavaScript是一种基于对象和事件驱动的语言，它支持面向对象编程、函数式编程和命令式编程等多种编程范式。它使用了类似C语言的语法结构，同时也借鉴了Java和Python等其他编程语言的特性。

JavaScript可以直接嵌入到HTML页面中，通过

JavaScript不仅限于在网页中使用，它也可以作为服务器端脚本语言来编写后台逻辑。例如，Node.js是一个基于JavaScript的运行时环境，可以让你使用JavaScript来编写服务器端应用程序。

JavaScript具有广泛的应用领域，包括网页开发、移动应用开发、游戏开发、数据可视化、机器学习和物联网等。它有强大的生态系统和丰富的第三方库和框架，使开发者能够更加高效地构建复杂的应用程序。

总之，JavaScript是一门功能强大且灵活的编程语言，为开发者提供了丰富的工具和能力，使他们能够在Web上构建出富有交互性和动态性的应用程序。

5.1js初体验

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ocMkzAId-1689252027371)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c7680afd-7921-457f-bbe2-e5b5a466ed26.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cnJV2ndt-1689252027371)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/86c6c8d5-f16a-4013-86b8-5302268eb833.png)]

5.2js引入方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pFJvjmYA-1689252027371)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/1be4003a-6c0f-4287-9600-3e6fde97e25d.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29MvM2r9-1689252027372)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/764f92c8-9aaf-4412-bfbe-5e213a364b83.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LTyWZkoX-1689252027372)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/0b560379-6c52-4d8d-b1e0-8dedfc40488b.png)]

5.3输入输出语句

JavaScript中的输入和输出可以通过多种方式实现，下面列举了一些常见的方法：

控制台输入输出（Console Input/Output）：可以使用console.log()方法在控制台输出信息，例如：
```
console.log("Hello, World!");
1
```
此外，还可以使用console.error()输出错误信息，console.warn()输出警告信息等。
控制台输入可以使用prompt()方法，用于向用户显示一个对话框并接收用户输入的值，例如：
```
var name = prompt("请输入您的名字：");
console.log("您的名字是：" + name);
1
2
```
弹窗（Alert）：可以使用alert()方法在浏览器中弹出一个对话框显示信息，例如：
```
alert("Hello, World!");
1
```

HTML元素操作：可以通过操作HTML元素来实现输入和输出。例如，可以使用getElementById()方法获取指定元素的值，或者使用innerHTML属性改变元素的内容。例如：

<input type="text" id="nameInput">
<button onclick="showName()">显示名字</button>
<div id="output"></div>

<script>
  function showName() {
    var name = document.getElementById("nameInput").value;
    document.getElementById("output").innerHTML = "您的名字是：" + name;
  }
</script>
1
2
3
4
5
6
7
8
9
10

在上面的例子中，通过getElementById()获取输入框的值，并通过innerHTML改变输出div的内容。

浏览器API：JavaScript还提供了一些浏览器API，可以实现更复杂的输入和输出，例如文件读写、网络请求等。这些API包括XMLHttpRequest、fetch等。

这些仅是JavaScript中一些常见的输入和输出方式，具体使用会因具体应用场景而异。在不同的环境中，比如浏览器端、服务器端或命令行环境，输入和输出的方式也会有所不同。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3QzobCps-1689252027372)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/abae58a2-e4c9-46be-aca7-c3bddf1d810b.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XibTYD2f-1689252027372)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/07cdeb5b-2e42-40c4-96f7-c741ca742e3a.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AC5ERu7P-1689252027372)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c0407715-a719-4930-9c70-cabe6c46a769.png)]

补：JavaScript的打印：

在JavaScript中，可以使用不同的方式进行打印输出。下面列举了一些常见的打印方法：

console.log()：这是最常用的打印方法之一。它可以将消息输出到浏览器的控制台或开发者工具的控制台。例如：
```
console.log("Hello, World!");
1
```
console.error()：这个方法也用于输出消息到控制台，但它通常用于输出错误信息。它会以红色或者其他醒目的方式将消息标记为错误。例如：
```
console.error("An error occurred!");
1
```
console.warn()：这个方法用于输出警告信息，通常以黄色或者其他醒目的方式显示。它用于表示警告或潜在的问题。例如：
```
console.warn("Warning: This action may be unsafe!");
1
```
alert()：这个方法会在浏览器中弹出一个对话框，显示消息给用户。例如：
```
alert("Hello, World!");
1
```
document.write()：这个方法会将内容写入到当前页面。注意，如果在页面的加载过程中调用它，它会覆盖整个文档。因此，一般情况下不推荐使用这个方法。例如：
```
document.write("Hello, World!");
1
```

这些方法提供了不同的方式来打印输出信息，开发者可以根据具体的需求选择最适合的方法。值得注意的是，在生产环境中，应尽量避免使用document.write()和alert()，而更常用的是使用console.log()和其他console方法来进行调试和日志输出。

5.4变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2uP5EbHm-1689252027373)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e43bb3a3-ac0b-4ccf-b6ee-06a00ee864fe.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jp2tZG7H-1689252027373)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/14d770a9-596f-49e3-8c66-669c7b199341.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SBTNp0Fm-1689252027373)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/1a7ff3da-83f3-4fcc-ab14-3dc12523bdf8.png)]

5.5变量命名规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0WBGlEJJ-1689252027373)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/1bb99069-b3ac-40d6-8ea2-c30f86b04221.png)]

5.6let与var的区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-raF2ul4c-1689252027373)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/fc4cd359-891f-4dc8-9d94-3f3637364859.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qDRt5v3e-1689252027373)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ebab988f-c093-47f4-8047-c3efa8c45848.png)]

5.7const常量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BeVl4Cs7-1689252027373)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/26042393-f833-4a4b-b066-1aeff35a5959.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lVOVN620-1689252027374)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/223d0a2f-dafb-4aaa-9060-5ac60c59cbca.png)]

5.8数据类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dbf2m7Lm-1689252027374)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b5851e58-1ce4-4bf9-9f40-8a74e4df3bda.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e8YrJSZj-1689252027374)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/263812c3-772e-496e-998d-08c718dfbea9.png)]

5.9基本数据类型—数字类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5vb9bkO8-1689252027374)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f03e69ce-90d9-438f-ba92-0594882e9fd7.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4uYqvQEV-1689252027374)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f8a09645-6984-4a3e-ac79-aeeb53c5e26b.png)]

5.10字符串类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VLM2JH0w-1689252027374)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/62b42daa-c8f6-431f-8dae-e54a54a19f7b.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZMEyho8k-1689252027375)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d429fd45-3498-4b41-806c-a6bcda36df90.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hBCCpHrs-1689252027375)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d221d509-3891-4ccb-918f-23081a1f089e.png)]

5.11布尔类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oaZ718se-1689252027375)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/1f4981bb-7a84-4a34-9a0f-d0a1a90b8d76.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dsszfCiz-1689252027375)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/009eb0b6-3744-43b9-9f99-9686b0cf3f95.png)]

5.12显示转换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MqNqKzBA-1689252027375)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/1aa0323e-a13e-4702-953e-786c39ddb611.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XGUt21Tl-1689252027375)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/4a4bec9a-b1e1-4e8e-9359-100b7058703a.png)]

补：显式转换与隐式转换：

在JavaScript中，存在显示转换（Explicit Conversion）和隐式转换（Implicit Conversion），这两种转换方式允许开发者在不同的数据类型之间进行转换。

显示转换：也称为强制类型转换，是由开发者显式地使用某些方法或函数将一个数据类型转换为另一个数据类型。常见的显示转换方式有：
- Number()：将其他数据类型转换为数字类型。
- String()：将其他数据类型转换为字符串类型。
- Boolean()：将其他数据类型转换为布尔类型。
- parseInt()：将字符串转换为整数类型。
- parseFloat()：将字符串转换为浮点数类型。
- toString()：将其他数据类型转换为字符串类型。
例如：
```
var num = Number("123"); // 显示将字符串转换为数字
var str = String(456); // 显示将数字转换为字符串
var bool = Boolean(0); // 显示将数字转换为布尔值
1
2
3
```
隐式转换：也称为自动类型转换，是在运行时自动进行的类型转换，由JavaScript引擎根据上下文和操作符的要求自动进行数据类型转换。常见的隐式转换包括：
- 数值与字符串之间的运算会将数值隐式转换为字符串，例如：
```
var result = "Hello, " + 123; // 隐式将数字转换为字符串
1
```
- 字符串与布尔值之间的比较会将字符串隐式转换为布尔值，例如：
```
var result = "0" == false; // 隐式将字符串"0"转换为布尔值
1
```
- 数字与布尔值之间的运算会将布尔值隐式转换为数字，例如：
```
var result = 5 + true; // 隐式将布尔值转换为数字
1
```
- 任何值与布尔值进行逻辑运算时，都将进行隐式转换为布尔值，例如：
```
var result = !0; // 隐式将数字0转换为布尔值
1
```
隐式转换是 JavaScript 的特性之一，有时可以方便地进行数据类型的转换，但也可能导致一些意想不到的结果。为了确保代码更清晰和可读性，应尽量避免过多的隐式转换，同时显式地进行数据类型转换可能更为安全和可控。

★5.13综合案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rQFoKDj6-1689252027376)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/bc23c325-c0d9-435b-8f6a-455d10066e04.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x6uXxJbE-1689252027376)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d2d15a4b-339c-4594-b67c-3b214a97a8dc.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bYljuUpn-1689252027376)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/46bfd355-8c18-4e66-b3ce-b285aafc457d.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G9DRwevB-1689252027376)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2bb96300-23ec-4996-9f5a-96f5d30ff5c0.png)]

5.14运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nqZL3YMV-1689252027376)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/380fa085-0b74-4165-a670-86fce1549620.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pF3fTuqu-1689252027376)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3ce32c5d-38e6-46de-814f-e3cdf3d31385.png)]

补：在JavaScript中，/ 和 % 是两个常用的算术运算符，有着不同的功能和用途：

/ 运算符：它表示除法运算，用于计算两个数相除的结果。例如：
```
var result = 10 / 3; // 结果为 3.3333333333333335
1
```
在除法运算中，如果两个操作数都是整数，那么结果将会是一个浮点数。
% 运算符：它表示取余运算，用于计算一个数除以另一个数后的余数。例如：
```
var remainder = 10 % 3; // 结果为 1
1
```
取余运算返回的结果是两个操作数相除后剩余的部分。

要注意的是，/ 和 % 运算符的结果取决于操作数的数据类型。如果操作数都是整数，那么结果也是整数。如果操作数中有一个或两个浮点数，那么结果将是一个浮点数。

例如：

console.log(10 / 3); // 结果为 3.3333333333333335
console.log(10 % 3); // 结果为 1
console.log(10.5 / 3); // 结果为 3.5
console.log(10.5 % 3); // 结果为 1.5
1
2
3
4

在实际应用中，除法运算符和取余运算符经常用于处理数字计算、循环条件的判断等情况下。

5.15逻辑运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rOaROCMF-1689252027377)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/55fc04db-8a17-49e0-aaa8-7eeec8c722a2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mtHDoLUO-1689252027377)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/71e66574-4ec7-4b19-93c4-6be09fb90184.png)]

5.16单分支语句

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kgf2QwNf-1689252027377)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f293d817-4c2a-4cf6-9afe-ec169aa15582.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JUQS9Rw1-1689252027377)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c75b7039-c7f9-49d2-a523-cbc70e223fd7.png)]

5.17双分支语句

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6BpjJjTC-1689252027377)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/91d6ee9e-4dae-46eb-b911-45048ebf860a.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w6aFdJHF-1689252027377)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/4fe2f26b-beea-484e-8449-832af55d743f.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v4PJnA3X-1689252027378)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/bda6c72f-951b-452b-9c61-2b55045db6ce.png)]

5.18双分支语句案例–闰年

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2LOjUNgC-1689252027378)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f0ea8055-afc7-4931-8432-a0f96173ba62.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yB9sI6rw-1689252027378)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/7358fb31-64b0-486d-9113-ac852c594096.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mj2bIh28-1689252027378)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/7fa0d6de-bfc3-4104-ac50-610dca8e86fa.png)]

5.19多分支语句

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9TO71oc1-1689252027378)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c3cf9cdd-855d-4bd8-a745-6de08513c509.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xEg9ewYm-1689252027378)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/211511a4-886f-49ec-9d3d-648644c216d6.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WovpGa38-1689252027379)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/698cd2a1-25d9-4368-bf73-815c44e34be5.png)]

5.20三元运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CfDKxkMw-1689252027379)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3b8aab72-9910-4be7-bddd-587520d64c5b.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vDniMJBB-1689252027379)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/1fc5c2fc-b872-4f94-ad94-f4d98b151089.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7bHAXTT3-1689252027379)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e7dc4a93-fe48-4813-a528-9fa25a9458c3.png)]

5.21求最大值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VZjUXrGN-1689252027383)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d933d3c2-e55f-4976-ac56-83c9a3d6aaa4.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XPSDJWO0-1689252027384)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/fff2324e-1f9f-4b5e-8b2d-b187143d463c.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MRtFShOU-1689252027384)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ed612eba-b916-4eda-8d66-09d15d23cba4.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IC4oHzjy-1689252027384)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/1469550b-0e16-43e8-8c19-894dd51aaf34.png)]

5.22数字补零

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DcJRTl7c-1689252027384)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f32ee8de-13d2-42d1-a88b-e9d122eea838.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J4Z7ypag-1689252027384)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/486941bb-9b21-4be6-805e-5959763032a6.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eKZMwIzD-1689252027385)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/94e149c9-4d29-44c7-95b3-b9b3276b1c3d.png)]

5.23switch

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-236rvqgJ-1689252027385)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/43d60777-be97-487d-8544-81dd6e08cb75.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Rn5AFtt-1689252027385)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c70439f7-5bc9-4b1b-9c22-6153d2259290.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OVaguON1-1689252027385)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c8e0ac7d-c873-497b-b83e-962b264c045c.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NHJ7uFAc-1689252027386)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e615535d-9a41-4c3e-bfd0-775055a6e699.png)]

5.24while循环

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q10GOFss-1689252027386)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/57fd74cc-0720-42fd-bad9-d9f2e25e4757.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6cF5pfw5-1689252027386)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/eb1966dd-2391-40a6-bb69-7e322dfb433e.png)]

5.25while练习–1~100累加和

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eToL2Qvv-1689252027386)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/34a4c1a0-b909-44a4-86a3-5f19e624c043.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hm4v0dJg-1689252027386)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/9df14771-c06f-427c-9e20-e6359ac4bbdc.png)]

5.26for循环

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sxjY5xXa-1689252027387)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/88e2cf80-3b8c-4f48-b64c-822675246834.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UREYCc6q-1689252027387)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/cc49148d-bd3f-41cd-aaac-00dd3f93d3c6.png)]

★5.27循环嵌套–打印乘法表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yhlUKyFy-1689252027387)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/fcc417eb-06e2-4f2b-93e4-ed82b4e19d38.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4vgifW6o-1689252027387)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/09a5b300-8d38-486f-b140-55c1de96c4fd.png)]

5.28continue，break

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PUjuHYCb-1689252027387)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/5196a5dd-14c1-4ee5-9972-d4ff89e0e19f.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q6wMHgFO-1689252027387)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e95ac979-1fdc-4f76-a132-7616d95b4cdc.png)]

5.29循环加强

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JM55GK8J-1689252027387)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/4bb5fbbf-1905-4de6-a14f-0839230d6a46.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LxlVjL2V-1689252027388)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/8ad072cb-c101-424b-b0c1-9986827cbf3a.png)]

5.30数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g090m3FI-1689252027388)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/941214cb-e8a1-4b2e-8579-19fc250976c7.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uNlPC696-1689252027388)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/7159bcb1-3860-45af-9ff7-d2350748cab5.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FP51ifc1-1689252027388)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/fe01a697-2e0b-413e-bb43-44744ef2b456.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kqiXmHFX-1689252027388)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/71da4c40-e8b6-4fb1-b3c0-73cd5953e5fe.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OW1a0i0P-1689252027388)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c7e73a6b-c731-4add-b345-f4d89f60a1ff.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZDzOl2ws-1689252027388)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ebcfab47-29d7-4193-bb17-74a8de97f1af.png)]

★数组中元素书写形式

在JavaScript中，数组可以放置各种类型的元素，包括数字、字符串、布尔值、对象、函数以及其他数组。你可以根据需要向数组中添加或删除元素。下面是一些示例：

数字数组：
```
let numbers = [1, 2, 3, 4, 5];
1
```

字符串数组：

let fruits = ['apple', 'banana', 'orange'];
1

布尔数组：
```
let flags = [true, false, true];
1
```

对象数组：

let students = [
{ name: 'Alice', age: 20 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 21 }
];
1
2
3
4
5

函数数组：

let functions = [
function() { console.log('Function 1'); },
function() { console.log('Function 2'); }
];
1
2
3
4

混合类型数组：

let mixed = [1, 'apple', true, { name: 'John' }];
1

你可以使用数组的索引来访问特定位置的元素，例如 numbers[0] 将返回数字数组中的第一个元素 1。另外，还可以使用数组的方法（例如 push()、pop()、splice() 等）来对数组进行修改和操作。

5.31二维数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-73QkJHzs-1689252027389)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/130e0a9c-2fe0-4bd7-bec6-57c5e60e439c.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-36v5eHIy-1689252027389)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/43ffda93-b945-4c42-9bdf-4c60ced97a24.png)]

5.32二维数组的遍历

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SSKcmt6q-1689252027389)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/9b5faed9-bd5e-4327-9372-f2778d297559.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JkLeCUFc-1689252027389)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c3254b94-bf0f-47c6-85fa-f2889af8e7fc.png)]

函数

5.33函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xa1B1Vcs-1689252027389)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/6accf3d8-b182-4225-849a-0c51ed32e497.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LAL8UDPH-1689252027389)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/dd6d1894-2d85-49f1-a2cb-d81a34bee5a7.png)]

5.34匿名函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yM50dsRF-1689252027390)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/6314a053-b543-4408-9033-05cdcd475d2e.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tMnn3oty-1689252027390)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/5c694189-22c8-4abf-9d30-1f7b677158c0.png)]

5.35函数表达式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OOA6EnsH-1689252027390)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c2d36db4-153f-421d-8166-cc6e84068061.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b5GKGa6y-1689252027390)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d6660b8f-b57e-4c07-9e18-9b88a98f19aa.png)]

5.36值传递，引用传递

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yt0mwefg-1689252027390)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/bcae62b7-d21a-46f0-ae83-72cd076ae0d5.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r0pypLde-1689252027390)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/166c02e5-b30b-4344-b5e0-d43c1c20c69c.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TXO2O4ib-1689252027390)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/455adc1a-b194-432d-ab9d-acd6af2935ff.png)]

5.37默认值参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K6yCFSN8-1689252027391)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/98808b8d-476c-48aa-8991-3e93a621e1e9.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yuA7i6jr-1689252027391)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/989e4b32-7a1c-41e2-9ed7-4ab044b6a8b6.png)]

5.38箭头函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ViJ5PWGg-1689252027391)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/9ea151d7-30fa-406c-bc60-e4b63cde2847.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hFoTgnbz-1689252027391)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/de3af58f-0f50-4ba9-b8da-2aa772a59f70.png)]

补：

箭头函数是ES6引入的一种新的函数语法。它可以更简洁地定义函数，并且在某些情况下可以改变函数内部的this的指向。

以下是箭头函数的几个常见用途和作用：

更简洁的函数定义：箭头函数可以以更简洁的方式定义函数。相比传统的函数表达式，箭头函数省略了function关键字和大括号，并且在只有一个表达式时可以省略return关键字。
```
// 传统的函数表达式
var add = function(a, b) {
  return a + b;
};

// 箭头函数
var add = (a, b) => a + b;
1
2
3
4
5
6
7
```

箭头函数没有自己的this：在箭头函数中，this的指向是继承自外部函数的。这意味着在箭头函数内部，this的值始终指向定义该箭头函数的外部作用域。

// 传统函数中的this
var obj = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

// 箭头函数中的this
var obj = {
  name: 'John',
  sayHello: () => {
    console.log('Hello, ' + this.name); // 在箭头函数中，this指向的是外部作用域的this，这里的this为全局对象，所以输出undefined
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

箭头函数更适合作为回调函数：由于箭头函数没有自己的this，它们更适合作为回调函数，避免了使用bind()或手动保存this的麻烦。

// 传统函数作为回调函数
var fruits = ['apple', 'banana', 'orange'];

fruits.forEach(function(fruit) {
  console.log(fruit);
});

// 使用箭头函数作为回调函数
var fruits = ['apple', 'banana', 'orange'];

fruits.forEach(fruit => console.log(fruit));
1
2
3
4
5
6
7
8
9
10
11

总之，箭头函数的作用是提供了一种更简洁的函数定义方式，并且在某些情况下可以更方便地处理this的指向。然而，值得注意的是，箭头函数不适用于所有的情况，特别是在需要使用this和arguments对象时，是必须使用传统函数表达式的。

5.39递归

+练习：递归求1~n的和

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oeLQQdys-1689252027391)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ed52fc06-5769-4224-8175-3fdbc9181620.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cJcWuRqk-1689252027391)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b37d2614-ffb1-43a8-9571-44a63329d9ee.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cpaissmT-1689252027392)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/914da9b4-0009-47df-8400-70121562675d.png)]

5.40数组遍历

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yVOBw5zd-1689252027392)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/43edef37-8fd0-4ea1-bf8b-54d754b714d4.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rJTcVsfZ-1689252027392)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f913f0f6-d028-4915-9dfb-1965c5218de6.png)]

5.41字符串的常见方法（增删）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ndIFh1zd-1689252027392)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/d555de86-b9a9-4f2a-91b2-4ae4b128074b.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z90dsavF-1689252027392)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/654dc4c3-6d79-471f-ac0e-74ec4b812711.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9iOrZJSP-1689252027392)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/a81ffbef-581a-44a2-a660-3ff9e869081f.png)]

5.42对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iCAQFllm-1689252027392)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/894f2f46-3543-4471-9575-dc3e9eecd196.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TAnHHTdN-1689252027393)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/afae74a2-fc62-40a7-9845-7ff06e339ba9.png)]

5.43对象的增删改查

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t41ZTO4c-1689252027393)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/0d915f03-6443-4096-9806-c9236d621e67.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Zs589bN-1689252027393)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b4f59e29-d3bc-4a58-bacf-b1029b7bab7f.png)]

☆5.44对象的遍历

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NPxDLYw9-1689252027393)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f8abbe69-8799-4474-90c1-f695c7f5373b.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFN0vkak-1689252027393)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/259cc619-b658-4be0-a350-8160787aed0c.png)]

☆5.45数组对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ux2XfKo4-1689252027393)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/4776053f-6990-482d-ab33-1937a79ba216.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PJ8EVlF9-1689252027393)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/9fcee439-4276-49b5-a891-9cace002d976.png)]

5.46Math内置对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRdqoBAE-1689252027394)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/888273fe-0250-4973-b9c4-1e65a4252e84.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kY5Qgzja-1689252027394)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/966032cd-6d16-4e4f-a704-343f9640272a.png)]

5.47日期的内置对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AfPcAS38-1689252027394)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f06b3459-4300-4221-a484-ebfb977cd245.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PaD0CCed-1689252027394)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/a576c73c-0435-40af-9a51-31d71d5d87cb.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MMYBbESd-1689252027394)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/7df960fe-0ddb-4571-be9f-4e5178b4d0a6.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jzgyDwOW-1689252027394)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/62019389-8eeb-4d85-9fa0-02ea49a83a6d.png)]

补：你正在尝试获取当前日期的星期几。如何使用JavaScript来获取当前日期的星期几。

以下是一个示例代码，可以获取当前日期的星期几：

const date = new Date();
const weekday = date.getDay();

console.log(weekday); // 输出当前日期的星期几（0 表示星期日，1 表示星期一，以此类推）
1
2
3
4

请将以上代码复制到你的JavaScript环境中运行，你将在控制台中看到当前日期的星期几的输出。

5.48dom

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-afNSwgys-1689252027394)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/3226a06e-2306-4dce-9ecd-35893d8b450c.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yvwkkXXb-1689252027395)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/cff5c7b4-c887-438a-97cf-e1645d72d2a2.png)]

补：

如果您想在网页中操作DOM（文档对象模型），以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>DOM操作示例</title>
</head>
<body>
  <h1 id="title">Hello World!</h1>
  <button id="btn">点击我</button>

  <script>
    // 获取标题元素并修改其内容
    const titleElement = document.getElementById('title');
    titleElement.innerText = '新的标题';

    // 添加按钮点击事件监听器
    const btnElement = document.getElementById('btn');
    btnElement.addEventListener('click', function() {
      alert('按钮被点击了！');
    });
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上述示例中，我们使用JavaScript来获取id为"title"的元素，并将其内容修改为"新的标题"。同时，我们还获取了id为"btn"的按钮元素，并为其添加了一个点击事件监听器，当按钮被点击时，将弹出一个消息框。

请将以上代码复制到一个HTML文件中，通过浏览器打开该文件，您将看到DOM操作的效果。

★5.49获取元素的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lamtMZEF-1689252027395)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/363d6b0f-f94d-4910-9915-9386f99da1d3.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ilQEyzx-1689252027395)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/7706412a-45b1-4df9-b3e6-56f9be98e101.png)]

★5.50修改元素内容（按步骤）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v2BznEWN-1689252027395)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/ccee62b4-1085-4dc9-994d-5efff2f4ce8a.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xf5hu1sH-1689252027395)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/f3e0b70f-be6a-40d5-a8db-f4527df9b5fa.png)]

5.51随机点名案例

随机抽奖案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HWDx6DlU-1689252027395)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/5f34a06a-5d8a-4a68-aaa6-6cd22c6f390c.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eO7L4ptu-1689252027395)(C:\Users\admin\AppData\Local\Temp\WeChat%20Files\bef952dc40a68e867b71e01cfad71d1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3HRygjLq-1689252027396)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/9849b937-ca41-485e-8c7a-786aa4fa98c2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gf9N4URf-1689252027396)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/0a55c66a-3158-4b21-b968-a5beee86b63b.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkwkoEjM-1689252027396)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2ba0adb4-10b1-4e5d-a3d3-297fbccd1ec9.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4lzXZi5e-1689252027396)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/20fa18ac-2b11-4b6b-982d-4f920743ad37.png)]

★5.52修改元素属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2eqPnyzG-1689252027396)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c2c970bd-63a1-4bdd-82a2-49abf493df7b.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LoPIO5G6-1689252027396)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/2824e52d-e53e-47dd-aee4-f1a6528d231f.png)]

5.53修改元素样式属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfADkFd0-1689252027397)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/7b911e61-7b43-403c-8309-22db987f7f12.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dZ7g0ZIx-1689252027397)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/b6445526-4251-4e97-bf46-3aaccfe575df.png)]

★★5.54定时器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81UzJmRZ-1689252027397)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/67de9c3c-ff1d-4d79-bd29-c8eb1271fd0e.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IF5eLWpt-1689252027397)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/c8d18d83-10ee-4f92-a45d-2123aab4f8d5.png)]

补：在JavaScript中，你可以使用定时器来执行一些延迟或定时的操作。JavaScript提供了两种类型的定时器：setTimeout和setInterval。

setTimeout

setTimeout函数用于在指定的延迟时间后执行一次特定的函数。它接受两个参数：要执行的函数和延迟的毫秒数。

setTimeout(function() {
  // 这里是要执行的代码
}, 延迟时间);
1
2
3

例如，以下代码将在延迟两秒后打印一条消息：

setTimeout(function() {
  console.log("延迟两秒后执行此代码");
}, 2000);
1
2
3

setInterval

setInterval函数用于按照指定的时间间隔重复执行一个函数。它接受两个参数：要执行的函数和时间间隔的毫秒数。

setInterval(function() {
  // 这里是要执行的代码
}, 时间间隔);
1
2
3

例如，以下代码将每隔一秒钟打印一条消息：

setInterval(function() {
  console.log("每隔一秒执行此代码");
}, 1000);
1
2
3

取消定时器

如果你想要取消一个定时器，可以使用函数clearTimeout（用于取消setTimeout）或clearInterval（用于取消setInterval）。这些函数接受一个参数，即要取消的定时器的标识。

var timerId = setTimeout(function() {
  // 这里是要执行的代码
}, 延迟时间);

clearTimeout(timerId); // 取消定时器
1
2
3
4
5

var timerId = setInterval(function() {
  // 这里是要执行的代码
}, 时间间隔);

clearInterval(timerId); // 取消定时器
1
2
3
4
5

这是关于JavaScript定时器的简单介绍。使用定时器，你可以执行延迟操作、循环执行代码或者实现一些其他需要在指定时间间隔内执行的功能。

★5.55定时器案例

用户注册倒计时

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oPDyq4cZ-1689252027397)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/76015fb2-d83d-4099-b352-a371acfbfd82.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vNELhQMz-1689252027397)(file:///C:/Users/admin/OneDrive/%E5%9B%BE%E7%89%87/Typedown/e60b826a-c9f5-4a41-9c4b-c3b76b489de3.png)]
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/66249