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

HTML是构建Web页面的基础，它定义了网页的结构和内容。以下是一些关键笔记：

1.1 HTML文档的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1.2 常用HTML标签

  • <h1>至<h6>：定义标题，<h1>是最大的标题。
  • <p>：定义段落。
  • <a>：定义超链接。
  • <img>：定义图像。
  • <div>和<span>：用于布局和样式。

2. CSS（层叠样式表）

CSS用于描述HTML元素的外观和格式。以下是一些关键笔记：

2.1 CSS选择器

  • 类选择器：.class-name
  • ID选择器：#id-name
  • 标签选择器：element-name
  • 通用选择器：*

2.2 常用CSS属性

  • color：文本颜色。
  • background-color：背景颜色。
  • font-size：字体大小。
  • margin和padding：外边距和内边距。
  • border：边框。

3. JavaScript

JavaScript是一种脚本语言，用于控制网页的行为。以下是一些关键笔记：

3.1 基本语法

// 变量声明
var age = 25;

// 函数定义
function sayHello() {
    alert("Hello!");
}

// 调用函数
sayHello();

3.2 常用内置对象

  • Array：数组对象。
  • String：字符串对象。
  • Date：日期对象。
  • Math：数学对象。

4. 响应式设计

响应式设计确保网页在不同设备和屏幕尺寸上都能良好显示。以下是一些关键笔记：

4.1 媒体查询

@media screen and (max-width: 600px) {
    body {
        background-color: red;
    }
}

4.2 流式布局

使用流式布局（如Flexbox或CSS Grid）可以创建灵活的布局。

5. 版本控制

版本控制是管理代码变化的重要工具。以下是一些关键笔记：

5.1 Git

Git是最流行的版本控制系统。以下是一些基本命令：

  • git init：初始化一个新的Git仓库。
  • git add：添加文件到暂存区。
  • git commit：提交更改到仓库。
  • git push：将更改推送到远程仓库。

通过掌握这些关键笔记，您可以开始构建强大的Web前端技能。不断实践和学习，您将能够创建出美观、功能强大的网页。