从零开始学前端 | 第一章：认识网页、浏览器与前端开发

本章定位这一章是整套前端自学系列的起点。如果你现在对前端开发的印象还停留在“好像是写网页的”那很正常。很多纯小白在刚开始学习时最难的不是语法而是脑子里没有一张完整的地图网页是什么、浏览器是什么、前端到底负责什么、HTML/CSS/JavaScript 又分别在做什么。所以这一章的目标不是让你记很多术语而是先把整体认知搭起来。只要这张地图清楚了后面学 HTML、CSS 和 JavaScript 时你就不会一直处在“我在学什么”和“这个东西为什么存在”的迷茫里。本章学习目标学完这一章后你应该能做到说清楚网站、网页、浏览器、服务器分别是什么。理解前端开发主要负责的工作范围。理解 HTML、CSS、JavaScript 这三者的分工。大致描述一个网页从输入网址到显示在屏幕上的过程。初步学会用浏览器开发者工具观察网页。一、先建立一个整体认知在正式学习前我们先统一一个最重要的认识前端不是单独存在的。前端通常是一个网站或 Web 应用中直接和用户见面的部分。用户能看到的页面、能点击的按钮、能输入的表单、能感受到的交互基本都属于前端工作的一部分。你可以先把前端理解成一句话前端开发就是把产品页面做出来并让用户可以顺畅地看到它、使用它、和它互动。这句话里有三个重点做出来页面需要被搭建出来这涉及结构。看到它页面需要有样式和布局这涉及视觉表现。和它互动页面需要响应点击、输入、切换等操作这涉及交互逻辑。后面你会发现这正好对应前端三件套的分工HTML 负责结构CSS 负责样式JavaScript 负责交互二、什么是网站、网页、浏览器、服务器这几个词经常一起出现但很多新手一开始会混着理解。这里我们一个一个拆开。1. 什么是网站网站可以理解为一组互相关联的网页集合。比如你打开一个公司的官网通常会有首页关于我们产品介绍页联系我们新闻或博客页这些页面合在一起构成了一个完整的网站。你也可以把网站理解成一个“内容集合”或“功能集合”它往往不是单独一个页面而是很多页面共同组成的。2. 什么是网页网页是网站中的某一个具体页面。例如你打开官网首页这是一个网页。你点进“关于我们”这又是一个网页。你点进某篇文章详情页这还是一个网页。也就是说网站是整体网页是组成整体的单个页面这是一个很基础但很容易混掉的区别。3. 什么是浏览器浏览器是你用来打开网页的软件。常见浏览器有ChromeEdgeSafariFirefox浏览器的作用不只是“显示网页”。它更准确的作用是接收你输入的网址。向服务器请求网页内容。解析 HTML、CSS、JavaScript。把网页渲染成你最终看到的样子。处理你后续的点击、输入、跳转等操作。所以浏览器不是一个简单的“查看器”它更像是网页的运行环境。4. 什么是服务器服务器可以先简单理解成存放网站内容、并对外提供内容的计算机或程序环境。当你在浏览器里输入一个网址时浏览器并不是凭空就把页面变出来了而是会去“拿数据”。这些页面文件、图片、接口数据通常都存放在服务器上。浏览器向服务器发请求服务器把对应内容返回回来浏览器再把它展示出来。对纯小白来说先记住下面这句话就够用了浏览器负责请求和展示服务器负责提供内容和数据。后面学到更深入的时候你会进一步接触前后端分工、接口、部署、云服务器等概念。三、前端开发到底负责什么很多人刚接触前端时会问“前端是不是只负责把页面画好看”答案是不完整的。前端当然包括页面展示但它远不止“好看”这么简单。一个成熟的前端页面通常至少包含下面几层内容1. 页面结构比如一个页面可能包含顶部导航轮播图内容区域按钮表单页脚这些“页面上有什么”属于结构层面的内容。2. 页面样式结构有了之后还要决定它“长什么样”比如字体多大颜色是什么按钮是什么样式内容区域怎么排版手机和电脑上分别如何显示这些属于样式和布局层面的内容。3. 页面交互页面还需要响应用户操作比如点击按钮后弹出提示输入内容后实时校验切换标签时更新内容提交表单后发送数据这些属于交互逻辑。4. 用户体验前端不只是“能用”还要尽量“好用”。例如页面加载时是否有提示出错时是否有明确反馈按钮是否容易点击表单填写是否清晰手机端是否适配良好这部分虽然听起来不像“代码”但实际是前端工作中非常重要的一部分。5. 与后端配合很多页面不是纯静态内容而是要从服务端拿数据例如商品列表用户信息文章详情评论内容这时前端还需要和后端接口打交道把数据拿回来再展示在页面上。所以更准确地说前端开发负责的是把产品需求转成用户可见、可操作、可交互的网页界面并与后端数据协同工作。四、HTML、CSS、JavaScript 分别做什么这是前端入门最重要的一组基础概念。你后面会花很长时间分别学习它们但现在要先把三者的角色分清楚。1. HTML负责结构HTML 的作用是告诉浏览器这里是标题这里是段落这里是一张图片这里是一个按钮这里是一组列表它更像是页面的骨架。如果把网页比作一个房间那 HTML 负责的是“这个房间里有什么”有桌子有椅子有门有窗户但这时候还没有风格也没有动态效果。2. CSS负责样式CSS 的作用是告诉浏览器标题是什么颜色文字多大图片多宽内容怎么排版按钮鼠标移上去时是什么效果CSS 更像是页面的外观设计和排版规则。如果继续沿用上面的理解HTML 是骨架CSS 就是在决定这张桌子是什么颜色这把椅子放在哪里墙面是什么风格3. JavaScript负责交互和逻辑JavaScript 的作用是让页面“动起来”。例如点击按钮后切换内容输入用户名时进行校验获取服务器数据并显示到页面上提交表单后给出成功或失败提示如果没有 JavaScript很多网页仍然能显示但会缺少大量交互能力。4. 用一个简单例子理解三者分工下面是一个很小的例子不需要你现在完全看懂只要感受三者分工!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title前端三件套示例/titlestyle/* CSS控制按钮的外观 */button{padding:8px 16px;background-color:#1677ff;color:#fff;border:none;border-radius:6px;}/style/headbody!-- HTML定义页面上有什么 --h1你好前端世界/h1buttonidhelloButton点我一下/buttonscript// JavaScript处理点击后的交互逻辑consthelloButtondocument.getElementById(helloButton);helloButton.addEventListener(click,function(){alert(你刚刚点击了按钮);});/script/body/html你现在只需要记住HTML 决定页面里有什么元素。CSS 决定这些元素长什么样。JavaScript 决定用户操作后会发生什么。五、一个网页从输入网址到显示出来大致经历了什么这是很多初学者第一次听会觉得“有点复杂”但其实只要抓住主线就不难。我们先不讲太深只讲一个足够入门的版本。当你在浏览器地址栏输入一个网址并按下回车时大致会发生下面几步第 1 步浏览器接收到网址比如你输入一个网站地址浏览器会先知道你想访问哪个网站你想请求哪个页面第 2 步浏览器向服务器发请求浏览器会把“我要这个页面”的请求发送给对应服务器。这一步你可以先简单理解成浏览器在向服务器说“请把这个页面的内容发给我。”第 3 步服务器返回页面内容服务器收到请求后会把对应资源返回给浏览器例如HTML 文件CSS 文件JavaScript 文件图片接口数据第 4 步浏览器解析这些内容浏览器拿到内容后会开始做几件事解析 HTML知道页面有哪些结构。解析 CSS知道这些结构应该如何显示。执行 JavaScript处理页面逻辑和交互。第 5 步浏览器把页面渲染出来最后浏览器把这些内容组合起来显示成你看到的网页。第 6 步继续响应用户操作页面显示出来后事情并没有结束。之后你做的每一个操作比如点击按钮输入文字切换页面提交表单浏览器都还会继续配合 JavaScript 和服务器完成后续交互。一个适合初学者记忆的简化流程你可以先把整个过程记成一句简化版输入网址 → 浏览器发请求 → 服务器返回内容 → 浏览器解析并渲染 → 用户开始交互现在不需要把每个细节背下来只要知道这条主线就可以了。等后面学到更多知识这条主线会越来越清楚。六、第一次从用户视角切换到开发者视角作为普通用户我们平时只是“使用网页”。但从现在开始你要慢慢学会“观察网页是怎么组成的”。这件事非常重要因为前端学习的一个关键能力就是看到一个页面时能大致判断它由哪些结构、样式和交互组成。1. 先学会区分三个层面以后你看到任何一个网页都可以先问自己结构层面这个页面上有哪些区域样式层面这些区域是怎么排版和美化的交互层面这个页面里哪些地方可以点、可以输入、会变化比如一个常见电商页面你可以这样观察结构导航栏、搜索框、商品列表、筛选区域、页脚样式卡片布局、颜色体系、按钮样式、字体大小交互搜索、筛选、加入购物车、分页切换这就是前端视角的基本起点。2. 打开浏览器开发者工具如果你使用的是 Chrome、Edge 或 Safari一般都可以打开开发者工具。常见方式有macOSCommand Option IWindowsF12或者右键页面选择“检查”或“Inspect”开发者工具刚开始看会觉得信息很多但你暂时只需要知道两件事你可以在里面看到网页结构。你可以临时修改样式观察页面变化。3. 第一次观察网页结构随便打开一个你常用的网站然后打开开发者工具。进入Elements或“元素”面板。把鼠标移动到某个页面区域。看看它在结构树中对应哪一块。你会开始发现一个页面并不是“整体一张图”。它其实是由很多层结构拼起来的。这些结构后面都可以被样式控制也可以被 JavaScript 操作。这一步非常有价值因为它会帮你从“会用网页”慢慢过渡到“会分析网页”。七、前端学习时最容易出现的三个误区刚开始学前端时很多人会掉进下面几个误区里。你提前知道会少走很多弯路。误区 1以为前端就是背标签和属性当然不是。标签、属性、语法都很重要但真正重要的是理解它们分别解决什么问题。否则你可能记了很多东西却不知道什么时候该用。误区 2一开始就想做很复杂的网站这也是很常见的问题。正确的节奏通常是先理解概念再做很小的页面再加简单样式再补交互最后再做完整项目不要一上来就挑战大型后台系统、仿大型电商首页或完整社交产品那样很容易把信心打没。误区 3看懂了就以为自己会了前端尤其容易出现这种情况。你可能看文章时觉得“嗯我懂了”但一旦自己新建一个空白文件还是不知道从哪里开始。这说明你还停留在“输入知识”的阶段没有进入“输出能力”的阶段。所以从第一章开始就要建立一个习惯每学完一个知识点都要自己动手做一点点东西。八、本章实践练习这一章的目标是建立认知所以练习也尽量轻不追求写很多代码。练习 1用自己的话解释四个概念请你尝试不用看原文用自己的话分别解释网站是什么网页是什么浏览器是什么服务器是什么要求每个概念控制在 1 到 3 句话内。不要照抄定义尽量讲给“完全没接触过的人”听。练习 2拆分一个你常用的网站随便打开一个你常用的网站首页然后回答下面三个问题这个页面的主要结构区域有哪些页面中最明显的样式特征有哪些页面中有哪些可交互的部分建议你把答案写成一个简单清单。练习 3第一次打开开发者工具请完成下面动作打开一个网页。打开开发者工具。找到元素面板。任选一个按钮或图片观察它在结构树中的位置。完成后试着回答这个元素周围还有哪些结构它可能是页面中的哪一块区域的一部分九、学习重点提示这一章你最需要抓住的不是细枝末节而是下面四件事网站和网页不是同一个概念。浏览器是网页的运行环境之一不只是展示工具。前端负责结构、样式、交互以及一部分用户体验。HTML、CSS、JavaScript 三者分工必须从一开始就分清楚。如果你现在只能记住一句话那就记住这句HTML 搭结构CSS 做样式JavaScript 管交互。十、本章小结这一章我们主要完成了“建立地图”这件事。你已经初步知道了网站和网页的区别浏览器和服务器分别扮演什么角色前端开发到底在做什么HTML、CSS、JavaScript 的基本分工一个网页从输入网址到显示出来的大致流程这一步非常重要因为后面所有知识都会建立在这张基础地图上。十一、课后思考题请你思考下面几个问题不急着追求标准答案如果一个网页只有 HTML没有 CSS 和 JavaScript它还能不能显示会是什么样子如果一个网页样式很好看但按钮点击完全没有反应这通常缺的是哪一层能力你平时最常用的一个网站它的前端部分大概承担了哪些工作你可以把这些问题的答案记在自己的学习笔记里。等后面学完 HTML、CSS 和 JavaScript再回来看你会发现自己的理解会更完整。十二、下一章预告下一章我们会正式进入前端编码的第一步从零开始学前端 | 第二章第一个 HTML 页面到那时你会开始真正动手写出自己的第一个网页并理解一个 HTML 文件最基础的结构长什么样。