前端(HTML&CSS&JS篇)

开发环境配置

1.0开发工具VSCode

下载地址：链接

推荐插架:

调试工具Chrome浏览器

下载地址：链接

1.1调试工具的基本使用：鼠标右键——>检查

VSCode的基本使用：

HTML（结构）

使用 HTML 构建 Web - 学习 Web 开发 | MDN构建网站时，你应该了解 HTML——用于定义网页结构的基本技术。HTML 用于指定你的网页内容应被识别为段落、列表、标题、链接、图像、多媒体播放器、表单或是其他可用元素之一，甚至是你定义的新元素。https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_contenthttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_contenthttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_contenthttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_contenthttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_contenthttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_contenthttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_contenthttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_content

1.0认识html结构

Web 页面主要由 3 个部分组成：

结构（摆放内容）：HTML
样式（美化内容）：CSS
行为（动作）：JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<!-- 写样式-->
<style>

</style>
<body>
   <!-- 写UI--> 
</body>
<script>
    //写逻辑代码
</script>
</html>

html：整个网页

head：网页头部，放给浏览器看的信息，例如：CSS

title：网页标题

body：网页主体，放给用户看的信息，例如：图片、文字等等

meta-viewport：网页视口，移动端网页适配，规定网页宽度等于当前手机分辨率宽度

meta-charset：网页字符编码，UTF8为国际编码

1.1文本标签

标题： h1-h6

段落：p

加粗：strong

示意图：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  </head>
  <!-- 写样式-->
  <style>
    div {
      width: 200px;
      height: 300px;
      background-color: pink;
    }
  </style>
  <body>
    <!-- 写UI-->
    <div>
      <h1>h1</h1>
      <h6>h6</h6>
      这是一个
      <p>p标签，表示换行</p>
      这是文本<strong>加粗</strong>
    </div>
  </body>
  <script>
    //写逻辑代码
  </script>
</html>

1.2常用容器标签

div：换行显示

span：一行显示

<div>div标签</div>
<div>div标签</div>
<span>span标签</span>
<span>span标签</span>

1.3超链接标签

设置跳转地址：href="跳转地址"
打电话：tel:电话号码

新窗口跳转：target="_blank"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  </head>
  <!-- 写样式-->
  <style>
  
  </style>
  <body>
    <!-- 写UI-->
   <a href="https://www.baidu.com/" target="_blank">前往百度</a>
    <a href="tel:184xxxxxx">打电话</a>
    <a href="./..xx" download>下载本地文件</a>
    </div>
  </body>
  <script>
    //写逻辑代码
  </script>
</html>

1.4图片标签

示意图：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  </head>
  <!-- 写样式-->
  <style>
  img{
    width: 200px;
    height: 200px;
  }
  </style>
  <body>
  <img src="https://img1.baidu.com/it/u=841683434,1092526252&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200" alt="我是一只猫">
  </body>
  <script>
    //写逻辑代码
  </script>
</html>

1.5表单标签

form:外层容器
input：输入元素
textarea：文本域
button：按钮
label：元素说明

1.5.1. form标签

【双标签】，用来包裹表单元素，设置提交地址等

常用属性	说明
action	提交地址

1.5.2 input标签

【单标签】，接收用户输入、通过 type 设置不同的功能

常用属性值	说明
type	常用取值 text 文本框 password 密码框 radio 单选框，结合 name 使用 checkbox 复选框，结合 name 使用
placeholder	占位提示
name	提交给服务器的 key
value	提交给服务器的 value，主要针对 radio 及 checkbox标签

1.5.3 textarea标签

【双标签】，用来输入多行文本

常用属性值	说明
placeholder	占位提示
name	提交给服务器的 key

1.5.4 label标签

【双标签】，填写说明内容，常配合表单元素一起使用

常用属性值	说明
for	和表单元素的 id 属性关联，实现点击联动

1.5.5 button标签

【双标签】，内容写在标签内部

常用属性值

说明

type

button 默认值，可以省略

submit 提交按钮，提交表单数据

reset 重置按钮

示意图：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  </head>
  <!-- 写样式-->
  <style>
  
  </style>
  <body>
    <form action="#">
        <div>
          <label for="name">姓名: </label>
          <input id="name" type="text" placeholder="请输入姓名">
        </div>
        <div>
          <label for="password">密码: </label>
          <input id="password" type="password" placeholder="请输入密码">
        </div>
        <div>
          <label>性别: </label>
          <input type="radio" name="gender" value="男">男
          <input type="radio" name="gender" value="女">女
        </div>
        <div>
          <label>爱好: </label>
          <input type="checkbox" name="hobby" value="足球">足球
          <input type="checkbox" name="hobby" value="篮球">篮球
          <input type="checkbox" name="hobby" value="羽毛球">羽毛球
        </div>
        <br>
          <label for="intro">自我介绍: </label><br></br>
          <textarea name="intro" id="intro" cols="20" rows="10"></textarea>
        </div>
        <div>
          <input type="submit" value="登录">
          <input type="reset" value="重置">
        </div>
    </form>
  </body>
  <script>
    //写逻辑代码
  </script>
</html>

CSS（样式）

CSS 构建 - 学习 Web 开发 | MDN这个模块承接学习 CSS 第一步——即你对 (CSS) 语言和其语法已经足够熟悉、并且有了一些基本的使用经验，该是稍微深入点学习的时候了。这个模块着眼于级联和继承，所有可供使用的选择器类型，单位，尺寸，背景、边框样式，调试，等等等等。https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basicshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basicshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basicshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basicshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basicshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basicshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basicshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics

CSS的三种引入方式：

行内样式表: 写在标签内，学习测试时使用
内部样式表：书写【少量】 css，学习测试时使用
外部样式表：书写【大量】 CSS代码，实际开发时使用

2.0行内样式表

css写法：style="属性名1:属性值; 属性名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>
  <!-- 写样式-->
  <style>
  
  </style>
  <body>
    <div style="width: 100px; height: 100px; background-color: aquamarine;">行内样式</div>
  </body>
  <script>
    //写逻辑代码
  </script>
</html>

2.0.1内部样式表

书写位置：title 标签下方添加 style (双标签)，style标签里面写CSS代码

CSS写法：选择器 { 属性名：属性值;}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  </head>
  <!-- 写样式-->
  <style>
  div{
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
  </style>
  <body>
    <div>内部样式</div>
  </body>
  <script>
    //写逻辑代码
  </script>
</html>

2.0.2外部样式表

分两步：1.新建CSS文件(后缀.css) 书写CSS代码

div{
    width: 100px;
    height: 100px;
    background-color: pink;
}

2.HTML使用link 标签引入CSS文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
    <link rel="stylesheet" href="./css/test.css">
  </head>
  <!-- 写样式-->
  <style>
    
  </style>
  <body>
    <div>外部样式</div>
  </body>
  <script>
    //写逻辑代码
    
  </script>
</html>

2.1文本属性

属性名	描述	属性值
font-size	字体大小	单位px或vw
color	文字颜色	颜色
line-height	行高	单位px或vw
font-style	是否倾斜	none：不倾斜，Italic：倾斜
text-indent	文本缩进	em（当前字号大小）
text-decoration	文本修饰线	none：无 underline：下划线 line-through：删除线
font-weight	是否加粗	100-900或

示意图：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  
  </head>
  <!-- 写样式-->
  <style>
    p{
      font-size: medium; 
      color: red;
      line-height:20px;
      font-style: italic;
      text-indent: em;
      text-decoration: underline;
      font-weight: 400;
    }
  </style>
  <body>
    <p>文本标签P</p>
    <a href="#">超链接</a>
    <strong>文本加粗</strong>
  <script>
    //写逻辑代码
    
  </script>
</html>

2.2选择器

CSS 选择器 - 学习 Web 开发 | MDNCSS中，选择器用来指定网页上我们想要样式化的HTML元素。有 CSS 选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。本文和本文的子篇中，我们将会详细地讲授选择器的不同使用方式，并了解它们的工作原理。https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectorshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectorshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectorshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectorshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectorshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectorshttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors作用：选择器的作用是[找到元素]

2.2.1标签选择器

标签名{
 
}

2.2.2类选择器

作用：选中一个或多个目标标签设置样式

特点：差异化设置标签样式

使用步骤：

1.定义类选择器 .类名 {}

2.使用类选择器 class = "类名"

示意图：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  
  </head>
  <!-- 写样式-->
  <style>
   .box1{
    width: 100px;
    height: 100px;
    background-color: pink;
   }
   .box2{
    height: 100px;
    width: 100px;
    background-color: skyblue;
   }
  </style>
  <body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box1">盒子3</div>
  <script>
    //写逻辑代码
    
  </script>
</html>

2.2.3后代选择器

作用：选中某个元素的后代元素

写法：父选择器子选择器 {CSS属性}, 父子选择器之间用空格隔开

示意图：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  
  </head>
  <!-- 写样式-->
  <style>
  div span{
    width: 100px;
    height: 100px;
    background-color: pink;
  }
  .box1 .p1{
   color:red;
  }
  </style>
  <body>
    <div>
      <span>span 标签是div的儿子</span>
    </div>
    <div class="box1">
      <p class="p1">我是后代</p>
    </div>
  </body>
  <script>
    //写逻辑代码
    
  </script>
</html>

2.3布局相关属性

2.3.1尺寸&背景色

属性	描述	值
width	宽度	单位：px/vw/百分比
height	高度	单位：px/vw/百分比
background-color	背景色	背景颜色

2.3.2背景图

属性	描述	值
background-image	背景图	url(图片路径)
background-repeat	背景图平铺方式	默认平铺、不平铺：no-repeat
background-size	背景图缩放	px/vw/百分比/关键词（cover、contain）
background-position	背景图位置	px/vw/百分比/方向英文单词/（left、top、right、bottom、center）一个值的语法：设置 x/y、 2 个值的语法：分别设置 x、y

示意图：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  
  </head>
  <!-- 写样式-->
  <style>
  div{
    width: 300px;
      height: 50vw;
      background-color: pink;
      background-image: url(https://img1.baidu.com/it/u=99554975,2483307893&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737738000&t=7a52a755d70c202f20f13f9d5b9a18ec);
      /* 背景图平铺方式-不平铺 */
      background-repeat: no-repeat;
      /* 背景图缩放 - 可数值*/
      /* background-size: 20%;  */

      /* cover 完全覆盖
        优势：会保持图片宽高比
        弊端：图片可能显示不全
      */
      /* background-size: cover; */

      /* contain 
        优势：保持图片宽高比例，可以完整显示图片
        弊端：可能会留白
      */
      background-size: contain;
      /* 背景图位置 */
      /* background-position: 20vw center; */
  }
  </style>
  <body>
    <div>背景图</div>
  </body>
  <script>
    //写逻辑代码
    
  </script>
</html>

2.3.2内外边距

内边距： padding

单值：四个方向相同

多值：从上开始顺时针赋值，无值的一侧与对面取值相同

单方向：padding-方向英文单词(left、top、right、bottom)

注意：默认撑大盒子尺寸，需要配合 box-szing:border-box;进行内减

外边距：margin

padding设置方式相同 (不需要内减)

示意图

 *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 200px;
      height: 100px;
      background-color: pink;
      /* 
      content-box = width + 边框 + 内边距
      border-box = 自身width - 边框 - 内边距
      */
      /* box-sizing: content-box; */
      box-sizing: border-box;
    }

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  
  </head>
  <!-- 写样式-->
  <style>
  .box1{
    width: 200px;
    height: 50px;
    padding-left: 100px;
    padding-top: 20px;
    color:skyblue;
    background-color: pink;

    box-sizing: content-box;
  }
  .box2{
    width: 200px;
    height: 300px;
    background-color: pink;
    margin-top: 50px;
  }
  </style>
  <body>
    <div class="box1">我是内边距</div>
    <div class="box2">
       我是外边距
    </div>
  </body>
  <script>
    //写逻辑代码
    
  </script>
</html>

2.3.3边框线

四个方向相同的边框： border: 尺寸线条样式线条颜色;

某个方向边框： border-方向英文单词：尺寸线条样式线条颜色;

示意图：

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  
  </head>
  <!-- 写样式-->
  <style>
  .box1{
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 
    solid    直线
    dashed   虚线
    dotted   虚线
    */
    border: 1px dashed   red;
  }
  .box2{
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 
    solid    直线
    dashed   虚线
    dotted   虚线
    */
    border-left: 1px dashed   red;
    border-top: 1px solid   skyblue;
    margin-top: 20px;
  }
  </style>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
  <script>
    //写逻辑代码
    
  </script>
</html>

2.3.4圆角

属性:border-radius

取值：

单值：四个圆角效果相同

多值：从上角开始顺时针赋值，无值的一角与对角取值相同

正圆：50%(正方向)

胶囊：短边尺寸的一半(长方形)

示意图：

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标题</title>
  
  </head>
  <!-- 写样式-->
  <style>
  .box1{
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 50%;
  }
  .box2{
    width: 200px;
    height: 100px;
    background-color: pink;
   border-radius: 50px;
  }
  </style>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
  <script>
    //写逻辑代码
    
  </script>
</html>

2.3.5弹性布局

Flex 布局：浏览器推荐的布局方式，适合结构化布局，提供强大的空间分布和对齐能力。

多元素换行

属性	描述
display: flex;	设置Flex布局（父元素）
justify-content	主轴对齐方式
align-items	交叉轴对齐方式
align-self	单个子元素交叉轴对齐方式
flex	伸缩比
flex-wrap	换行

示意图：

示例代码：

<!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>
      .father {
        width: 100%;
        height: 60vw;
        background-color: azure;
        /* 开启弹性布局 */
        display: flex;
        /* 主轴子元素排列方向 */
        justify-content: space-evenly;
        /* 交叉轴 */
        align-items: center;
      }
      .one {
        align-self: flex-start;
      }
      .two {
        /* 将剩余尺寸分为1份 */
        flex: 1;
      }
      .three {
        align-self: flex-end;
      }
      .father div {
        width: 20vw;
        height: 20vw;
        background-color: aquamarine;
        border: 1px black;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

2.3.6定位

作用：实现元素层叠显示效果。
步骤：

设置定位模式

设置边偏移

属性及值	描述	特点
position: relative;	相对定位	占位；相对自身原有位置偏移
position: absolute;	绝对定位	不占位；相对已经定位的父元素偏移；没有定位的父元素则相对浏览器可视区进行偏移
z-index：数字	显示层级	取值为整数数字，取值越大显示层级越高
left	设置偏移	px/vw/百分比
right	设置偏移	px/vw/百分比
top	设置偏移	px/vw/百分比
bottom	设置偏移	px/vw/百分比

示意图：

代码示例：

<!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>
        /* 子绝父相 */
        .father{
            width: 600px;
            height: 500px;
            border: 1px solid black;
            /* 添加了 position：relative;之后 子元素就作为参考的依据 */
            position: relative;
        }
        .one{
            width: 20px;
            height: 30px;
            background-color: aquamarine;
            /* 开启定位之后，元素不占位，后面的内容 上去了
            position :absolute 开启之后 默认会以页面会参考的标准
            如果希望是父元素作为 参考依据 */
            position: absolute;
            right: 10px;
            /* 显示层级 */
            z-index: 1;
        }
        .two{
            width: 20px;
            height: 20px;
            background-color:red;
            position: absolute;
            right: 20px;
            /* 显示层级 */
            z-index: 2;
        }
    </Style>
</head>
<body>
    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>
</html>

JavaScript (逻辑)

创建 JavaScript 代码块 - 学习 Web 开发 | MDN在这个模块中，我们将继续介绍 JavaScript 的关键基本特性，在这一章中我们将关注条件控制语句、循环语句、函数模块、事件等通用代码块。你可能在之前的课程中见过这些模块，但仅仅是见过—在这篇模块中我们将明确讨论这些模块。https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scriptinghttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scriptinghttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scriptinghttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scriptinghttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scriptinghttps://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting

认识JS

JS 是 JavaScript 的缩写，它是一种高级的、解释性的编程语言，主要用于网页开发，也广泛应用于服务器端编程、移动应用开发等其他领域。

作用：让网页动起来，网页中的动态效果【大部分】都是通过 JavaScript（JS）实现的

JS的三种引入方式

内部（学习）：body标签【最后】添加 script 标签书写 JavaScript 代码
外部（项目）：body标签最后添加 script 标签，配合 src 属性引入 .js 文件
行内（Vue）

<!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>
  
  <!-- 行内js：必须是事件格式 -->
  <button onclick="console.log('点击后执行')">按钮</button>

  <script>
    console.log('内部js')
  </script>

  <!-- 引入外部js -->
  <script src="./my.js"></script>
</body>
</html>

3.0 JS基础

第一步：创建后缀(.js)的文件

第二步：引入

JS代码示例：

alert('我是弹框！')

HTML页面中引入：

<!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>
    <button onclick="console.log('被你发现了')">点我试试看</button>
</body>
<!-- 适合 页面中的逻辑，或者简短的逻辑-->
 <script>
    console.log('么么哒')
 </script>
 <!-- 引入-->
  <script src="./01.js的引入.js"></script>
</html>

3.1存储数据

3.1.1数据类型

和 ArkTS 的不同点

不需要声明类型，所有类型都【不需要】
复杂类型可以直接通过 console.log()打印

3.1.2变量

声明： let 变量名 = 值

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

  <script>
    let name = '小明'
    let age = 18

    // + 拼接
    console.log(name + age + '岁了')

    // 模板字符串
    console.log(`我是${name}，今年${age}岁了`)
  </script>
</body>
</html>

3.1.3常量

声明： const 常量名 = 值

const PI = 3.14
console.log('圆周率是' + PI)

3.2运算符

表达式和运算符 - JavaScript | MDN该章节说明了 JavaScript 语言所有的运算符、表达式和关键字。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operatorshttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operatorshttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operatorshttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operatorshttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operatorshttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators

结论：和 ArkTS 中【一模一样】

3.2.1算数运算符

运算符	描述
+	加，求和
-	减，求差
*	乘，求积
/	除，求商
%	取余（是否被整除）

3.2.2 赋值运算符

运算符	描述
+=	加法赋值
-=	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

3.2.3 一元运算符

常见一元运算符：++和--

后置写法：先赋值再自增/自减
前置写法：先自增/自减再赋值

比较运算符

运算符	描述
>	判断大于
>=	判断大于等于
<	判断小于
<=	判断小于等于
==	判断相等
!=	判断不相等

3.2.4逻辑运算符

运算符	描述
&&	与，都真才真
\|\|	或，一真则真
!	非，取反

3.2.5逻辑中断

&&：都真才真

- 从左向右计算结果，第一个操作数结果为假，则终止进一步计算，直接返回假（false）
- 从左向右计算结果，所有操作数结果均为真，则返回最后一个操作数的值

||：一真则真

- 从左向右计算结果，第一个操作数结果为真，则终止进一步计算，直接返回真（true）
- 从左向右计算结果，所有操作数结果均为假，则返回最后一个操作数的值

3.3语句

3.3.1 if 分支

if...else - JavaScript | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/if...elsehttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/if...elsehttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/if...elsehttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else

单分支（if）、双分支if ... else、多分支 if..else if ... else

let score = 750

  // 1. 单分支
  // if (score > 700) {
  //   console.log('恭喜')
  // }

  // 2. 双分支
  // if (score > 700) {
  //   console.log('恭喜')
  // } else {
  //   console.log('别气馁，再接再厉！')
  // }

  // 3. 多分支
  if (score > 700) {
    console.log('非常优秀')
  } else if (score > 500) {
    console.log('优秀')
  } else {
    console.log('继续加油')
  }

3.3.2 switch分支

switch - JavaScript | MDNswitch 语句会对表达式进行求值，并将表达式的值与一系列 case 子句进行匹配，一旦遇到与表达式值相匹配的第一个 case 子句后，将执行该子句后面的语句，直到遇到 break 语句为止。若没有 case 子句与表达式的值匹配，则会跳转至 switch 语句的 default 子句执行。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switchhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switchhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switchhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switchhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switchhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switch

switch (表达式) {
  case 值1:
    与值1匹配执行的语句
    break
  case 值2:
    与值2匹配执行的语句
    break
  default:
    以上都未成功匹配执行的代码
}

如果没有break语句，则执行switch中的下一个label对应的代码块

let fruit = '橘子'

switch (fruit) {
  case '苹果':
    console.log('苹果5元/斤')
    break
  case '橘子':
    console.log('橘子3元/斤')
    break
  default:
    console.log('不好意思，您查询的水果已售罄')
}

3.3.3 三元运算符

条件（三元）运算符 - JavaScript | MDN条件（三元）运算符是 JavaScript 唯一使用三个操作数的运算符：一个条件后跟一个问号（?），如果条件为真值，则执行冒号（:）前的表达式；若条件为假值，则执行最后的表达式。该运算符经常当作 if...else 语句的简捷形式来使用。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_operatorhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_operatorhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_operatorhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_operatorhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_operatorhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_operator

语法：条件 ? 条件成立执行的表达式 : 条件不成立执行的表达式

let num1 = 10
let num2 = 20

let res = num1 > num2 ? num1 : num2

console.log(res)

3.4循环

3.4.1 while 循环

while - JavaScript | MDNwhile 语句创建一个循环，只要测试条件求值为真，则循环执行指定语句。在执行语句前会先对条件进行求值。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/whilehttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/while循环三要素：初始值; 条件、变化量

let i = 1
while (i < 5) {
  console.log(i)
  i++
}

3.4.2 for 循环

for - JavaScript | MDNfor 语句用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句（通常是一个块语句）。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/forhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for

for (let i = 0; i < 5; i++) {
  console.log(i)
}

3.4.3遍历对象和数组

// 1. 数组
let names = ['小红', '小明', '小强']

for (let i = 0; i < names.length; i++) {
  console.log(names[i])
}

// 2. 对象
let person1 = {name: '小红', age: 18, gender: 'woman'}

for (let key in person1) {
  // key 为属性值
  // console.log(key)
  console.log(person1[key])
}

// 3. 对象数组
let students = [
  {name: '小红', age: 18, gender: 'woman'},
  {name: '小明', age: 19, gender: 'man'},
  {name: '小强', age: 18, gender: 'woman'}
]

for (let i = 0; i < students.length; i++) {
  console.log(students[i].name)
}

3.5函数

3.5.1具名函数

function fn1 () {
  console.log('具名函数')
}

fn1()

3.5.2匿名函数

let fn2 =  function  () {
  console.log('匿名函数')
}

fn2()

3.5.3箭头函数

let fn3 = () => {
  console.log('箭头函数')
}

fn3()

3.5.4 参数

注意事项：

形参与实参个数可以不统一，未接收到数据的形参值为undefined
顺序：指定参数、默认参数、剩余参数(...)

function printInfo (name, gender='man', ...args) {
  console.log(name)
  console.log(gender)
  console.log(args)
}

printInfo('小红', 'woman', 1, 2, 3)  // 小红 woman [1, 2, 3]
printInfo('小红', 1, 2, 3)  // 小红 1 [2, 3]

3.6 this

this - JavaScript | MDN与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/thishttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

JS 中的 this：
1谁调用函数（方法）内部的 this 就是谁
2没有【显示调用】那么 this 就是全局对象 window（浏览器端）
3箭头函数会绑定【当前作用域中】的 this
4JS 中函数可以创建【作用域】

<!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>
    <script>
     // this 是谁：谁调用就是谁， xxx.func()
     // 看不出来谁调用，一般是window


     //全局的变量都相当于是添加给了 window对象
     // 鸿蒙中没有这个对象
     function sayHi(){
        console.log('sayHi',this)
     }
    // sayHi()

     //能够看出来谁调用
     const person ={
        name:'小猿',
        film:['jump together'],
        skill:'不抗冻',
        //给对象设置一个方法
        sayHi(){
            console.log('sayHi',this)
        },
        sayHello:()=>{
            console.log('sayHello',this)
        },
     }
     // person点的，sayHi 中目前是 person
     person.sayHi()

     // sayHello  绑定的是 箭头函数
     //箭头函数：创建时会绑定当前作用域中的 this，如果有的话
     // 当前作用域没有this，向上一级去找，找到全局为止，还找不到。 window
     person.sayHello()

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

3.7. DOM

文档对象模型（DOM） - Web API | MDN文档对象模型（DOM）通过将文档的结构（例如表示网页的 HTML）以对象的形式存储在内存中，将网页与脚本或编程语言连接起来。尽管将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 核心语言的一部分，但它通常与 JavaScript 相关。https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

DOM：文档对象模型（Document Object Model），提供了通过JavaScript操作页面文档的应用程序接口(API)，用来开发网页特效和实现用户交互。

在DOM中，提供一个document对象，是DOM顶级对象，document对象提供了大量的属性和方法用来访问和操作网页内容。

应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。

3.8. 查找元素

单个元素：document.querySelector(选择器)，返回节点对象

多个元素：document.querySelectorAll(选择器)，返回伪数组

<a href="http://www.baidu.com">跳转到百度</a>

<div>div1</div>
<div>div2</div>
<div>div3</div>

<script>
  // 查找单个元素
  const link = document.querySelector('a')
  console.log(link)

  // 查找多个元素
  const divs = document.querySelectorAll('div')
  console.log(divs)
  console.log(divs[0])
</script>

3.9. 事件

常见	描述
click	点击
mouseenter & mouseleave	鼠标移入 & 鼠标离开
focus & blur	获得焦点 & 失去焦点
keydown & keyup	键盘按下 & 键盘抬起
input	表单value值变化触发

<div>div 标签</div>
<input type="text">

<script>
  const div = document.querySelector('div')

  // 1. 点击事件
  // div.addEventListener('click', function () {
  //   console.log('点击事件被触发了')
  //   // 箭头函数this指向外层作用域，不是当前点击对象
  //   this.style.backgroundColor = 'green'
  // })

  // 2. 鼠标移入和离开
  div.addEventListener('mouseenter', function () {
    this.style.backgroundColor = 'green'
  })
  div.addEventListener('mouseleave', function () {
    this.style.backgroundColor = 'pink'
  })


  const text = document.querySelector('input')
  // 3. 键盘按下和弹起
  // text.addEventListener('keydown', function(e) {
  //   console.log(e.key)
  // })

  // 4. input监听value值改变
  text.addEventListener('input', function () {
    console.log(this.value)
  })
</script>

4.0. 属性操纵

获取到 dom 元素之后，就可以通过 js 操纵他的属性，比如：

样式：dom 元素.style.xxx
属性：value值：表单元素.value

还有很多其他的属性可以操纵，目前了解这两个即可，重点是体会【属性可以操纵】

4.1. 节点操作

节点是DOM树中的单个点，包括文档本身、元素、文本、属性以及注释。

属性或方法	描述
parentNode	查找父节点
children	查找子节点（返回伪数组）
previousElementSibling	查找前一个兄弟节点
nextElementSibling	查找后一个兄弟节点
createElement()	创建空节点
append()	结尾添加节点
prepend()	开头添加节点
remove()	删除节点

<!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>
    <div>
        <span>span</span>
        <span>span</span>
        <span>span</span>
      </div>
      
      <button class="add">添加节点</button>
      <button class="del">删除节点</button>
      
      <script>
        const div = document.querySelector('div')
      
        // 父节点
        // console.log(div.parentNode)
      
        // 子节点
        // console.log(div.children)
      
        const add = document.querySelector('.add')
        const del = document.querySelector('.del')
      
        let pBox = document.createElement('p')
      
        pBox.innerHTML = '新节点'
      
        add.addEventListener('click', function () {
          // 结尾添加节点
          // div.append(pBox)
          div.prepend(pBox)
        })
      
        del.addEventListener('click', function () {
          // 删除节点
          div.remove()
        })
      
      </script>
</body>
</html>

4.2 模块化方案-ES Module

历史长河中的模块化方案：CMD，AMD

模块化方案 ES Module和鸿蒙中的一样

ES Module模块采用export和import关键字来实现模块化：

export负责将模块内的内容导出
import负责从其他模块导入内容

JS语法导出：

//导出
// 默认导出
const info='感觉自己萌萌哒'
export default info


//按需导出

export const food='🥦'
export const cat ='猫'
export const chicken ='🍗'

export function sayHi(){
    console.log('你吃了吗~~')
}

HTML导入：

<!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>
    <!-- <script src="./02.myjs.js" type="module"></script> -->
     <script type="module">
        import info from './js/02.myjs.js'
        console.log('info:',info)

        // 导入 按需导入
        import{ food,cat,chicken as kunLeg, sayHi}from './js/02.myjs.js'
        
        console.log("food:",food)
        console.log("cat:",cat)
        console.log("kunLeg:",kunLeg)
        console.log("sayHi:",sayHi)
     </script>
</body>
</html>

前端(HTML&CSS&JS篇)

开发环境配置

1.0开发工具VSCode

调试工具Chrome浏览器

1.1调试工具的基本使用：鼠标右键——>检查

VSCode的基本使用：

HTML（结构）

1.0认识html结构

1.1文本标签

1.2常用容器标签

1.3超链接标签

1.4图片标签

1.5表单标签

CSS（样式）

CSS的三种引入方式：

2.1文本属性

2.2选择器

2.3布局相关属性

JavaScript (逻辑)

认识JS

JS的三种引入方式

3.0 JS基础

3.1存储数据

3.2运算符

3.3语句

3.4循环

3.4.1 while 循环

3.4.2 for 循环

3.4.3遍历对象和数组

3.5函数

3.5.1具名函数

3.5.2匿名函数

3.5.3箭头函数

3.5.4 参数

3.6 this​​​​​​​​​​​​​​

3.7. DOM

3.8. 查找元素

3.9. 事件

4.0. 属性操纵

4.1. 节点操作

4.2 模块化方案-ES Module

3.6 this