HTML+CSS+JS基础

文章目录

（一）html
- 1.常见标签
- - （1）注释
  - （2）标题 h1~h6
  - （3）段落 p
  - （4）换行与空格 br + \
  - （5）格式化标签 b + i + s + u
  - （6）图片标签 img
  - （7）超链接标签 a
  - （8）表格标签 table
  - （9）列表标签 ul + ol + dl
  - （10）表单标签 form + input
  - （11）下拉菜单 select
  - （12）多行编辑 textarea
  - （13）无语义标签 div + span
（二）CSS
- 1.基本语法规范
- - （1）CSS的引入方式
  - （2）样式规范
- 2.选择器
- - （1）分类
  - （2）基础选择器
  - （3）复合选择器
- 3.常用元素属性
- - （1）字体属性
  - （2）文本属性
  - （3）背景属性
  - （4）圆角属性
- 4.元素属的显示模式
- 5.盒子模型
- 6.弹性布局
- - （1）实现方式
  - （2）简单的页面布局
（三）JavaScript
- 1.基本介绍
- 2.基本语法
- - （1）变量
  - （2）基本数据类型
  - - a.数字类型
    - b.字符串类型
    - c.boolean类型
    - d.undifined类型
  - （3）运算符
  - （3）数组
  - （4）函数
  - （5）对象
- 3.WebAPI
- - （1）获取元素
  - （2）事件
  - - a.操作元素内容
    - b.操作元素属性
    - c.操作表单元素属性
    - d.操作元素样式
    - e.操作节点

（一）html

一个较为规范的html代码如下，通过变迁结构来构成，每个标签分为开始标签和结束标签，成对出现，标签之间可以嵌套，整体这些标签构成了一个树形结构，称为DOM树。

<html><head><title>title</title></head><body>hello world</body>
</html>

在VSCode中，输入“ ！ +Tab ”可以即可生成模板。<html lang=“en”>中标识了当前网页使用的语言是english， <title>中的内容标识刘烨其标签页的标题，<head>标签里的内容主要是页面的一些属性，和页面展示的内容没有关系，body是页面中要展示的具体内容

<!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></body>
</html>

1.常见标签

（1）注释

可以直接通过” ctrl + / “来切换注释，注释不能进行嵌套

<!-- 注释 -->

（2）标题 h1~h6

h1~h6，其中h1是最大，h6最小。

<!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><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6>
</body>
</html>

在这里插入图片描述

（3）段落 p

&emp;<p>标识一个段落，每个标签单独占一行，段落之间存在间距，可以通过“ lorem + Tab ”生成一个随机的较长的字符串，观察段落间距。
&emp;其中<style>标签中的内容涉及CSS部分，让段落前空两个格

<!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><style>p{text-indent: 2em;}</style><p>第一个段落 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia neque praesentium nam ex molestiae, debitis tenetur blanditiis, voluptas ut repellat, facere odit quia. Eius earum quibusdam, excepturi eaque culpa quos!</p><p>第二个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eius quas autem soluta aut? Enim sit ad dolores deleniti. Dolorum totam voluptate eum libero quam incidunt impedit velit reiciendis quia?</p>
</body>
</html>

在这里插入图片描述

（4）换行与空格 br +  

&emp;在html中，换行会被直接忽略，需要使用<br>标签来实现换行，这个标签是一个单标签，不需要成对。

<body><style>p{text-indent: 2em;}</style><p>第一个段落 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia neque praesenti<br>um nam ex molestiae, debitis tenetur blanditiis, volup<br>tas ut repellat, facere odit quia. Eius earum quibusdam, excepturi eaque culpa quos!</p><p>第二个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>Repudiandae eius quas autem soluta aut? Enim sit ad dolores deleniti. Dolorum totam voluptate eum libero quam incidunt impedit velit reiciendis quia?</p>
</body>

在这里插入图片描述

同样空格也会被忽略，会把多个相邻的空格合并成一个空格，需要使用转义字符来表示多个空格。除了空格之外，类似于 <、>、&这些符号也需要使用转义字符。比如空格使用"   "来表示。

<body><style>p{text-indent: 2em;}</style><p>第一个段落 &nbsp;&nbsp;&nbsp; Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia neque praesentium nam ex molestiae, debitis tenetur blanditiis, voluptas ut repellat, facere odit quia. Eius earum quibusdam, excepturi eaque culpa quos!</p><p>第二个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit.Repudiandae eius quas autem soluta aut?Enim sit ad dolores deleniti. Dolorum totam voluptate eum libero quam incidunt impedit velit reiciendis quia?</p>
</body>

在这里插入图片描述

（5）格式化标签 b + i + s + u

加粗：strong 标签和 b 标签
倾斜：em 标签和 i 标签
删除线：del 标签和 s 标签
下划线：ins 标签和 u 标签

<!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><strong>加粗</strong><b>加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u>
</body>
</html>

在这里插入图片描述

（6）图片标签 img

使用 img 标签来表示，是一个单标签，img内可以写很多属性，其中src属性表示了图片具体所在的位置，这里的src可以是绝对路径，相对路径或者网络路径。同时还包含其他属性如下

alt：替换文本，如果图片加载失败，会显示一个替换的内容。
title：提示文本，鼠标放到图片上会有提示
width/heigth：控制宽度和高度，单位是px，只更改一个时，另一个会根据图片等比例缩放，否则图片会失衡
border：边框，参数是宽度的像素，但是一般用CSS来设定

<!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><!-- 相对路径 --><img src="./cat.jpg" alt="小猫显示失败" title="一个小猫" width="500px"><!-- 网络路径 --><img src="https://pic.nximg.cn/file/20220831/9252468_185536687102_2.jpg" alt="">
</body>
</html>

（7）超链接标签 a

超链接标签用 a 来表示，href 表示点击后跳转到哪个页面；target属性表示打开方式，默认是 _self ，如果是 _blank 则用新的标签页打开。

<body><a href="https://www.sogou.com">这是超链接</a>
</body>

链接可以分为几种形式，

1.外部链接：即直接使用 href 来引用其他网站的网址，如上例所示。
2.内部链接：:网站内部⻚⾯之间的链接. 写相对路径即可

<!DOCTYPE html>...<title>test1</title>
</head>
<body><a href="test2.html">跳转到页面2</a>
</body>
</html>

<!DOCTYPE html>...<title>test2</title>
</head>
<body>页面2
</body>
</html>

3.空连接：使用 # 在 href 中占位，用于在开发阶段不确定链接位置的情况。

    <a href="#">空连接</a>

4.下载链接：href 中的链接对应到一个普通文件，那么就会触发下载操作

    <a href="test.zip">下载链接</a>

5.网页元素链接：可以给图片等任何元素添加链接，放到a标签中即可

    <a href="https://www.sogou.com"><img src="cat.jpg" alt=""></a>

6.锚点链接：在本页面内跳转，快速定位到指定的位置（也可以通过js来实现）

    <a href="#one">第一集</a><a href="#two">第二集</a><a href="#three">第三集</a><p id="one">第一集剧情<br>第一集剧情<br>...</p><p id="two">第二集剧情<br>第二集剧情<br>...</p><p id="three">第三集剧情<br>第三集剧情<br>...</p>

（8）表格标签 table

table：表示整个表格
tr：表示表格的一行
td：表示一个单元格
thead：表格的头部区域
tbody:：表格的主体区域

table 中包含 tr , tr 包含 td
可以给 table 表格添加一些属性，来更改表格的基础样式，border设置边框，width/height设置表格尺寸，cellspacing去掉单元格之间的间隙，使用CSS中的text-align属性来使表格内容居中

    <style>td{text-align:center;}</style><table  border="2px" width="500" height="300" cellspacing="0">   <tr><th>姓名</th><th>性别</th><th>年龄</th>  </tr><tr><td>张三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>⼥</td><td>11</td></tr><tr><td>王五</td><td>男</td><td>18</td></tr></table>

在这里插入图片描述

（9）列表标签 ul + ol + dl

sz主要用来罗列一组并列的数据，可以分为无序列表、有序列表、自定义列表。其中无序列表最为常用，将多个并列关系罗列在一起常用到 ul 标签，无序列表中的小圆点可以通过CSS来改变样式。

    <h3>无序列表</h3><ul><li>内容1</li><li>内容2</li><li>内容3</li></ul><h3>有序列表</h3><ol><li>内容1</li><li>内容2</li><li>内容3</li></ol><h3>自定义列表</h3><dl><dt>涉及的相关内容</dt><dd>内容1</dd><dd>内容2</dd><dd>内容3</dd></dl>

在这里插入图片描述

（10）表单标签 form + input

表单是用户和页面之间交互的重要手段，用来让用户输入，分成两个部分:

表单域：包含表单元素的区域。重点是 form 标签
表单控件：输入框，提交按钮等。重点是 input 标签,

    <form ><input type="text">...</form>

一些常用的类型如下，
1.文本框：单行输入文本框

<input type="text"><br>

2.密码框：单行输入密码

<input type="password"><br>

3.单选框：单选框设置相同的 name 设置为二选一。checked默认选中女，加上 label 后设置 id，此时默认点击 “男、女” 文字后也进行选项

<label for="male">男</label>
<input type="radio" name="gender" checked="checked" id="famale">
<label for="famale">女</label>

4.复选框：多选多，checked设置默认被选，同样也可以搭配 lable

<input type="checkbox" checked="checked">选项1
<input type="checkbox">选项2
<input type="checkbox">选项3
<input type="checkbox">选项4

5.普通按钮：value 中设置按钮中的文字，onclick 设置了点击按钮后会出现 hello 的弹窗

<input type="button" value="这是按钮" onclick="alert('hello')">

或者使用下面的方式

<button onclick="alert('hello')">这是按钮</button>

6.上传文件：点击后可选择本地的文件，浏览器打开后可进行上传

<input type="file">

7.提交按钮：提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送请求，具体和后端相连接

<input type="file">

完整的代码和展示效果如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test1</title>
</head>
<body><form action="test2.html"><input type="text"><br><input type="password"><br><input type="radio" name="gender" id="male"><label for="male">男</label><input type="radio" name="gender" checked="checked" id="famale"><label for="famale">女</label><br><input type="checkbox" checked="checked">选项1<input type="checkbox">选项2<input type="checkbox">选项3<input type="checkbox">选项4<br><input type="button" value="这是按钮" onclick="alert('hello')"><br><input type="file"><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

（11）下拉菜单 select

使用 select 来表示一个下拉菜单，每个菜单选项都是一个option，可以使用select来表示默认的选项

<select><option>--请选择年份--</option><option>2021</option><option>2022</option><option selected="selected">2023</option><option>2024</option><option>2025</option>
</select>

在这里插入图片描述

（12）多行编辑 textarea

使用textarea实现多行编辑

<textarea cols="30" rows="10"></textarea>

在这里插入图片描述

（13）无语义标签 div + span

前面介绍的所有标签都是有语义的标签，每个标签有明确的角色。无语义的标签更适用于应用程序，使用 div 和 span，可以代替绝大多数有语义标签的功能（form系列代替不了），使用CSS来改变为各种样式。
div 默认是一个块级元素（独占一行），span默认是一个行内元素（不独占一行）

<div><span>内容1</span><span>内容1</span><span>内容1</span>
</div>
<div><span>内容2</span><span>内容2</span><span>内容2</span>
</div>
<div><span>内容3</span><span>内容3</span><span>内容3</span>
</div>

在这里插入图片描述更详细的相关标签可以参考MDN文档

（二）CSS

1.基本语法规范

每个CSS包含两个部分：选择器+应用的属性。一个典型的例子如下，p{ … }就是选择器，{ } 中的内容是键值对结构，键值对之间用 “ ; ” 来分割，习惯上一个键值对占一行，键和值之间用 “ : ” 来分割，习惯上冒号后面加一个空格。每个键值对对应一个CSS属性。其中 “ /**/ ”是CSS的注释，CSS不支持 “ // ” 这种注释。

<style>p{/*设置字体颜色*/color: red;/*设置字体大小*/font-size: 30px;}
</style>
<p>hello</p>

（1）CSS的引入方式

CSS代码可以放到HTML文件中。CSS的引入方式可以包括：

1.内部样式表：通过 style 标签来写CSS，如上例所示。
2.内联样式：通过 html 中的 style 属性来写CSS，内联样式属于一种特殊的用法，通常搭配JS来使用，只适用于样式简单的情况，且支队当前元素生效，如下例所示

<p style="color: red;">hello</p>

3.外部样式：实际开发中用的最多的，把CSS代码单独提取出来到一个CSS文件中，让后通过link标签来引入该CSS文件，一般将 link 标签放入到 head 中。HTML 文件和 CSS 文件如下，

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>testCSS</title><link rel="stylesheet" href="test.css">
</head>
<body><p>hello</p>
</body>
</html>

p{/*设置字体颜色*/color: red;/*设置字体大小*/font-size: 30px;
}

（2）样式规范

HTML 和 CSS 是不区分大小写的，开发时一般使用小写。命名方式通常是脊柱命名法，即使用 ” - “ 来分割单词
冒号后⾯一般带空格，选择器和 { 之间也有一个空格

2.选择器

（1）分类

CSS 选择器一般可以分为基础选择器和复合选择器两类

基础选择器由单个选择器构成，包括：标签选择器、类选择器、id选择器、通配符选择器
复合选择器把多种基础选择器综合运用起来，包括：后代选择器、子选择器、并集选择器、伪类选择器

（2）基础选择器

1.标签选择器：选择器是一个 HTML 的标签名，如上面的例子所示，style 中是标签 p
2.类选择器：通过类选择器，可以任意选择想要是元素进行样式的修改。需要在 CSS 代码中创建类名，在对应的 HTML 标签内引入该类名，就会应用该类的相关属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>testCSS</title>
</head>
<body><style>/* 以.开头的为类名 */.red{color: red;}</style><!-- 使用class引入的时候不需要. --><p class="red">hello1</p><p>hello2</p><p class="red">hello3</p><p>hello4</p>
</body>
</html>

在这里插入图片描述
3.id选择器：需要先给选中的元素设定id属性（id在一个页面中不能重复），然后直接使用id赋予响应的属性，id以” # “开头。

<!DOCTYPE html>
...
<body><style>#cpp{color: red;}</style><p>hello1</p><p>hello2</p><p id="cpp">hello3</p><p>hello4</p>
</body>
</html>

在这里插入图片描述
4.通配符选择器：最大的用途在于改变浏览器的默认样式（不同的浏览器默认的样式不一样，开发时要求取消默认样式）以 ” * “ 开头，指针对页面中的 HTML 都应用上述样式。

<style>*{margin: 0;padding: 0;box-sizing: border-box;}
</style>

（3）复合选择器

1.后代选择器：通过多个选择器的组合，能够选择某个元素里的子/孙子元素（后代元素），格式为：选择器1 选择器2，中间间隔空格。

<!DOCTYPE html>
...
<body><style>ul li{color:red;}</style><ul><li>内容1</li><li>内容2</li><li>内容3</li></ul><ol><li>内容o1</li><li>内容2</li><li>内容3</li></ol>
</body>
</html>

在这里插入图片描述
选择器的名称可以是类名，或者id名。一定要注意中间的空格 " ul .class1 ” 表示 ul 中 class 为 class1 的元素；而 “ ul .class1 ” 则表示是 ul 标签，同时 class 为 class1 的元素

<!DOCTYPE html>
...
<body><style>ul .class1{color:red;}ul #id1{color:green;}</style><ul><li class="class1">内容1</li><li id="id1">内容2</li><li>内容3</li></ul><ol><li class="class1">内容1</li><li id="id1">内容2</li><li>内容3</li></ol>
</body>
</html>

在这里插入图片描述

2.子选择器：通过多个选择器的组合，能够选择某个元素里的子元素。
在这里插入图片描述
子选择器与后代选择器类似，但只能选择到子元素。

<!DOCTYPE html>
...
<body><style>ul>.a{color:red;}ol a{color: green;}</style><ul><li>内容1</li><li><a href="#">内容2</a></li><li>内容3</li></ul><ol><li>内容1</li><li><a href="#">内容2</a></li><li>内容3</li></ol>
</body>
</html>

在这里插入图片描述
3.并集选择器：并列的选择多个元素，中间使用逗号来分割。

<!DOCTYPE html>
...
<body><style>ul>li,ol>li{color: red;}</style><ul><li>内容1</li><li><a href="#">内容2</a></li><li>内容3</li></ul><ol><li>内容1</li><li><a href="#">内容2</a></li><li>内容3</li></ol>
</body>
</html>

在这里插入图片描述
4.伪类选择器：借助该选择器可以实现一些动态变化的效果。

<!DOCTYPE html>
...
</head>
<body><style>/* 鼠标悬停的时候，应用该模式 */div:hover{color: red;}/* 鼠标按下的时候，应用该模式 */div:active{color: green;}</style><div>这是一个div</div>
</body>
</html>

3.常用元素属性

（1）字体属性

设置字体要保证对方机器上存在，系统自身默认带了一些字体，还可能会有额外的第三方字体，需要确认对方的机器上存在该字体，也可以通过 HTML 中的 link 属性来从网络上加载字体文件

<!DOCTYPE html>
...
<body><style>.one{font-family: '微软雅黑';}.two{font-family: '宋体';}</style><div class="one">这是一行字</div><div class="two">这是另一行字</div>
</body>
</html>

在这里插入图片描述

大小，使用 font-size 设置大小，单位是px

<!DOCTYPE html>
...
<body><style>.one{font-size: 50px;}.two{font-size: 10px;}</style>...
</body>
</html>

在这里插入图片描述

粗细，可以使用数字表示粗细，font-weight取值范围100->900，或者使用单词，normal定义标准字符，bold定义粗体字符，bolder定义更粗的字符，lighter定义更细的字符。

<!DOCTYPE html>
...
<body><style>.one{font-weight: 900;}.two{font-weight: 100;}</style>...
</body>
</html>

在这里插入图片描述

设置字体是否倾斜，主要用来取消倾斜

<!DOCTYPE html>
...
<body><style>em{font-style: normal;}</style><em>字体倾斜</em>
</body>
</html>

（2）文本属性

文本的颜色使用color，color的取值方式有以下几种：1）直接使用单词，但表示的种类有限。2）使用十进制的 rgb 方式来表示，范围 0 - 255，例如 rgb(75, 137, 90)。3）使用十六进制的 rgb 来表示，范围 0 - f，例如 #00ff00。4）使用 rgba 方式来表示，在rgb的基础上多一个分量来表示透明度。

<!DOCTYPE html>
...
<body><style>div{color: red;}</style><div>这是一段话</div>
</body>
</html>

文本对齐使用 text-align设置对齐方式

<!DOCTYPE html>
...
<body><style>.one{text-align: left;}.two{text-align: center;}.three{text-align: right;}</style><div class="one">这是一段话</div><div class="two">这是另一段话</div> <div class="three">这是另另一段话</div> 
</body>
</html>

在这里插入图片描述

文本装饰，在HTML中可以设置下划线、删除线等，在CSS中同样可以类似的效果，使用text-decoration进行设置。常用标签有以下几种：
underline 下划线
none 没有任何样式，可以给 a 标签去掉下划线
overline 上划线
line-through 删除线

<!DOCTYPE html>
...
<body><style>a{text-decoration: none;}</style><a href="#">这是超链接</a>
</body>
</html>

在这里插入图片描述

文本缩进，使用 text-indent 实现，单位可以是px（像素）、em（一个相对的单位，一个单位为当前元素文字的大小）。text-indent 还可以去负值，但不常用。

<!DOCTYPE html>
...
<body><style>p{text-indent: 2em;}</style><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore obcaecati tempore molestias veritatis quasi unde ut delectus id soluta alias, eos exercitationem dolore ratione officiis harum odio quas eveniet fuga.Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quia, expedita velit veritatis voluptatum culpa maxime alias dolorem, suscipit odit quos explicabo. Quod magnam nemo dolore eum repellat eveniet! Id?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus neque, ipsa cupiditate impedit eos magnam beatae illo hic, id commodi illum eaque et a itaque ab nulla! Explicabo, dolorum minima.</p>
</body>
</html>

在这里插入图片描述

设置行高，行高=字体大小+行间距，使用line-height来实现。行高是上下均等的，可以基于行高来实现垂直方向的居中。

<!DOCTYPE html>
...
<body><style>div{width: 200px;height: 150;font-size: 20px;background-color: gray;text-align: center;line-height: 150px;}</style><div class="one">这是一段话</div>
</body>
</html>

在这里插入图片描述

（3）背景属性

设置背景颜色，使用 background-color，和 color 非常相似，background-color设置背景颜色，color设置字体颜色。background-color还可以设置为transparent，即为背景透明，应用了父元素的背景。

<!DOCTYPE html>
...
<body><style>body{background-color: rgb(60,60,60);}div{width: 200px;height: 150;font-size: 20px;/* background-color: gray; */background-color: transparent;text-align: center;line-height: 150px;}</style><div class="one">这是一段话</div>
</body>
</html>

设置背景图片，使用background-image来实现，当设置背景图片后，默认设置的是平铺的效果。

<style>div{background-image: url(./cat.jpg);}
</style>

设置背景图片的平铺效果，使用 background-repeat，no-repeat是不平铺，repeat是平铺，repeat-x是水平方向平铺，repeat-y是竖直方向平铺。默认背景图片不会被背景图覆盖
设置背景图片的位置，使用 background-position ，注意坐标系左上角为（0，0），向下为Y，向右为X（左手系）。使用px不太好实现背景图片居中的效果，还可以设置成百分数或者设置成英文单词。

<!DOCTYPE html>
...
<body><style>div{width: 1000px;height: 650px;background-color: rgb(50,44,80);background-image: url(./cat.jpg);background-repeat: no-repeat;background-position: center top;color: black;text-align: center;line-height: 650px;}</style><div class="one">这是一段话</div>
</body>
</html>

在这里插入图片描述

设置背景图片的大小，使用 background-size 来设置背景图片的大小，可以通过px，或者使用contain（自适应）、cover（覆盖）等单词来设置背景图片大小，例如在上面的例子上添加语句，

background-size: contain;

在这里插入图片描述

（4）圆角属性

圆角属性，私用border-radius来实现，修改圆角的弧度，可以写数字，数字的数据为边角内切圆的半径，可也可设置成百分比，百分比表示以宽度为基准进行计算。可以通过该属性使图片变成圆形。

<!DOCTYPE html>
...
<body><style>div{width: 200px;height: 200px;background-color: red;color :white;border-radius: 100px;/* border-radius: 50%; */}</style><div class="one">这是一段话</div>
</body>
</html>

在这里插入图片描述

同时可以分别设置圆角的四个属性，顺序为上、右、下、左。

border-radius: 10px 20px 30px 40px;

4.元素属的显示模式

元素属的显示模式可以分为以下几类：

块级元素：独占一行，可以设置宽度高度，例如div、h1-h6、p、li、table…
行内元素：不独占一行，不能设置宽度高度，例如span、a、em、i…
行内块元素：不不占一行，能够设置宽度高度，例如input、img

可以通过display来修改元素的显示模式，常用的是把行内元素修改成块元素。display存在特殊值none，此时将该元素被隐藏起来。

<!DOCTYPE html>
...
<body><style>a{width: 200px;height: 100px;display: block;}</style><a href="#">这是一个链接</a><a href="#">这是一个链接</a><a href="#">这是一个链接</a>
</body>
</html>

在这里插入图片描述

5.盒子模型

在这里插入图片描述

Content - 框的内容，其中显示文本和图像。
Padding - 清除内容周围的区域。内边距是透明的。
Border - 围绕内边距和内容的边框。
Margin - 清除边界外的区域。外边距是透明的

在下面的代码中，设置边框为10px，这样实际显示的像素就是内部的200px100px，外加边框的长度，实际上是220px120px，这样随着边框的改变，显示会不断变大。

<!DOCTYPE html>
...
<body><style>div{width: 200px;height: 100px;border: 10px black solid;}</style><div>这是一个元素</div>
</body>
</html>

在这里插入图片描述
更常用box-sizing 属性，设置为border-box，这样的边框会挤压内容，不会撑大元素

box-sizing: border-box;

在这里插入图片描述

padding内边距是边框和内容之间的距离。padding在四个方向上都设置了内边距，也可分别设置某个方向的内边距padding-left、padding-right、padding-top、padding-bottom。padding默认情况下也会撑大元素，同样可以通过box-sizing 属性阻止盒子被撑大
margin设置的是两个盒子之间的距离，如下代码所示，盒子1的下外边距是10px，盒子2的上外边距是15px，两个盒子之间的距离并没有叠加，而是重叠了取了最大值，因为外边距margin在垂直方向会出现“塌陷”问题，距离取最大，在水平方向不会出现该问题。

<!DOCTYPE html>
...
<body><style>div{width: 200px;height: 100px;border: 10px black dashed;box-sizing: border-box;}.one{margin-bottom: 10px;}.two{margin-top: 15px;}</style><div class="one">这是一个元素</div><div class="two">这是一个元素</div>
</body>
</html>

在这里插入图片描述
基于margin可以实现元素的水平居中，margin: 0 auto; 表示上下外边距为0，水平外边距为自适应，达到水平居中的效果

<!DOCTYPE html>
...
<body><style>.one{width: 500px;height: 200px;background-color: red;}.two{width: 200px;height: 100px;background-color: green;margin: 0 auto;}</style><div class="one"><div class="two">这是一个元素</div></div>
</body>
</html>

在这里插入图片描述

6.弹性布局

（1）实现方式

弹性布局主要是安排页面上的元素的位置（排列方式），网页默认的布局是从上到下的，但在实际中，也需要从左到右的布局

<!DOCTYPE html>
...
<body><style>.parent{/* 让当前元素的宽度和他的父元素一样宽 */width: 100%;height: 200px;background-color: grey;}.one, .two, .three{width: 100px;height: 100px;background-color: red;}</style><div class="parent"><div class="one">1</div><div class="two">2</div><div class="three">3</div></div>
</body>
</html>

在这里插入图片描述

div默认为块级元素，独占一行，为了让这些div实现横向排列，可以使用display: flex

.parent{/* 让当前元素的宽度和他的父元素一样宽 */width: 100%;height: 200px;background-color: grey;display: flex;
}

在这里插入图片描述
水平排列：可以通过设置parent中的 justify-content 属性设置水平的排列方式，取值有：start（靠左），center（居中），end（靠右），space-between（元素之间等分间隔） space-around（元素之间有等分的间隔，最左和最右也设置间隔）

justify-content: space-between;

在这里插入图片描述

垂直排列：使用align-items属性，取值有：start（靠上），center（居中），end（靠下）

align-items: center;

在这里插入图片描述

（2）简单的页面布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基于弹性布局，实现简单的页面结构</title>
</head>
<body><style>*{margin: 0;padding: 0;box-sizing: border-box;}.nav{width: 100%;height: 50px;background-color: rgb(60,60,60);color: white;text-align: center;line-height: 50px;font-size: 20px;}.container{width: 100%;height: 1000px;background-color: grey;display: flex;justify-content: center;align-items: center;}.container .left, .container .right{width: 20%;height: 100%;background-color: rgb(138, 190, 138);color: white;font-size: 20px;line-height: 1000px;text-align: center;}.container .content{width: 60%;height: 100%;background-color: rgb(167, 107, 107);color: white;font-size: 20px;line-height: 1000px;text-align: center;}.footer{width: 100%;height: 150px;background-color: rgb(60,60,60);color: white;font-size: 20px;line-height: 150px;text-align: center;}</style><div class="nav">导航栏</div><div class="container"><div class="left">左侧边栏</div><div class="content">内容区域</div><div class="right">右侧边栏</div></div><div class="footer">页脚</div>
</body>
</html>

在这里插入图片描述
同时，一些其他的布局，比如table，基于浮动布局，基于网格布局都可以实现该页面结构。

（三）JavaScript

对于在浏览器上执行的JS，可以视为三个部分：
1.JS核心语法
2.DOM API：浏览器上提供的一组操作页面元素的 API
3.BOM API：浏览器上提供的一组操作浏览器窗口的 API

1.基本介绍

js通常需要嵌入到HTML中来进行编写，JS 的注释是以 “ // ” 开头的

JS的几种书写形式：
1.内嵌式：即把 JS 写到 scrip 标签中

<!DOCTYPE html>
...
<body><script>//在JS中表示字符串可以使用单引号或者双引号alert('hello');</script>
</body>
</html>

2.行内式：把 JS 写到了 HTML 内部

<body><button onclick="alert('hello')">这是一个按钮</button>
</body>

3.外部式：把 JS 写到一个单独的 .js 文件中，在 HTML 里面通过 script 来引入

<!DOCTYPE html>
...
<body><script src="app.js"></script>
</body>
</html>

// app.js
alert('hello app.js');

输入使用 prompt 弹出输入框，alert弹出输出框

<!DOCTYPE html>
...
<body><script>prompt('请输入姓名');</script>
</body>
</html>

在这里插入图片描述

使用 console.log 把日志输出到控制台中去，同时，如果JS代码中出现了语法或运行错误，也会在控制台中显现出来了。

<!DOCTYPE html>
...
<body><script>console.log('hello log');</script>
</body>
</html>

在这里插入图片描述

2.基本语法

（1）变量

定义一个变量使用格式：var 变量名 = 初始值，统一使用 var 这个关键词来表示，变量的类型取决于初始化的值,JS不区分整型和浮点型。也可以不进行初始化，这样变量是一个的特殊的值 undifined 类型。现在更倾向于用 let 来代替 var 。

    <script>//创建变量var num = 10;    // 创建了一个名字为 num 的，数字类型的变量var s = 'hello'; // 创建了一个名字为 s 的，字符串类型的变量var arr = [];    // 创建了一个名字为 arr 的，数组类型的变量</script>

变量在修改的时候主要注意，如果变量 a 是一个数字类型，那么在赋值的时候，可以赋一个数字类型，也可以赋一个字符串类型，也可以是任意类型，此时变量 a 的类型也就随之改变了。变量的类型可在运行是随着赋值改变，这样的行为称为 " 动态类型 "（像Java、C、C++这样的不支持这样的类型转换，这种行为称为“ 静态类型 ” ）

（2）基本数据类型

number，数字，不区分整数和小数
boolean，true为真，false为假
string，字符串类型
undifined，只有唯一的值undifined，表示未定义的值
null，只有唯一的值null，表示空值

a.数字类型

数字类型中有一些特殊的数字值，Infinity表示无穷大，大于任何数字，表示数字已经超过了JS能够表示的范围；-Infinity表示负无穷大，小于任何数字，表示数字已经超过了JS能够表示的范围；NaN表示当前结果不是一个数字。

<!DOCTYPE html>
...
<body><script>var max = Number.MAX_VALUE;//得到 Infinityconsole.log(max * 2);//得到 -Infinityconsole.log(-max * 2);//得到 NaNconsole.log('hehe' - 10);//得到字符串拼接的效果console.log('hello' + 10);</script>
</body>
</html>

在这里插入图片描述

b.字符串类型

字符串的很多操作和JAVA是类似的，如果字符串本身包含了引号，这时可以通过单双引号灵活搭配的方式来避免使用转义字符

<script>let s1 = 'my name is "Liming"';console.log(s1);let s2 = "my name is 'Liming'";console.log(s2);let s3 = "my 'name' is \"Liming\"";console.log(s3);
</script>

在这里插入图片描述
字符串求长度使用length属性，长度的单位是字符。

<script>let s1 = "hello world";console.log(s1.length);let s2 = "你好";console.log(s2.length);
</script>

在这里插入图片描述
字符串拼接和Java一样，使用 “ + ” 进行拼接，注意数字和字符串也可以进行拼接。

c.boolean类型

在JS中，boolean类型会被当成0和1来进行处理，但是在Java里，布尔类型不会和数字进行混淆。

<script>let a = true;console.log(a + 1);//输出2
</script>

JS中这种boolean的true被当成1来处理的设定方式被称为“ 弱类型 ”（类似的还有例如C、JS、PHP），像Java这样的认为是 “ 强类型 ” 的编程语言（类似的还有Go、Python）

d.undifined类型

表示当前变量处于未定义的状态，属于非法的情况

<script>let a;console.log(a);//undefined
</script>
```、、
#### e.null类型
null表示当前值属于 “没有值” 的情况，属于合法的情况
```html
<script>let a = null;console.log(a);//null
</script>

（3）运算符

JS当中的运算符和Java的用法基本一样。
JS比较相等有两种风格 “ == ” 和 “ === ”，比较不想等也有两种风格“ != ” 和 “ !==”。对于一个等号的来说，比较的是两个变量的值，而不比较两个变量的类型，如果两个变量能够通过隐式类型转换转化成相同的值，此时就认为是相等的；对于两个等号来说，既要比较变量的值和变量的类型。

<script>let a = 10;let b = '10';console.log(a == b);console.log(a === b);
</script>

在这里插入图片描述
对于Java 中的比较有以下三种：

==比较身份，即比较是不是同一个对象
equals也是比较身份，当equals被重写时，可以设定为比较值，即比较对象存储的是不是同一个类型
instanceof比较类型，即两个对象是否是同一个类型

对于运算符 “ && ” 和 “|| ”来说，JS返回的是其中一个表达式，而Java中仅仅返回一个true或者false

<script>let x = null;if(!x){x = 0;}//等价于：x = x || 0
</script>

对于运算符除法 “ / ”来说，在传统的C或者Java中，两个整数数相除得到的仍然是整数，但在JS不区分整数和小数，所以两个整数相除会得到小数

<script>console.log(1 / 2 );//0.5
</script>

（3）数组

数组的创建有以下两种方式，在JS中一个数组中的类型可以是不同类型的（对于动态类型的语言都有专这样的特性）。

<script>let arr = new Array();
</script>

<script>let arr = [];let arr2 = [1, 2, 3, 4];let arr3 = [1, 'hello', null, undefined, true, []]
</script>

JS中直接使用console.log打印出数组的内容

<script>console.log(arr);console.log(arr2);console.log(arr3);    
</script>

在这里插入图片描述
JS同样使用下标来获取数组元素，当访问超出范围的下标时，会显示为 undifined 。

<script>let arr = [1, 2, 3, 4];console.log(arr[-1]);console.log(arr[0]);console.log(arr[100]);
</script>

在这里插入图片描述在JS中，设定一个数组下标的元素，其余位置会自动进行补位。若设置数组-1位置的值，此时并不会影响到数组的长度，可以看成-1变成了一个属性，或者一个键值对

<script>let arr = [1, 2, 3, 4];arr[100] = 10;console.log(arr);
</script>

在这里插入图片描述
JS中的数组可以理解为一个键值对，更准确的说，这里的数组是一个对象，在运行时可以给对象新增属性，下面的代码就是在给arr独享新增了一个属性，属性的名字是hello，属性的值是10。即不能作为下标的设置为一个数组中的属性了。

<script>...arr['hello'] = 10;//等价于arr.hello = 10;console.log(arr['hello']);//等价于console.log(arr.hello);
</script>

在这里插入图片描述
数组长度可以通过.length可以得到，JS中的length属性可以进行更改

<script>let arr = [1, 2, 3, 4];console.log(arr.length);arr.length = 3;console.log(arr);arr.length = 5;console.log(arr);
</script>

在这里插入图片描述
数组中新增元素最常见的操作是使用 push 方法

<script>let arr = [];for(let i = 0; i < 10; i++){arr.push(i);}console.log(arr);
</script>

在这里插入图片描述
删除数组中的元素使用splice方法，这个方法是针对数组中的某个片段进行替换，可以用来删除元素，也可以进行替换。

<script>let arr1 = [1, 2, 3, 4, 5, 6];arr1.splice(2, 3);//删除从下标2开始，3个数量的数组元素console.log(arr1);let arr2 = [1, 2, 3, 4, 5, 6];arr2.splice(2, 3, 100, 200, 300);//替换从下标2开始的后面3个元素，替换值为100，200，300console.log(arr2);
</script>

在这里插入图片描述

（4）函数

JS中的函数语法格式如下所示

// 创建函数/函数声明/函数定义function 函数名(形参列表) {函数体return 返回值;}
// 函数调⽤
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

在给函数指定参数的时候不需要指定参数的类型，只需要能够支持函数内部逻辑即可。

<script>hello();//hellofunction hello(){console.log('hello');}function add(x, y){return x + y;}let result = add(10, 20);//30result = add('hello','world');//helloworldresult = add('hello', 10);//hello10
</script>

同时对于传入的参数的个数，JS并没有要求实参形参的个数匹配，如果实参的个数小于形参的个数，剩余没有传入值的形参默认为undifined，这样相加得到的结果就是NaN。这样可以使用或操作对初始值进行一个判断，对于参数a来说，如果a为undifined，a的结果就是0，如果a不是undifined，结果就是传入的参数a。
如果是参比形参多时，多出来的参数就不会进行考虑

<script>//最多可以支持 7 个参数的版本function add(a, b, c, d, e, f, g){return a + b + c + d + e + f + g;}console.log(add(10, 20));//NaN
</script>

<script>//最多可以支持 7 个参数的版本function add(a, b, c, d, e, f, g){a = a || 0;b = b || 0;c = c || 0;d = d || 0;e = e || 0;f = f || 0;g = g || 0;return a + b + c + d + e + f + g;}console.log(add(10, 20));//30console.log(add(10, 20, 30));//60console.log(add(10, 20, 30, 40));//100console.log(add(10, 10, 10, 10, 10, 10, 10, 1));//70
</script>

在JS中，函数属于“ 一等公民 ”，即函数像一个普通的变量一样，可以被赋值给其他变量，也可以作为另一个函数的参数，还可以作为另一个函数的返回值。函数表达式就是把一个函数赋值给一个变量。

<script>function hello(){console.log('hello');}let f = hello;//hello是函数名，将一个函数赋值给一个变量console.log(typeof(f));//function//可以通过f来调用函数f();//hello
</script>

上面的代码可以合并成如下所示，

<script>let f = function hello(){console.log('hello');}
</script>

进一步可以省略hello，此时就完全依赖于 f 来找到该函数。这个没有名字的函数。也成为“ 匿名函数 ”，也称为lambda表达式。

<script>let f = function (){console.log('hello');}
</script>

作用域指的是某个标识符名字在代码中的有效范围，在ES6之前，只是有全局作用域和函数作用域，在ES6之后，引入了let，也就引入了块级作用域，一个变量在{ }内部定义，是无法在{ }外被访问的。
JS中的作用域是支持“逐级向上”查找的，最后找到全局作用域，如果全局作用域中没有找到，就会报错，这样的及时一种作用域链，当存在多个同名的变量时，优先选择先找到的变量。

<script>let num = 10;//全局变量function hello2(){function hello(){console.log(num);//10}hello();   }hello2();
</script>

<script>let num = 10;function hello2(){let num = 20;function hello(){console.log(num);//20}hello();   }hello2();
</script>

（5）对象

在Java中，需要先有类，再针对类的实例化才能产生对象,在JS中，对象是不依托于类的，JS中的所有独享都是一个类型object，JS中创建对象的方式可以有三种，

1.通过 { } 的方式创建对象，每个属性和方法都是通过键值对的方式来进行表示的，键值对之间使用" , “来进行分割，键和值之间使用” : "来进行分割。

<script>let student = {name: '张三',age: 22,height: 180,weight: 120,read: function() {console.log('read');},run: function() {console.log('run');},};console.log(student.name);//张三console.log(student.age);//22student.read();//read
</script>

2.通过 new Object 的方式创建对象，对象中的成员是可以动态进行改变的（适用于各种创建方式）

<script>var student = new Object(); // 和创建数组类似student.name = "张三";student.height = 175;student['weight'] = 120;student.sayHello = function () {console.log("hello");}console.log(student.name);//张三console.log(student['weight']);//120student.sayHello();//hello
</script>

3.使用构造函数的方式创建对象，这里的构造函数是一个特殊的函数，以批量创建处一组类似的对象。

<script>function 构造函数名(形参) {this.属性 = 值;this.⽅法 = function...}var obj = new 构造函数名(实参)；//new是构造函数的名字，不是类的名字
</script>

3.WebAPI

使用JS编写web代码时，有许多的web API 可供调用，这里主要介绍DOM API。W3C 标准给我们提供了⼀系列的函数，让我们可以操作⽹⻚内容、网页结构、网页样式

（1）获取元素

想要获取页面上的元素，需要先拿到对应的JS对象，DOM中提供了一组API来获取到网页的元素，这里主要介绍querySelector 函数和 querySelectorAll 函数，这两个对象主要来自于 document 这个对象的属性，指页面中的全局对象，当一个页面加载好了，就会生成一个全局变量 document ，包含一些属性和方法，来操作页面的内容。
当 querySelector 的参数选择器匹配到了多个元素的时候，此时返回的对象就是匹配结果中的第一个，使用querySelectorAll 可获取全部元素，返回一个对象，该对象有length，能够通过下标的方式来访问内部元素。这样的对象使用起来和数组非常相似，称为“ 伪数组 ”

<body><div class="one">hello</div><div id="two">hello two</div><ul><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li></ul><script>//querySelector参数就是一个CSS的一个选择器let obj1 = document.querySelector('.one');console.log(obj1);let obj2 = document.querySelector('#two');console.log(obj2);let obj3 = document.querySelector('ul li');console.log(obj3);</script>
</body>

在这里插入图片描述

<script>let obj3 = document.querySelectorAll('ul li');console.log(obj3);
</script>

在这里插入图片描述

（2）事件

JS中很多的代码都是通过事件来触发，事件就是浏览器对于用户的操作行为进行了一个统称，例如鼠标在界面上移动或者点击等等。JS主要就是在不同的事件中进行处理，
事件的三个要素：

1.事件源：哪个HTML元素产生的事件
2.事件类型：例如鼠标移动、鼠标点击、键盘事件、窗口大小改变事件、…
3.事件的处理程序：当事件产生之后，执行何种JS代码

例如一个简单的点击事件

<body><button>这是一个按钮</button><script>let button = document.querySelector('button');button.onclick = function(){//回调函数（不会立即调用，会在合适的时机被库或者框架调用）alert('hello');}</script>
</body>

//另一种写法
<body><button onclick="f()">这是一个按钮</button><script>function f(){alert('hello');}</script>
</body>

操作元素（获取+修改）：包含操作元素内容，操作元素属性，操作元素样式

a.操作元素内容

操作元素内容，通过对象里面的一个属性innerHTML来实现

<body><div id="screen">hello world</div><button id="btn">这是一个按钮</button><script>let btn = document.querySelector('#btn');btn.onclick = function(){let screen = document.querySelector('#screen')console.log(screen.innerHTML);}</script>
</body>

在这里插入图片描述

<body><div id="screen"><ul><li>aaa</li><li>bbb</li></ul></div>...
</body>

在这里插入图片描述

<body><div id="screen"><ul><li>aaa</li><li>bbb</li></ul></div><button id="btn">这是一个按钮</button><button id="btn2">修改内容的按钮</button><script>let btn = document.querySelector('#btn');btn.onclick = function(){let screen = document.querySelector('#screen')console.log(screen.innerHTML);}let btn2 = document.querySelector('#btn2');btn2.onclick = function(){let screen = document.querySelector('#screen')screen.innerHTML = '<h1>修改之后的内容</h1>';}</script>
</body>

在这里插入图片描述

<body><div id="screen">0</div><button id="plus">+</button><script>let plusBtn = document.querySelector('#plus');plusBtn.onclick = function(){//1.获取到screen里的值let screen = document.querySelector('#screen')let val = screen.innerHTML;//得到的是字符串类型val = parseInt(val);//类型转换//2.将这个值+1val += 1;//3.将新值写回screen.innerHTML = val;}</script>
</body>

在这里插入图片描述
特别的，对于input标签来说，该标签是一个单标签，不具有innerHTML属性，但可以通过value来获取内容

b.操作元素属性

可以通过 DOM 对象 . 属性名就可以进行操作，一个HTML标签中可以写哪些属性，同样可以通过JS中的DOM对象来获取到一样的属性。

<body><img src="dog.jpg" alt=""><script>let img = document.querySelector('img');img.onclick = function() {console.log(img.src);if(img.src.indexOf('dog.jpg') >= 0){img.src = 'cat.jpg';}else if(img.src.indexOf('cat.jpg') >= 0){img.src = 'dog.jpg';}}</script>
</body>

可以通过 console.dir 打印出一个 DOM 对象的全部属性和键值

c.操作表单元素属性

表单主要是指 input 标签的以下属性可以通过DOM来修改

value：input的值
disabled：禁用
checked：复选框会使用
selected：下拉框会使用
type：input的类型（文本、密码、按钮、文件）

<body><input type="button" value="播放"><script>let input = document.querySelector('input');input.onclick = function(){if(input.value == '播放')input.value = '暂停';else if(input.value == '暂停')input.value = '播放';}</script>
</body>

<body><input type="checkbox" id="all">全选<br><input type="checkbox" class="options">选项1<br><input type="checkbox" class="options">选项2<br><input type="checkbox" class="options">选项3<br><input type="checkbox" class="options">选项4<br><script>//1.获取元素let all = document.querySelector('#all');let options = document.querySelectorAll('.options');//2.全选点击事件all.onclick = function(){for(let i = 0; i < options.length; i++){options[i].checked = all.checked}}//3.针对每个选项注册点击事件，实现对all的取消操作for(let i = 0; i < options.length; i++){options[i].onclick = function(){all.checked = checkOption(options)}}function checkOption(options){for(let i = 0; i < options.length; i++){//只要有一个选项是没有被选中的，就让全选按钮取消if(!options[i].checked)return '';}//所有按钮都被选中，设定all为选中状态return 'checked';}</script>
</body>

d.操作元素样式

操作元素样式，本质上也是操作元素属性，于样式相关的属性主要包含下面两个：1.style属性，对应行内样式，直接把样式写到style里。2.className / classList 对应内部样式/外部样式，应用了一组 CSS 类名
注意在CSS中使用 font-size，而在JS中使用驼峰命名法 fontSize。所有的CSS属性都是同样的规则映射到JS中。

<body><div style=" font-size: 20px">文本点击越来越大</div><script>let div = document.querySelector('div');div.onclick = function(){//1.先获取当前字体的大小//字符串转数字，parseInt在转换时从前往后，遇到非数字字符就停止了let fontSize= parseInt(div.style.fontSize)//2.在当前自以大小的基础上多增加5pxfontSize = fontSize + 5;div.style.fontSize = fontSize + 'px';//注意单位}</script>
</body>

在这里插入图片描述
在HTML中表示类名的属性是class，但在JS中，属性名就变成了className / classList ( class 在JS中算一个关键字)。如果要修改的样式比较多，再通过style来修改就麻烦了，可以借助 css 类来进行修改，夜间模式的例子如下，

<body><style>.light{background-color: #fff;color: #000;}.dark{background-color: #000;color: #fff;}</style><div class="light" style="width: 200px; height: 100px;">这是一段话</div><button>夜间模式</button><script>let div = document.querySelector('div');let button = document.querySelector('button');button.onclick = function(){if(div.className == 'light'){div.className = 'dark';button.innerHTML = '日间模式';}else if(div.className == 'dark'){div.className = 'light';button.innerHTML = '夜间模式';}}</script>
</body>

在这里插入图片描述

e.操作节点

涉及新增/删除节点。新增节点需要先创建元素节点，然后把元素节点插入到DOM树中。

<body><div class = "container"></div><script>//1.创建新节点let newDiv = document.createElement('div');newDiv.id = 'newDiv';newDiv.className = 'one';newDiv.innerHTML = 'hello';console.log(newDiv);//2.使用appendChild把节点插入到某个节点的DOM子树上let container = document.querySelector('.container');container.appendChild(newDiv);</script>
</body>