网页设计与制作项目式教程（HTML+CSS）课件 01.前端开发概念及技术.pptxVIP

网页设计与制作项目式教程（HTML+CSS）项目一Web前端开发基础

Web前端开发基础在这个互联网已经普及的时代，人们通过网页来获取信息已经成为常态。网页在互联网时代扮演着非常重要的角色，它不仅是一个简单的界面，更是信息传播和交互的重要平台。小丁所在的学校马上就要举办文化艺术节了，他和同学小易商量着通过制作一个班级网站来展示班级风采。Web前端开发是创建网页或应用程序等前端界面以呈现给用户的过程。所以，他们将从Web前端开发的基础知识入手，展开学习。情景导入

任务1.1前端开发相关概念项目实施新知学习1：Web的起源1.万维网（WorldWideWeb），简称Web，起源于1980年。2.Internet由Web和其他服务所组成。除了Web，Internet还包含以下服务。（1）E-mail：电子邮件。（2）FTP：FileTransferProtocol，文件传输协议。（3）Newsgroups：新闻组。（4）其他服务：远程登录（Telnet）、论坛等。

任务1.1前端开发相关概念项目实施新知学习2：Web的相关概念1.网站（Website）是指在Internet上根据一定的规则，使用超文本标记语言（HypetextMarkupLanguage，HTML）等工具制作的、用于展示特定内容的相关网页的集合。2.网页是网站中的一个页面，是构成网站的基本元素，是承载各种网站应用的平台。3.Web是基于客户机/服务器方式的信息发现技术和超文本技术的综合。4.URL（UniformResourceLocator），即统一资源定位符，包括协议、域名、端口、路径、携带的参数、哈希值等部分。5.HTTP是HypertextTransferProtocol（超文本传输协议）的缩写，是一种应用层协议，基于标准的客户机/服务器模型。6.Web浏览器，简称浏览器，是用来检索、展示以及传递Web信息资源的应用程序。7.Web服务器一般指网站服务器。

任务1.1前端开发相关概念项目实施知识拓展：Web的特点1.Web页面具有丰富的多媒体表现特性2.Web页面具有超链接和快速导航能力3.Web页面具有平台独立特性4.Web页面具有分布自治特性5.Web页面具有动态交互特性

任务1.2前端开发技术项目实施新知学习1：“Web标准三剑客”1．HTMLHTML（HyperTextMarkupLanguage），即超文本标记语言，是一门描述性的标记语言。其基本语法如下。标签符内容/标签符标签符一般成对出现，其包括一个表示开始的标签符和一个表示结束的标签符，在表示开始的标签符前面加一个“/”即为表示结束的标签符。HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被称为终将改变移动互联网的重要推手。

任务1.2前端开发技术项目实施新知学习1：“Web标准三剑客”2．CSSCSS（CascadingStyleSheets），即串联样式表，有时候也被称为“CSS样式”，是用来控制网页外观的一项技术。其基本语法如下。选择器{声明1；声明2；……}在设计Web网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精准的控制。同时，CSS语言也是一种标记语言，不需要编译，可以直接由浏览器解释执行。

任务1.2前端开发技术项目实施新知学习1：“Web标准三剑客”3．JavaScriptJavaScript是一种轻量级的解释型Web开发语言，用于编写网页脚本。它的出现，使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使得网页能够包含更多活跃的元素和更加精彩的内容。HTML、CSS、JavaScript三大技术被称为“Web标准三剑客”。这三者与网页之间的关系为：HTML描述网页的结构，CSS描述网页的外观，JavaScript描述网页的行为。

任务1.2前端开发技术项目实施新知学习2：前端框架技术1．jQuery框架jQuery是一个快速、简洁的JavaScript框架。jQuery的设计宗旨是“WriteLess，DoMore”，即倡导写更少的代码、做更多的事情。它封装了JavaScript常用的功能代码，提供了一种简便的设计模式，优化了HTML文档操作、事件处理、动画设计和Ajax交互。2014年10月28日，万维网联盟宣布，经过接近8看的艰苦努力，该标准规范终于制定完成。

任务1.2前端开发技术项目实施新知学习2：前端框架技术2．Vue框架Vue是一套用于构建用户界面的渐进式