前端开发：入门（一）

最新推荐文章于 2024-06-13 10:04:17 发布

星光闪闪k

最新推荐文章于 2024-06-13 10:04:17 发布

阅读量1k

点赞数 30

分类专栏：前端 Java 文章标签：后端架构前端 html css js vue

本文链接：https://blog.csdn.net/qq_35763697/article/details/136049336

版权

Java 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

本文介绍了前端开发的核心技术，包括HTML的结构与常用标签，CSS的基础概念、选择器、布局技术，JavaScript的语法、流程控制和DOM操作，以及React、Vue和Angular框架的概述。同时，也提到了版本控制（Git）和包管理工具（npm和Yarn）的重要性。

摘要由CSDN通过智能技术生成

当我们开始学习前端开发时，首先接触到的是HTML（超文本标记语言）。HTML是构建网页结构的基础。

1. HTML（超文本标记语言）

介绍和基础语法

HTML，即超文本标记语言，是一种用于创建网页结构的标记语言。它定义了网页的基本结构和内容，并通过一系列的标签来实现。让我们看一个简单的HTML文档的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a simple webpage.</p>
</body>
</html>

在这个例子中，<!DOCTYPE html> 声明文档类型，<html> 元素包含整个HTML文档，<head> 包含元数据，而 <body> 包含实际的页面内容。

常用标签

HTML中有许多常用的标签，每个标签都有特定的作用。例如，<div> 用于定义文档中的区块，<span> 用于定义内联元素，<p> 表示段落。下面是一个简单的例子：

<div>
    <p>This is a <span>sample</span> paragraph.</p>
</div>

在这个例子中，<div> 包裹了一个段落，而 <span> 用于包裹内联的文本。

表单和表格

HTML的表单和表格是与用户交互和展示数据的重要工具。

表单示例：

<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <input type="submit" value="Submit">
</form>

在这个例子中，我们创建了一个简单的表单，包含一个文本输入框和一个提交按钮。

表格示例：

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

这个例子展示了一个简单的表格，包含表头和一个数据行。

这是HTML的基础部分，为构建网页提供了必要的结构和元素。

2. CSS（层叠样式表）

基本概念

选择器

选择器是用于选择要样式化的HTML元素的模式。有许多类型的选择器，其中最简单的是元素选择器，例如 h1 或 div。还有类选择器（.class）、ID选择器（#id）和其他复杂的选择器，使得能够更准确地选择页面上的元素。

/* 元素选择器 */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
}

/* 类选择器 */
.container {
    width: 80%;
    margin: 0 auto;
}

属性和值

CSS规则由属性和值组成。属性是要设置的样式特性，而值是该样式特性的设置值。下面是一些基本的属性和值示例：

/* 文字颜色 */
h1 {
    color: #333;
}

/* 盒子模型属性 */
div {
    width: 200px;
    padding: 20px;
    margin: 10px;
    border: 1px solid #ccc;
}

盒模型

盒模型定义了一个HTML元素在页面上所占的空间，由内容区域、内边距、边框和外边距组成。

div {
    width: 200px;      /* 内容区域宽度 */
    padding: 20px;     /* 内边距 */
    margin: 10px;      /* 外边距 */
    border: 1px solid #ccc; /* 边框 */
}

这个例子中的 div 元素的总宽度是 (200 + 2*20 + 2*1 + 2*10)px。

布局技术

Flexbox

Flexbox是一种弹性盒模型，使得在一个容器内的子元素能够更灵活地布局。

.container {
    display: flex;            /* 使用Flexbox布局 */
    justify-content: space-between; /* 在子元素之间创建空间 */
}

.item {
    flex: 1;   /* 使每个子元素均匀占据可用空间 */
}

在这个例子中，.container 类是一个使用Flexbox布局的容器，justify-content 属性用于设置子元素之间的空间，而 .item 类表示Flexbox容器中的每个项目。

Grid

Grid是一种二维网格布局，适用于更复杂的布局需求。

.container {
    display: grid;                        /* 使用Grid布局 */
    grid-template-columns: repeat(3, 1fr); /* 定义三列，每列平均占据可用空间 */
    gap: 10px;                            /* 设置网格项之间的间隙 */
}

这个例子中的 .container 类使用Grid布局，通过 grid-template-columns 属性定义了三列，并通过 gap 属性设置了元素之间的间隙。

响应式设计

响应式设计确保网页在不同设备和屏幕尺寸上呈现出良好的效果。媒体查询是一种基本的响应式设计技术。

@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

在这个例子中，当屏幕宽度小于等于600像素时，文字大小将调整为14像素。

这就是CSS的一些基本概念和更详细的示例。深入理解这些概念将为你提供更大的灵活性和精确性，使你能够更好地掌握前端开发中的样式和布局。

3. JavaScript

基本语法

JavaScript是一种解释型的脚本语言，用于为网页添加交互性。让我们首先了解一些基本的语法。

// 声明变量
let x = 5;
let y = 10;

// 进行运算
let sum = x + y;

// 输出结果
console.log(sum);

在这个例子中，我们声明了两个变量 x 和 y，然后进行了加法运算，并通过 console.log() 输出了结果。

流程控制

流程控制结构使得我们能够根据条件执行不同的代码块，或者重复执行一段代码。

条件语句

let age = 25;

if (age < 18) {
    console.log("You are a minor.");
} else {
    console.log("You are an adult.");
}

在这个例子中，根据年龄的不同，输出不同的消息。

循环结构

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

这个例子中的 for 循环会输出 0 到 4 的数字。

函数和作用域

函数是一段可重复使用的代码块，有助于模块化和组织代码。

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("John"));

在这个例子中，greet 函数接受一个参数 name，并返回一个包含问候语的字符串。

DOM操作

JavaScript通过DOM（文档对象模型）来与HTML文档交互，实现动态效果。

<button id="myButton">Click me</button>

<script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("Button clicked!");
    });
</script>

在这个例子中，当按钮被点击时，弹出一个对话框。

事件处理

事件处理允许我们响应用户的交互行为，如点击、悬停等。

<button id="myButton">Click me</button>

<script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("Button clicked!");
    });
</script>

这个例子中，当按钮被点击时，通过事件处理函数弹出一个提示框。

JavaScript的基本语法和流程控制是构建更复杂前端逻辑的基石。在进一步学习前端框架之前，确保对这些基本概念有清晰的理解。
接下来，我们将深入研究前端框架，这些框架提供了一种组织和管理前端代码的结构，并引入了许多便利的开发概念。

4. 前端框架

React

React是由Facebook开发的一款JavaScript库，用于构建用户界面。它引入了组件化开发的概念，将用户界面拆分为独立的组件，提高了代码的可维护性和重用性。

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

在这个React组件中，我们使用了useState来跟踪count的状态，并在按钮点击时更新该状态，实现了一个简单的计数器。

Vue

Vue是一款渐进式JavaScript框架，专注于构建用户界面。它采用了响应式数据绑定和组件化开发的理念。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

在这个Vue组件中，data 属性定义了 count 的初始值，而 methods 属性包含了 increment 方法，该方法在按钮点击时增加 count 的值。

Angular

Angular是由Google开发的一款前端框架，它采用了完整的MVC（模型-视图-控制器）架构。Angular使用TypeScript语言，提供了依赖注入、模块化等功能。

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `,
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

在这个Angular组件中，通过 @Component 装饰器定义了组件的元数据，template 属性包含了组件的HTML模板，而在 CounterComponent 类中定义了 count 属性和 increment 方法。

这三个框架都提供了强大的工具和抽象，简化了前端开发中的很多复杂性。选择框架通常取决于项目需求和开发者的个人偏好。

5. 版本控制 - Git

版本控制是一种记录和管理项目代码历史的方法，其中Git是最流行的版本控制系统之一。Git通过跟踪文件的变化、创建不同的版本（提交）以及支持分支和合并操作来帮助团队协同开发。

以下是一些常用的Git命令：

# 初始化仓库
git init

# 将文件添加到暂存区
git add filename

# 提交更改
git commit -m "Commit message"

# 查看提交历史
git log

# 创建分支
git branch branchname

# 切换分支
git checkout branchname

# 合并分支
git merge branchname

# 撤销更改
git reset --hard HEAD

这些命令涵盖了Git的基本用法，从创建仓库、添加和提交更改，到分支管理和撤销操作。使用Git可以确保团队在协同开发中保持代码的一致性和可追溯性。

6. 包管理工具 - npm或Yarn

包管理工具用于管理项目中的依赖项，确保项目在不同环境中的一致性。在前端开发中，两个常见的包管理工具是npm（Node Package Manager）和Yarn。

npm

npm是JavaScript的包管理工具，随同Node.js一起安装。它通过package.json文件来记录项目的依赖项和配置。

# 初始化项目，创建package.json文件
npm init

# 安装依赖包
npm install package-name

# 全局安装包
npm install -g package-name

# 删除依赖包
npm uninstall package-name

Yarn

Yarn是由Facebook、Google、Exponent和Tilde等公司共同开发的包管理工具。它与npm兼容，并引入了一些改进，如离线模式、版本锁定等。

# 初始化项目，创建package.json文件
yarn init

# 安装依赖包
yarn add package-name

# 全局安装包
yarn global add package-name

# 删除依赖包
yarn remove package-name

这两个工具的使用方式基本相似，选择使用哪一个通常取决于个人偏好或项目团队的规范。

深入了解版本控制和包管理工具将使你更好地管理项目，协同开发，以及确保项目的可维护性和稳定性。