第1章 初识Web前端-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）同步教案

课程名称 第1章 初识Web前端 计划学时 4学时 内容分析 本章介绍了Web前端的发展历程，HTML5、CSS3、JavaScript3个Web核心技术的基础知识，以及webstorm开发工具的安装与使用 教学目标 与 教学要求 【知识目标】 1. 了解web前端发展历程 2. 认识HTML5的特点、新特性、文件结构 3. 认识CSS3的特点、新特性、选择器与属性的分类 4. 认识JavaScript的语言特性、构成、变量与数据类型、运算符、常用事件 【技能目标】 1. 掌握HTML5标签和元素的使用方法 2. 掌握CSS3的3种引入方式 3. 掌握JavaScript数据类型的转换方式 4. 掌握webstorm开发工具的安装 5. 熟悉webstorm开发工具的基本操作 【思政育人目标】 1. 初步建立逻辑思维和软件版权意识。 2. 引导学生在学习中健全职业道德的规范。 3. 引导学生创新思维和探索的科学精神。 教学重点 认识CSS3的选择器与属性的分类、认识JavaScript的变量与数据类型、掌握HTML5标签与元素的使用、熟悉webstorm开发工具的基本操作 教学难点 创建第一个HTML5网页 教学方式 课堂讲解配合ppt演示1学时 教 学 过 程 第一学时 （web前端概述、web前端发展历程） 一、提出需求，导入学习任务 （1）思考HTML5+CSS3+JavaScript网页设计的学习应该从何入手。 · 互联网中的网页大多数都是使用HTML格式展示给浏览者，CSS样式用于设计网页的排版，JavaScript语言则用于用户与网页进行交互。本节课程可从学生日常所看到的网站页面进行举例，进而引出web前端的相关概念。 · 介绍web前端的发展历程，以便更深入地学习web前端。 （2）明确学习方向。 · 了解web前端发展历程 二、知识讲解 （一）前端概述 1.万维网 （1） 万维网的定义 万维网（World Wide Web，亦作Web、WWW、W3），是一种基于超文本和超文本传输协议（HyperText Transfer Protocol，简称HTTP）的，全球性的，动态交互的，跨平台的分布式图形信息系统。 （2） 前端开发 前端开发是创建Web页面或APP等前端界面呈现给用户的过程，通过HTML（Hyper Text Mark-up Language，超文本标记语言）、CSS（Cascading Style Sheets，层叠样式表）和JavaScript以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互。 （3） 前端发展总述 Web1.0时代：Web前端发展初期HTML技术只能展示简单的网页。那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。 Web2.0时代：涌现出大量的类似于桌面软件的Web应用，用户不仅能浏览网页，还能对网页上的内容进行操作。网站的前端因此发生变化，网页不再只是单一的承载文字和图片，各种媒体的应用使网页内容变得更丰富多彩，同时也提升了用户体验感。 2.web前端发展简史 （1） 静态页面阶段 · 1990年的12月25日，伯纳斯·李在他的电脑上部署了第一套“主机-网站-浏览器”构成的Web系统，这是B/S（Browser/Server）架构网站应用软件的开端，也是前端工程的开端。 · 1993年4月，Mosaic浏览器作为第一款正式的浏览器发布。 · 1994年12月，W3C在伯纳斯·李的主持下成立，标志着万维网进入了标准化发展的阶段。这个阶段的网页还非常地原始，主要以HTML为主，是纯静态的只读网页，被称为Web1.0时代。 （2） JavaScript诞生 1995年，网景通信公司（Netscape Communications Corporation，亦称Netscape）设计了JavaScript脚本语言，并集成到Navigator2.0版本中。随后微软公司看出JavaScript的潜力，模仿开发出Jscript和VBScript，并应用到Interent Explorer（简称IE）浏览器中，这也导致了微软和NetScape的两个浏览器之间发生产品竞争。后来Navigator在浏览器市场上落于下风，于是NetScape把JavaScript提交到欧洲计算机制造商协会（European Computer Manufacturers Association，简称ECMA），推动制订ECMAScript标准，JavaScript主导了W3C的官方标准，成功实现JavaScript的标准走向国际。 （3） 动态页面的发展 JavaScript兴起以后，网页可以显示出浮动广告之类的动态效果，但这不是动态网页。以PHP、