Web前端开发与应用教程第1章-Web前端开发概课件

第1章Web前端开发概述

第1章Web前端开发概述第1章Web前端开发概述1.1Web前端开发相关概念1.2Web前端开发相关技术1.3Web前端开发工具1.4练习Web前端开发与应用教程（HTML5+CSS3+JavaScript）2第1章Web前端开发概述1.1Web前端开发相关概念We1.1Web前端开发相关概念Web前端开发与应用教程（HTML5+CSS3+JavaScript）31.1Web前端开发相关概念Web前端开发与应用教程（HT1.1

Web前端开发相关概念Web是Internet上最受欢迎的一种多媒体信息服务系统。整个系统由Web服务器、浏览器和通信协议组成。通信协议HTTP能够传输任意类型的数据对象来满足Web服务器与客户之间的多媒体通信的需求。Web前端开发与应用教程（HTML5+CSS3+JavaScript）41.1Web前端开发相关概念Web是Internet上最受1.1

Web前端开发相关概念Web开发分为前端（Front-end）和后端（Back-end）两部分，后端指的是程序、数据库和服务器层面的开发，而前端则指的是直接与用户接触的网页，比如布局、特效、交互等等。前端开发的主要工作是把UI（UserInterface用户界面）的设计图按照W3C标准做成html页面，用CSS进行布局,并且用javascript脚本语言实现页面上的前端互动。互动效果包括弹出层、页签切换、图片滚动、Ajax异步互动等等。Web前端开发与应用教程（HTML5+CSS3+JavaScript）51.1Web前端开发相关概念Web开发分为前端（Front1.1.1浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。它用来显示在万维网或局域网等内的文字、图像及其他信息。Web前端开发与应用教程（HTML5+CSS3+JavaScript）61.1.1浏览器浏览器是指可以显示网页服务器或者文件系统1.1.2URLURL,统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。每个页面都应具有唯一的一个URL。基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名。完整的、带有授权部分的普通统一资源标志符语法看上去如下：协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志Web前端开发与应用教程（HTML5+CSS3+JavaScript）71.1.2URLURL,统一资源定位符是对可以从互联网上1.1.3WWWWWW是环球信息网的缩写，（亦作“Web”、“WWW”、“W3”，英文全称为“WorldWideWeb”），中文名字为“万维网”，"环球网"等，常简称为Web。分为Web客户端和Web服务器程序。WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。Web前端开发与应用教程（HTML5+CSS3+JavaScript）81.1.3WWWWWW是环球信息网的缩写，（亦作“Web”1.1.4网站网站(Website)是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。用户可以通过浏览器来访问网站，获取需要的资讯或者享受网络服务。Web前端开发与应用教程（HTML5+CSS3+JavaScript）91.1.4网站网站(Website)是指在因特网上根据一定1.1.5Web标准Web开发应用遵循的标准就是Web标准。Web标准是由W3C和其他标准化组织共同制定的，该标准用来创建和解释基于Web的内容，Web标准可以使得在网上发布的文档向后兼容，使其能够被大多数人所访问。Web前端开发与应用教程（HTML5+CSS3+JavaScript）101.1.5Web标准Web开发应用遵循的标准就是Web标准1.1.5Web标准Web标准包括一系列标准。网页部分的标准通过三部分来描述：结构（Structure）、表现（Presentation）和行为（Behavior）。结构、表现和行为对应于3种常用的技术，即HTML、CSS和JavaScript。HTML用来决定网页的结构和内容;CSS用来设计网页的表现形式;JavaScript用来控制网页的行为。Web前端开发与应用教程（HTML5+CSS3+JavaScript）111.1.5Web标准Web标准包括一系列标准。网页部分的标1.2Web前端开发相关技术Web前端开发与应用教程（HTML5+CSS3+JavaScript）121.2Web前端开发相关技术Web前端开发与应用教程（HT1.2Web前端开发相关技术作为一名前端人员，就应该掌握更多、更有针对性的技术和知识。Web前端离不开浏览器，主流开发一般采用的是HTML+CSS+JavaScript这3个核心，围绕这3个核心可以开发出来大量技术框架和解决方案。Web前端开发与应用教程（HTML5+CSS3+JavaScript）131.2Web前端开发相关技术作为一名前端人员，就应该掌握更1.2Web前端开发相关技术HTMLCSSJavaScriptWeb前端开发与应用教程（HTML5+CSS3+JavaScript）141.2Web前端开发相关技术HTMLWeb前端开发与应用教1.2.1HTMLHTML是超文本置标语言（英文：HyperTextMarkupLanguage，HTML），是网页的骨骼，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种置标语言。最新版本是HTML5，它是HTML下一个的主要修订版本，现在仍处于发展阶段。目标是取代1999年所定订的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。Web前端开发与应用教程（HTML5+CSS3+JavaScript）151.2.1HTMLHTML是超文本置标语言（英文：1.2.1HTMLWeb前端开发与应用教程（HTML5+CSS3+JavaScript）16版本发布日期说明HTML第一版1993年6月作为互联网工程工作小组（IETF）工作草案发布（非标准）HTML2.01995年11月作为RFC1866发布，HTML3.21996年1月W3C（万维网联盟）推荐标准HTML4.01997年12月W3C推荐标准ISOHTML2000年5月基于严格的HTML4.01语法，是国际标准化组织和国际电工委员会的标准XHTML1.02000年1月W3C推荐标准，后来经过修订于2002年8月重新发布XHTML1.12001年5月较1.0有微小改进XHTML2.0草案没有发布2009年，W3C停止了XHTML2.0工作组的工作HTML5草案2008年1月目前的HTML5规范是草案发布HTML52014年10月W3C推荐标准表1-1HTML版本信息1.2.1HTMLWeb前端开发与应用教程（HTML5+C1.2.2CSSCSS(CascadingStyleSheets)层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。Web前端开发与应用教程（HTML5+CSS3+JavaScript）171.2.2CSSCSS(CascadingStyleS1.2.3JavaScriptJavaScript是一种脚本语言，代码不需要编译成二进制，而是以文本的形式存在，因此任何文本编辑器都可以作为其开发环境。通常使用的JavaScript编辑器有记事本、UltraEdit和Dreamweaver。Web前端开发与应用教程（HTML5+CSS3+JavaScript）181.2.3JavaScriptJavaScript是一种1.2.3JavaScriptHTML定义网页的内容，CSS定义网页的表现，JavaScript则定义特殊的行为。建立网站不可能脱离HTML（如果要让网站看起来很吸引人，则离不开CSS），但JavaScript并不是必需的。在大多数情况下，JavaScript的特性都是用于增强访问者体验的——它们在由HTML和CSS构建的核心体验的基础上进行增强。Web前端开发与应用教程（HTML5+CSS3+JavaScript）191.2.3JavaScriptHTML定义网页的内容，1.3Web前端开发工具Web前端开发与应用教程（HTML5+CSS3+JavaScript）201.3Web前端开发工具Web前端开发与应用教程（HTML1.3Web前端开发工具HTML5是一种标记语言，标记语言代码是以文本形式存在的，因此，所有的记事本工具都可以作为它的开发环境。HTML文件的扩展名为.html或.htm，将HTML源代码输入到记事本中.Web前端开发与应用教程（HTML5+CSS3+JavaScript）211.3Web前端开发工具HTML5是一种标记语言，标记语言1.3.1NotePadWeb前端开发与应用教程（HTML5+CSS3+JavaScript）22Notepad，指代码编辑器或WINDOWS中的“记事本”程序。在WINDOWS下主要用于文本编辑。一款开源、小巧、免费的纯文本编辑器。建议初学者使用NotePad进行编写，这样可以增加代码编写体验、增强对代码的理解和记忆。1.3.1NotePadWeb前端开发与应用教程（HTM1.3.2TextPadWeb前端开发与应用教程（HTML5+CSS3+JavaScript）23TextPad是一个强大的替代Windows记事本Notepad的文本编辑器，编辑文件的大小只受虚拟内存大小的限制，支持拖放式编辑，你可以把它作为一个简单的网页编辑器使用。普通用户也可不安装模板而只使用单独的主程序，支持WIN2K的Unicode编码！可以编译、运行简单的java程序。1.3.2TextPadWeb前端开发与应用教程（HTM1.3.2TextPadWeb前端开发与应用教程（HTML5+CSS3+JavaScript）241.3.2TextPadWeb前端开发与应用教程（HTM1.3.3WebStormWebStorm中文译名网络风暴，是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”等。Web前端开发与应用教程（HTML5+CSS3+JavaScript）251.3.3WebStormWebStorm中文译名网络风1.3.3WebStormWeb前端开发与应用教程（HTML5+CSS3+JavaScript）261.3.3WebStormWeb前端开发与应用教程（HTM1.3.4DreamweaverAdobeDreamweaver，简称“DW”，中文名称"梦想编织者"，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Web前端开发与应用教程（HTML5+CSS3+JavaScript）271.3.4DreamweaverAdobeDreamwe1.3.4DreamweaverWeb前端开发与应用教程（HTML5+CSS3+JavaScript）281.3.4DreamweaverWeb前端开发与应用教程（1.4练习Web前端开发与应用教程（HTML5+CSS3+JavaScript）291.4练习Web前端开发与应用教程（HTML5+CSS31.4练习1.在记事本中手工编写HTML5基本框架代码，并在浏览器中预览。2.在浏览器中查看常用网站的页面效果和源文件。3.下载安装试用TextPad。4.下载安装试用WebStorm。5.下载安装试用Dreamweaver。Web前端开发与应用教程（HTML5+CSS3+JavaScript）301.4练习1.在记事本中手工编写HTML5基本框架代码本章结束本章结束第1章Web前端开发概述

第1章Web前端开发概述第1章Web前端开发概述1.1Web前端开发相关概念1.2Web前端开发相关技术1.3Web前端开发工具1.4练习Web前端开发与应用教程（HTML5+CSS3+JavaScript）33第1章Web前端开发概述1.1Web前端开发相关概念We1.1Web前端开发相关概念Web前端开发与应用教程（HTML5+CSS3+JavaScript）341.1Web前端开发相关概念Web前端开发与应用教程（HT1.1

Web前端开发相关概念Web是Internet上最受欢迎的一种多媒体信息服务系统。整个系统由Web服务器、浏览器和通信协议组成。通信协议HTTP能够传输任意类型的数据对象来满足Web服务器与客户之间的多媒体通信的需求。Web前端开发与应用教程（HTML5+CSS3+JavaScript）351.1Web前端开发相关概念Web是Internet上最受1.1

Web前端开发相关概念Web开发分为前端（Front-end）和后端（Back-end）两部分，后端指的是程序、数据库和服务器层面的开发，而前端则指的是直接与用户接触的网页，比如布局、特效、交互等等。前端开发的主要工作是把UI（UserInterface用户界面）的设计图按照W3C标准做成html页面，用CSS进行布局,并且用javascript脚本语言实现页面上的前端互动。互动效果包括弹出层、页签切换、图片滚动、Ajax异步互动等等。Web前端开发与应用教程（HTML5+CSS3+JavaScript）361.1Web前端开发相关概念Web开发分为前端（Front1.1.1浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。它用来显示在万维网或局域网等内的文字、图像及其他信息。Web前端开发与应用教程（HTML5+CSS3+JavaScript）371.1.1浏览器浏览器是指可以显示网页服务器或者文件系统1.1.2URLURL,统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。每个页面都应具有唯一的一个URL。基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名。完整的、带有授权部分的普通统一资源标志符语法看上去如下：协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志Web前端开发与应用教程（HTML5+CSS3+JavaScript）381.1.2URLURL,统一资源定位符是对可以从互联网上1.1.3WWWWWW是环球信息网的缩写，（亦作“Web”、“WWW”、“W3”，英文全称为“WorldWideWeb”），中文名字为“万维网”，"环球网"等，常简称为Web。分为Web客户端和Web服务器程序。WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。Web前端开发与应用教程（HTML5+CSS3+JavaScript）391.1.3WWWWWW是环球信息网的缩写，（亦作“Web”1.1.4网站网站(Website)是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。用户可以通过浏览器来访问网站，获取需要的资讯或者享受网络服务。Web前端开发与应用教程（HTML5+CSS3+JavaScript）401.1.4网站网站(Website)是指在因特网上根据一定1.1.5Web标准Web开发应用遵循的标准就是Web标准。Web标准是由W3C和其他标准化组织共同制定的，该标准用来创建和解释基于Web的内容，Web标准可以使得在网上发布的文档向后兼容，使其能够被大多数人所访问。Web前端开发与应用教程（HTML5+CSS3+JavaScript）411.1.5Web标准Web开发应用遵循的标准就是Web标准1.1.5Web标准Web标准包括一系列标准。网页部分的标准通过三部分来描述：结构（Structure）、表现（Presentation）和行为（Behavior）。结构、表现和行为对应于3种常用的技术，即HTML、CSS和JavaScript。HTML用来决定网页的结构和内容;CSS用来设计网页的表现形式;JavaScript用来控制网页的行为。Web前端开发与应用教程（HTML5+CSS3+JavaScript）421.1.5Web标准Web标准包括一系列标准。网页部分的标1.2Web前端开发相关技术Web前端开发与应用教程（HTML5+CSS3+JavaScript）431.2Web前端开发相关技术Web前端开发与应用教程（HT1.2Web前端开发相关技术作为一名前端人员，就应该掌握更多、更有针对性的技术和知识。Web前端离不开浏览器，主流开发一般采用的是HTML+CSS+JavaScript这3个核心，围绕这3个核心可以开发出来大量技术框架和解决方案。Web前端开发与应用教程（HTML5+CSS3+JavaScript）441.2Web前端开发相关技术作为一名前端人员，就应该掌握更1.2Web前端开发相关技术HTMLCSSJavaScriptWeb前端开发与应用教程（HTML5+CSS3+JavaScript）451.2Web前端开发相关技术HTMLWeb前端开发与应用教1.2.1HTMLHTML是超文本置标语言（英文：HyperTextMarkupLanguage，HTML），是网页的骨骼，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种置标语言。最新版本是HTML5，它是HTML下一个的主要修订版本，现在仍处于发展阶段。目标是取代1999年所定订的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。Web前端开发与应用教程（HTML5+CSS3+JavaScript）461.2.1HTMLHTML是超文本置标语言（英文：1.2.1HTMLWeb前端开发与应用教程（HTML5+CSS3+JavaScript）47版本发布日期说明HTML第一版1993年6月作为互联网工程工作小组（IETF）工作草案发布（非标准）HTML2.01995年11月作为RFC1866发布，HTML3.21996年1月W3C（万维网联盟）推荐标准HTML4.01997年12月W3C推荐标准ISOHTML2000年5月基于严格的HTML4.01语法，是国际标准化组织和国际电工委员会的标准XHTML1.02000年1月W3C推荐标准，后来经过修订于2002年8月重新发布XHTML1.12001年5月较1.0有微小改进XHTML2.0草案没有发布2009年，W3C停止了XHTML2.0工作组的工作HTML5草案2008年1月目前的HTML5规范是草案发布HTML52014年10月W3C推荐标准表1-1HTML版本信息1.2.1HTMLWeb前端开发与应用教程（HTML5+C1.2.2CSSCSS(CascadingStyleSheets)层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。Web前端开发与应用教程（HTML5+CSS3+JavaScript）481.2.2CSSCSS(CascadingStyleS1.2.3JavaScriptJavaScript是一种脚本语言，代码不需要编译成二进制，而是以文本的形式存在，因此任何文本编辑器都可以作为其开发环境。通常使用的JavaScript编辑器有记事本、UltraEdit和Dreamweaver。Web前端开发与应用教程（HTML5+CSS3+JavaScript）491.2.3JavaScriptJavaScript是一种1.2.3JavaScriptHTML定义网页的内容，CSS定义网页的表现，JavaScript则定义特殊的行为。建立网站不可能脱离HTML（如果要让网站看起来很吸引人，则离不开CSS），但JavaScript并不是必需的。在大多数情况下，JavaScript的特性都是用于增强访问者体验的——它们在由HTML和CSS构建的核心体验的基础上进行增强。Web前端开发与应用教程（HTML5+CSS3+JavaScript）501.2.3JavaScriptHTML定义网页的内容，1.3Web前端开发工具Web前端开发与应用教程（HTML5+CSS3+JavaScript）511.3Web前端开发工具Web前端开发与应用教程（HTML1.3Web前端开发工具HTML5是一种标记语言，标记语言代码是以文本形式存在的，因此，所有的记事本工具都可以作为它的开发环境。HTML文件的扩展名为.html或.htm，将HTML源代码输入到记事本中.Web前端开发与应用教程（HTML5+CSS3+JavaScript）521.3Web前端开发工具HTML5是一种标记语言，标记语言1.3.1NotePadWeb前端开发与应用教程（HTML5+CSS3+JavaScript）53Notepad，指代码编辑器或WINDOWS中的“记事本”程序。在WINDOWS下主要用于文本编辑。一款开源、小巧、免费的纯文本编辑器。建议初学者使用NotePad进行编写，这样可以增加代码编写体验、增强对代码的理解和记忆。1.3.1NotePadWeb前端开发与应用教程（HTM1.3.2TextPadWeb前端开发与应用教程（HTML5+CSS3+JavaScript）54TextPad是一个强大的替代Windows记事本Notepad的文本编辑器，编辑文件的大小只受虚拟内存