今日前端学习总结

今天主要学习了 HTML 结合 JavaScript 的基础内容，包括输入输出语法、用户输入案例以及变量的使用，以下是详细总结。

1. HTML 中的 JavaScript 输入输出语法

在 HTML 文件里嵌入 JavaScript 代码，可以实现不同形式的输入输出操作。示例代码如下：

xml 复制代码

<!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>
  <!-- js输入输出语法 -->
  <script>
    //1.文本输出内容
    document.write('你好')
    document.write('<h1>我是标题</h1>')
    //2.控制台打印输出给程序员
    console.log('看看对不对')
    console.log('日志')
    //3.输入语句
    prompt('请输入你的姓名：')
  </script>

</body>

</html>

文本输出 ：使用 document.write() 方法可将内容直接输出到 HTML 页面上，还能输出 HTML 标签。
控制台输出 ：借助 console.log() 方法，能将信息打印到浏览器的开发者工具控制台，方便程序员调试代码。
输入语句 ：prompt() 方法会弹出一个输入框，让用户输入信息。

2. 用户输入案例

下面是一个简单的获取用户输入姓名并输出的案例：

xml 复制代码

<!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>
    //1.用户输入
    //2.内部处理保存数据
    let name = prompt('请输入姓名')
    //3.打印输出
    document.write(name)
  </script>
</body>

</html>

该案例先通过 prompt() 方法获取用户输入的姓名，然后将其存储在变量 name 中，最后使用 document.write() 方法把姓名输出到页面上。

3. 变量的使用

在 JavaScript 中，变量用于存储数据，示例如下：

xml 复制代码

<!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>
    //1.声明一个年龄变量
    let age1
    //2.赋值(空格 = 空格)
    age1 = 18
    console.log(age1)
    //3.声明的同时直接赋值 变量的初始化
    let age2 = 18
    console.log(age2)

    //不建议一次声明多个变量，建议分开写
    let age3 = 18, uname = 'pink'
    console.log(age3, uname)
  </script>
</body>

</html>

变量声明 ：使用 let 关键字声明变量，如 let age1。
变量赋值 ：可以先声明变量，之后再赋值，如 age1 = 18；也可以在声明变量时直接赋值，即变量的初始化，如 let age2 = 18。
一次声明多个变量 ：虽然可以一次声明多个变量，如 let age3 = 18, uname = 'pink'，但不建议这样做，最好分开声明变量。

通过今天的学习，我对 HTML 中 JavaScript 的输入输出、用户输入处理以及变量的使用有了初步的了解，后续会进一步深入学习前端开发知识。