《Web前端技术（HTML+CSS+JavaScript）》课件-第1章 Web技术概述

第1章Web技术概述学习目标123了解Web的由来及其与Internet的关系了解Web技术相关概念了解Web应用开发及Web前端开发常用工具4掌握HbuilderX的使用本章架构★★★1.1Web的起源1.2Web技术相关概念1.3Web应用开发★1.4Web前端开发常用工具★1.5HBuilderX的使用1.1Web的起源1.1Web的起源

Internet，中文正式译名为因特网，又叫做国际互联网，它是由那些使用公用语言互相通信的计算机连接而成的全球网络。目前Internet已经是世界上规模最大、发展最快的计算机互联网。从1991年开始Internet连网计算机的数量每年翻一番，到2000年已超过100万个网络，1亿台计算机和10亿个用户使用Internet。截至2020年5月31日，全球互联网用户数量达到46.48亿，占世界人口数量的59.6%。2000-2020年，世界互联网用户数量增长了近12倍。1

Internet的诞生1.1Web的起源

Internet这一影响人们生活的技术源自于美国1969年开始实施的Arpanet计划，其目的是建立分布式的、存活力极强的全国性信息网络。1972年，由50所大学和研究机构参与连接的Internet网最早的模型Arpanet第一次公开向人们展示。到1980年，Arpanet成为Internet最早的主干网络。20世纪80年代初，２个著名的科学教育网CSNET和BITNET又先后建立。1984年，美国国家科学基金会NSF规划建立了13个国家超级计算中心及国家教育科研网(NSFNET)，替代Arpanet的主干地位。NSFNET网络于1989年改名为Internet，且向公众开放，随后，Internet网开始接受其它国家地区接入。从此，Internet便在全球各地普及起来。1

Internet的诞生1.1Web的起源（1）E-mail：电子邮件。具有速度快、成本低、方便灵活的优点，用户之间通过发送/接收电子邮件可以实现信息的交换。（2）FTP（FileTransferProtocol）：文件传输协议。主要用于文件的分享，由于登录FTP的用户名和密码会以明文传输到服务器端，因此在安全性要求高的环境中较少应用。（3）BBS（BulletinBoardSystem）：电子公告牌。主要用以信息的共享和用户之间的互动，现代已发展成为功能前的社区，可以实现信息公告、线上交谈、分类讨论、经验交流、文件共享等。（4）WWW（WorldWideWeb）：简称3W，也称Web，是Internet上集文本、声音、图像、视频等多媒体信息于一身的全球信息资源网络，是Internet上的重要组成部分。2

Internet的主要服务1.1Web的起源

1989年夏天，Tim开发世界第一个Web服务器和第一个Web客户机；同年12月，将其发明正式命名为WorldWideWeb。1990年，Tim以HTML为基础在NeXT电脑上发明了最原始的Web浏览器。1991年8月6日，Tim建立世界上第一个网站（http://info.cern.ch）。该网站解释了WorldWideWeb是什么，以及如何使用网页浏览器和如何建立一个网页服务器等。至此，Web正式诞生。1994年10月，Tim在麻省理工创立WorldWideWebConsortium（万维网联盟），该联盟的简称为W3C，是Web技术领域最具有权威和影响力的国际中立性技术标准机构。3

Web的诞生1.2

Web技术相关概念1.2

Web技术相关概念

WWW可以简称为3W或Web，中文名为万维网，它是Internet上最核心的部分。万维网是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。WWW在使用上分为Web服务器端和Web客户端，用户通过Web客户端可以访问Web服务器端的页面。1WWW1.2

Web技术相关概念

Website的中文名称是网站，是指在互联网上，根据一定的规则，使用HTML、CSS、JavaScript等代码语言制作的用于展示特定内容的相关网页的集合，有可供管理人员操作的后台及用户使用的前台。简单地说，Website是一种通讯工具，就像布告栏一样，人们可以通过Website来发布或访问资讯，也可以提供或享受服务。2Website1.2

Web技术相关概念

URL（UniformResourceLocator，统一资源定位器），俗称网址，它是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。在WWW上浏览或者查询信息，必须在网页浏览器上输入查询目标的地址。

URL的一般格式如下：协议：//主机地址（lP地址）+目录路径+参数日常使用的协议主要有ftp（文件传输协议）、file（本地文件）、telnet（远程登陆协议）、http（超文本传输协议）、https（超文本传输安全协议）等。3URL1.2

Web技术相关概念例如：ftp://java:java@1file:///c:/ProgramFiles/Java/jdk1.8.0_172/bintelnet://3401https:///test/index.html?key1=valuel&key2=value2URL的参数是提供给服务器的额外参数，紧跟在路径后面，使用“?”与路径分割。参数可以有一组或多组，通过键值对的方式进行设置，使用“=”连接键值对，多组参数使用“&”进行连接。查询参数不是必须的，如果不需要，则可以不出现在URL上。3URL1.2

Web技术相关概念

Web标准（WebStandard），是一系列标准的集合，主要包含：结构标准（XML、HTML、XHTML）、表现标准（CSS）、行为标准（DOM、JavaScript）。4Web标准1.2

Web技术相关概念

Web浏览器，简称浏览器，是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。网页浏览器主要通过HTTP协议与网页服务器交互并获取网页，这些网页由URL指定，文件格式通常为HTML，并由MIME在HTTP协议中指明。Web浏览器是计算机中一种重要的应用软件，很多有实力的IT企业竞相设计开发自己的浏览器，并不断推出新的版本。5Web浏览器1.2

Web技术相关概念浏览器的内核，也就是浏览器所采用的渲染引擎。渲染引擎决定了浏览器如何显示网页的内容以及页面的形式。由于不同的浏览器内核对网页代码的解释会有所不同，因此同一网页在不同内核的浏览器中的渲染（显示）效果也可能不同，这也是Web页面开发者需要在不同内核的浏览器中测试网页显示效果的原因。

（1）InternetExplorer（IE）浏览器此款浏览器是Microsoft（微软）公司为抵抗当时主流的网景浏览器而创造的。因其与Windows操作系统进行了捆绑发行，使得IE浏览器的应用依旧较为广泛。IE浏览器的内核为Trident，俗称IE内核。5Web浏览器1.2

Web技术相关概念

（2）Opera浏览器

Opera桌面浏览器是一款来自挪威的极为出色的浏览器。Opera具有速度快、节省系统资源、订制能力强、安全性高及体积小等特点。Opera浏览器的内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核。

（3）Chrome浏览器

Chrome是一款由Google（谷歌）公司开发的网页浏览器，具有速度快、不容易崩溃，并且更为灵活、更加安全等特点，同时还包含很多各式各样的插件。Chrome浏览器此前使用WebKit内核，现在使用Blink内核，俗称Chrome内核。5Web浏览器1.2

Web技术相关概念（4）Firefox（火狐）浏览器

此款Mozilla公司旗下的产品，使用的内核为Gecko，是开源内核，受到了很多的欢迎。

（5）Safari浏览器

此款浏览器是苹果公司的产品，使用的是WebKit内核。

（6）国产品牌浏览器

如360浏览器、猎豹浏览器、2345浏览器，大多采用IE+Chrome双内核模式；又如搜狗浏览器、遨游浏览器、QQ浏览器，大多使Trident（兼容模式）+Webkit（高速模式）两种内核的组合模式；百度浏览器的内核为IE内核。5Web浏览器1.2

Web技术相关概念Web服务器主要提供Web浏览服务，服务器是一种被动程序，只有当Internet上运行在其他计算机中的浏览器发出访问请求时，服务器才会响应。Web服务器可以解析HTTP协议，能接受HTTP请求，会返回HTTP响应，Web浏览器就可以获取到网页（HTML），以及CSS、JavaScript、音频、视频等各类资源，经过浏览器的解析、渲染、整合，最终呈现为可被用户浏览的Web页面。Web服务访问请求及响应过程如图所示。6Web服务器1.3

Web应用开发1.3

Web应用开发

Web应用开发分为Web前端开发和Web后端开发。Web前端开发主要涉及直接与用户交互的网页，使用的技术包括HTML、CSS、JavaScript等。Web后端开发（即Web应用系统的服务端开发）主要涉及Web服务、中间件、数据库等。1.4

Web前端开发常用工具1.4

Web前端开发常用工具

“工欲善其事，必先利其器”。单纯从编写代码角度看，完全可以通过记事本软件来进行Web前端页面代码的编写，但效率很低。因此，寻找合适的开发工具来提升工作效率是至关重要的。下面列举几个常见的Web前端开发工具。1.4

Web前端开发常用工具

EditPlus是一款小巧但功能强大的可处理文本、HTML和程序语言的Windows编辑器。EditPlus是可以取代记事本的文字编辑器，拥有无限制的撤消与重做、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。EditPlus是一个非常好用的HTML编辑器，它除了支持颜色标记、HTML标记外，还内建完整的HTML&CSS指令功能，对于习惯用记事本编辑网页的开发者，能起到事半功倍的效果。1

EditPlus1.4

Web前端开发常用工具

SublimeText是一款轻量级的编辑器，优雅小巧、启动速度快，支持多种编程语言。它是一款跨平台的编辑器，同时支持Windows、Linux、MacOSX等操作系统。SublimeText还具有良好的扩展能力和完全开放的用户自定义配置，以及实用的编辑状态恢复功能，它的快捷键十分易用，可极大地减少代码开发的劳动强度。2

SublimeText1.4

Web前端开发常用工具

Atom是Github专门为程序员推出的一个跨平台文本编辑器。它具有简洁和直观的图形用户界面，支持HTML、CSS、JavaScript等网页编程语言。Atom支持宏，可以自动完成分屏功能，同时集成了文件管理器。3

Atom1.4

Web前端开发常用工具

Dreamweaver是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，可以无需编写任何代码就能快速创建Web页面。同时，其成熟的代码编辑工具更适用于Web开发高级人员的创作。4

Dreamweaver1.4

Web前端开发常用工具

WebStorm与IntelliJIDEA同源，是JetBrains公司旗下的一款开发工具，它被众多开发者誉为“最强大的HTML5编辑器”。5

WebStorm1.4

Web前端开发常用工具

VisualStudioCode（简称VSCode），它是一款针对于编写现代Web和云应用的跨平台源代码编辑器，可运行于Windows、macOS和Linux操作系统。VSCode为开发者们提供了对多种编程语言的内置支持，同时也为这些语言提供丰富的代码补全和导航功能。6

VisualStudioCode1.4

Web前端开发常用工具

HBuilder是一款优秀的国产Web前端开发工具。HBuilderX是HBuilder的升级版，它们都是由DCloud（数字天堂）公司推出的，专门为Web前端开发者服务的通用集成开发环境（IDE）。在下一小节，将对其进行更加全面的介绍。7

HBuilder和HBuilderX1.5

HBuilderX的使用1.5

HBuilderX的使用

HBuilderX是一款优秀的国产Web前端集成开发环境，其主体由Java编写。它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。开发便捷是HBuilderX的最大优势，通过完整的语法提示，大幅提升HTML、CSS、JavaScript的开发效率。1.5

HBuilderX的使用可以在其官网（https://www.dcloud.io/hbuilderx.html）下载最新版的HBuilderX。HBuilderX目前支持Windows系统和macOS系统，如图所示，下载时应根据计算机系统的实际情况选择适合的版本。在对两种操作系统支持的基础上，又分为标准版和App开发版。完成Web前端页面开发，下载标准版即可；如果做App开发，则建议下载App开发版，否则需要在插件管理中安装uni-app插件。1下载HBuilderX1.5

HBuilderX的使用解压下载到的HBuilderX压缩包，如图所示，双击HBuilderX.exe运行该软件。2运行HBuilderX1.5

HBuilderX的使用进入HBuilderX主界面，依次点击“文件”→“新建”→“项目”(或按下Ctrl+N组合键，以触发快速新建)，打开新建项目对话框，如图所示。3使用HBuilderX新建项目1.5

HBuilderX的使用接下来，需要填写新项目的基本信息。应在如图所示的A处填写新建项目的名称；在B处填写（或选择）项目保存的路径（注意：更改此路径后，HBuilderX会记录，下次新建项目时，