【案例引入】
中国计算机之父董铁宝，1916年8月生于江苏省武进县，1945年抗战胜利后，他途经印度乘船赴美留学，1946年1月开始在普渡大学土木系攻读研究生并担任助教，1947年至1950年在伊利诺伊大学力学系攻读博士学位，之后留校任助理教授、副教授。在强烈的爱国心驱动下，董铁宝于1956年毅然放弃在美国享有的优越生活，突破重重障碍，回到祖国，留在北京大学计算机教研室担任教授。当时的103型计算机，每秒运行速度也才1 500次。就算是美国的第一代计算机，也就5 000次每秒的速度。而董铁宝在20世纪60年代初，就已经开始研究每秒百万次运行速度的计算机了。
【案例分析】
网页文件是用标记语言书写的，HTML是网页设计的基础语言。通过HTML5文件基本结构与基本标签的编写，我们应该培养像董铁宝先生一样勇于探索、精益求精、严谨务实的工匠精神，以及治学严谨、低调、淡泊名利的高风亮节、科研报国的赤子情怀。
【主要知识点】
3.1.1 HTML简介
HTML（Hyper Text Markup Language）是超文本标记语言，它是一种标记语言，由一对对的标签组成，如<html></html>，<head></head>，<title></title>，<body></body>等，HTML使用这些标记标签来描述网页。HTML命令可以包含文字、图形、动画、声音、表格、链接等。HTML作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其他的专用网页编辑器（如FrontPage、Dreamweaver）都是以HTML为基础，HTML文件的文件扩展名为.htm或.html。
3.1.2 HTML5简介
微课3.1 HTML5简介
HTML5是HTML最新的修订版本。2014年10月，万维网联盟（World Wide Web Consortium，W3C）完成HTML5标准的制定，即HTML5是一个标准而不是一种技术。设计HTML5的目的是在移动设备上支持多媒体。
HTML5是新一代HTML标准，如图3.1.1所示。HTML5的上一个版本HTML4.01诞生于1999年，在那以后，Web世界经历了巨变，目前，HTML5仍处于完善之中，然而大部分现代浏览器已经支持HTML5标准。
图3.1.1 HTML5
3.1.3 HTML5的改进
HTML5给人们带来了很多人性化的改变，包括新的解析顺序、新的元素、新的方法、新的input属性等。HTML5可以实现更具结构化、语义化的Web文档，方便搜索引擎索引站点。作为下一代的网页语言，HTML5拥有很多让人期待的新特性，例如利用video标签，在网页中能像添加图片一样简单地添加视频，利用HTML5技术能够在移动设备上轻易地播放多媒体影音效果。
1）视频
对多媒体的支持是HTML5的一大亮点。使用“video”标签，能让HTML5提供对视频文件的直接支持。用户不需借助第三方的插件（如Flash等），省去了中间繁杂的配置环节，并且运行环境的变化带来了性能上的提升和资源上的节约。video标签支持Ogg、MPEG4、WebM等视频格式文件，允许包含多个source（源）元素。source元素可以链接多个不同的视频文件，浏览器会使用第一个可以识别的文件。
2）音频
HTML5对多媒体支持的第二个关键元素是对音频的支持，使用“audio”标签，其使用方法与video标签相似。支持的音频文件格式主要包括wav、mp3、ogg。ogg全称是OGGVobis，是一种音频压缩格式，类似于MP3音乐格式。
3）HTML5的Web存储
HTML5提供了两种在客户端存储数据的方式：localStorage和sessionStorage。在HTML4中，客户端数据的存储主要依靠cookie来实现，但cookie的缺点是不适合大数据的存储，因为它们的传递依赖于对服务器的请求，这使得cookie的速度慢且效率低下。在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据，从而使得在不影响网站性能的情况下存储大量的数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5使用JavaScript来存储和访问数据。
4）新的input类型
HTML5提供了新的input类型，这些新的类型可以让其对用户输入数据的验证变得更加简单方便，主要有以下几种类型：email，url，number，range，date，pickers（date、month、week、time、datetime、datetime-local），search，color。新的input类型提供了新的email、URL地址、数字、范围、日期选择、搜索、颜色类型，在提交页面时会自动进行验证。在以前的操作中，主要使用JavaScript脚本来验证用户输入数据的合法性。
5）新的表单类型(www.daowen.com)
HTML5添加了新的表单类型，主要有以下几种：
①datalist。datalist元素规定输入域的选项列表，列表是通过datalist内的option元素创建的。
②keygen。keygen元素的作用是提供一种验证用户的可靠方法。
③output。output元素用于不同类型的输出，如计算或脚本输出。
6）新增加的语义元素
HTML5添加了<article>，<aside>等很多语义元素。
3.1.4 HTML5的应用
1）HTML5的应用
据不完全统计，至少有超过80%的App都整合了HTML5技术，微信、淘宝、支付宝、QQ、Facebook、Twitter等都是典型的例子。移动网站、轻应用、微网站、手机网页也在迅猛发展，主流媒体和电商平台都已上线移动网站或轻应用版本。
未来HTMI5必定在“互联网+”的各行各业中获得广泛应用。Web也必然逐步向HTML5迁移，以强化网页的表现技能。
2）支持HTML5的浏览器
支持HTML5的浏览器有Firefox、IE10和IE10以上版本，Chrome（谷歌浏览器）、Opera、Safari等；Maxthon Browser（傲游浏览器）、360浏览器、QQ浏览器、搜狗浏览器、猎豹浏览器等国产浏览器也有支持HTML5的能力。
①IE。IE10以上版本支持。
②Firefox。Firefox 4.0以上版本支持。
③Chrome。Chrome6以上版本支持。
④Opera。Opera10.6以上版本支持。
⑤Safari。Safari3.1以上版本支持大部分。
图3.1.2 HTML5的应用
【课程育人】
本任务主要讲述了HTML5的历史、概念、应用环境、浏览器兼容等知识点，让我们对HTML5有了初步的了解，并期待后面的学习，同时也学习像董铁宝先生一样一丝不苟、精益求精、严谨务实的工匠精神。
【课堂互动】
1.简述HTML5的特点。
2.简述HTML5的改进之处。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
