HTML5网页前端设计（第3版）- 微课视频版 课件 CH01 绪论

第1章绪论主讲人：XX老师目录1.1Web原理基础1.2Web前端技术基础1.3Web前端新技术1.4Web开发工具1.5Web技术的前景与展望1.1Web原理基础1.1.1Internet与万维网1.1.2Web架构1.1.3Web应用1.1.1Internet与万维网1Internet2万维网1.1.1Internet与万维网Internet中文名称叫做“因特网”，也被人们称为“国际互联网”。它是由成千上万台计算机设备互相连接，基于TCP/IP协议进行通信从而形成的全球网络。Internet最早是在1969年由美国国防部建立的ARPANET网络的基础上演变而来的。目前，Internet已正式连接86个国家和地区，接入了6万多个网络。1.1.1Internet与万维网通过Internet，用户可以获得以下服务：WWW浏览服务电子邮件服务（E-mail）文件传输服务（FTP）远程登陆服务（Telnet）1.1.1Internet与万维网万维网（WWW，WorldWideWeb）是Internet上最重要的服务之一，也常被简称为“W3”或“Web”。万维网主要使用超文本传输协议（HTTP，HypertextTransferProtocol）将互联网上的资源结合在了一起，并在浏览器中以Web页面的方式呈现给用户。每一个网络资源都有一个唯一的统一资源标识符（URI，UniformResourceIdentifier），因此在Web页面中可以以超文本链接的形式相互引用，从而把不同的页面关联在一起。在使用PC、手机等设备上网浏览的网站都属于WWW提供的服务。它与Internet并不是同一个概念，Internet上除了万维网还有其他服务，比如电子邮件服务、文件传输服务等。1.1.2Web架构Web服务器Web浏览器Web应用1.1.2Web架构Web架构是由Web服务器与Web浏览器两部分组成的，也可以称为是浏览器/服务器（B/S，Browser/Server）架构，如图所示。1.1.2Web架构Web服务器Web服务器是在实体机或虚拟机服务器设备中安装的服务器软件，在联网环境中可以接收用户在Web浏览器中输入的URL（UniformResourceLocator，统一资源定位符）地址，然后将该地址对应的文本、图片等内容发送给用户并显示在用户使用的Web浏览器中。Web服务器通常用于放置网页文件和数据供用户访问和下载。常用的Web服务器有Apache、IIS、Nginx等。1.1.2Web架构Web浏览器Web浏览器是安装在客户端（PC端或移动设备）的软件，用于访问和显示Web资源。用户打开Web浏览器后输入正确的URL地址就可以访问网络上的资源，Web资源一般会以HTML文件（后缀名为.html或.htm的文件）的形式发送给浏览器。浏览器可以解析和运行接收到的HTML文件，使其在浏览器中呈现带有文字、图像、超链接等丰富内容并且具有排版布局效果的画面，即Web页面。1.1.2Web架构Web浏览器目前常用的浏览器有Edge、Chrome、Firefox、Safari、Opera等，其图标样式如图所示。1.1.2Web架构Web应用Web应用不需要安装，其程序资源都部署在Web服务器中。用户通过在Web浏览器中输入不同的URL地址就可以远程访问Web应用。所有的Web应用都可以理解为存放在Web服务器端，并且可以在浏览器中呈现的软件。这些软件在浏览器中以Web页面的形式存在，包括文字、图片、音频、视频等内容，这些图形用户界面（GraphicUserInterface，GUI）也称为Web前端。Web应用需要调整更新时，只需要更新服务器端存放的相关内容即可，用户通过浏览器可以直接访问到最新的内容，免去了客户端与服务器端同时需要更新的麻烦。1.2Web前端技术基础1.2.1HTML技术1.2.2CSS技术1.2.3JavaScript技术1.2.1HTML技术1HTML简介2HTML起源3HTML特点1.2.1HTML技术HTML简介HTML来源于HypertextMarkupLanguage（超文本标记语言）的首字母缩写，是用于架构和呈现网页的一种标记语言，也是万维网（WorldWideWeb）上应用最广泛的核心语言。它使用标签的形式将网页内容划分结构层次。HTML还使用超文本链接（简称“超链接”）将网络上不同的Web资源进行关联，任何页面上的文字或图片都可以被指定为超链接，点击后可以跳转到相关联的其他Web资源页面。目前HTML标准由W3C组织（注：其全称为WorldWideWebConsortium，是万维网最居权威和影响力的国际技术标准机构）进行维护。1.2.1HTML技术HTML起源（一）HTML最早是在1991年由TimBerners-Lee以“HTML标签集”的形式公开发布的，包含了18个最早的元素标签。1993年由国际互联网工程任务组（IETF，TheInternetEngineeringTaskForce）正式发布了第一份HTML规范标准草案——“HypertextMarkupLanguage（HTML）InternetDraft”。由于当时HTML有很多不同的标准规范，因此HTML并没有正式的第一版。1.2.1HTML技术HTML起源（二）在1994年，IETF设立了HTML工作组来专门负责HTML技术的标准制定工作。1995年，第一个关于HTML的正式规范标准HTML2.0被提出，这也是未来所有HTML技术的基础。从1996年开始，HTML标准正式由W3C组织进行维护，同年IETF关闭了HTML工作组。1.2.1HTML技术HTML起源（三）1997年初HTML3.2版作为W3C推荐标准正式发布，这也是由W3C组织正式发布的第一版HTML标准规范，同年7月已经正式发布HTML4.0版。1999年12月W3C组织发布了HTML4.01版，对之前的HTML4.0版进行了一些修正，这也是目前使用年限最长的一个版本。在2000年，HTML基于4.01版的严谨语法规则成为了国际标准（ISO/IEC15445:2000）。1.2.1HTML技术HTML的特点简易性通用性平台无关性1.2.2CSS技术1CSS简介2CSS起源3CSS特点1.2.2CSS技术CSS简介CSS全称为CascadingStyleSheets（层叠样式表），用于为网页文档中的元素添加各类样式，如字体大小、背景颜色、对齐方式等，起到了网页文档美化作用。层叠样式表的工作原理是将样式规则存放在样式表中，网页文档通过对样式表的引用可为目标区域的元素添加样式。目前所有主流浏览器均支持层叠样式表。目前CSS标准由W3C组织进行维护。1.2.2CSS技术CSS起源（一）最早的CSS1（CascadingStyleSheets,level1）规范是在1996年12月由W3C组织正式推出，HakonWiumLie与BertBos为联合创始人。该版本主要包含了字体样式，颜色与背景样式，元素对齐方式，边框、内外边距和位置样式等属性设置。1.2.2CSS技术CSS起源（二）CSS2（CascadingStyleSheets,level2）规范在1998年5月正式发布。在CSS1的基础上，CSS2新增了元素的定位属性、新的字体属性例如阴影效果等。这一版本随后经历了漫长的修改过程，直至2011年6月才正式发布了CSS2.1版。目前CSS技术所保留的大部分功能都是基于CSS2发展而来的。1.2.2CSS技术CSS的特点内容与表现分离易于应用与维护提高浏览器加载速度1.2.3JavaScript技术JavaScript简介JavaScript是一种轻量级的直译式编程语言，基于ECMAScript标准（注:一种由ECMA国际组织通过ECMA-262标准化的脚本程序语言）。通常在HTML网页中使用JavaScript为页面增加动态效果和功能。JavaScript和HTML、CSS一起被称为是Web开发的三大核心技术，目前JavaScript已经广泛应用于Web开发，市面上绝大多数网页都使用了JavaScript代码。可以说当今所有浏览器都支持JavaScript，无需额外安装第三方插件。1.2.3JavaScript技术JavaScript起源JavaScript最早是在1995年的时候由网景（Netscape）公司的BrendanEich用了十天时间开发出来的，用于当时的网景导航者（NetscapeNavigator）浏览器2.0版。最初这种脚本语言的官方名称为LiveScript，后来应用于网景导航者浏览器2.0B3版的时候正式更名为JavaScript。1.2.3JavaScript技术JavaScriptvsJava因为名称的相近，JavaScript常被误以为和Java有关，但事实上它们是无论从概念还是设计上都毫无关联的两种语言。JavaScript是Netscape公司的BrendanEich发明的一种轻量级语言，主要应用于网页开发，无需事先编译；而Java是由Sun公司的JamesGosling发明的一种面向对象程序语言，根据应用方向又可分为J2SE（Java2标准版）、J2ME（Java2微型版）和J2EE（Java2企业版）三个版本，需要先编译再执行。JavaScript的主旨是为非程序开发者快速上手使用的，而Java是更高级更复杂的一种面向专业程序开发者的语言，比JavaScript难度大、应用范围更广。1.2.3JavaScript技术JavaScript的特点脚本语言简单性弱类型跨平台大小写敏感1.3Web前端新技术1.3.1HTML5技术1.3.2CSS3技术1.3.3jQuery技术1.3.1HTML5技术HTML5简介HTML5发展史HTML5特点1.3.1HTML5技术HTML5简介HTML5指的是HTML语言的第五次修改版，也是目前HTML语言的最新版。HTML5标准规范是2014年10月由W3C组织正式发布，该标准规范中新增了对于多媒体技术的支持，为PC端和移动平台带来无缝衔接的丰富内容。1.3.1HTML5技术HTML5简介HTML5的正式logo是在2011年4月被最终确定的，如图1-3所示。在对该logo进行定义的过程中，W3C组织称HTML5是“现代Web应用的奠基石”。1.3.1HTML5技术2.HTML5发展史HTML5经历了相当曲折的发展历史。最初在2004年6月，Mozilla和Opera公司向W3C组织呈递了一份提案，要求致力于提高当今主流浏览器的兼容性并制定新的Web标准。由于当时的最终结果为反对意见，因此该提案没有被列入议程。不久之后支持者另行成立了网页超文本应用技术工作组（WHATWG，WebHypertextApplicationTechnologyWorkingGroup），基于之前的提案草稿发布了WebApplication1.0标准规范。这两份标准规范后来合并形成了HTML5，并于2007年由W3C组织下新成立的HTML工作组接纳。1.3.1HTML5技术2.HTML5发展史2008年1月，WHATWG组织正式发布了该标准的第一份草案，当时大部分主流浏览器已经开始逐步对HTML5某些功能实现了支持。到2012年6月，WHATWG与W3C组织正式达成协议不再继续合作。W3C组织将继续完善HTML5标准规范，而WHATWG组织将取消HTML的版本号，将HTML5作为一个动态标准不断添加新的内容，没有最终版这一概念。2014年10月28日，经历了数百次修改的HTML5终于形成了W3C标准版。1.3.1HTML5技术2.HTML5发展史2008年1月，WHATWG组织正式发布了该标准的第一份草案，当时大部分主流浏览器已经开始逐步对HTML5某些功能实现了支持。到2012年6月，WHATWG与W3C组织正式达成协议不再继续合作。W3C组织将继续完善HTML5标准规范，而WHATWG组织将取消HTML的版本号，将HTML5作为一个动态标准不断添加新的内容，没有最终版这一概念。2014年10月28日，经历了数百次修改的HTML5终于形成了W3C标准版。1.3.1HTML5技术3.HTML5的特点元素标签的改进新增API错误处理机制1.3.2CSS3技术CSS3简介CSS3发展史CSS3特点1.3.2CSS3技术CSS3简介CSS3（CascadingStyleSheets,level3）是CSS的第三版，也是目前CSS的最新标准。CSS3语言的特点是模块化，其中各个模块都新增了新的功能，或者在CSS2的基础上对功能进行了扩展。其中新增了对于网页上各类元素边框、背景、文本和字体等内容的特效。CSS3还新增了动画技术，无需使用脚本代码即可实现网页元素的动画效果。1.3.2CSS3技术2.CSS3发展史最早的CSS3草案是在1999年6月公开发布的，这意味着CSS3标准规范的定制工作在上一个版本CSS2正式发布之前就已列入考虑范围。由于CSS3具有模块化的特征，不同的模块也处于各自的定制进度中。2012年6月，CSS工作组公布了CSS3草案中的50多个模块内容，其中有4个模块的规范标准已经作为正式版发布。1.3.2CSS3技术3.CSS3的特点完全向后兼容模块化的新增功能变形与动画效果1.4Web开发工具1.4.1AdobeDreamweaver1.4.2SublimeText1.4.3NodePad++1.4.4EditPlus1.4.1AdobeDreamweaverAdobeDreamweaver是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。该软件最初的1.0版是1997年由美国Macromedia公司发布的，后来该公司于2005年被Adobe公司收购。Dreamweaver也是当时第一套针对专业Web前端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。1.4.1AdobeDreamweaver1.4.2SublimeTextSublimeText的界面布局非常有特色，它支持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复关闭之前的编辑状态。1.4.2SublimeText1.4.3NodePad++NodePad++的名称来源于Windows系列操作系统自带的记事本NotePad，在此基础上多了两个加号，立刻带了质的飞越。这是一款免费开源的纯文本编辑器具有完整中文化接口并支持UTF-8技术。由于它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。1.4.3NodePad++1.4.4 VisualStudioCodeVisualStudioCode常被简称为VSCode，是微软公司出品的一款免费开源的开发工具，支持Windows、MacOS以及Linux操作系统。该软件具有语法高亮、代码自动补全、查看定义等功能，也内置了Git版本控制系统和命令行工具。1.4.4 VisualStudioCode该软件安装后可以在其内置的扩展程序商店安装扩展包来拓展软件功能，例如Chinese汉化包插件、Beautify代码格式化插件、AutoRenameTag自动补全HTML/XML头尾标签插件等，适合喜欢自己DIY配置工具的开发者。该软件支持多种编程语言，例如JavaScript、TypeScript、HTML、CSS，也可以通过下载扩展包来支持Java、Python、Go等其他编程语言。1.4.4VisualStudioCode1.4.5WebStormWebStorm是JetBrains公司旗下的一款JavaScript开发工具，适合进行Web前端开发以及与JavaScript相关的程序编写。该软件直接支持代码高亮、代码折叠、代码补全以及格式化等功能，无需安装额外的插件。正常版本是付费软件，但