《web前端技术》课件-第一章

Web前端技术签到扫码下载文旌课堂APP扫码签到签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。第一章Web前端开发基础/全课导航/第二章HTML5基础第三章文本、图像、多媒体和列表第四章超链接、表格和表单第五章CSS3基础第六章

CSS3的常用属性第七章CSS3布局第八章JavaScript基础第九章HTML5基础第十章函数、对象和数组第十一章

DOM和BOM第十二章事件第十三章

jQuery基础第十四章创建WJ自制女装品牌店网站Web前端开发基础第一章随着计算机与互联网技术的迅猛发展和日益成熟，承载着丰富资源的网站已经成了人们生活、工作、学习中不可或缺的信息交流平台，网站建设需求量急剧增加，与此同时，社会对Web前端开发人才的需求也急剧增加。本章将介绍Web前端开发的基础知识，为培养Web前端开发人才奠定基础。章节导读了解网站与网页。初步了解Web前端技术。熟悉Web前端开发工具。学习目标加强对互联网信息时代的了解。培养专业技能，夯实基础。素质目标网站开发基础知识1.1Web前端技术概述Web前端开发工具第一章Web前端开发基础/章节导航/实战演练——使用HBuilderX创建“金企鹅教育”项目1.21.3网站开发基础知识1.1

网页是人们上网时在浏览器中打开的一个个画面，是网站的基本信息单位。实际上，网页是一个文件，它可以存放在世界上某个角落的某台计算机中。1.1.1网页、网站与主页1.1网站开发基础知识

网页由哪些元素组成？1.网页页脚导航栏logo主体内容多媒体超链接Banner1.1网站开发基础知识多媒体图像文本列表超链接游览者角度设计者角度1.1.1网页、网站与主页超链接Logo：指网站的标志，通常采用企业的Logo，是网页的重要组成部分。

导航栏：网站中重要内容的概括，不仅可以让浏览者快速了解网站的主要内容，还可以引导浏览者轻松找到网站中的各个页面。Banner：中文直译为横幅，特指网页上方最醒目的广告区域，用于宣传网站或为商品做广告。1.1网站开发基础知识1.1.1网页、网站与主页超链接主体内容：不同类型的网站，网页的主体内容不同。例如，政府网站页面的主体内容是新闻公告等；商业网站页面的主体内容是商品信息等。页脚：一般位于网页的最下方，通常用于显示网站的版权信息、备案信息、法律声明信息、联系方式等。网页编辑模块1.1网站开发基础知识1.1.1网页、网站与主页超链接TIANZHUANJIAWA添砖加瓦1.1网站开发基础知识网站是一组相关网页的集合，是通过Internet向全世界发布信息的载体。人们可以通过网站发布自己想要公开的资讯，或者利用网站提供相关的网络服务。也可以通过浏览器访问网站，获取自己需要的资讯，或者享受网络服务。1.1网站开发基础知识2.网站

主页文件的默认名称一般为index或default，如

、

、

、

等。index.html

主页是指打开某个网站时显示的第一个页面，又称首页。每个网站都有一个主页，它是网站的入口网页，可以引导互联网用户浏览网站的其他页面。default.htmlindex.asp

index.aspx

1.1网站开发基础知识3.主页文旌课堂主页Internet中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域网通过网络互联设备连接而成的、全球最大的开放式计算机网络。1.1.2Internet、IP地址和域名1.1网站开发基础知识Internet上连接了不计其数的服务器和客户机，每个主机在Internet上都有唯一的地址，我们称这个地址为

IP地址（Internetprotocoladdress）。IP地址由4个小于256的数字组成，数字之间用点间隔，如

。“26”1.1网站开发基础知识1.1.2Internet、IP地址和域名由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。1.1网站开发基础知识1.1.2Internet、IP地址和域名超链接

在创建好网站后需要申请域名，并将网站上传到服务器上，这样其他人才能通过互联网访问网站。GAOSHOUDIANBO高手点拨1.1网站开发基础知识想一想思考：当用户想访问www上的网页或者其他资源时，应该怎么操作？

计算机又是怎么获取网页及其他相关文件的呢？1.1网站开发基础知识mStep1Step2需要先在浏览器的地址栏中输入该网页的网址（或者通过超链接的方式发送访问该网页的请求）；Step2

客户机（本地计算机）通过浏览器将网址发送给存放网页的服务器，服务器收到请求后，将网页文件及其他相关文件发送给客户机；客户机上的浏览器通过解释执行网页文件中的命令，将网页完整地显示在浏览器中。Step31.1网站开发基础知识1.1.3WWW、URL和HTTP

mStep1Step2Step2Step3

浏览器显示网页的过程1.1网站开发基础知识1.1.3WWW、URL和HTTP

WWW：中文称为万维网，也可简称为Web、3W等，是Internet最受用户欢迎的信息服务类型。WWW集中了全球的信息资源，其中的任何资源都由URL（uniformresourcelocator的缩写）标识，并利用HTTP（hypertexttransferprotocol的缩写）传送给用户。1.1网站开发基础知识1.1.3WWW、URL和HTTP

URL：统一资源定位符，也称为网址，是世界通用的负责给WWW上的资源（如网页）定位的系统。一个完整的URL由通信协议名称、域名（或IP地址）、资源在服务器中的路径和文件名4部分组成，如图所示。URL示例1.1网站开发基础知识1.1.3WWW、URL和HTTP

HTTP：超文本传输协议，负责规定浏览器和服务器怎样互相交流。1.1网站开发基础知识1.1.3WWW、URL和HTTP

Web前端技术概述1.2

HTML5、CSS3

和JavaScript被称为“Web前端三剑客”，是Web前端开发的核心技术。HTML5CSS3JavaScript1.2Web前端技术概述

HTML，全称hypertextmarkuplanguage，中文解释为超文本标记语言，是制作网页的标记语言。它主要用于定义网页结构，决定网页上显示的内容，解决“网页上有什么”的问题，是网页制作的基础。例如，使用HTML标签定义网页中的文本、图像等元素，如图所示。1.2.1HTML5仅使用HTML制作的网页1.2Web前端技术概述1.2.1HTML5

使用HTML编写的超文本文档称为HTML文档，扩展为.html

或.htm，它能独立于各种操作系统。浏览器能够识别并解析这些文档。

HTML5

是HTML的最新版本，它在HTML4.01的基础上进行了完善和优化，符合现代网络发展的要求，并得到了主流浏览器的良好支持。1.2Web前端技术概述

CSS，全称cascadingstylesheets，中文解释为层叠样式表。它主要用于定义网页中元素的样式，包括各元素的颜色、大小、位置和布局等。例如，使用CSS定义网页中文本、图像等元素的样式，如图所示。1.2.2CSS3

加入CSS样式的网页1.2Web前端技术概述1.2.2CSS3CSS可以直接写在HTML文档中，也可以单独存放为样式表文件（扩展名为.css）。CSS3是CSS的最新版本，虽然到目前为止完整的CSS3标准还未发布，但是其大部分特性已经得到了主流浏览器的支持。1.2Web前端技术概述

JavaScript，简称JS，是由Netscape公司开发的基于对象和事件驱动的脚本语言。

例如，使用JavaScript定义鼠标行为，当鼠标移至“Web前端技术”文本上时，文本内容显示为“HTML5+CSS3+JavaScript”，如图所示。加入JavaScript的网页JavaScript可以直接写在HTML文档中，也可以单独存放为JavaScript文件（扩展名为.js）。目前，几乎所有浏览器都可以很好地支持JavaScript。1.2.3JavaScriptWeb前端开发工具1.3正所谓“工欲善其事，必先利其器”。在实际开发中，选择合适的开发工具十分重要。Web前端开发用到的工具主要包括编辑器和浏览器。1.3Web前端开发工具1.3.1编辑器——HBuilderHBuilder是一款由DCloud推出的国产前端开发工具，是1+X证书制度试点培训用书（Web前端开发）中的专用编辑器。它有强大、完整的语法提示，且可新建uni-app、小程序等项目，还对Vue做了大量优化投入，开发体验远超其他开发工具。此外，HBuilder不仅支持Java插件、nodejs插件，还兼容了很多VSCode的插件及代码块，并且可以通过外部命令方便地调用各种命令行功能，从而极大地提升开发效率。超链接2019年2月13日，国务院印发的《国家职业教育改革实施方案》明确提出，在职业院校、应用型本科高校启动“学历证书+若干职业技能等级证书”（简称1+X证书）制度试点工作。1+X证书制度旨在鼓励学生在获得学历证书的同时，积极取得多类职业技能等级证书。此外，该制度对于解决长期以来职业教育与经济社会发展不够紧密的问题，调动社会力量参与职业教育的积极性，深化复合型技术技能人才培养模式和评价模式改革，畅通技术技能人才成长通道，促进就业创业具有重要作用。旗帜引领由于本课程兼顾1+X证书制度，并融入Web前端开发职业技能等级考试的知识点，所以本课程将使用

HBuilderX（HBuilder的最新版本）编辑器进行开发。1.3Web前端开发工具1.3Web前端开发工具1.3.1编辑器——AdobeDreamweaver

AdobeDreamweaver（简称DW）是一款集网页制作和网站管理于一身的所见即所得的网页代码编辑器。它不仅能够编辑网页，还可以有效地创建、管理网站，同时还提供了上传网站的便捷方法。1.3Web前端开发工具SublimeText（简称Sublime）是文本编辑器，同时也是先进的、轻量级的网页编辑器，能够编辑网页中涉及的各种类型的文件，如html、css、js、asp、jsp等。该编辑器对于不同的文件类型会提供相应的便利功能，同时提供便捷的联想输入。1.3.1编辑器——SublimeText1.3Web前端开发工具VisualStudioCode（简称VSCode）是一款由微软开发，同时支持Windows、MacOS、Linux等操作系统且开源的代码编辑器。它具有代码补全、代码片段和代码重构等功能。此外，该编辑器支持用户个性化配置（如改变主题颜色），还拥有众多插件，为开发者提供了丰富的扩展库。1.3.1编辑器——VisualStudioCode

1.3Web前端开发工具WebStorm是由JetBrains软件公司开发的商业付费版Web开发工具，同时支持Windows、MacOS、Linux等操作系统。它内置了非常强大的代码提示功能和各种丰富的插件，方便用户使用。同时，该编辑器还集成了对Vue、React等框架的支持。1.3.1编辑器——WebStorm1.3Web前端开发工具浏览器在Web前端开发中用于运行和测试网页文件，也是用户访问互联网上各种网页的必备工具。1.3.2浏览器

你知道的游览器有哪些？1.3Web前端开发工具1.3.2浏览器

浏览器开发商介绍图标Chrome（谷歌）

Google一款设计简单、高效的浏览器，全球市场占有率最高，是开发人员常用的测试浏览器Firefox（火狐）Mozilla一款风格简洁、安全性高、拓展性强的浏览器，全球市场占有率仅次于ChromeSafariAppleMacOS和IOS操作系统内置浏览器，渲染网页的速度相对较快InternetExplorerMicrosoftWindows操作系统内置浏览器，但功能相对较少EdgeMicrosoftWindows10操作系统新版浏览器，相较于IE浏览器更为简洁、流畅

本书将使用目前市场占有率最高的Chrome浏览器解释网页文件。超链接简单了解Web前端开发技术和工具之后，相信大家已经跃跃欲试，想要亲自动手创建一个Web前端开发项目了。下面就将带领大家使用HBuilderX创建“金企鹅教育”项目。——使用HBuilderX创建“金企鹅教育”项目实战演练WEB扫一扫超链接步骤1

打开HBuilderX，选择主界面中的“新建项目”选项，如图所示。——使用HBuilderX创建“金企鹅教育”项目实战演练WEBHBuilderX的主界面超链接步骤2

弹出“新建项目”对话框，根据项目需要选择项目类型，如“普通项目”；

输入项目名称“JinqieProject”；单击“浏览”按钮，在弹出的“选择文件夹”对话框中选择项目存储地址，如“D:/HBuilderProjects”；

根据需要选择模板，如“空项目”；根据需要勾选“上传到Git代码托管平台”，本项目不上传，故不勾选；单击“创建(N)”按钮，如图所示。——使用HBuilderX创建“金企鹅教育”项目实战演练WEB“新建项目”对话框超链接在实际开发中，项目中所有的文件夹和文件最好都能使用英文命名，以避免代码编译过程中出现乱码。GAOSHOUDIANBO高手点拨——使用HB