HTML5网页前端设计第3版 教案 第1、2章 概述、HTML5基础

《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地址，该地址将发送给对应的Web服务器。Web服务器然后将该地址对应的文本、图片等内容发送给用户并显示在用户使用的Web浏览器中。Web前端技术的三大核心基础是哪些内容？答：HTML、CSS和JavaScript。Web前端新技术HTML5与HTML有什么关系?答：HTML来源于HypertextMarkupLanguage（超文本标记语言）的首字母缩写，是用于架构和呈现网页的一种标记语言，也是万维网上应用最广泛的核心语言。HTML5是HTML的第五次修改版，也是目前HTML语言的最新版。《HTML5网页前端设计》教案第2章HTML5基础一、教学目标：理解HTML5文档的基本结构；理解HTML5中元素标签的作用；掌握HTML5文档注释的用法；掌握HTML5保留的常用标签的用法；掌握HTML5新增的文档结构标签的用法；掌握HTML5新增的格式标签的用法。二、教学重点和难点：重点：掌握HTML5保留的常用标签的用法；难点：掌握HTML5新增的文档结构标签和格式标签的用法；三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要介绍HTML5的基础知识，包括HTML5文档的基本结构、元素标签的用法、文档注释和规范格式要求。在HTML5中保留了HTML4.01之前的部分常用标签，并在此基础上新增了HTML5特有的文档结构标签、格式标签和一系列新增API。五、教学基本内容：2.1HTML5基本结构HTML5实际上是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成，这些标签以<元素名>的形式出现，用于标记文本内容的含义。HTML5文档的基本结构如下：<!DOCTYPEhtml><html><head><title>网页标题</title></head><body>主体内容</body></html>2.1.1文档类型声明<!DOCTYPE> 在HTML5中，该声明被大幅度化简：<!DOCTYPEhtml>2.1.2根标签<html> <html>是HTML5文档的根元素标签，除顶部<!DOCTYPEhtml>文档类型声明以外，所有的HTML5文档都是以<html>标签开始，以</html>标签结束。2.1.3首部标签<head> HTML5文档的首部以<head>标签开始，以</head>标签结束。<head>标签中的内容不会显示在网页的页面中。<head>标签中包含以下内容：1.网页标题标签<title>2.基础地址标签<base>3.元数据标签<meta>4.样式标签<style>5.链接标签<link>6.脚本标签<script>2.1.4主体标签<body>HTML5文档的主体部分以<body>标签开始，以</body>标签结束。<body>标签中的内容将全部显示在网页的页面中。<body>标签中可直接添加文本内容，也可继续嵌套其他元素标签，形成多样化的显示效果。 2.1.5HTML5文档注释 为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5使用<!--...-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“...”替换为注释文字内容即可。<!--...-->标签支持单行和多行注释。2.1.6HTML5文档规范 1.文件类型：.htm和.html2.元素标签格式：元素标签一般情况下是成对出现的，首尾标签的元素名称保持一致，并且尾标签中需要加上斜杠符号。用小写格式。个别标签独立使用。3.字符实体的使用：一些特殊字符无法直接输出，可借助对应的字符名称或代码输出。例如空格为 4.图像文件的使用：常见的有JPEG、GIF和PNG格式。2.1.7HTML4.01转换为HTML5步骤一：化简DOCTYPE声明方式。步骤二：化简charset字符集描述方式。步骤三（可选，取决于需要转换的文件是否包含该内容）：若存在外部css文件或js文件的引用，可以直接省略其中的type描述。 2.2HTML5保留的常用标签 2.2.1基础标签 1.段落标签<p>2.标题标签<h1>-<h6>3.水平线标签<hr>4.换行标签<br>2.2.2文本格式标签斜体字标签<i>粗体字标签<b>和<strong>上标标签<sup>和下标标签<sub>修订标签<del>和<ins>预格式化标签<pre> 2.2.3列表标签 有序列表标签<ol>无序列表标签<ul>定义列表标签<dl>2.2.4图像标签 <img>标签有两个常用属性：src属性和alt属性。src属性是英文单词source（来源）的简写，用于指明图像的存储路径，通常是URL形式。alt属性是英文单词alternative（替代的、备选的）的简写，用于无法找到图像时显示替代文本，该属性可省略不写。2.2.5超链接标签 超链接标签<a>用于在网页中标记文本或图像从而形成超链接，用户点击后将跳转另一个指定的页面，从而实现浏览空间的跨越。标签中的元素名称a来源于英文单词anchor（锚）的首字母简写，因此超链接按照标准叫法又称为锚链接。超链接标签有如下两个重要属性：href：目标内容的URL地址。target：目标内容的打开方式。2.2.6表格标签 表格标签由<table>和</table>定义，每个表格中包含若干行（由单元行标签<tr>和</tr>表示），每一行又被分为若干单元格（由单元格标签<td>和</td>表示）。表格标签<table>表格标签<table>和</table>用于中定义一个完整的表格。表格行标签<tr>表格行标签<tr>和</tr>用于定义表格中的一行。单元格标签<td>单元格标签<td>和</td>用于定义表格行中的一个数据单元格，其中字母td为tabledata（表格数据）的简写。数据单元格中可以包含表单、文本、水平线、图片、列表、段落甚至新的表格等内容。默认状态下，单元格的内容为左对齐。表头标签<th>表头标签<th>和</th>用于定义表格的第一行表头，默认为粗体字、居中对齐。表格标题标签<caption>表格标题标签<caption>和</caption>可用于为表格添加标题，该标题默认为居中对齐并显示在表格的顶部。2.2.7框架标签 框架标签用于在网页的框架内定义子窗口。由于框架标签对于网页的可用性有负面影响，在HTML5中不再支持HTML4.01中原有的框架标签<frame>和<frameset>。只保留了内联框架标签<iframe>。2.2.8容器标签<div>标签标签<div>可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素（blocklevelelement），浏览器会自动在<div>和</div>所标记的区域前后自动放置一个换行符。同样属于块级元素的还有段落标签<p>、表格标签<table>、标题标签<h1>-<h6>等。<span>标签标签<span>通常作为文本的容器，它没有特定的含义和样式，只有与CSS同时使用才可以为指定文本设置样式属性。该标签是一个内联元素（inlineelement），与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。 2.3HTML5新增的常用标签 2.3.1HTML5新增文档结构标签标签名称含义<header>页眉标签，用于定义整个网页文档或其中一节的标题。<nav>导航标签，用于定义导航菜单栏。<section>节标签，用于定义节段落。<article>文章标签，用于定义正文内容。每个article都可以包含自己的页眉页脚。<aside>侧栏标签，用于定义网页正文两侧的侧栏内容。<footer>页脚标签，用于定义整个网页文档或其中一节的页脚。 2.3.2HTML5新增格式标签记号标签<mark>进度标签<progress>度量标签<meter> 2.4HTML5新增API 除去新增的文档结构标签和文本格式标签外，HTML5还有一系列新增的API，常用的功能性API列举如下：拖放：实现元素的拖放；画布：实现2D和3D绘图效果；音频和视频：实现自带控件播放音频和视频；表单：新增一系列输入类型，例如电话号码、数字范围、email地址等；地理定位：使用浏览器进行地理位置经纬度的定位；Web存储：实现本地持久化存储大量数据；WebWorker：实现线程效果这些API及其相关标签，会在后续章节陆续介绍。2.5实验案例——第一个Web页面（具体内容见实验手册）尝试使用本章所学网页文档结构基础知识开发第一个Web页面，开发工具可以任选。除此之外，学有余力的开发者还可以尝试搭建本章例2-22的内容，使用HTML5新增文档结构标签制作一个带有页眉、导航栏、侧栏、文章、页脚等内容的Web页面。

2.6本章小结 HTML5文件的基本结构是由根元素<html>及其所包含首部标签<head>和主体标签<body>组成的。其中首部标签<head>所包含的内容为网页的信息，而主体标签<body>所包含的内容会直接显示在