HTML5

标签

1
<!DOCTYPE html>

声明

基础骨架标签

1
2
3
4
5
6
7
8
9
<html></html>

<head></head>

<title></title>

<body></body>

<meta>

标题标签

1
2
3
4
5
6
7
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
// h$*6 快速生成六个标题标签

h1最重要,h6最不重要

位置设置

1
2
3
<h1 align="left">one</h1>
<h2 align="center">two</h2>
<h3 align="right">three</h3>

默认left

段落标签

1
2
3
4
5
6
7
<p></p>

<p>i am pass<br>age2</p> //单标签<br>表示换行

<hr color="red" width="px1" size="px12" align="center"/> //分割线
<p> <hr color="red" width="300px" size="" align="left"/></p>
分割线的颜色 宽度 高度 位置(默认center)

图片标签

1
2
3
4
5
6
<img src="" alt="" width="" height="" title="">
src:图片的路径 绝对路径 相对路径 网络路径
alt:图片无法显示的时候显示的文本,可以不写
width:图像宽度
height:图片高度
title:鼠标悬停的图片的提示

超文本链接

1
2
<a href=url>名称</a>
<a href="http://www.baidu.com"> baidu </a>

没点过是蓝色,点过变成紫色

文本标签

显示不一样的文字,与段落标签不同,文本标签仅仅是为了词汇文本,可以嵌套

1
2
3
4
5
6
<em> em klklkl</em>		 //着重 斜体
<i> i klklkl</i> // 斜体
<b>b klklkl</b> //加粗
<strong>strong klklkl</strong> // 加粗 加重语气
<span>span klklkl</span> //无效果 为了css
<del>del klklkl</del> //删除线

image-20240902094946221

列表标签

有序列表

1
2
3
4
5
6
7
<ol>
<li>1st line</li>
<li>2st line</li>
<li>3st line</li>
<li>4st line</li>
<li>5st line</li>
</ol>

image-20240902101449978

1
2
3
<ol type="">
<li>1st line</li>
</ol>

type可以为: 1, a, A, i, I

可以嵌套

1
2
3
4
5
<li>2st line
<ol>
<li>嵌套</li>
</ol>
</li>

无序列表

1
2
3
4
5
6
7
<ul>
<li>1st line</li>
<li>2st line</li>
<li>3st line</li>
<li>4st line</li>
<li>5st line</li>
</ul>

image-20240902102039693

1
2
3
4
5
<ul type="">// disc默认实心圆  circle空心圆 square小方块 none不显示
<li>1st line</li>
</ul>

ul>li*[数字] 快捷生成若干个li标签

和有序标签一样可以嵌套

可以实现导航效果(css)

表格标签

1
2
3
表格:<table>
行: <tr>
单元格:<td>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
<tr>
<td>r1 c1,</td>
<td>r1 c2,</td>
<td>r1 c3,</td>
</tr>
<tr>
<td>r2 c1,</td>
<td>r2 c2,</td>
<td>r2 c3,</td>
</tr>
<tr>
<td>r3 c1,</td>
<td>r3 c2,</td>
<td>r3 c3,</td>
</tr>
<tr>
<td>r4 c1,</td>
<td>r4 c2,</td>
<td>r4 c3,</td>
</tr>
</table>

image-20240902103208417

1
快速生成表格:table>tr*[num]>td*[num]{内容}

表格属性

1
2
<table [属性]="" [属性]="" [属性]="">
</table>

常用属性

border : 边框

width :宽度

height :高度

表格单元格合并

水平合并: colspan 保留左边删除右边

垂直合并: rowspan 保留上边删除下边

1
2
3
<tr clospan="[num]"></tr>
<tr rowspan="[num]"></tr>
<tr clospan="[num]" rowspan="[num]"></tr>

容器标签

1
<div > </div>

分区

image-20240904104545395

image-20240904104637631

但是,H5新标签对浏览器有要求

Form表单

用户输入,使网页具有交互性,例如: 登录注册 搜索框

容器+控件

1
<form action="" method="" name="" >  </form>
  • action:服务器地址
  • method:数据的提交方式 get / post
  • name:表单名称

表单元素

表单标签 表单域 表单按钮

1
2
3
4
<form action="" method="" name="" > 
<input type="text">// 表单域
<input type="submit"> //表单按钮
</form>

image-20240902105311053

文本框

文本域通过 <input type="text">标签进行设定,当用户需要向表单中键入字母 数字等内容时,会用到文本域

1
2
3
4
<form  method="" name="" > 
username: <input type="text"> <br>
keyword: <input type="text">
</form>

image-20240903112901105

密码框

<input type="password">进行设定,密码字段字符不会明文显示,而是以星号或者圆点替代

1
2
3
4
<form  method="" name="" > 
username: <input type="text"> <br>
Password: <input type="password">
</form>

image-20240903113153821

提交按钮

用户点击确认按钮的时候,表单的内容会被传送到另一个文件,表单的动作属性定义了目的文件的文件名,由动作属性定义的这个文件会对接收到的输入进行相关处理

1
2
3
4
5
<form  method="" name="" > 
username: <input type="text"> <br>
Password: <input type="password">
<input type="submit" value="login">
</form>

image-20240903113626406

块级元素与行内元素(内联元素)

image-20240903113955906

常见的块级元素

div form h1-h6 hr p table ul ol …

常见行内元素

a b em i span strong…

行内快级元素(特点:不换行 能够识别宽高)

button img input …

CSS

美化器

语法

选择器 + 声明(样式)

选择器选择HTML元素,一个声明由一个属性和一个值组成

1
2
3
4
5
6
<style>
h3{
color:red;
font-size:30px;
}
</style>

引入方式

内联样式

在head中进行书写,对head所在的网页的元素进行设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
h3{
color:red;
}
</style>
</head>
<body>
<h3 > title </h3>
</body>
</html>

当网页跳转后,样式设置会失效

内部样式

1
<h3 style="color: blue;"> title </h3>

外部样式

image-20240904162535090

1
<link rel="stylesheet" href="./try.css">

在head标签中书写,表示对整个网页应用href的样式

选择器

全局选择器

可以与任何元素匹配,优先级最低,一般做样式的初始化

1
2
3
4
*{
font-size: 30px;
color: red;
}

元素选择器

p b div a img body

1
2
3
4
span{
font-size: 40px;
color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
span{
font-size: 40px;
color: green;
}
</style>
</head>
<body>
<p>no 1</p>
<h1>i am title</h1>
<p>no 2</p>
<p>i<span> am</span> color</p>
</body>

</html>

image-20240904163815074

所有的标签都可以是选择器

选择的是所有

类选择器

规定用圆点来定义,针对你想要的所有标签使用,较为灵活

1
2
3
.content{
color:red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
.content{
color:red;
}
</style>
</head>
<body>
<p>hello </p>
<p>world</p>
<p class="content"> i am world</p>
</body>

</html>

image-20240904164219259

  • 类选择器可以被多种标签使用
  • 类名不能以数字开头
  • 同一个标签可以使用多个类选择器,用空格隔开
1
2
3
4
5
6
7
.content{
color:red;
}
.size{
font-sizez:30px;
}
<p class="content size"> i am world</p>

ID选择器

针对某一个特定的标签来使用,只能使用一次,以#定义,id只能重复一次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
#text{
color:red;
}
</style>
</head>
<body>
<p id="text">hello </p>
<p>world</p>

</body>

</html>
//不能出现两个text

合并选择器

提取共同的样式,减少代码重复

语法:选择器1,选择器2…{}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
p,h3{
font-size: 30px;
color: red;

}
</style>
</head>
<body>
<p >hello </p>
<h3>world</h3>

</body>

</html>

image-20240909085739481

优先级

选择器类型 格式 权重
全局 *
元素 标签名字 1
claa名字(.) 10
ID id名字(#) 100

行内样式>ID选择器>类选择器>元素选择器,相同优先级后写的生效

字体属性

颜色 大小 加粗 文字样式

color

1
2
3
4
color:red;
color:#ff0000; // 红色 6位十六进制数字
color:rgb(0,0,0); //每个数字0-255
color:rgba(0,0,0,0); //最后一位表示透明度 0-1之间

font-size

字体大小

1
font-size:100px;

chorm浏览器接受的最小字体是12px

font-weight

字体粗细

1
font-weight:[value];
描述
bold 粗体
bolder 更粗
lighter 更细
100-900 由细到粗 400为默认 700等价于bold

font-style

字体样式

1
font-style:[value];
样式
normal 默认值
italic 斜体

font-family

指定元素字体

1
font-family: "微软雅黑"; 

背景属性

background-color

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
.box{
width:400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">

</div>
<p >颜色属性 </p>
<h3>world</h3>

</body>

</html>

image-20240909091943212

background-image

设置元素背景图片

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
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
.box1{
width:400px;
height: 400px;
background-color: red;
}
.box2{
width: 1000px;
height: 500px;
background-image:url("pexels-eberhardgross-691668.jpg");
}
</style>
</head>
<body>
<div class="box1">

</div>
<div class="box2">

</div>
<p >颜色属性 </p>
<h3>world</h3>

</body>

</html>

background-repeat

设置如何平铺图像

说明
repeat 默认值
repeat-x 只水平方向平铺
repeat-y 只垂直方向
no-repeat 不平铺
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
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
.box1{
width:400px;
height: 400px;
background-color: red;
}
.box2{
width: 1000px;
height: 500px;
background-image:url("pexels-eberhardgross-691668.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="box1">

</div>
<div class="box2">

</div>
<p >颜色属性 </p>
<h3>world</h3>

</body>

</html>

background-size

1
2
3
4
background-size:100px,100px;
background-size:100%,100%;
background-size:cover;
background-size:contain;

image-20240909093321278

background-position

设置图像的起始位置,默认为 0 % 0%

image-20240909093701055

文本属性

text-align

指定文本的对齐方式

image-20240909094004279

text-decoration

上划线 下划线 删除线等

image-20240909094131426

text-transform

控制文本大小写

image-20240909094231263

text-indent

规定文本块首行文本缩进

image-20240909094300020

表格属性

表格边框

1
2
3
4
table,td{
border: 1px solid black;
border-collapse:collapse ;
}

image-20240909095044271

折叠边框

让表格被单一的边框隔开

1
table{ border-collapse:collapse ;}

大小

1
2
table{ width:100px ;
height:50px;}

表格文字对齐方式

1
2
td{text-align:center; }
td{vertical-align:bottom; }

image-20240909095336983

表格填充

控制空格之间的边框

1
td{padding:15px; }

表格颜色

image-20240909100536827

关系选择器

后代选择器

1
2
E F{}
选择被E包括的所有F标签,设置其样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
ul li{
color: green;
}
</style>
</head>
<body>
<ul>
<li>
one
<ul>
<li>1.1</li>
</ul>
</li>
</ul>

</body>

</html>

image-20240909101116612

子代选择器

1
E>F{}

选择E标签的直接子代标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
div>p{
color: green;
}
</style>
</head>
<body>
<div>
<p>div 的子代</p>
<span>
<p> 000000</p>
</span>
</div>

</body>

</html>

image-20240909101352542

相邻兄弟选择器

1
E+F{}

选择E相邻的F标签,只能向下选择

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
h3+p{
color: green;
}
</style>
</head>
<body>
<h3> head</h3>
<p>bro 1</p>
<p>bro 2</p>

</body>

</html>

image-20240909101539706

通用兄弟选择器

1
E~F{}

选择E下面所有为F标签的兄弟元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
h3~p{
color: green;
}
</style>
</head>
<body>
<h3> head</h3>
<p>bro 1</p>
<p>bro 2</p>

</body>

</html>

image-20240909101705239

盒子模型

image-20240909101944621

image-20240909102444114

image-20240909102620251

弹性盒模型

image-20240909103056436

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

弹性子元素在弹性盒子内默认横向摆放

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
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
.container{
width:500px;
height:500px;
background-color: black;
display:flex; /*设置为弹性盒子*/
}
.box1{
width:100px;
height:100px;
background-color: red;
}
.box2{
width:100px;
height:100px;
background-color: blue;
}
.box3{
width:100px;
height:100px;
background-color: green;
}
.box4{
width:100px;
height:100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container" >
<div class = "box1"></div>
<div class = "box2"></div>
<div class = "box3"></div>
<div class = "box4"></div>
</div>
</body>
</html>

image-20240911223141689

弹性容器的属性

flex-direction
决定弹性项目的主轴方向(水平或垂直):

  • row:主轴为水平方向,项目从左到右排列(默认值)。

  • row-reverse:主轴为水平方向,项目从右到左排列。

  • column:主轴为垂直方向,项目从上到下排列。

  • column-reverse:主轴为垂直方向,项目从下到上排列。

    1
    2
    3
    4
    5
    6
    7
    .container{
    width:500px;
    height:500px;
    background-color: black;
    display:flex;
    flex-direction: column;
    }

justify-content
控制弹性项目在主轴上的对齐方式(垂直方向上进行控制):

  • flex-start:项目向主轴起点对齐。(默认)
  • flex-end:项目向主轴终点对齐。
  • center:项目在主轴上居中。
  • space-between:项目在主轴上均匀分布,第一项靠起点,最后一项靠终点。
  • space-around:项目在主轴上均匀分布,项目两侧有相同的间距。
1
2
3
4
5
6
7
8
.container{
width:500px;
height:500px;
background-color: black;
display:flex;
flex-direction: column;
justify-content: space-around;
}

align-items
控制弹性项目在交叉轴(与主轴垂直的轴)上的对齐方式(水平方向进行控制):

  • stretch:默认值,项目在交叉轴上拉伸以填满容器(如果未设置固定高度)。

  • flex-start:项目向交叉轴的起点对齐。

  • flex-end:项目向交叉轴的终点对齐。

  • center:项目在交叉轴上居中。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .container{
    width:500px;
    height:500px;
    background-color: black;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

flex-wrap
控制弹性项目是否换行:

  • nowrap:项目不换行,超出容器的内容会溢出(默认值)。
  • wrap:项目自动换行。

弹性项目的属性

flex-grow
控制项目的放大比例,如果所有项目的 flex-grow 为1,它们将等比例分配剩余空间。

优先级大于宽度的优先级

flex-shrink
控制项目的缩小比例,当容器空间不足时,项目将按该比例缩小。

flex-basis
定义了项目在主轴方向上的初始大小。

浮动

CSS中的浮动float)是一种用于布局的机制,可以将元素从正常的文档流中取出,使其在容器的左侧或右侧浮动。浮动元素允许文本和其他内联元素环绕在其周围,常用于实现文本环绕图片、多列布局等效果。

基本语法

1
2
3
.element {
float: left; /* 可以是 left、right、none、inherit */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
.box{
width:200px;
height: 200px;
background-color:black;
}
.containner{
width:400px;
height: 400px;
background-color:red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="containner"></div>
</body>
</html>

image-20240911230130721

设置为浮动之后

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
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
<meta charset="utf-8">
<style>
.box{
width:200px;
height: 200px;
background-color:black;
float:left;/*设置左浮动*/
}
.containner{
width:400px;
height: 400px;
background-color:red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="containner"></div>


</body>

</html>

image-20240911230307354

浮动元素脱离了文档流,在上层显示

float 属性的值

  • left:元素向左浮动,后续内容环绕在元素的右侧。可以利用此点让元素横向摆放
  • right:元素向右浮动,后续内容环绕在元素的左侧。
  • none:默认值,元素不浮动,遵循正常的文档流。
  • inherit:继承父元素的浮动属性。

浮动的特点

  • 脱离文档流:浮动元素不占据正常文档流的位置,后续的块级元素会忽略它的存在。
  • 文本环绕:内联元素(如文本)会围绕在浮动元素的周围。
  • 影响父容器高度:如果父容器内的所有子元素都浮动,父容器的高度可能会塌陷为0。
  • 当容器不足以横向摆放时会放到下一行
  • 只有左右浮动没有上下

清除浮动

由于浮动元素会影响后续元素的布局,常需要清除浮动以恢复正常的文档流。使用 clear 属性可以指定元素的哪一侧不允许浮动元素。

1
2
3
.element {
clear: both; /* 可以是 left、right、both、none */
}
  • left:元素的左侧不允许有浮动元素。
  • right:元素的右侧不允许有浮动元素。
  • both:元素的左右两侧都不允许有浮动元素。
  • none:默认值,允许浮动元素出现在两侧。

常用方法

  1. 添加清除元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="container">
    <div class="float-element"></div>
    <div class="clear"></div>
    </div>

    <style>
    .clear {
    clear: both;
    }
    </style>
  2. 使用伪对象清除浮动

    1
    2
    3
    4
    5
    .container::after {
    content: "";
    display: table;
    clear: both;
    }
  3. 使用 overflow 属性(使用较多)

    1
    2
    3
    4
    .container {
    overflow: hidden;
    clear:both;
    }

示例

图片左浮动,文字环绕

1
2
3
4
<img src="image.jpg" alt="示例图片" style="float: left; margin-right: 10px;">
<p>
这是一段示例文本,会环绕在左侧浮动的图片周围。通过设置图片的浮动,可以实现文字环绕的效果。
</p>

TIPS:

  • 父容器高度塌陷:如果所有子元素都浮动,父容器可能会高度塌陷,需要清除浮动。
  • 布局复杂性:过度使用浮动可能导致布局混乱,现代布局中更推荐使用 FlexboxGrid
  • 兼容性:浮动在所有主流浏览器中都得到良好支持,但在响应式设计中需要谨慎使用。

定位

CSS 中的定位(Positioning)用于确定 HTML 元素在页面上的布局位置。定位方式有多种,分别适用于不同的场景。常见的定位方式有以下五种:

静态定位(static

  • 默认值:每个 HTML 元素默认使用 static 定位。
  • 特点
    • 不进行特殊定位,元素按照文档流正常排列。
    • 元素不会受 toprightbottomleft 属性的影响。

示例:

1
2
3
div {
position: static;
}

相对定位(relative

  • 特点
    • 元素相对于它在文档流中的正常位置进行定位。
    • 使用 toprightbottomleft 来偏移元素,但元素仍然占据原本的空间。
    • 相对定位不会影响其他元素的位置。

示例:

1
2
3
4
5
div {
position: relative;
top: 10px; /* 相对于元素的原始位置向下移动10px */
left: 20px; /* 相对于元素的原始位置向右移动20px */
}

绝对定位(absolute

  • 特点
    • 元素相对于 最近的非 static 定位的祖先元素(或视口,如果没有这样的祖先元素)进行定位。
    • 元素会脱离文档流,其他元素会忽略它的存在。
    • 可以通过 toprightbottomleft 属性精确控制位置。

示例:

1
2
3
4
5
div {
position: absolute;
top: 50px; /* 距离最近的非static定位的父元素顶部50px */
left: 100px; /* 距离最近的非static定位的父元素左边100px */
}

固定定位(fixed

  • 特点
    • 元素相对于 浏览器视口 进行定位,即使页面滚动,元素的位置也不会发生变化。
    • 元素脱离文档流,类似 absolute 定位。
    • 常用于创建固定导航栏或浮动按钮。

示例:

1
2
3
4
5
div {
position: fixed;
bottom: 10px; /* 固定在视口底部10px */
right: 20px; /* 固定在视口右边20px */
}

粘性定位(sticky

  • 特点
    • 元素在页面滚动时表现为 相对定位,当滚动到特定位置后则表现为 固定定位
    • 通过 toprightbottomleft 指定何时触发固定定位。
    • 常用于创建粘性导航栏或某些随页面滚动的 UI 元素。

示例:

1
2
3
4
div {
position: sticky;
top: 0; /* 元素在滚动到视口顶部时变为固定定位 */
}

堆叠顺序(z-index

  • 当元素使用 relativeabsolutefixedsticky 定位时,可以通过 z-index 属性控制元素的堆叠顺序。
  • z-index 值越大,元素越靠前。
  • 只对定位元素生效。

示例:

1
2
3
4
5
6
div {
position: absolute;
top: 50px;
left: 50px;
z-index: 10; /* 将该元素放在堆叠顺序的前面 */
}

定位方式的对比:

  • static:默认,不参与定位,元素按文档流正常排列。
  • relative:相对自身位置的偏移,仍在文档流中占位。
  • absolute:脱离文档流,相对于最近的非 static 祖先定位。
  • fixed:相对于视口定位,脱离文档流,页面滚动时位置不变
  • sticky:结合相对与固定定位,滚动到指定位置后固定。

相对定位和绝对定位是相对 具有定位的父级元素 进行位置调整,如果父级元素不存在定位,则逐级向上寻找,直到顶层文档

css新特性

圆角border-radius

1
2
3
4
5
6
7
.containner{
width:100px;
height: 100px;
background-color:red;
border-radius: 20px;
}
设置为100%变成圆形

image-20240914092032529

阴影box-shadow

1
2
3
4
5
6
.containner{
width:100px;
height: 100px;
background-color:red;
box-shadow: 10px 10px 20px black;
}

image-20240914093315234

动画

让元素从一种样式逐渐变成另一种样式

雪碧图

字体图标

JavaScript

JavaScript 是一种轻量级、解释型的编程语言,主要用于开发网页前端功能。

基础知识

变量

var

let:声明一个可以改变的变量。

const:声明一个不可重新赋值的常量。

1
2
3
var num = 10;//用var声明
let x = 10;
const y = 20;

输出方式

弹出框

1
alert("我是弹出框");

image-20240916205054179

页面输出

1
document.write("我是输出到页面");

image-20240916205447778

控制台输出(常用)

1
console.log(num)

image-20240916203143729

变量提升

变量提升(Hoisting)是 JavaScript 的一个默认行为,它将变量声明提升到其作用域的顶部,换句话说,在代码执行之前,JavaScript 会将变量声明(而不是赋值)提升到作用域的顶部。

使用 var 进行变量声明

当你使用 var 声明变量时,JavaScript 会将变量声明提升到当前作用域的顶部,但不会提升赋值部分。如下例子:

1
2
console.log(a); // 输出 undefined
var a = 5;

上面的代码在执行时,实际上相当于这样:

1
2
3
var a;        // 变量声明被提升到了顶部
console.log(a); // 变量存在,但未赋值,因此输出 undefined
a = 5; // 赋值操作在原来的位置

letconst 不存在提升(或提升但不能使用)

letconst 声明的变量中,虽然也有提升,但它们会被暂时锁定在一个“暂时性死区”(Temporal Dead Zone,TDZ)中,在声明之前访问它们会导致错误:

1
2
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

这里,变量 b 是在它的声明之前访问的,JavaScript 引擎会抛出错误,因为 letconst 变量在声明之前是不可访问的。

函数提升

函数声明也会被提升,并且它们会在整个作用域内都可以使用:

1
2
3
4
greet(); // 输出 "Hello"
function greet() {
console.log("Hello");
}

上面的代码会正常工作,因为函数声明也会被提升到作用域的顶部。

tips:

  • var 变量提升:变量声明被提升,但赋值不会被提升,未赋值时默认值为 undefined
  • letconst:变量声明提升但在“暂时性死区”内,无法在声明前访问。
  • 函数声明提升:完整的函数声明会被提升,但函数表达式不会。

数据类型

JavaScript 支持多种数据类型:

  • 原始类型Number(数字),String(字符串),Boolean(布尔值),nullundefinedSymbol
  • 复杂类型Object,包括数组、函数等。
1
2
3
4
5
let num = 42;         // Number
let str = "Hello"; // String
let isTrue = true; // Boolean
let obj = {name: "John",age:19}; // Object
let arr = [1, 2, 3]; // Array

null 和 undefine 没有什么特殊意思,只是表示空

js引入到文件

嵌入HTML文件中

1
2
3
4
5
6
<body>
<script>
var num = 10;
console.log(num);
</script>
</body>

引入本地独立js文件

1
2
3
<body>
<script src="./home.js"></script>
</body>

引入网络来源文件

1
2
3
<head>
<script src=url></script>
</head>

typeof运算符

判断基本数学类型

1
2
3
4
5
6
7
8
let x = 42;
console.log(typeof x); // 输出 "number"

let y = "Hello";
console.log(typeof y); // 输出 "string"

let z = {name: "Alice"};
console.log(typeof z); // 输出 "object"
  • 对于 nulltypeof null 返回 "object",这是一个已知的语言设计问题,通常可以通过额外的检查来处理。
  • typeof 可以用来动态检查变量类型,避免某些类型相关的错误。

算术运算符

运算符 名称 描述 示例 结果
+ 加法 两个值相加 5 + 3 8
- 减法 两个值相减 5 - 3 2
* 乘法 两个值相乘 5 * 3 15
/ 除法 两个值相除 9 / 3 3
% 取模(余数) 除法的余数 10 % 3 1
++ 自增 变量的值增加1,前置(++x)或后置(x++ x++ x = 6
-- 自减 变量的值减小1,前置(--x)或后置(x-- x-- x = 4
** 幂运算 表示某个数的幂(指数) 2 ** 3 8
- 负号 取负数 -x -5

tips:

  • 自增/自减运算符++/--):可以放在变量前面或后面。前置自增/自减会先执行运算,再返回值;后置则先返回值,再执行运算。
  • 取模运算符%):返回除法的余数,常用于判断奇偶性或循环中的边界条件。

赋值运算符

运算符 名称 描述 示例 结果
= 简单赋值 将右侧的值赋给左侧的变量 x = 5 x = 5
+= 加法赋值 将右侧的值加到左侧的变量上,并将结果赋给左侧变量 x += 3 x = x + 3
-= 减法赋值 将右侧的值从左侧的变量中减去,并将结果赋给左侧变量 x -= 3 x = x - 3
*= 乘法赋值 将左侧变量与右侧的值相乘,并将结果赋给左侧变量 x *= 3 x = x * 3
/= 除法赋值 将左侧变量除以右侧的值,并将结果赋给左侧变量 x /= 3 x = x / 3
%= 取模赋值 将左侧变量除以右侧的值,赋值为余数 x %= 3 x = x % 3
**= 幂赋值 将左侧变量取右侧值的幂,并将结果赋给左侧变量 x **= 2 x = x ** 2
<<= 左移赋值 将左侧变量的二进制表示左移指定的位数,并赋值给左侧变量 x <<= 2 x = x << 2
>>= 右移赋值 将左侧变量的二进制表示右移指定的位数,并赋值给左侧变量 x >>= 2 x = x >> 2
>>>= 无符号右移赋值 将左侧变量的二进制表示无符号右移指定的位数,赋值给左侧 x >>>= 2 x = x >>> 2
&= 按位与赋值 将左侧变量与右侧值进行按位与运算,并将结果赋值给左侧变量 x &= 3 x = x & 3
|= 按位或赋值 将左侧变量与右侧值进行按位或运算,并将结果赋值给左侧变量 x |= 3 x = x | 3
^= 按位异或赋值 将左侧变量与右侧值进行按位异或运算,并将结果赋值给左侧变量 x ^= 3 x = x ^ 3

说明:

  • 复合赋值运算符(如 +=-= 等):先执行对应的算术运算,再赋值给左侧变量。
  • 位移赋值运算符:适用于二进制数的位运算操作,通常用于低级别的优化或位操作。

比较运算符

运算符 名称 描述 示例 结果
== 相等 比较两个值是否相等(不比较类型,值相等即可) 5 == "5" true
=== 严格相等 比较两个值及其类型是否严格相等 5 === "5" false
!= 不相等 比较两个值是否不相等(不比较类型) 5 != "5" false
!== 严格不相等 比较两个值及其类型是否严格不相等 5 !== "5" true
> 大于 判断左侧值是否大于右侧值 10 > 5 true
< 小于 判断左侧值是否小于右侧值 10 < 5 false
>= 大于等于 判断左侧值是否大于或等于右侧值 10 >= 10 true
<= 小于等于 判断左侧值是否小于或等于右侧值 10 <= 9 false

说明:

  • 相等运算符 (==):只比较值,类型不同但能转换的也会判定为相等(如数字 5 和字符串 "5" 相等)。
  • 严格相等运算符 (===):同时比较值和类型,只有值和类型都相同时才判定为相等。
  • 不相等运算符 (!=) 和严格不相等运算符 (!==):分别是相等和严格相等的反向判断。
  • 大小比较运算符 (><>=<=):用于比较数值大小,也可比较字符串(按字母顺序比较)。

条件语句

JavaScript 中的条件语句用于根据表达式的布尔值(truefalse)来执行不同的代码。常见的条件语句包括 ifelse ifelseswitch 语句

if 语句

if 语句用于在某个条件为 true 时执行代码。

1
2
3
if (condition) {
// 当 condition 为 true 时执行这段代码
}

示例:

1
2
3
4
let age = 18;
if (age >= 18) {
console.log("You are an adult.");
}

if...else 语句

if...else 语句在条件为 true 时执行 if 块的代码,条件为 false 时执行 else 块的代码。

1
2
3
4
5
if (condition) {
// 当 condition 为 true 时执行这段代码
} else {
// 当 condition 为 false 时执行这段代码
}

示例:

1
2
3
4
5
6
let age = 16;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}

else if 语句

else if 语句用于处理多个条件。在第一个条件为 false 时,依次检查其他条件,直到找到一个为 true 的条件。

1
2
3
4
5
6
7
if (condition1) {
// 当 condition1 为 true 时执行这段代码
} else if (condition2) {
// 当 condition2 为 true 时执行这段代码
} else {
// 如果所有条件都为 false,执行这段代码
}

示例:

1
2
3
4
5
6
7
8
9
10
let score = 85;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else if (score >= 70) {
console.log("Grade: C");
} else {
console.log("Grade: F");
}

switch 语句

switch 语句用于基于一个变量或表达式的值,在多个可能的值中执行相应的代码块。

1
2
3
4
5
6
7
8
9
10
switch (expression) {
case value1:
// 当 expression 等于 value1 时执行这段代码
break;
case value2:
// 当 expression 等于 value2 时执行这段代码
break;
default:
// 当 expression 不等于任何 case 中的值时执行这段代码
}

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Unknown day");
}

循环语句

for 循环

for 循环用于在指定次数内重复执行代码块,通常用于已知次数的循环。

语法

1
2
3
for (initialization; condition; update) {
// 循环体
}
  • initialization:初始化变量。
  • condition:循环条件,条件为 true 时继续执行。
  • update:每次循环结束后更新变量的表达式。

示例

1
2
3
for (let i = 0; i < 5; i++) {
console.log(i); // 输出 0 到 4
}

while 循环

while 循环在条件为 true 时重复执行代码块。适用于循环次数不确定的情况。

语法

1
2
3
while (condition) {
// 循环体
}

示例

1
2
3
4
5
let i = 0;
while (i < 5) {
console.log(i); // 输出 0 到 4
i++;
}

do...while 循环

do...while 循环至少执行一次代码块,然后根据条件决定是否继续执行。适用于至少需要执行一次的情况。

语法

1
2
3
do {
// 循环体
} while (condition);

示例

1
2
3
4
5
let i = 0;
do {
console.log(i); // 输出 0 到 4
i++;
} while (i < 5);

for...in 循环

for...in 循环用于遍历对象的可枚举属性。

语法

1
2
3
for (let key in object) {
// 循环体
}

示例

1
2
3
4
let person = {name: "Alice", age: 25};
for (let key in person) {
console.log(key + ": " + person[key]); // 输出 "name: Alice" 和 "age: 25"
}

for...of 循环

for...of 循环用于遍历可迭代对象(如数组、字符串、集合等)的值。

语法

1
2
3
for (let value of iterable) {
// 循环体
}

示例

1
2
3
4
let numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
console.log(number); // 输出 1 到 5
}

breakcontinue

  • break:用于终止循环。
  • continue:用于跳过当前循环的剩余部分,继续执行下一次循环。

示例break):

1
2
3
4
5
6
for (let i = 0; i < 5; i++) {
if (i === 3) {
break; // 当 i 等于 3 时终止循环
}
console.log(i); // 输出 0、1、2
}

示例(continue):

1
2
3
4
5
6
for (let i = 0; i < 5; i++) {
if (i === 3) {
continue; // 当 i 等于 3 时跳过当前循环,继续下一次
}
console.log(i); // 输出 0、1、2、4
}

总结:

  • for 循环:用于已知次数的循环。
  • while 循环:用于未知次数的循环,条件前检查。
  • do...while 循环:至少执行一次,条件后检查。
  • for...in 循环:遍历对象的属性。
  • for...of 循环:遍历可迭代对象的值。
  • breakcontinue:用于控制循环的执行。

字符串

length方法

返回字符串的字符数。

1
2
const str = "Hello";
console.log(str.length); // 5

charAt方法

返回字符串指定位置的字符

1
2
var str = "0123456789";
console.log(str.charAt(4));//4

传入数字超出字符串的话会返回空字符串

concat方法

连接两个或多个字符串,并返回一个新字符串。并且不改变原来字符串,如果传入的非字符串,会将其转化为字符串再连接

str1.concat(str2, str3, …, strN);

1
2
3
4
5
const str1 = "Hello";
const str2 = "World";
const str3 = "123";
console.log(str1.concat(", ", str2)); // "Hello, World"
console.log(str1.concat(str3,", ", str2));

也可以使用+号进行字符串的连接

substring方法

提取字符串中两个指定索引之间的字符,并返回一个新字符串。

str.substring(start, end);

start:提取的起始索引(包含)。

end:提取的结束索引(不包含)。如果省略,默认为字符串的结束。

1
2
3
const str = "Hello, World!";
console.log(str.substring(0, 5)); // "Hello"
console.log(str.substring(7)); // "World!"
  • 负索引处理substring() 不支持负索引,负数会被转换为 0。

    1
    console.log(str.substring(-3, 5)); // "Hell"(起始变为 0)
  • 参数顺序:如果 start 大于 end,则这两个参数会互换。

    1
    console.log(str.substring(5, 0)); // "Hello"
  • 不修改原字符串substring() 不会修改原始字符串,始终返回一个新字符串。

substr方法

从一个字符串中提取指定长度的子字符串,并返回该子字符串。与 substring()slice() 方法不同,substr() 需要提供提取的起始索引和子字符串的长度

1
str.substr(start, length);
1
2
3
4
const str = "Hello, World!";
console.log(str.substr(7, 5)); // "World"
console.log(str.substr(0, 5)); // "Hello"
console.log(str.substr(-6)); // "World!"
  • 负索引:可以使用负数作为起始索引,从字符串的末尾开始提取。

    1
    console.log(str.substr(-6, 5)); // "World"
  • 不修改原字符串substr() 不会改变原始字符串,始终返回一个新字符串。

  • 长度参数的处理:如果 length 为负数或零,则返回空字符串。

    1
    console.log(str.substr(0, 0)); // ""

indexOf方法

用于返回指定值在字符串中第一次出现的位置。如果未找到该值,则返回 -1。它是区分大小写的。

1
2
3
str.indexOf(searchValue, fromIndex);
//searchValue:要查找的字符串。
//fromIndex(可选):开始查找的位置,默认为 0。
1
2
3
4
5
6
7
8
9
10
11
12
13
const str = "Hello, World!";

// 查找字符 "o"
console.log(str.indexOf("o")); // 4

// 查找字符 "W"
console.log(str.indexOf("W")); // 7

// 查找不存在的字符
console.log(str.indexOf("z")); // -1

// 从指定位置查找
console.log(str.indexOf("o", 5)); // 8 (从索引 5 开始查找)
  • 区分大小写indexOf() 是区分大小写的,因此查找 “hello” 和 “Hello” 会返回不同的结果。

    1
    console.log(str.indexOf("hello")); // -1
  • 从指定位置开始查找:可以通过 fromIndex 参数指定查找的起始位置。如果指定的索引大于或等于字符串的长度,则返回 -1。

    1
    console.log(str.indexOf("o", 10)); // -1
  • 返回的索引:如果找到匹配项,返回的是第一个匹配字符的索引(从 0 开始计数)。

trim方法

用于去除字符串两端的空格(包括空格、制表符和换行符),并返回一个新的字符串。它不会改变原始字符串,因为字符串在 JavaScript 中是不可变的。

语法

1
str.trim();

示例

1
2
const str = "   Hello, World!   ";
console.log(str.trim()); // "Hello, World!"

特点

  1. 去除两端空格trim() 只去除字符串开头和结尾的空格,字符串中间的空格不会被去除。

    1
    2
    const str2 = "   Hello,    World!   ";
    console.log(str2.trim()); // "Hello, World!"
  2. 不修改原字符串trim() 方法返回一个新字符串,原始字符串不受影响。

    1
    console.log(str); // "   Hello, World!   "
  3. 兼容性trim() 是 ECMAScript 5(ES5)引入的,因此在现代浏览器和环境中广泛支持。

相关方法

  • trimStart()(或 trimLeft()):去除字符串开头的空格。
  • trimEnd()(或 trimRight()):去除字符串结尾的空格。

示例

1
2
3
const str = "   Hello, World!   ";
console.log(str.trimStart()); // "Hello, World! "
console.log(str.trimEnd()); // " Hello, World!"

trim() 方法在处理用户输入或清理数据时非常有用。如果你有具体的用例或问题,请告诉我!

split方法

split() 方法用于将一个字符串分割成一个字符串数组,基于指定的分隔符。这个方法返回一个新数组,原始字符串不受影响。

语法

1
str.split(separator, limit);
  • separator:用于分隔字符串的字符、正则表达式或字符串。如果省略,则整个字符串作为单一元素返回。
  • limit(可选):一个整数,指定返回的数组的最大长度。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
const str = "Hello, World!";

// 使用逗号和空格作为分隔符
const result = str.split(", ");
console.log(result); // ["Hello", "World!"]

// 使用空格作为分隔符
const words = "This is a test";
console.log(words.split(" ")); // ["This", "is", "a", "test"]

// 不使用分隔符
const singleElementArray = str.split();
console.log(singleElementArray); // ["Hello, World!"]

特点

  1. 多种分隔符:可以使用任意字符或正则表达式作为分隔符。

    1
    2
    3
    const str2 = "one,two;three four";
    const result2 = str2.split(/[,; ]/); // 使用正则表达式分割
    console.log(result2); // ["one", "two", "three", "four"]
  2. 限制返回元素数量limit 参数可以限制返回的数组长度。

    1
    2
    const str3 = "a,b,c,d,e";
    console.log(str3.split(",", 3)); // ["a", "b", "c"]
  3. 返回的数组:如果字符串中没有找到分隔符,返回的数组将只包含一个元素,即原始字符串。

    1
    2
    const noSeparator = "Hello";
    console.log(noSeparator.split(",")); // ["Hello"]

使用场景

split() 方法常用于处理和解析字符串数据,比如从 CSV 文件中提取数据、处理用户输入等。

如果你对 split() 有更具体的问题或想了解其他相关内容,请告诉我!

数组

1
let arr=['sxt','a','b',{"A":"b"}];

遍历

1
2
3
4
5
6
7
8
9
10
for(var i  =0 ;i<arr.length;i++)
console.log(arr[i]);
var i =0;
while(i<arr.length)
{
console.log(arr[i]);
i++;
}
for(var i in arr)
console.log(arr[i]);

isArray()方法

1
console.log(typeof(arr));//object

Array.isArray() 是 JavaScript 中用于检查一个值是否为数组的方法。它返回一个布尔值:如果该值是数组,则返回 true,否则返回 false

语法

1
Array.isArray(value)

参数

  • value: 需要检查的值。

示例

1
2
3
4
5
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('hello')); // false
console.log(Array.isArray({})); // false
console.log(Array.isArray(null)); // false
console.log(Array.isArray(undefined)); // false

这个方法非常有用,特别是在处理动态类型的数据时,确保你操作的确实是数组。

push()和pop()方法

push()pop() 是 JavaScript 数组的两个常用方法,用于管理数组的末尾元素。

push()

  • 功能: 向数组末尾添加一个或多个元素。
  • 返回值: 返回新数组的长度。

示例

1
2
3
let arr = [1, 2, 3];
arr.push(4); // arr 变为 [1, 2, 3, 4]
console.log(arr.length); // 4

pop()

  • 功能: 移除数组末尾的元素。
  • 返回值: 返回被移除的元素。

示例

1
2
3
let arr = [1, 2, 3, 4];
let lastElement = arr.pop(); // lastElement 为 4,arr 变为 [1, 2, 3]
console.log(lastElement); // 4

这两个方法常用于实现栈(LIFO)数据结构。

shift()和unshift()方法

shift()unshift() 是 JavaScript 数组中用于管理数组头部元素的方法。

shift()

  • 功能: 移除数组的第一个元素。
  • 返回值: 返回被移除的元素。

示例

1
2
3
let arr = [1, 2, 3];
let firstElement = arr.shift(); // firstElement 为 1,arr 变为 [2, 3]
console.log(firstElement); // 1

unshift()

  • 功能: 向数组的开头添加一个或多个元素。
  • 返回值: 返回新数组的长度。

示例

1
2
3
let arr = [2, 3];
arr.unshift(1); // arr 变为 [1, 2, 3]
console.log(arr.length); // 3

这两个方法常用于实现队列(FIFO)数据结构。

join()方法

join() 是 JavaScript 数组的一个方法,用于将数组中的所有元素连接成一个字符串。可以指定一个分隔符,默认分隔符为逗号(,)。

语法

1
array.join(separator)

参数

  • separator(可选):用于分隔每个元素的字符串。如果省略,则使用逗号作为默认分隔符。

示例

1
2
3
4
5
6
7
8
9
let arr = ['Hello', 'World'];
let result = arr.join(); // 'Hello,World'
console.log(result);

let resultWithSpace = arr.join(' '); // 'Hello World'
console.log(resultWithSpace);

let resultWithDash = arr.join('-'); // 'Hello-World'
console.log(resultWithDash);

注意

  • 如果数组中有 undefinednull,它们会被转换为字符串 "undefined""null"
  • 如果数组为空,join() 返回一个空字符串。

concat()方法

concat() 是 JavaScript 数组的方法,用于合并两个或多个数组。此方法不会改变原数组,而是返回一个新数组。

语法

1
array1.concat(array2, array3, ..., arrayN)

参数

  • array2, array3, …, arrayN: 需要合并的一个或多个数组或值。

示例

1
2
3
4
5
6
7
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2); // arr3 变为 [1, 2, 3, 4, 5, 6]
console.log(arr3);

let arr4 = arr1.concat(7, 8); // arr4 变为 [1, 2, 3, 7, 8]
console.log(arr4);

注意

  • concat() 也可以接受非数组的参数,这些参数会被添加到新数组中。
  • 原始数组不受影响。

reverse()方法

reverse() 是 JavaScript 数组的方法,用于反转数组中元素的顺序。该方法会直接修改原数组,并返回反转后的数组

语法

1
array.reverse()

示例

1
2
3
let arr = [1, 2, 3, 4];
let reversedArr = arr.reverse(); // arr 变为 [4, 3, 2, 1]
console.log(reversedArr); // [4, 3, 2, 1]

注意

  • 该方法会改变原数组,所以如果需要保留原数组,可以先使用 slice() 创建副本再反转。
  • 反转空数组仍然是空数组。

indexOf()方法

indexOf() 是 JavaScript 数组的方法,用于查找指定元素在数组中的第一个索引。如果找到了元素,则返回该元素的索引;如果未找到,则返回 -1

语法

1
array.indexOf(element, fromIndex)

参数

  • element: 要查找的元素。
  • fromIndex(可选): 开始查找的位置(索引)。默认值为 0。如果为负值,则从数组尾部开始查找。

示例

1
2
3
4
5
6
let arr = [2, 5, 9, 2];

console.log(arr.indexOf(2)); // 0
console.log(arr.indexOf(5)); // 1
console.log(arr.indexOf(10)); // -1
console.log(arr.indexOf(2, 1)); // 3(从索引 1 开始查找)

注意

  • indexOf() 使用严格相等(===)进行比较,因此对不同类型的值(如数字和字符串)会返回 -1
  • 如果数组中存在多个相同的元素,indexOf() 只返回第一个匹配的索引。

函数

JavaScript 中的函数是可以被调用的代码块,用于执行特定任务或计算并返回值。函数可以接受参数并且可以返回结果,是实现代码复用和模块化的重要工具。

定义

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
function functionName(parameters) {
// 函数体
}
//
function add(a,b)
{
var res = a+b;
console.log(res);
}

function greet() {
return "Hello!";
}


//箭头函数:ES6 中引入的一种简化的函数定义语法,使用箭头(=>)表示。它更简洁,通常用于简化函数表达式。
const functionName = (parameters) => {
// 函数体
};
const add = (a, b) => {
return a + b;
};

console.log(add(2, 3)); // 输出 5

函数表达式

将一个函数赋值给一个变量,可以是命名函数或匿名函数

1
2
3
const functionName = function(parameters) {
// 函数体
};
1
2
3
4
5
const add = function(a, b) {
return a + b;
};

console.log(add(2, 3)); // 输出 5

箭头函数

箭头函数是 ES6 中引入的一种简化的函数定义语法,使用箭头(=>)表示。它更简洁,通常用于简化函数表达式。

1
2
3
const functionName = (parameters) => {
// 函数体
};
1
2
3
4
5
const add = (a, b) => {
return a + b;
};

console.log(add(2, 3)); // 输出 5

特性

  1. 简洁语法: 如果箭头函数只有一个表达式,可以省略 {}return

    1
    const add = (a, b) => a + b; // 更简洁的写法
  2. this 绑定: 箭头函数不具有自己的 this,它的 this 是从外层函数中继承的。这使得在回调函数中引用外部上下文更加方便。

    1
    2
    3
    4
    5
    6
    7
    8
    function Counter() {
    this.count = 0;
    setInterval(() => {
    this.count++; // `this` 引用外部的 Counter
    console.log(this.count);
    }, 1000);
    }
    const counter = new Counter(); // 每秒输出递增的计数
  3. 不能作为构造函数: 箭头函数不能用 new 关键字调用,因此不能被用作构造函数。

  4. 没有 arguments 对象: 箭头函数不具有 arguments 对象,但可以使用剩余参数语法(...args)代替。

函数名的提升

指的是在代码执行之前,函数声明被提升到其所在作用域的顶部。这意味着在函数声明之前调用该函数是可以的。

函数提升的特性

  1. 函数声明的提升:

    • 如果使用函数声明的方式定义函数,整个函数体会被提升,而不仅仅是函数名。
    • 这使得你可以在函数声明之前调用它。
    1
    2
    3
    4
    5
    console.log(greet()); // 输出 "Hello!"

    function greet() {
    return "Hello!";
    }
  2. 函数表达式的提升:

    • 如果使用函数表达式(例如,赋值给变量),则只有变量的声明会被提升,而不会提升赋值。这意味着在赋值之前调用该函数会导致错误。
    1
    2
    3
    4
    5
    console.log(greet()); // TypeError: greet is not a function

    var greet = function() {
    return "Hello!";
    };

总结

  • 函数声明可以在声明之前调用,因为整个函数体被提升。
  • 函数表达式不能在赋值之前调用,因为只有变量的声明被提升。

理解函数提升有助于避免常见的错误和混淆。在编写代码时,尽量将函数调用放在函数声明之后,以提高代码的可读性。

对象

对象是用于存储多个值和复杂实体的基本数据结构。对象是无序的键值对集合,键(属性)通常是字符串或符号,值可以是任意数据类型,包括其他对象、数组、函数等,如果一个属性的值为函数,通常把这个属性称为方法,可以像函数一样调用,并且可以通过 this 关键字访问对象的属性。

创建方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//1.字面量
const person = {
name: 'Alice',
age: 25,
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
//2.使用 new Object()
const car = new Object();
car.make = 'Toyota';
car.model = 'Corolla';
//3.构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
const alice = new Person('Alice', 25);

读取方式

1
2
3
4
//点语法
console.log(person.name); // 'Alice'
//方括号语法
console.log(person['age']); // 25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var user={
name:"lisi",
age:13,
jobs:["worker","doctor"],
getName:function(){console.log("lis")},
container:{
frontEnd:"前端",
backEnd:['js','css']
}
}

console.log(user.name);//lisi
console.log(user['age']);//13
user.getName();//lis
console.log(user.container.frontEnd);//前端

遍历

1
2
for(var key in user)
console.log(key,user[key]);

Math对象

Math 对象是 JavaScript 的内置对象,提供了丰富的数学常量和函数。Math 对象本身是一个静态对象,因此不能创建实例,也不需要使用 new 关键字。

常用属性

  1. Math.PI

    • 圆周率 π,约等于 3.14159。
    1
    console.log(Math.PI); // 3.141592653589793
  2. Math.E

    • 自然对数的底数 e,约等于 2.71828。
    1
    console.log(Math.E); // 2.718281828459045

常用方法

  1. Math.abs(x)

    • 返回 x 的绝对值。
    1
    console.log(Math.abs(-5)); // 5
  2. Math.max(...values)

    • 返回一组数中的最大值。
    1
    console.log(Math.max(1, 3, 2)); // 3
  3. Math.min(...values)

    • 返回一组数中的最小值。
    1
    console.log(Math.min(1, 3, 2)); // 1
  4. Math.random()

    • 返回一个在 0(包含)到 1(不包含)之间的伪随机数。
    1
    console.log(Math.random()); // 随机数,例如 0.123456
  5. Math.round(x)

    • 返回四舍五入后的整数。
    1
    console.log(Math.round(2.5)); // 3
  6. Math.floor(x)

    • 返回小于或等于 x 的最大整数(向下取整)。
    1
    console.log(Math.floor(2.9)); // 2
  7. Math.ceil(x)

    • 返回大于或等于 x 的最小整数(向上取整)。
    1
    console.log(Math.ceil(2.1)); // 3
  8. Math.sqrt(x)

    • 返回 x 的平方根。
    1
    console.log(Math.sqrt(9)); // 3
  9. Math.pow(base, exponent)

    • 返回 base 的 exponent 次方。
    1
    console.log(Math.pow(2, 3)); // 8
  10. Math.sin(x)Math.cos(x)Math.tan(x)

    • 返回给定角度(以弧度为单位)的三角函数值。
    1
    console.log(Math.sin(Math.PI / 2)); // 1

Data对象

Date 对象是 JavaScript 中用于处理日期和时间的内置对象。它提供了多种方法来创建、格式化和操作日期。

创建 Date 对象

  1. 当前日期和时间

    1
    2
    const now = new Date();
    console.log(now); // 输出当前日期和时间
  2. 指定日期和时间

    1
    2
    const specificDate = new Date('2023-09-25T10:00:00');
    console.log(specificDate); // 输出指定的日期和时间
  3. 使用时间戳

    1
    2
    const dateFromTimestamp = new Date(1633036800000); // 以毫秒为单位的时间戳,距离1970/1/1 00:00:00 UTC(格林威治时间) 1970/1/1 08:00:00(北京时间)
    console.log(dateFromTimestamp);//Fri Oct 01 2021 05:20:00 GMT+0800 (中国标准时间)

常用方法

  1. 获取日期和时间信息

    • getFullYear(): 获取年份。
    • getMonth(): 获取月份(0-11,0 代表 1 月)。
    • getDate(): 获取日期(1-31)。
    • getHours(): 获取小时(0-23)。
    • getMinutes(): 获取分钟(0-59)。
    • getSeconds(): 获取秒数(0-59)。
    • getMilliseconds(): 获取毫秒数(0-999)。
    • getTime(): 获取自1970年1月1日以来的毫秒数。
    1
    2
    3
    const date = new Date('2023-09-25T10:00:00');
    console.log(date.getFullYear()); // 2023
    console.log(date.getMonth()); // 8(9月)
  2. 设置日期和时间

    • setFullYear(year): 设置年份。
    • setMonth(month): 设置月份。
    • setDate(date): 设置日期。
    • setHours(hours): 设置小时。
    • setMinutes(minutes): 设置分钟。
    • setSeconds(seconds): 设置秒数。
    • setMilliseconds(milliseconds): 设置毫秒数。
    1
    2
    date.setFullYear(2024);
    console.log(date); // 更新年份
  3. 日期格式化

    • toString(): 返回日期的字符串表示。
    • toISOString(): 返回 ISO 格式的字符串。
    • toLocaleString(): 根据本地时间格式返回字符串。
    1
    console.log(date.toISOString()); // '2024-09-25T10:00:00.000Z'

日期计算

可以通过直接操作 Date 对象的时间戳来进行日期计算,例如:

1
2
3
const futureDate = new Date();
futureDate.setDate(futureDate.getDate() + 5); // 5天后的日期
console.log(futureDate);
1
2
3
4
5
6
7
8
function getLeftDays()
{
var today=new Date();
var endday = new Date(today.getFullYear(),11,31,23,59,59,999);
var msPerDay = 24*60*60*1000;
return Math.round((endday.getTime()-today.getTime())/msPerDay);
}
console.log(getLeftDays());

DOM

DOM(文档对象模型)是一个编程接口,是js操作网页的接口,用于表示和操作 HTML 和 XML 文档的结构。它将文档视为一个树形结构,文档中的每个部分(如元素、属性、文本)都被视为一个节点。作用就是将网页转化为一个js对象,从而可以用脚本进行各种操作

image-20240928155859833

DOM 的基本概念

  1. 节点:DOM的最小组成单位, DOM 中的每个元素都是一个节点,节点类型包括:

    • 元素节点(Element Node)

      • 代表 HTML 或 XML 中的元素,如 <div><p><a> 等。
      • 可以通过 tagName 属性获取节点的标签名。

      文本节点(Text Node)

      • 代表元素或属性中的文本内容。
      • 文本节点通常是元素节点的子节点。

      属性节点(Attribute Node)

      • 代表元素的属性(如 classid)。
      • 属性节点不是 DOM 的直接节点类型,但可以通过元素节点访问。

      文档节点(Document Node)

      • 代表整个文档,是 DOM 树的根节点。
      • 可以通过 document 对象访问。

      文档片段节点(DocumentFragment Node)

      • 轻量级的容器,用于临时存储一组节点。
      • 可以高效地操作多个节点,避免频繁更新 DOM。

      注释节点(Comment Node)

      • 代表文档中的注释。
      • 用于在 HTML 或 XML 中添加注释。

      Doctype 节点(DocumentType Node)

      • 代表文档类型声明(如 <!DOCTYPE html>)。
      • 提供文档的类型信息。
  2. 树结构: DOM 以树形结构表示文档,文档节点为根节点,所有其他节点为其子节点。

    image-20240928160406257

    image-20240928160350092

  3. 节点之间的关系

    -父节点关系

    -子节点关系

    -同级节点关系

  4. Node.nodeType属性

    image-20240928160727804

DOM 的方法

  1. 选择元素:

    • document.getElementById(id): 根据 ID 选择元素。
    • document.getElementsByClassName(className): 根据类名选择元素。
    • document.getElementsByTagName(tagName): 根据标签名选择元素。
    • document.querySelector(selector): 根据 CSS 选择器选择第一个匹配的元素。
    • document.querySelectorAll(selector): 根据 CSS 选择器选择所有匹配的元素。
  2. 创建元素:

    1
    2
    3
    const newDiv = document.createElement('div'); // 创建新元素
    newDiv.textContent = 'Hello, World!'; // 设置文本
    document.body.appendChild(newDiv); // 添加到文档
    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
    <!DOCTYPE html>
    <html>

    <head>
    <title>my page</title>
    <meta charset="utf-8">

    </head>

    <body>

    <div id="container"></div>

    <script>

    //创建元素
    var text = document.createElement("p");//创建p标签
    var content = document.createTextNode("我是文本");
    var id = document.createAttribute("id");
    id.value = "root";
    //appendChild 将内容或者子元素放入容器中
    text.appendChild(content);
    text.setAttributeNode(id);//属性比较特别

    console.log(text);
    //将上述节点塞到文本树中
    var container = document.getElementById("container");
    container.appendChild(text);
    </script>
    </body>

    </html>

    image-20240928163521900

Element对象属性

Element对象对应网页的HTML元素,每一个元素在DOM树上都会转化为Element节点对象

Element .id

返回指定元素的id属性,可读写

1
2
3
4
5
<div class = "box" id="root"> hexo </div>

--------------------------------------------
var root = document.getElementById("root");
root.id = "rots";

Element .className

用来读写当前元素节点的class属性,它的值是一个字符串,每个class之间用空格分隔

1
2
var root = document.getElementById("root");
root.className="box box1";

Element .classList

该对象有以下方法:

add():增加一个clas

remove():移除一个class

contains():检查当前元素是否包含某个class,有返回True

toggle():将某个class移入或者移出当前元素,存在删除,不存在就添加

innerHTML和innerText

1
2
3
4
5
console.log(root.innerHTML);//读取
console.log(root.innerHTML="aaaaa");//设置

console.log(root.innerText);//读取
console.log(root.innerText="WAHAHAH");//设置
  • 使用 innerHTML 时,可以处理 HTML 标签和结构,而 innerText 只处理文本内容。
  • innerHTML 适合需要插入和处理 HTML 的情况,而 innerText 更适合简单的文本内容处理,尤其是在需要避免潜在的 XSS(跨站脚本攻击)时。

DOM 事件

DOM 允许你处理用户与网页的交互。常见事件包括:

  • click: 鼠标点击。
  • mouseover: 鼠标悬停。
  • keydown: 键盘按下。
  • submit: 表单提交。