HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第1章 HTML5+CSS3网页设计概述

第1章HTML5+CSS3网页设计概述《HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）》学习目标/Target了解网页的组成，能够描述网页的各个组成部分。了解网页的相关名词，能够解释常见的网页名词。熟悉Web标准，能够阐明Web标准的概念。熟悉网页制作技术，能够说明HTML、CSS和JavaScript在网页制作中的作用。熟悉浏览器的基本概念，能够归纳浏览器的功能和Chrome浏览器的主要优势。知识目标学习目标/Target掌握VisualStudioCode编辑器的下载和安装，能够独立下载和安装VisualStudioCode编辑器。掌握扩展的安装，能够独立完成中文语言扩展和LiveServer扩展的安装。掌握VisualStudioCode编辑器的简单使用，能够使用VisualStudioCode编辑器进行代码开发。技能目标通过认识网页的基本概念和网页制作技术，提升自身的信息技术素养。素养目标章节概述/Summary随着移动互联网的发展，人们可以通过手机、平板电脑等移动设备来浏览网页，包括查看新闻、观看图像和视频等。网页已经成为人们获取信息的重要媒介，它可以展示文本、图像和视频等可视化内容。在学习网页制作之前，了解网页的相关知识是非常重要的，这将为初学者学习后面的内容打下坚实的基础。本章将对网页的相关知识进行讲解。目录/Contents1.11.21.3网页简介网页制作技术浏览器1.4VisualStudioCode编辑器网页简介1.1什么是网页？1.1网页简介1.1网页简介网页究竟是什么？说到网页，其实大家并不陌生浏览新闻查询信息网上购物1.1网页简介网页可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。1.1.1网页的组成了解网页的组成，能够描述网页的各个组成部分。学习目标网页主要由文字、图像和超链接等元素组成，其中超链接为单击可以跳转到其他页面的元素。除此之外，网页中还可以包含音频、视频以及动画等元素。1.1.1网页的组成1.1.1网页的组成中国大学MOOC网站首页的源代码包含一些特殊的符号和文本。而浏览网页时看到的图片、视频等，则是这些特殊的符号和文本组成的代码被浏览器渲染之后的结果。1.1.1网页的组成网页可以分为静态网页和动态网页。用户无论何时何地访问，都会显示固定的信息的网页，除非网页源代码被重新修改、上传。静态网页更新不方便，但是访问速度快。静态网页动态网页显示的内容则会随着用户操作和时间的不同而变化。动态网页可以和服务器数据库进行实时的数据交换。1.1.2网页的相关名词了解网页的相关名词，能够解释常见的网页名词。学习目标1.1.2网页的相关名词名词名词释义Internet就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。WWW中文译为“万维网”是Intertnet提供的一种网页浏览服务。URL中文译为“统一资源定位符”URL其实就是Web地址，俗称“网址”。DNSDNS（英文DomainNameSystem的缩写）是域名解析系统。HTTP/HTTPS中文译为超文本传送协议，HTTP是一种详细规定了浏览器和万维网服务器之间互相通信的规则。HTTPS是由SSL+HTTP构建的可进行加密传输、身份认证的网络协议，要比HTTP安全。Web通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。W3C组织中文译为“万维网联盟”，万维网联盟是国际最著名的标准化组织。1.1.3Web标准熟悉Web标准，能够阐明Web标准的概念。学习目标由于不同的浏览器解析出来的效果可能不一致，开发者常常需要为多版本的开发而艰苦工作。通过Web标准展示统一内容1.1.3Web标准什么是Web标准？1.1.3Web标准1.1.3Web标准Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构、表现和行为3个方面。结构表现行为1.1.3Web标准1结构结构用于对网页中的信息进行分类和整理，在结构中用到的标准主要包括HTML、XML和XHTML。123

HTML旨在创建结构化文档并赋予其语义。XML最初是为了弥补HTML的不足，其具有强大的可扩展性，可用于数据的转换和描述。XHTML是基于XML的标记语言，它在HTML4.0的基础上，用XML的规则对其进行扩展。1.1.3Web标准2表现表现是指网页展示给访问者的外在样式，一般包括网页的版式、颜色、字号等。在网页制作中，通常使用CSS来设置网页的样式。制定CSS标准的目的是以CSS为基础进行网页布局，控制网页的样式。在网页中，可以使用CSS对文本和图片以及模块的背景和布局进行相应的设置。如果后期需要更改样式，只需要调整CSS代码即可。1.1.3Web标准3行为行为是指网页模型的定义及交互效果的实现，行为标准包括ECMAScript、BOM、DOM。123

ECMAScript是JavaScript的核心，由ECMA制定。

BOM用于操作浏览器窗口，例如弹出对话框、打开窗口等。DOM允许程序和脚本动态地访问和更新文档的内容、结构和样式。网页制作技术1.2HTML、CSS和JavaScript作为网页制作的核心技术，支撑着绝大多数网页的构建与运行。本节将对它们进行简单介绍，让大家能够快速了解其各自特点，对网页制作有一个简单认识。1.2网页制作技术1.2.1HTML熟悉网页制作技术，能够说明HTML在网页制作中的作用。学习目标什么是HTML？1.2.1HTMLHTML是一种用于创建网页的标记语言，它通过使用一系列的标签来标记文本、图像和音频等，从而指定网页的结构和内容。这些标签告诉浏览器如何显示和渲染网页的内容。此外，HTML还支持使用属性来进一步定义标签的特性和行为。1.2.1HTML1.2.1HTMLHTML5的主要优势视频和音频支持的改进跨设备和平台的兼容性更好义化标签的增强图形功能的优化表单功能的增强1.2.2CSS熟悉网页制作技术，能够说明CSS在网页制作中的作用。学习目标CSS主要用于设置HTML页面中文本的格式、图形的外形和版面的布局等外观显示样式。CSS与HTML密切相关，为网页提供了丰富的样式和排版功能，能够控制字体、颜色、背景、间距等。另外，CSS能够根据不同的网页浏览器定制不同的样式，保证网页在各种设备上呈现效果一致。1.2.2CSS1.2.2CSSW3C发布了第一个有关样式的标准CSS1。1999年CSS3开始制定。1998年5月W3C发布了CSS2。2001年5月23日完成了CSS3的工作草案1996年12月1.2.3JavaScript熟悉网页制作技术，能够说明JavaScript在网页制作中的作用。学习目标JavaScript作为一种程序设计语言，在Web前端开发领域占据核心地位。起初，它的主要功能是增强网页的交互性，允许开发者创建动态的、响应用户操作的网页元素。现今它不仅限于网页开发，还广泛应用于服务器端应用、桌面软件以及移动应用的开发中。通过JavaScript，开发者能够实现多种网页交互功能，比如创建轮播图、实现选项卡切换以及进行表单验证等，同时，JavaScript还扮演着与服务器通信的重要角色，允许网页从服务器动态加载数据。1.2.3JavaScript浏览器1.31.3浏览器熟悉浏览器的基本概念，能够归纳浏览器的功能和Chrome浏览器的主要优势。学习目标1.3浏览器浏览器（Browser）是一种用于检索、传递以及展示WWW信息资源的应用程序，它是互联网时代的产物，可以用来显示图像、影音及其他内容，以便于用户与网页进行交互。浏览器可以主要分为PC端浏览器和移动端浏览器两类。在PC上运行的浏览器。PC端浏览器移动端浏览器在移动设备上运行的浏览器。1.3浏览器1.3浏览器常用的浏览器有Edge浏览器、Firefox（火狐）浏览器、Chrome浏览器、Safari浏览器和Opera（欧朋）浏览器等。对于一般的网站而言，只要兼容Edge浏览器、Firefox浏览器和Chrome浏览器，即可满足绝大多数用户的需求。下面对这3种常用的浏览器进行详细讲解。Edge浏览器Firefox浏览器Chrome浏览器1.3浏览器1Edge浏览器Edge浏览器是微软开发的一款高性能、安全且功能丰富的网页浏览器，它采用Chromium内核，能够很好地支持HTML5、CSS3和JavaScript

等现代网页技术，为用户提供流畅的网页浏览体验。Edge浏览器支持的操作系统：WindowsmacOSAndroidiOS1.3浏览器2Firefox浏览器Firefox浏览器是一个自由并开源的网页浏览器。Firefox使用Gecko内核，该内核可以在多种操作系统（例如Windows、macOS和Linux）上运行。Firefox浏览器中有一个重要的开发插件Firebug。Firebug提供了一个功能强大的调试控制台，开发者可以在其中查看网页的HTML结构、CSS样式和JavaScript脚本，实时编辑并查看效果，这使得开发者能够快速定位和解决网页中的问题。1.3浏览器2Firefox浏览器Firebug被整合到Firefox浏览器内置的Web开发者工具中。使用者可以在Firefox浏览器菜单栏中单击，在弹出的列表中选择“更多工具”“Web开发者工具”，打开Web开发者工具，其界面如图。1.3浏览器3Chrome浏览器Chrome浏览器是由谷歌公司开发。它最初基于WebKit引擎，后独立演化出Blink引擎，并依托开源的Chromium项目，旨在为用户提供更加稳定、快速、安全的网络浏览体验。Chrome浏览器的主要优势。速度快安全性高跨平台支持Chrome浏览器采用了多进程架构，每个标签页和插件都在独立的进程中运行。Chrome浏览器具有强大的安全功能，包括自动更新、沙箱隔离、强密码管理等。Chrome浏览器支持多种操作系统平台，包括Windows、macOS、Linux、Android和iOS等。VisualStudioCode编辑器1.41.4VisualStudioCode编辑器“工欲善其事，必先利其器。”在开发项目之前，选择一个合适的编辑器是很重要的。本书基于VisualStudioCode（后文简称VSCode）编辑器来编写代码和管理项目文件。为了帮助读者更好地应用VSCode编辑器，本节将对VSCode编辑器进行详细讲解。1.4.1下载和安装VisualStudioCode编辑器掌握VisualStudioCode编辑器的下载和安装，能够独立下载和安装VisualStudioCode编辑器。学习目标VSCode编辑器是由微软公司推出的一款免费的、开源的代码编辑器，一经推出便受到开发者的欢迎。对于开发者来说，一个强大的编辑器可以使开发变得简单、便捷、高效。VSCode编辑器具有轻巧极速、功能强大、支持跨平台、界面设计人性化、扩展强大、支持多语言的特点。1.4.1下载和安装VisualStudioCode编辑器下面演示下载和安装VSCode编辑器。1.4.1下载和安装VisualStudioCode编辑器STEP01打开浏览器，访问VSCode编辑器的官方网站。单击“DownloadforWindows”按钮1.4.1下载和安装VisualStudioCode编辑器STEP02下载好的安装包如图。双击VSCode编辑器安装包1.4.1下载和安装VisualStudioCode编辑器STEP03启动安装程序，首先会打开“许可协议”界面，在该界面中选择“我同意此协议”。单击“下一步”按钮1.4.1下载和安装VisualStudioCode编辑器STEP04打开“选择目标位置”界面”。单击“下一步”按钮1.4.1下载和安装VisualStudioCode编辑器STEP05打开“选择开始菜单文件夹”界面。单击“下一步”按钮1.4.1下载和安装VisualStudioCode编辑器STEP06进入“选择附加任务”界面。单击“下一步”按钮1.4.1下载和安装VisualStudioCode编辑器STEP07打开“准备安装”界面。单击“下一步”按钮1.4.1下载和安装VisualStudioCode编辑器STEP08单击“安装”按钮，会打开“正在安装”界面。单击“安装”按钮1.4.1下载和安装VisualStudioCode编辑器STEP09在VSCode编辑器安装完成后，会打开“VisualStudioCode安装完成”界面。1.4.2安装扩展掌握扩展的安装，能够独立完成中文语言扩展和LiveServer扩展的安装。学习目标为了提高VSCode编辑器的易用性，下面分别演示如何在VSCode编辑器中安装中文语言扩展和LiveServer扩展。1.4.2安装扩展VSCode编辑器安装成功后，启动该编辑器，即可进入VSCode编辑器的初始界面。1.安装中文语言扩展1.4.2安装扩展单击左侧边栏中的按钮进入扩展界面，然后在搜索框中输入关键词“Chinese”找到中文语言扩展。1.安装中文语言扩展1.4.2安装扩展单击“Install”按钮安装成功后，重新启动VSCode编辑器使中文语言扩展生效。重新启动后，VSCode编辑器的中文界面。1.安装中文语言扩展1.4.2安装扩展安装LiveServer扩展界面。2.安装LiveServer扩展1.4.2安装扩展1.4.3VisualStudioCode编辑器的简单使用掌握VisualStudioCode编辑器的简单使用，能够使用VisualStudioCode编辑器进行代码开发。学习目标VSCode编辑器安装完成后，就可以使用VSCode编辑器进行代码开发。下面以使用VSCode编辑器进行HTML代码的开发为例进行讲解。1.4.3VisualStudioCode编辑器的简单使用STEP011.4.3VisualStudioCode编辑器的简单使用创建项目文件夹在D:\workspace目录下创建一个项目文件夹chapter01，该文件夹用于保存本项目所有的文件。STEP02打开项目文件夹在VSCode编辑器的菜单栏中选择“文件”→“打开文件夹…”，然后选择D:\workspace\chapter01文件夹。STEP031.4.3VisualStudioCode编辑器的简单使用创建HTML文档输入要创建的文件名称，例如index.html，然后按“Enter”键即可创建HTML文档。此时创建的index.html文件是一个空白的文档。单击STEP041.4.3VisualStudioCod