2024前端开发 - 1/3入门篇 - 基础概念学习

FunctionCat函数猫

墨衍会员 · AI 创作全网分发码龄3年

关注

原创 2024-08-29 19:33:48 1.3k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

学习系列目录

热门话题系列

热门模版系列

在学习前端开发的旅程中，第一阶段应该专注于HTML、CSS、JavaScript的基础知识，以及与之相关的几个重要概念和工具。本讨论将分为三个部分来介绍：学习内容，工具链，以及样例代码。

1. 学习内容

在这个阶段，你应该掌握以下概念：

HTML：超文本标记语言（HTML）是构成网页的基础，它诞生于1993年。最新的版本是HTML5，这个版本引入了许多新的语义元素，如 <header>, <footer>, <section>, <article> 等，它们使得网页结构更清晰。此外，HTML5还支持视频和音频嵌入，图形绘制等，为网页增加了更丰富的功能。
```
<!DOCTYPE html>
<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <h1>欢迎来到我的网页！</h1>
        <p>这是一个段落。</p>
    </body>
</html>
```
学习资源推荐：MDN Web Docs - HTML，W3School - HTML教程。
CSS：层叠样式表（CSS）是用于描述HTML元素在屏幕上如何显示的一种语言，它于1996年诞生。目前最新的版本是CSS3，它引入了许多强大的新特性，如渐变，过渡，动画，以及用于创建网格布局的Flexbox和Grid。
```
body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}
```
学习资源推荐：MDN Web Docs - CSS，W3School - CSS教程。
JavaScript：JavaScript 是一种轻量级的编程语言，于1995年诞生，可用于创建动态网页。最新的版本是ECMAScript 2020 (ES11)，它引入了许多新的特性，包括BigInt（用于处理大整数），Promise.allSettled（用于处理多个Promise），可选链操作符(?.)等。
```
document.getElementById("demo").innerHTML = "Hello JavaScript!";
```
学习资源推荐：MDN Web Docs - JavaScript，W3School - JavaScript教程。
DOM：DOM（文档对象模型）是HTML和XML文档的编程接口，它将文档解析为一个由节点和对象（包括属性和方法）组成的结构性模型。DOM可以使我们通过JavaScript对这个结构进行操作，从而改变文档的内容、结构和样式。
```
var p = document.createElement("p"); // 创建一个新的p元素
var text = document.createTextNode("这是一个新的段落。"); // 创建一个文本节点
p.appendChild(text); // 将文本节点添加到p元素中
document.body.appendChild(p); // 将p元素添加到body元素中
```
学习资源推荐：MDN Web Docs - DOM，W3School - DOM教程。
HTTP：HTTP（超文本传输协议）是用于传输诸如HTML的超媒体文档的应用层协议，它于1989年诞生。HTTP/2是最新的主要版本，它引入了多路复用，头部压缩，服务器推送等特性，以提高性能。
```
fetch('https://api.example.com/data', {
  method: 'GET',
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));
```
学习资源推荐：MDN Web Docs - HTTP，菜鸟教程 - HTTP教程。
JSON：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它于2001年诞生。JSON是一种文本格式，它使用人类可读的文本来存储和表示数据。JavaScript提供了JSON.parse和JSON.stringify两个方法，分别用于将JSON转换为JavaScript对象，和将JavaScript对象转换为JSON。
```
var student = {
  "name": "小明",
  "age": 18,
  "city": "北京"
};

var studentJSON = JSON.stringify(student); // 将JavaScript对象转换为JSON字符串
console.log(studentJSON);
```
学习资源推荐：MDN Web Docs - JSON，W3School - JSON教程。
URI：URI（统一资源标识符）是一个用于标识某一互联网资源名称的字符串，它于1994年诞生。URI可以被分为URL（统一资源定位符）和URN（统一资源名称），其中URL是我们最常用的，它指定了互联网上资源的位置。
```
var uri = "https://www.example.com/page?name=小明&age=18";
var decodedURI = decodeURI(uri); // 解码URI
console.log(decodedURI);
```
学习资源推荐：MDN Web Docs - URI，Wikipedia - 统一资源标识符。

2. 工具链

在这个阶段你只需要了解和掌握以下工具：

代码编辑器：Visual Studio Code（VS Code）是一个由微软开发的开源代码编辑器，具有对多种语言的内置支持，包括 JavaScript、HTML 和 CSS，还支持扩展以添加更多功能。
在线代码编辑器： CodePen: CodePen 是一个用于编写和共享前端代码的在线平台，并可以直接在浏览器中看到代码的运行结果。它支持 HTML、CSS 和 JavaScript，以及各种预处理器和库。 JSFiddle: JSFiddle 是另一个流行的在线代码编辑器，
浏览器开发工具：如 Chrome DevTools 和 Firefox Developer Tools，它们是内置在浏览器中的一套工具，可以用来检查和修改网页，调试 JavaScript，性能分析等。

3. 样例代码

以下是一个包含了第一阶段介绍的所有概念的样例代码，包括HTML、CSS、JavaScript、DOM、HTTP、JSON和URI等概念：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
    <style>
        /* 这是CSS部分，用于设置网页的样式 */
        body {
            background-color: lightblue;
        }
        h1 {
            color: white;
            text-align: center;
        }
        #demo {
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 这是HTML部分，用于设置网页的结构 -->
    <h1 id="title">欢迎来到我的网页！</h1>
    <p id="demo"></p>

    <script>
        // 这是JavaScript部分，用于设置网页的功能

        // DOM: 通过ID获取元素并修改其内容
        document.getElementById("title").innerHTML = "Hello DOM!";

        // HTTP: 使用fetch API从远程服务器获取数据
        fetch('https://jsonplaceholder.typicode.com/users/1') // URI: 远程服务器的地址
            .then(response => response.json()) // JSON: 将返回的数据转换为JSON格式
            .then(data => {
                // 将返回的数据显示在网页上
                document.getElementById("demo").innerHTML = "Hello, " + data.name;
            })
            .catch((error) => console.error('Error:', error));
    </script>
</body>
</html>