```html

Web前端开发基础知识

打开任何一个网页，右键“检查”，发基你会看到一堆嵌套的础知标签、样式规则和JavaScript代码。端开这三样东西——HTML、发基CSS、础知JavaScript——就是端开前端开发的全部地基。别被那些花哨的发基框架名字唬住，React、础知Vue、端开Svelte，发基剥开外壳，础知跑在浏览器里的端开还是这三样。

HTML：骨架，发基不是础知随便搭的

很多人觉得HTML简单，不就是标签吗？<div> 套 <div>，能显示就行。但语义化标签用不用，差别很大。我见过一个后台管理系统，整个页面只有 <div> 和 <span>，屏幕阅读器读起来像一锅粥。换成 <header>、<nav>、<main>、<article> 之后，结构清晰了，SEO也沾光。

举个例子，一个博客列表页：

<main> <article> <h2>前端入门笔记</h2> <p>今天学了盒模型……</p> </article> <article> <h2>CSS选择器权重</h2> <p>!important 别乱用……</p> </article> </main>

浏览器默认样式会帮你处理间距，辅助技术能直接识别内容层级。别小看这个，改起来不费劲，收益却是长期的。

CSS：布局的坑，踩过才懂

早期用 float 做多栏布局，得清浮动，还得处理高度塌陷。后来 flexbox 出来，一行 display: flex; 解决垂直居中，感动得想哭。现在 grid 更狠，二维布局直接写模板区域。

但有个细节：flex 和 grid 不是互斥的。我习惯用 grid 搭页面大框架，内部组件用 flex 排列。比如一个卡片列表：

.card-list {  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; } .card {  display: flex; flex-direction: column; justify-content: space-between; }

响应式？minmax 和 auto-fill 自动搞定，不用写一堆媒体查询。当然，媒体查询仍然有用，比如在手机上调小内边距。我的经验是：先写移动端样式，再用 min-width 逐步增强，比反过来顺手。

JavaScript：别急着上框架

我见过不少新手，HTML还没写利索，就开始学React。结果组件状态一多，连 this 指向都搞不清。原生JS的DOM操作、事件循环、原型链，这些底子打不牢，用框架也是照猫画虎。

比如一个简单的待办列表，原生实现不过十几行：

const input = document.querySelector('#todo-input'); const list = document.querySelector('#todo-list'); document.querySelector('#add-btn').addEventListener('click', () => {  const text = input.value.trim(); if (!text) return; const li = document.createElement('li'); li.textContent = text; li.addEventListener('click', () => li.remove()); list.appendChild(li); input.value = ''; });

这段代码里藏着事件委托、DOM创建、字符串处理。理解透了，再去看Vue的 v-for 和 @click，就知道框架帮你省了什么。我并不是反对用框架，而是说：先知道原生怎么做，再享受框架的便利，遇到bug时才能定位到根上。

---

最后说个真事。之前帮人改一个页面，加载慢得离谱。查了半天，发现是JS里用 innerHTML 反复拼接大段HTML，还放在循环里。改成 DocumentFragment 一次性插入，时间从3秒降到200毫秒。基础不牢，地动山摇。前端这行，工具再花哨，底层逻辑永远值钱。

```

本文地址：http://www.79wt.cn/news/1579c9299750.html