《Web前端开发》 作者孙俏编写的书，我整理书的思绪第一章

目录

1 web前端开发基础

1.1 概述

1.1.1 基本概念

1.1.1.1 客户端、服务器端

1.1.1.2 前端、后端

1.1.1.3 前台、后台

1.1.2 开发流程

1.1.2.1 Web系统开发流程

1.1.2.2 Web前端开发流程

1.2 网站与网页

1.2.1 基本概念

1.2.1.1 网站

1.2.1.2 网页

1.2.1.3 主页

1.2.1.4 页面元素

1.2.2 网站发布

1.2.2.1 IP地址

1.2.2.2 域名

1.2.2.3 URL

1.2.3 浏览器与搜索引擎

1.2.3.1 浏览器

1.2.3.2 搜索引擎

1.3 Web前端开发技术

1.3.1 技术构成

1.3.1.1 HTML

1.3.1.2 CSS

1.3.1.3 JavaScript

1.3.2 技术标准

1.4 前端开发工具

---

1 web前端开发基础

前端开发技术主要有HTML、CSS、JavaScript，分别决定了页面结构、页面样式、页面行为。

1.1 概述

1.1.1 基本概念

1.1.1.1 客户端、服务器端

客户端享用服务，服务器端提供服务。服务端分web服务和数据库服务。

1.1.1.2 前端、后端

前端是指以网页形式呈现的部分，后端是指进行数据存取、与数据库交互的部分。

前端编程语言有HTML、CSS、Javascript等。

后端有JSP、ASP、PHP等，可用于进行数据操作和逻辑处理。

1.1.1.3 前台、后台

web系统前台是指浏览者、用户登录能够浏览和使用的部分。

后台是指管理员登录能够浏览的部分。

1.1.2 开发流程

1.1.2.1 Web系统开发流程

web系统分为：

1. 项目经理

2. 交互设计师

3. 视觉设计师

4. 前端工程师

5. 后端工程师

6. 测试工程师

7. 运维工程师

8. 网站架构师等角色

1.1.2.2 Web前端开发流程

1. 根据需求和效果图，编写代码

2. 实现客户端的交互效果和动态效果

3. 兼容性测试，保证网页在各种浏览器下显示结果一致

1.2 网站与网页

网站是网页与其他资源文件的一个集合

1.2.1 基本概念

1.2.1.1 网站

网站是一个站点文件夹，文件夹内包含子文件夹和网页文件、图片等网站用到的资源文件。

1.2.1.2 网页

网站中的网页通过“超链接”的方式被组织在一起。

1.2.1.3 主页

主页也是首页。对于前端开发而言，主页文件名通常为index.html或者index.html。

1.2.1.4 页面元素

页面元素是构成网页的基本组成部分，通常包括站标（logo）、导航栏（Navigator）、超链接（Hyperlink）、广告横幅（Banner）和表单（Form）等。

1.2.2 网站发布

Web系统开发完成后，需要将站点文件夹上传至Web服务器上，用户才可以访问。服务器可以自己搭建，也可以直接购买第三方服务。

访问Web服务器需要定位到该服务器，被称为寻址，又以下几类地址。

1.2.2.1 IP地址

用户访问网站时需要首先访问Web服务器，每个服务器都被分配一个IP地址。

1.2.2.2 域名

网站发布者可以申请购买域名服务，例如www.w3school.com.cn

1.2.2.3 URL

用户可以通过URL访问图片、文件等网站资源。

1.2.3 浏览器与搜索引擎

1.2.3.1 浏览器

浏览器内核主要包含渲染引擎和JS引擎，用于解析网页源代码并在屏幕上绘制网页。

由于内核不同，不同浏览器的前端显示效果可能会有差别，前端开发要注意能够兼容不同厂商浏览器和浏览器不同的版本，使页面呈现相同效果。

1.2.3.2 搜索引擎

让搜索引擎更容易理解网页的主要内容和信息，以便用户更快速、准确地检索到网页。

1.3 Web前端开发技术

1.3.1 技术构成

三大基础技术：HTML、CSS和JavaScript。

1.3.1.1 HTML

设定网络结构。例如标题文字、段落文字、超链接等。

1.3.1.2 CSS

主要包括页面元素的样式和网页布局。例如网页背景颜色，标题文字大小等等。

1.3.1.3 JavaScript

一种脚本语言，完成网页的一些动态效果、与用户的交互效果。

1.3.2 技术标准

HTML、CSS由W3C（万维网联盟）组织发布标准。Javascript由ECMAScript、DOM、BOM三部分构成。ECMAScript国际组织发布标准；DOM由W3C组织发布标准；BOM由各浏览器厂商发布。

1.4 前端开发工具

Web前端开发的主要工具有：

1. Visual Studio Code：免费，安装方便易于使用

2. Sublime Text：跨平台源代码编辑器

3. WebStorm：被誉为“Web前端开发神器”