青训营X豆包MarsCode 技术训练营第一课 ｜ 豆包MarsCode AI 刷题

王一安
92 阅读9分钟

第六届字节跳动青训营第一课 ｜ 豆包MarsCode AI 刷题

前端学习笔记：从零开始的前端之旅

一些唠叨

作为一名在校生，我有幸参加了字节跳动的MarsCode青训营，开启了我的前端学习之旅。大家都晓得，在学校的学习更加偏重的是原理基础，不能说没用，但是效果不显、速度拖沓，常常让我感到焦急而迷茫，像在雾气迷茫的山林里找寻出路

所以感谢字节举办的这个Marscode青训营，君子论迹不论心，让我能够有机会与一批优秀上进的同学一起学习计算机，给字节竖个大拇哥

在这里我记录下学习心得和体会，希望能够为同样站在起点的你提供一些帮助和启发。

什么是前端？

在正式进入技术细节之前，让我们先来搞清楚什么是前端。简单来说，前端是网站或应用程序的“门面”，即用户直接与之交互的部分。它包括了网页上的所有视觉元素和用户界面，以及这些界面背后的逻辑，使得用户能够与网站进行互动。

屏幕截图 2024-11-02 203846.png

这就是一个基本的网页布局

三件套：JavaScript、CSS、HTML之间的关系

我觉得与其马上埋头讨论技术细节，不如先从全局上了解一下“三件套”之间是如何作用、如何搭配的：

屏幕截图 2024-11-02 192814.png

三者的关系
  • HTML 提供了网页的骨架和内容。
  • CSS 为HTML元素添加样式，使其更加美观。
  • JavaScript 为网页添加动态功能，如响应用户输入、动态修改页面内容等。

示例：

假设我们有一个简单的网页，包含一个按钮，当点击这个按钮时，它会改变一个段落的文本。

html
代码解读
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交互示例</title>
    <style>
        /* 内联CSS */
        #myButton {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>

<h1 id="myHeader">欢迎来到我的网站</h1>
<button id="myButton">点击我</button>
<p id="demo">这是一个段落。</p>

<script>
// 内联JavaScript
document.getElementById('myButton').onclick = function() {
    document.getElementById('demo').innerHTML = '段落文本已改变！';
};
</script>

</body>
</html>

在这个例子中，

  • HTML定义了页面的结构，
  • CSS设置了按钮的样式，
  • JavaScript则添加了点击按钮时改变段落文本的功能。
HTML（超文本标记语言）

HTML是网页内容的结构基础，它定义了网页中的文本、链接、图片、视频等元素。HTML使用一系列的标签来告诉浏览器如何展示内容。

示例代码：

html
代码解读
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="示例图片">
</body>
</html>
CSS（层叠样式表）

CSS负责网页的视觉表现，包括布局、颜色、字体和动画等。通过CSS，我们可以控制HTML元素的外观和布局。

示例代码：

css
代码解读
复制代码
/* CSS样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
}

在HTML中引入CSS的方式有多种，这里我们使用<link>标签引入外部样式表：

html
代码解读
复制代码
<link rel="stylesheet" href="styles.css">
JavaScript

JavaScript负责网页的交互性，它是一种脚本语言，可以响应用户的操作，如点击、输入等，并且可以动态地修改HTML和CSS。

示例代码：

javascript
代码解读
复制代码
// JavaScript代码
window.onload = function() {
    document.getElementById('myHeader').classList.add('animated'); // 添加动画类
};

在HTML中引入JavaScript的方式也有多种，这里我们使用<script>标签引入外部JavaScript文件：

html
代码解读
复制代码
<script src="script.js"></script>

深入一步了解

HTML：构建网页的基石

1. HTML基础

HTML（HyperText Markup Language）是构建网页的基础。它是一种标记语言，通过一系列的标签来告诉浏览器如何展示内容。例如，<p>标签定义一个段落，<h1>到<h6>定义不同级别的标题。

学习笔记：

  • 学习HTML时，首先掌握基本的标签，如<html>、<head>、<body>等，它们构成了网页的基本结构。
  • 学习如何使用<a>标签创建链接，<img>标签插入图片，以及<ul>和<li>创建无序列表。
2. 语义化标签

随着HTML5的推出，引入了许多新的语义化标签，如<article>、<section>、<footer>等。这些标签不仅有助于搜索引擎优化（SEO），还能让代码更加易于理解和维护。

学习笔记：

  • 使用语义化标签的重要性，它让代码的结构更加清晰，也有助于屏幕阅读器更好地理解网页内容。

CSS：美化网页的艺术

1. CSS基础

CSS（Cascading Style Sheets）是用于描述HTML元素如何显示的样式表语言。通过CSS，我们可以控制字体、颜色、布局等视觉表现。

学习笔记：

  • 学习CSS的基本选择器，如.class、#id和标签选择器，以及如何应用它们来改变元素的样式。
  • 探索CSS的盒模型（Box Model），它包括了元素的content、padding、border和margin，这对于布局至关重要。
2. 布局技术

在前端开发中，布局是一个核心话题。我了解了几种流行的布局技术，包括Flexbox和Grid。

学习笔记：

  • Flexbox让我能够轻松地创建响应式布局，通过display: flex;以及相关的属性，可以控制元素的对齐和分布。
  • CSS Grid则是一个更强大的布局系统，允许创建复杂的网格布局，这对于设计复杂的页面布局非常有用。

JavaScript：前端的动态灵魂

1. JavaScript基础

JavaScript是前端开发中不可或缺的一部分，它为网页添加了动态性和交互性。通过JavaScript，我们可以响应用户的操作，如点击、滚动等。

学习笔记：

  • 首先学习了JavaScript的基本语法，包括变量声明、数据类型、条件语句和循环。
  • 还学习了如何使用函数和事件监听器来处理用户交互，这是创建动态网页的关键。
2. DOM操作

DOM（Document Object Model）是HTML文档的编程接口。通过JavaScript，我们可以操作DOM，改变网页的内容、结构和样式。

屏幕截图 2024-11-02 200250.png

学习笔记：

  • 学习如何使用document.getElementById、document.querySelector等方法选择DOM元素。
  • 如何修改元素的属性、样式和内容，以及如何监听和触发事件。

前端框架和工具

随着前端技术的发展，出现了许多优秀的框架和工具，如React、Vue和Angular，以及构建工具如Webpack和Babel。

学习笔记：

  • 初步了解了这些框架和工具的基本概念和优势，它们可以提高开发效率，解决跨浏览器兼容性问题，并提供更丰富的功能。
  • 计划在掌握基础知识后，深入学习这些框架和工具，以跟上前端技术的发展步伐。

讲点宏观的

前端开发作为互联网技术的一个重要分支，随着技术的发展和用户需求的增长，其行业现状也在不断演变。以下是一些当前前端开发行业的几个关键点：

1. 技术栈的多样化

随着前端框架和库的快速发展，前端开发者有了更多的选择。React、Vue、Angular等现代框架已经成为构建用户界面的主流选择。此外，还有许多其他库和框架，如Svelte、LitElement等，也在不断涌现。

2. 响应式和移动优先设计

随着移动设备的普及，前端开发越来越注重响应式设计和移动优先策略。开发者需要确保网站和应用在各种设备和屏幕尺寸上都能提供良好的用户体验。

3. 用户体验（UX）和用户界面（UI）的重要性

前端开发者不仅要关注技术实现，还要关注用户体验和界面设计。这要求前端开发者具备一定的设计思维，能够理解用户需求并将其转化为实际的界面设计。

4. 前端工程化和自动化

随着项目规模的扩大，前端工程化和自动化变得越来越重要。开发者需要掌握构建工具（如Webpack、Vite）、任务运行器（如Gulp、npm scripts）和版本控制（如Git）等工具，以提高开发效率和代码质量。

5. 性能优化

前端性能优化是提升用户体验的关键。开发者需要了解如何减少加载时间、优化资源加载、减少重绘和重排等，以确保应用的流畅运行。

6. 无服务器和云函数

随着云计算的发展，无服务器架构和云函数（如AWS Lambda、Google Cloud Functions）开始在前端项目中发挥作用。前端开发者需要了解如何与后端服务进行交互，以及如何利用云服务提供的功能。

7. Web Components和Web Components标准

Web Components是一个允许开发者创建可重用自定义元素的Web平台特性集。随着浏览器对Web Components标准的支持逐渐增强，它可能会成为未来构建大型应用的标准方式。

8. 跨平台开发

随着Flutter、React Native等技术的发展，前端开发者可以利用相同的代码库开发Web、移动和桌面应用。这为开发者提供了更多灵活性，并允许他们触及更广泛的用户群体。

9. 人工智能和机器学习

AI和ML技术也开始在前端领域得到应用，例如通过机器学习算法提供个性化内容、优化用户体验等。

10. 安全性

随着网络安全威胁的增加，前端开发者需要对Web安全有更深入的了解，包括跨站脚本（XSS）、跨站请求伪造（CSRF）等常见的安全问题，并采取措施保护用户数据。

结论

前端开发是一个不断进化的领域，技术更新迅速，对开发者的技能要求也在不断提高。为了保持竞争力，前端开发者需要持续学习新技术、新框架，并关注行业趋势。同时，随着用户对体验的要求越来越高，前端开发者的角色也在逐渐扩展，不再仅仅是实现设计，而是更多地参与到产品的整个生命周期中。

avatar
文章
阅读
粉丝