WEB编程（二）拆解目标，分析页面结构

目录

1. WEB编程（一）前言学习目标
2. WEB编程（二）拆解目标，分析页面结构
3. WEB编程（三）使用工具准备介绍
4. WEB编程（四）HTML页面框架搭建
5. WEB编程（五）CSS页面装修优化
6. WEB编程（六）JS页面动态效果控制

前景回顾

上一篇我们已经确定了目标，要模仿百度的功能，那我们就先从百度的首页开始。

打开百度的工具们

要打开网页¹，第一步，我们会找到电脑上已经安装的Chrome、 Safari、Firefox或者IE，这些工具统一叫做浏览器（也有可能是360、QQ、UC或者搜狗浏览器，这都不重要）。
推荐MacOS下用Safari，Windows下用Chrome，不多说没解释。

之后的文章里默认全是Chrome下进行的。
没安装的可以通过腾讯软件中心下载
https://pc.qq.com/detail/1/detail_2661.html
普通下载，安装即可

打开Chrome在地址地址栏中输入地址
https://www.baidu.com
下面这个长长条叫地址栏，在里写就行了

也有使用黄页的同学，作为一个开发人员，建议直接输入或使用收藏夹
普通人使用黄页，我们也使用黄页，开发人员最后的骄傲呢
为了让你们好记些，输入的简单些，各大厂都是花了大价钱买的域名啊
（以上内容为选看）

分析百度首页²

打开之后我们看到页面内容是这样的

在看到页面的时候，如上图所视，我们可以把页面从上到下拆分成4个部分

• 第一区域叫“页头”，一般用作导航功能，来跳转到其它页面
• 第二区域叫“内容”，是整个页面核心显示区域
• 第三区域叫“页尾”，一般用来放友情链接，资质证明啥的（不重要又必须有的东西）

百度这里是从上到下拆分，也有些是左右拆分的
比如小红书，见下图

下一章

这里我们先对页面有个大概的区域划分，下一章我们就打开工具开始实现它

---

1. 网页是构成网站的基本元素，用浏览器查看都是网页，看到的图片，文字都是叫网页的内容。 ↩︎

2. 网站的入口网页，一个网站打开后看到的第一个页面 ↩︎