《Web前端开发》第1章 概述.pptx

;第1章概述;由浏览器Browser和服务器Server组成的架构被称为B/S架构，如图所示。;1.1Web前端开发概述;例：在前端页面frontend.html中输入用户名和密码，如图1-2（a）所示；提交给后端页面处理后，将结果显示在后端页面rearend.php中，如图1-2（b）所示。;（a）前端页面frontend.html代码如下;（b）后端页面rearend.php代码如下;1.1Web前端开发概述;例如，MOOC系统中，学生可以登录前台页面浏览到教师所发布的公告、课程资料、作业等信息，如图1-3（a）所示；教师可以登录后台页面发布公告、课程资料、作业等信息，如图1-3（b）所示。;后台页面;1.1Web前端开发概述;1.1Web前端开发概述;1.1Web前端开发概述;1.2网站与网页

1.2.1基本概念

（1）网站

从用户角度看，网站（WebSite）就是互联网上用于展示特定信息的页面的集合；从开发人员角度看，网站是一个文件夹，文件夹内包含子文件夹和网页文件、图片等网站用到的资源文件。

（2）网页（WebPage）

是网站中的一页，网站中的网页通过“超链接”的方式被组织在一起；从开发人员角度看，网页就是符合特殊规范的可以被浏览器解析的文件。

（3）主页

主页（HomePage）也称首页，是进入到网站首先看到的第一个页面，主页体现了网站的主要功能和总体风格。对于前端开发而言，主页文件名通常为index.html或者index.htm。

（4）页面元素

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

1.2.2网站发布

Web系统开发完成后，需要将站点文件夹上传至Web服务器上，用户才可以通过访问该服务器浏览网站内容。Web服务器可以自己搭建，也直接购买第三方服务。例如百度、阿里、华为等都提供虚拟主机服务。虚拟主机就是将一台服务器，人为划分为若干部分，每个部分可以成为一个独立的Web服务器。网站发布者可以通过购买服务的方式，将自己的网站上传到虚拟主机的空间里，完成网站发布。;1.2网站与网页

1.2.3浏览器与搜索引擎

1.浏览器

客户端安装了浏览器，才可以访问Web系统中的网页，它的主要作用就是对Web??务器提出访问请求，在收到服务器端的响应后，将服务器传送回来的网页文件进行解析、渲染，并以可视化的方式呈现出来。浏览器内核主要包含渲染引擎和JS引擎，用于解析网页源代码并在屏幕上绘制网页。;1.2网站与网页

1.2.3浏览器与搜索引擎

2.搜索引擎

搜索引擎就是根据用户需求，运用特定策略从互联网检索出制定信息反馈给用户的一门检索系统。在进行前端开发时，要尽可能地做好“语义化”，让搜索引擎更容易理解网页的主要内容和信息，以便用户更快速准确地检索到网页;1.3Web前端开发技术

1.3.1技术构成

Web前端开发技术包含三大基础的技术：HTML、CSS、JavaScript。

（1）HTML

HTML（HyperTextMarkupLanguage）超文本标记语言用于设定网页结构，也就是网页包括哪些内容。例如网页包含标题文字、段落文字、超链接等。

（2）CSS

CSS（CascadingStyleSheets）层叠样式表用于设定网页样式，主要包括页面元素的样式和网页布局。例如设定网页背景颜色，标题文字大小，导航栏是放在页眉部分横向排列还是左侧纵向排列等。

（3）JavaScript

JavaScript是一种客户端脚本语言，它能够设定网页行为，用于完成网页一些动态效果、与用户的交互效果。例如JavaScript可以实现广告轮播效果、换肤效果、用户注册信息的有效性验证等。

;1.3Web前端开发技术

1.3.1技术构成

【例1-2】对比三个页面，了解HTML、CSS、JavaScript的作用。

（1）应用HTML添加标题、正文段落、按钮等元素，如图1-7（a）所示。

（2）应用CSS添加了背景图片、行高、按钮背景颜色，如图1-7（b）所示。

（3）应用JavaScript使用户单击按钮时，可以更换文字的背景颜色与文字的颜色，如图1-7（c）所示。

;1.3Web前端开发技术

1.3.2技术标准

W3C（WorldWideWebConsortium）万维网联盟创建于1994年，是Web技术领域最具权威的技术标准机构。HTML、CSS由W3C组织发布标准，最新版本是HTML5和CSS3。Javascript是由E