前端入门知识点总结

最新推荐文章于 2025-10-18 03:58:55 发布

原创最新推荐文章于 2025-10-18 03:58:55 发布 · 350 阅读

CC 4.0 BY-SA版权

文章标签：

文档结构：<!DOCTYPE html>声明文档类型，<html>为根元素，包含<head>（元信息）和<body>（可见内容）。
常用标签：
- 文本类：<h1>-<h6>、<p>、<span>、<strong>（强调）、<em>（斜体）。
- 列表类：<ul>（无序）、<ol>（有序）、<li>（列表项）。
- 媒体类：<img>（图像）、<video>、<audio>。
- 表单类：<form>、<input>（文本/密码/按钮等）、<textarea>、<select>。

选择器：标签选择器（div）、类选择器（.class）、ID选择器（#id）、伪类（:hover）。
盒模型：width/height控制内容区，padding（内边距）、border（边框）、margin（外边距）影响布局。
布局方式：
- Flexbox：通过display: flex实现弹性布局，justify-content（主轴对齐）、align-items（交叉轴对齐）。
- Grid：display: grid定义网格，grid-template-columns/rows划分行列。
响应式设计：@media查询适配不同屏幕尺寸，如：
```
@media (max-width: 600px) {
  body { font-size: 14px; }
}
```

变量与类型：let/const声明变量，基本类型（string、number、boolean）和引用类型（object、array）。

函数：

function greet(name) { 
  return `Hello, ${name}!`; 
}

DOM操作：

document.getElementById('demo').textContent = '新内容';
document.querySelector('.class').addEventListener('click', callback);

异步编程：Promise和async/await处理异步任务：

async function fetchData() {
  const response = await fetch('url');
  const data = await response.json();
}

版本控制：Git常用命令git clone、git commit、git push。
包管理：npm或yarn安装依赖（如npm install react）。
框架入门：
- React：组件化开发，JSX语法，状态管理（useState）。
- Vue：双向数据绑定，单文件组件（.vue）。