前端语言串讲|青训营

0. 前端基础

   前端指的是网页开发，主要就是用户界面和交互效果的实现，主要设计三个方面的技术：

   • HTML
   • CSS
   • JavaScript

   除此之外，前端开发还会设计其他的技术和工具，如移动端适配，前端框架（Vue，React等），前端构建工具（Webpack，Gulp，Vite等）等等。这些工具可以帮助开发者更加高效的开发网页。

   1. 我理解的HTML

      定义了Web页面的结构、内容和样式，并为Web应用程序提供了丰富的用户界面和交互功能。HTML是一种标记语言，通过使用标签、属性和值来描述页面的各个部分，并将它们组合在一起形成完整的Web页面。总的来说，HTML是Web开发的基础和核心。

   2. 不一样的CSS

      CSS定义了网页中各种元素的外观、布局和动画效果等方面的样式。我的理解是，CSS 是一种描述网页样式的语言，它可以帮助开发者更好地控制网页的外观和交互效果，从而提高用户体验和开发效率。CSS 是 Web 开发中不可或缺的一部分，它可以让网页的外观更加美观、易于阅读和导航。

   3. 炫酷的JavaScript

      JavaScript 是用于实现网页的交互效果、动态更新网页内容、处理表单数据、创建 Web 应用程序等等。我的理解是，JavaScript 是一种具有强大功能和灵活性的编程语言，它可以用于 Web 开发中的各种场景，从简单的网页动画到复杂的 Web 应用程序。JavaScript 为 Web 开发者提供了丰富的工具和技术，使得他们可以更加轻松地实现各种功能和创造出更加丰富、交互性更高的 Web 应用程序

1. 实现一个表单验证的功能

   1. HTML

      <button id="myButton">点击我</button>
      

   2. CSS

      #myButton {
        background-color: red;
        color: white;
        font-size: 16px;
        padding: 10px 20px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      ​
      #myButton:hover {
        background-color: green;
        transform: scale(1.2);
      }
      

   3. JavaScript

      const button = document.getElementById('myButton');
      button.addEventListener('click', () => {
        alert('你点击了按钮！');
      });
      

      这段代码定义了一个按钮，并为其设置了样式和事件监听。当鼠标悬停在按钮上时，按钮的背景颜色和大小会发生变化，当点击按钮时会弹出一个提示框。

      你可以将以上代码复制到一个 HTML 文件中，然后在浏览器中打开该文件，就可以看到这个简单的动画效果。