项目1 Web 前端技术基础 互联网(又称因特网或国际网络。互联网始于1969 年美国的阿帕网,是网络 Internet) 与网络之间联成的庞大网络。这些网络以一组通用的协议相联接,形成逻辑上的单一巨大 internenterne 国际网络。严格意义上说,t泛指互联网,而It则特指因特网,但通常两者都被 称为互联网。将计算机网络互相联接在一起的方法可称作“网络互联”,在此基础上发展出 覆盖全球的互联网络称互联网,即互相连接在一起的网络结构。互联网并不等同于万维网。 万维网只是一个基于超文本相互链接而成的全球性系统,是互联网所能提供的服务之一。 本项目主要通过介绍互联网基础、网页的基本组成元素、网站类型和结构、Web标准、 布局结构和网页制作的常用软件网站开发流程等,让大家对互联网的基础知识和网页设计 有一个初步的认识。 了解Web前端基础和互联网基础 掌握网页中的元素 掌握网站开发流程 掌握Web前端开发工具的使用 熟悉网页设计元素组成 熟悉开发网站的基本流程 熟练运用常用的Web前端开发工具 教学重点互联网基础、开发工具的使用 教学难点VSCode或HBuilder工具的使用 推荐教学方式讲授、案例教学、问题导向或讨论 推荐学时2学时 推荐学习方法动手安装工具,并利用工具创建页面 任务1.1 Web 简介 Web前端:浏览器展现给用户的所有内容(设计+布局+特效+交互)。 Web前端的发展:随着时代的发展,在这样一个“体验至上、视觉为王”的时代,现在的 互联网产品不再像以前那样只追求功能的实现,而是更在乎视觉效果及用户体验。基于这 样的时代需求,Web前端在产品组成中起到了举足轻重的作用。 职业方向:网站开发(PC+移动)、游戏制作、App开发等。 开发语言:HTML+CSS+JavaScript。 通过百度百科了解Web前端开发类型和Web工作原理。 1.Web前端开发类型 1)网站 网站是在互联网上拥有域名或地址并提供一定网络服务的主机,是存储文件的空间,以 服务器为载体。人们可通过浏览器等进行访问、查找文件,也可通过远程文件传输(FTP)方 式上传、下载网站文件。 2)微信公众号 微信公众号是开发者或商家在微信公众平台上申请的应用账号,该账号与QQ 账号互 通,在平台上实现和特定群体的文字、图片、语音、视频的全方位沟通、互动,形成了一种主流 的线上及线下微信互动营销方式。 3)手机App 手机App主要指安装在智能手机上的软件,可以完善智能手机原始系统的不足并能体 现个性化的特点,使手机功能更完善,并为用户提供更丰富的使用体验。 手机App根据安装来源不同,又可分为手机预装软件和用户自己安装的第三方应用软 件。手机预装软件一般指手机出厂自带,或第三方刷机渠道预装到消费者手机当中且消费 者无法自行删除的应用或软件。除了手机预装软件之外,还有用户从手机应用市场自己下 载并安装的第三方手机App应用,下载类型主要集中在社交及社区类软件。 手机App主要类别分为原生App、WebApp、混合App。 (1)原生App:基于手机本地智能操作系统而选择不同的App开发语言的App开发 服务。例如,使用Android(本地智能操作系统)开发语言Java或者使用NativeC/C++开发 出来的App都称为原生App。通俗地说,个人在应用商店下载的App都是原生App。 (2)WebApp:基于Web网页的系统和应用有点类似于垂直发展的社群,主要是在拓 展业务发展范围,增加用户量。WebApp一般是基于网页上的,但是出于用户体验的需要, 2 Web 前端基础项目化教程（电子活页式） 任务1.1 Web 简介.mp4 一般会将WebApp的UI界面向有原生App设计感觉的UI界面靠拢。网页编辑器、QQ 空间、百度新闻、百度视频、百度图片等都算是WebApp。 (3)混合App:介于WebApp和原生App两者之间的App,既可以调用原生App(重 要的业务页面、复杂的动画交互、系统UI等),又具有WebApp跨平台优势,开发速度也要 比Web模式和原生开发模式快很多。 互联网产品的特点如表1-1所示。 表1-1 互联网产品的特点 类 型适 用 性便 捷 性推广成本 网站宣传、展示能直接访问低 微信公众号交互性及微信营销需要先关注推广成本较低 移动App 特定功能需要先安装才能使用推广成本较高 2.Web工作原理 在Web服务器上,主要以网页(Webpage)的形式来发布多媒体信息,网页采用超文本 标记语言HTML(hypertextmarkuplanguage)来编写。当使用浏览器连接到Web服务器 并获取网页后,通过对网页HTML文档的解释及执行,将网页所包含的信息显示在用户的 屏幕上,如图1-1所示。 图1-1 Web工作原理 任务1.2 互联网基础 互联网看似很复杂,如果从它的工作方式上看,可以划分为两部分。①边缘部分:由所 有连接在互联网上的主机组成。这部分是用户直接使用的,用来进行通信(传送数据、音频 或视频)和资源共享。②核心部分:由大量的网络和连接这些网络的路由器组成。这部分 是为边缘部分提供服务的(提供连通性和交换)。如图1-2所示。 3 项目1 Web 前端技术基础 任务1.2 互联 网基础.mp4 Web前端基础项目化教程（电子活页式） 图1-2 互联网组成 通过百度百科了解互联网的基础知识。 1.计算机网络 Internet作为最庞大的计算机网络,为畅通无阻地交换信息提供了便利。计算机网络 按地理覆盖范围可分为局域网、城域网和广域网。 1)局域网 局域网(localareanetwork,LAN)是指在某一区域内由多台计算机互联而成的计算机 网络,一般是方圆几千米以内。局域网可以实现文件管理、应用软件共享、打印机共享、工作 组内的日程安排、电子邮件和传真通信服务等功能。局域网是封闭型的,可以由办公室内的 两台计算机组成,也可以由一个公司内的上千台计算机组成。 2)城域网 城域网(metropolitanareanetwork,MAN)是指介于LAN和WAN之间,在一个城市 范围内建立的网络。城域网提供一个城市的信息服务。 3)广域网 广域网(wideareanetwork,WAN)是指连接不同地区局域网或城域网计算机并进行通 信的远程网。通常跨接很大的地理范围,所覆盖的范围从几十千米到几千千米,它能连接多 个地区、城市和国家,或横跨几个洲并能提供远距离通信,形成国际性的远程网络。 2.Itet相关概念1)W(n) WW(n) (r) (e) WWW是环球信息网的缩写,也作Web、WWW 、W3,英文全称为worldwideWeb,中 文名字为“万维网”“环球网”等。WWW上分为Web客户端和Web服务器程序。WWW 可以让Web客户端(常用浏览器)访问Web服务器上的页面。Web是一个由许多互相链接 的超文本组成的系统,通过互联网访问。在这个系统中,每个有用的事物称为一种“资源”, 并由一个统一资源定位符(URL)标识。各种资源通过超文本传输协议(hypertexttransfer protocol)传送给用户,用户通过单击链接来获得资源。 任何一个网站在初建时都应参考W3C标准。 2)IP地址 Internetprotocoladdres) IPaddre 互联网协议地址(简称为IP地址( s),是分配给用 户上网使用的网际协议(InentpoooIP) v trertcl,的设备数字标签。常见的IP地址分为IP4 与IPv6两大类,但是也有其他不常用的小分类。 IP地址就是给每个连接在Internet上的主机分配的一个32bit地址。bit(比特)换算成 项目1 Web 前端技术基础 字节,就是4个字节(相当于2个汉字)。例如,一个采用二进制形式的IP 地址是 00001010000000000000000000000001,这么长的地址,人们记忆起来非常困难。为了方便人 们的使用,IP 地址经常被写成十进制的形式,中间使用符号“.”分开不同的字节。于是,上 面的IP 地址可以表示为10.1。 0. 0. IP 地址应用主要分为A、B、C三类,而D、E两类是保留和专用的,如图1-3所示。 图1-3 五类互联网地址 A、B和C类IP 地址的使用范围如表1-2所示。 表1- 2 A 、B和C类IP 地址的使用范围 类型 范围 A B C 0.0.~255.255(大型网络,A类网络有127 个,每个网络能容纳16777214 台主机) 0.0127.255. 128.0.~255.255(中等规模网络,B类网络有16382 个,每个网络能容纳6万多台主机) 0.0191.255. 192.0.~255.255(小型网络,C类网络可达209 万余个,每个网络能容纳254 台主机) 0.0223.255. 3)域名 网域名称系统(domainnamesystem,DNS)有时也简称为域名,是互联网的一项核心服 务。它作为可以将域名和IP 地址相互映射的一个分布式数据库,能够使人更方便地访问互 联网,而不用去记住能够被机器直接读取的IP 地址数串。 国际域名:比如,.com 用于商业公司,.et用于网络服务,og用于组织协会等,.o n.rgv 用于政府部门,edu用于教育机构,mil用于军事领域,int用于国际组织。顶级域名:共(.) 有243个国家和地(.) 区的代码。比如,(.) CN 代表中国,UK 代表英国, ...US 代表美国。 新顶级域名:biz、info、name 、pro、aero、coop、museum 。 4)TCP/IP TCP/IP 是Internet的核心,利用TCP/IP 可以方便地实现多个网络的无缝连接。通常 在Internet上某台主机有IP 地址,利用TCP/IP 就可以向Internet上的其他任一主机发送 IP 分组。 5)URL URL 是对可以从互联网上得到资源的位置和访问方法的一种简洁表示,是互联网上标 Web前端基础项目化教程（电子活页式） 准资源的地址。互联网上的每个文件都有唯一的URL,它包含的信息指出了文件的位置以 及浏览器应该怎么处理它。 6)HTTP HTTP是一个简单的请求—响应协议,它通常运行在TCP之上。它指定了客户端可 能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCI 形 式给出,而消息内容则具有一个类似MIME的格式。 7)HTTP状态码 当浏览者访问一个网页时,用户所用的浏览器会向网页所在服务器发出请求。当浏览 器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头,用于 响应浏览器的请求。 下面是常见的HTTP状态码。 200:请求成功。 301:资源(网页等)被永久转移到其他URL 。 404:请求的资源(网页等)不存在。 500:内部服务器错误。 8)Web服务器 Web服务器一般指网站服务器,是指驻留于互联网上某种类型计算机的程序,可以向 浏览器等Web客户端提供文档,也可以放置网站文件并让全世界的用户浏览,还可以放置 数据文件并让全世界的用户下载。目前最主流的三个Web服务器是Apache、Nginx、 IS 。 9)浏览器 浏览器是一种用于检索并展示万维网信息资源的应用程序,这些信息资源可为网页、图 片、影音或其他内容,它们由URL标识。信息资源中的超链接可让用户方便地浏览相关 信息。不 同用户使用的浏览器不同,因此制作网页时,通常需要该网页兼容所有的主流浏览 器,目前, Itrelrr)、zlaFieo谷歌浏览 常见的有IE浏览器(nentExpoe火狐浏览器(Moirfx)、 器(GoogleChrome),图1-4所示为这些常见浏览器的图标。 图1-4 常见浏览器图标 (1)IE浏览器。Ir是微软公司推出的一款网页浏览器。原称MinternetExplore7、8、9、10 、11版本)。 crosoft InternetExplorer(6版本以前)和WindowsInternetExplorer( (2)火狐浏览器。MozilaFirefox是一款由Mozila公司开发的自由及开放源代码的 网页浏览器。 (3)谷歌浏览器。GoogleChrome是一款由Google(谷歌)公司开发的网页浏览器,该 浏览器基于其他开源软件撰写,目标是提升稳定性、速度和安全性,并创造出简单且有效率 的使用者界面。 以上是目前互联网用户的常用的浏览器。对于一般网站来说,只要兼容这三种浏览器, 就能满足绝大多数用户的浏览需求。 10)路由器 路由器(router)是连接互联网中各局域网、广域网的设备,它会根据信道的情况自动选 择和设定路由,以最佳路径并按前后顺序发送信号。路由器是互联网络的枢纽,又称网关设 备,其作用相当于“交通警察”。目前路由器已经广泛应用于各行各业,各种不同档次的路由 器产品已成为实现各种骨干网内部连接、骨干网间互联,以及骨干网与互联网互联互通业务 的主要设备。 路由器和交换机之间的主要区别是:交换机发生在OSI参考模型第二层的数据链路 层,而路由器发生在第三层的网络层。这一区别决定了路由器和交换机在移动信息的过程 中需使用不同的控制信息,所以说两者实现各自功能的方式是不同的。 路由器用于连接逻辑上分开的多个网络。所谓逻辑网络是代表一个单独的网络或者一 个子网。当数据从一个子网传输到另一个子网时,可通过路由器的路由功能来完成。因此, 路由器具有判断网络地址和选择IP路径的功能,它能在多网络互联环境中建立灵活的连 接,可用完全不同的数据分组和介质访问方法连接各种子网。路由器只接受源站或其他路 由器的信息。 任务1.3 网站的分类 互联网已经发展多年,网络早已成为我们生活中不可或缺的一部分了,Internet、局域网 及手机移动互联网等,生活中处处反映着网络的力量。网络的快速发展也拉动了一些新兴 产业,如网络游戏、网络聊天、网上影视,都在飞速发展。同时,网络传媒、电子商务等给更多 企业带来了无限的商机。互联网具有强大功能的元素是网站,在互联网上的交流离不开 网站这个载体。当然,具有载体功能的网站也是有一定规则和标准的,并不是随意生 成的。 大家参考下面“相关知识与技能”中的“网页和网站”部分内容,能够分清各种类型的 网站。 1.网页和网站 网页实际上是一个HTML 文件,用户用浏览器负责解读这份文件。网站是有许多 HTML文件集合而成的。两者相互关联:网站是由网页集合而成的,而大家通过浏览器所 看到的画面就是网页。 7 项目1 Web 前端技术基础 任务1.3网站的 分类.mp4 Web前端基础项目化教程（电子活页式） 1)网页 网页(Webpage)作为一个文件存放在世界某个角落的某一台计算机中,而这台计算机 必须是与互联网相连的。网页经由网址(URL)识别与存取,是万维网中的一“页”,采用了 超文本标记语言格式(静态网页文件扩展名为.tml或.tm )。用户在浏览器中输入网址 hh 后,经过一个复杂而又快速的过程,网页文件被传送到用户的计算机,通过浏览器解释网页 的内容后,再展示给用户。 2)网站 网站(Website)是指在互联网上根据一定的规则制作并用来展示特定内容的相关网页 的集合。简单地说,网站是一种通信工具,人们可以通过网站发布自己想要公开的信息,或 者利用网站提供相关的网络服务。人们可以通过浏览器访问网站,获取自己需要的信息或 者享受网络服务。衡量一个网站的性能通常从网站空间大小、网站位置、网站链接速度(俗 称“网速”)、网站软件配置、网站提供服务等几方面考虑,最直接的衡量标准是这个网站的真 实流量。 (1)网站的类型。主要分为以下类型。 ①按照制作技术划分。按照制作技术可以分为静态网站和动态网站。 静态网站是指全部由HTML(标准通用标记语言的子集)代码格式页面组成的网站,即 网站主要由静态化的页面和代码组成,所有的内容包含在网页文件中,网页上也可以出现各 Flash 种动态视觉效果,如GIF 动画、h动画、滚动字幕等。静态网页文件通常使用.tml、 .shtml等文件扩展名,实际存在的网页无法处理用户的交互信息,如图1-5所示。 图1-5 静态网站的页面 项目1 Web 前端技术基础 动态网站并不是指具有动画功能的网站,而是指网页内容可根据不同情况动态变更的 网站,一般情况下动态网站通过数据库实现动态交互。动态网站除了要设计网页外,还要通 过创建数据库和编写程序来使网站具有更多的高级功能。动态网页文件通常以.p和. jsphp 等作为文件扩展名。动态网站由程序动态生成,能实现如用户注册、信息发布、产品展示、订 单管理等交互功能,如图1-6所示。 图1-6 动态网站的页面 ②按照网站内容划分。按照网站内容可以分为门户网站、企业网站、个人网站、专业网 站及职能网站。 a. 门户网站:指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。门 户网站最初提供搜索服务、目录服务。后来由于市场竞争日益激烈,门户网站不得不快速地 拓展各种新的业务类型,希望通过门类众多的业务来吸引和留住互联网用户,以至于目前门 户网站的业务包罗万象,成为网络世界的“超市”。 举例来说,搜狐是全球最大的中文门户网站,为用户提供24 小时不间断的最新资讯及 搜索、邮件等网络服务。网站内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体 育赛事等。 ogeChshct 打开Golrome 浏览器,在地址栏中输入www.ou.om.,按Ener键打开“搜 狐”网站,如图1-7所示。 b. 企业网站:在企业网站可以查询到该企业的业务范围、最新消息、针对媒体发放的信 息,以及针对投资者的信息等。如图1-8所示为华为官网首页。 c个人网站:在个人网站可以查找到某个人所发布的一些信息,比如可能为个人文字 作品、(.) 图片、声音、影片以及联系方式等,如图1-9所示。 d. 专业网站:也叫垂直门户网站,是以该网站自己的编辑方式集成其他媒体关于某一 Web前端基础项目化教程（电子活页式） 图1-7 搜狐首页 图1-8 华为官网首页 特定领域的报道,并托管在自己的服务器上进行展示。一般来说,科技、法律、体育、娱乐、财 经、律师等领域比较容易出现专业网站。如图1-10 所示为中国法院网的首页。 e职能网站:为了体现某种职能或在某一领域发挥作用而开发的网站。如图1-11 所 示为中国(.) 教育考试网的首页。 10