HTML5网页前端设计第3版 教案 第01章教案-概述

《HTML5网页前端设计》教案第1章概述一、教学目标：了解Internet与万维网的概念；了解Web服务器与Web浏览器；了解HTML、CSS与JavaScript的概念与特点；了解HTML5与CSS3的概念与特点；掌握任意一款Web开发工具。二、教学重点和难点：重点：熟悉HTML5和CSS3的概念与特点；难点：Web架构的访问原理。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章是全书的绪论部分，主要介绍Web前端开发技术与开发工具的选择。HTML、CSS与JavaScript是Web前端开发的三大核心技术，在此基础上的HTML5和CSS3技术带来了新的变革，也是未来Web前端开发的趋势所在。五、教学基本内容：1.1Web原理基础 1.1.1Internet与万维网 InternetInternet，中文名称叫做“因特网”，也被人们称为“国际互联网”。它是由成千上万台计算机设备互相连接，基于TCP/IP协议进行通信从而形成的全球网络。目前，Internet已正式连接86个国家和地区，接入了6万多个网络。通过Internet，用户可以获得以下服务：WWW浏览服务电子邮件服务（E-mail）文件传输服务（FTP）远程登陆服务（Telnet）万维网万维网（WWW，WorldWideWeb）是Internet上最重要的服务之一，也常被简称为“W3”或“Web”。万维网主要使用超文本传输协议（HTTP，HypertextTransferProtocol）将互联网上的资源结合在了一起，并在浏览器中以Web页面的方式呈现给用户。 1.1.2Web架构 Web服务器Web服务器是在实体机或虚拟机服务器设备中安装的服务器软件，在联网环境中可以接收用户在Web浏览器中输入的URL（UniformResourceLocator，统一资源定位符）地址，然后将该地址对应的文本、图片等内容发送给用户并显示在用户使用的Web浏览器中。Web服务器通常用于放置网页文件和数据供用户访问和下载。常用的Web服务器有Apache、IIS、Nginx等。Web浏览器Web浏览器是安装在客户端（PC端或移动设备）的软件，用于访问和显示Web资源。用户打开Web浏览器后输入正确的URL地址就可以访问网络上的资源，Web资源一般会以HTML文件（后缀名为.html或.htm的文件）的形式发送给浏览器。浏览器可以解析和运行接收到的HTML文件，使其在浏览器中呈现带有文字、图像、超链接等丰富内容并且具有排版布局效果的画面，即Web页面。1.1.3Web应用 Web应用不需要安装，其程序资源都部署在Web服务器中。用户通过在Web浏览器中输入不同的URL地址就可以远程访问Web应用。所有的Web应用都可以理解为存放在Web服务器端，并且可以在浏览器中呈现的软件。1.2Web前端技术基础 1.2.1HTML技术 HTML简介HTML来源于HypertextMarkupLanguage（超文本标记语言）的首字母缩写，是用于架构和呈现网页的一种标记语言，也是万维网（WorldWideWeb）上应用最广泛的核心语言。HTML起源HTML最早是在1991年由TimBerners-Lee以“HTML标签集”的形式公开发布的，包含了18个最早的元素标签。在2000年，HTML基于4.01版的严谨语法规则成为了国际标准（ISO/IEC15445:2000）。HTML的特点简易性通用性平台无关性1.2.2CSS技术 CSS简介CSS全称为CascadingStyleSheets（层叠样式表），用于为网页文档中的元素添加各类样式，如字体大小、背景颜色、对齐方式等，起到了网页文档美化作用。CSS起源最早的CSS1（CascadingStyleSheets,level1）规范是在1996年12月由W3C组织正式推出。CSS2（CascadingStyleSheets,level2）规范在1998年5月正式发布。这一版本随后经历了漫长的修改过程，直至2011年6月才正式发布了CSS2.1版。目前CSS技术所保留的大部分功能都是基于CSS2发展而来的。CSS的特点内容与表现分离易于应用与维护提高浏览器加载速度1.2.3JavaScript技术 JavaScript简介JavaScript是一种轻量级的直译式编程语言，基于ECMAScript标准（注:一种由ECMA国际组织通过ECMA-262标准化的脚本程序语言）。通常在HTML网页中使用JavaScript为页面增加动态效果和功能。可以说当今所有浏览器都支持JavaScript，无需额外安装第三方插件。JavaScript起源JavaScript最早是在1995年的时候由网景（Netscape）公司的BrendanEich用了十天时间开发出来的，用于当时的网景导航者（NetscapeNavigator）浏览器2.0版。JavaScriptvsJava因为名称的相近，JavaScript常被误以为和Java有关，但事实上它们是无论从概念还是设计上都毫无关联的两种语言。JavaScript的特点脚本语言简单性弱类型跨平台性大小写敏感1.3Web前端新技术 1.3.1HTML5技术 HTML5简介HTML5指的是HTML语言的第五次修改版，也是目前HTML语言的最新版。HTML5标准规范是2014年10月由W3C组织正式发布，该标准规范中新增了对于多媒体技术的支持，为PC端和移动平台带来无缝衔接的丰富内容。W3C组织称HTML5是“现代Web应用的奠基石”。HTML5发展史HTML5经历了相当曲折的发展历史。2014年10月28日，经历了数百次修改的HTML5终于形成了W3C标准版。HTML5的特点元素标签的改进新增API错误处理机制1.3.2CSS3技术CSS3简介CSS3（CascadingStyleSheets,level3）是CSS的第三版，也是目前CSS的最新标准。CSS3语言的特点是模块化，其中各个模块都新增了新的功能，或者在CSS2的基础上对功能进行了扩展。其中新增了对于网页上各类元素边框、背景、文本和字体等内容的特效。CSS3还新增了动画技术，无需使用脚本代码即可实现网页元素的动画效果。CSS3发展史最早的CSS3草案是在1999年6月公开发布的，这意味着CSS3标准规范的定制工作在上一个版本CSS2正式发布之前就已列入考虑范围。由于CSS3具有模块化的特征，不同的模块也处于各自的定制进度中。2012年6月，CSS工作组公布了CSS3草案中的50多个模块内容，其中有4个模块的规范标准已经作为正式版发布。CSS3的特点完全向后兼容模块化的新增功能变形与动画效果1.4Web开发工具 1.4.1AdobeDreamweaverDreamweaver支持HTML5/CSS3源代码的编辑和预览功能，最大的优点是可视化性能带来的直观效果，开发界面可以分屏为代码部分与预览视图。 1.4.2SublimeText SublimeText的界面布局非常有特色，它支持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮，也具有代码自动完成提示功能。1.4.3NodePad++ 这是一款免费开源的纯文本编辑器，具有完整中文化接口并支持UTF-8技术。由于它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。1.4.4VisualStudioCode

VisualStudioCode常被简称为VSCode，是微软公司出品的一款免费开源的开发工具，支持Windows、MacOS以及Linux操作系统。该软件具有语法高亮、代码自动补全、查看定义等功能，也内置了Git版本控制系统和命令行工具。该软件安装后可以在其内置的扩展程序商店安装扩展包来拓展软件功能，例如Chinese汉化包插件、Beautify代码格式化插件、AutoRenameTag自动补全HTML/XML头尾标签插件等，适合喜欢自己DIY配置工具的开发者。该软件支持多种编程语言，例如JavaScript、TypeScript、HTML、CSS，也可以通过下载扩展包来支持Java、Python、Go等其他编程语言。1.4.5WebStormWebStorm是JetBrains公司旗下的一款JavaScript开发工具，适合进行Web前端开发以及与JavaScript相关的程序编写。该软件直接支持代码高亮、代码折叠、代码补全以及格式化等功能，无需安装额外的插件。正常版本是付费软件，但是该软件对于教育教学行业非常友好，学生和教师均可使用学校邮箱去申请免费教育版许可证，该许可证有效期为每次1年，到期时如果用户还在学校仍可免费续约。1.5Web技术的前景与展望 1.5.1Flash的兴衰 在HTML5诞生之前，大多数网页动态效果是由Adobe公司的Flash来完成的。它也创造出社交网络中网页游戏的热潮。但iOS不再支持Flash、Adobe宣布不再开发安卓系统的FlashPlayer后续版本，Chrome宣布将选择性关闭页面上的Flash内容等，这些事件推动Flash进入产品生命周期的末端。1.5.2HTML5的前景随着硬件的快速发展，浏览器内核对于脚本技术的性能障碍也在逐步弱化。由于具有高度跨平台自适应的特性，HTML5以移动市场作为主战场开始逐步回归技术前沿。如今HTML5这个词已经不仅仅是它本身的意思了，还代表着以它为首的CSS3、jQuery等一系列新技术的合集。 1.5.3未来展望 从目前来看，HTML5的未来仍然任重而道远。然而HTML5在移动端仍具有无限发展的潜能。HTML5正在不断崛起，为用户带来了一体化的网络。在此基础上新的技术将不断涌现，Web技术潮流也许将迎来一个全新的时代格局。1.6本章小结本章在Web原理基础部分解释了Internet与万维网的概念，并且介绍了Web架构是由Web服务器与Web浏览器组成。HTML、CSS和JavaScript被称为是Web开发的三大核心技术，在此基础上的HTML5和CSS3可以看作是HTML和CSS的升级优化版，也是本书主要介绍的内容。HTML5划分清晰的网页文档层次结构，CSS3对内容进行样式美化，配合JavaScript进行元素操作和事件处理，能实现更加丰富的网页效果。六、课后习题什么是Internet和万维网，它们的区别在哪里？答：Internet是由成千上万台计算机设备互相连接，基于TCP/IP协议进行通信从而形成的全球网络。万维网是Internet上最重要的服务之一，也常被简称为“W3”或“Web”。万维网主要使用HTTP协议将互联网上的资源结合在了一起，并在浏览器中以Web页面的方式呈现给用户。请简单描述用户上网浏览网页的原理。答：用户打开Web浏览器并输入需要访问的URL地址，该地址将发送