JavaWeb（苍穹外卖）--学习笔记04（前端：HTML，CSS，JavaScript）

前言

本片文章是学习B站黑马程序员苍穹外卖的学习笔记。因为最近期末周，一直在应付考试所以就学的很少，恰好视频中在讲Nginx反向代理和负载均衡（写着对前端的内容做一个复习）

概述：

1.web前端主要由三部分组成：

HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。

2.其中还有前端开发中的高级技术Vue、ElementPlus、Axios需要掌握。

如果感兴趣想更深入了解可以到官网：链接: 学习Web开发

一组成部分：

HTML:

HTML: HyperText Markup Language，超文本标记语言。

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签 "<标签名>" 构成的语言
- HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

总的来说：HTML 是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。

CSS:

是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。

使用方式：

具体有3种引入方式，如下：

1.行内样式：在标签内使用style属性，属性值是css键值对

例如：

2.内部样式：定义style标签，在标签中定义style样式

例如：

3.外部样式：定义link 标签，通过href属性，引入外部CSS文件

其中外部样式企业开发常用方式

定义在内部样式中的CSS选择器：

格式：

css 复制代码

选择器名   {
    css样式名：css样式值;
    css样式名：css样式值;
}

JS

JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新------交互式的地图、2D/3D 动画、滚动播放的视频等等------JavaScript 就在其中。

JS引入方式：

具体有两种引入方式：

第一种方式：

内部脚本，将JS代码定义在HTML页面中

示例代码如下：

javascript 复制代码

....
<body>
  
  <script>
    alert('Hello JS')
  </script>
</body>
</html>

第二种方式：

外部脚本，将JS代码定义在外部 JS文件中，然后引入到 HTML页面中

引入方式如下：

javascript 复制代码

<script src="js/demo.js"></script>

JS基础语法：

1.js输出语句：

window.alert(...) 警告框

document.write(...) 在HTML 输出内容

console.log(...) 写入浏览器控制台

3.函数

函数表达方式有两种：

第一种：

先看代码：

java 复制代码

<body>
  <script>
    function add(a, b){
    return a + b;
    }

    let result = add(10,20);
    alert(result);

  </script>
</body>

就好像我们平时学习的编程语言一样，用名称来声明一个函数，并调用

第二种：

那我们也可以不为函数指定名字，那这一类的函数，我们称之为匿名函数。

java 复制代码

  <script>
    // function add(a, b){
    // return a + b;
    // }

    // let result = add(10,20);
    // alert(result);
    
    var add = function (a,b){
    return a + b;
    }

    var add = (a,b) => {
    return a + b;
    }

    let result = add(10,20);
    alert(result);

  </script>

3.自定义对象

在学习这部分的时候，可以把它看作Java中的对象来学，先来看代码：

java 复制代码

<script>
    //自定义对象
    let user = {
        name: "Tom",
        age: 10,
        gender: "男",
        sing: function(){
             console.log("悠悠的唱着最炫的民族风~");
         }
    }

    console.log(user.name);
    user.eat();
<script>

4.DOM ：

DOM的核心思想：将网页的内容当做对象来处理，标签的所有属性在该对象上都可以找到，并且修改这个对象的属性，就会自动映射到标签身上。

DOM操作步骤:

获取DOM元素对象
操作DOM对象的属性或方法 (查阅文档)

常见操作：

javascript 复制代码

  <script>
    //1. 修改第一个h1标签中的文本内容
    //1.1 获取DOM对象
    let h1 = document.querySelector('#title1');
    let h1 = document.querySelector('h1'); // 获取第一个h1标签

    let hs = document.querySelectorAll('h1');

    //1.2 调用DOM对象中属性或方法
    hs[0].innerHTML = '修改后的文本内容';
  </script>

JS事件监听语法

形式：事件源.addEventListener('事件类型', 要执行的函数);

常见事件源：

javascript 复制代码

<body>
    <input type="button" id="btn1" value="点我一下试试1">
    <input type="button" id="btn2" value="点我一下试试2">
        
    <script>
        document.querySelector("#btn1").addEventListener('click', ()=>{
            alert("按钮1被点击了...");
        })
    </script>
</body>

二 Vue框架（入门）：

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建

管网地址：链接: Vue渐进式JavaScript

操作：先来看代码：

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-快速入门</title>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          message: 'Hello Vue'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

准备一个html文件，并在其中引入Vue模块（Vue框架利用要从网站引入）
准备元素（div），交给Vue控制，通过插值表达式 {{...}}渲染页面。
准备数据。在创建Vue应用实例的时候，传入了一个js对象，在这个js对象中，我们要定义一个data方法，这个data方法的返回值就是Vue中的数据。

JavaWeb（苍穹外卖）--学习笔记04（前端：HTML，CSS，JavaScript）

前言

概述：

一 组成部分：

HTML:

CSS:

JS

JS事件监听语法

二 Vue框架（入门）：

一组成部分：