单元3认识HTML5 案例宏观展示引入 HTML5简称H5，来源于HTML技术的第5版。目前，网络已成为人们生活工作中不可缺少的一部分，网页是提供信息的平台。制作网页可采用可视化编辑软件，无论采用哪一种网页编辑软件，最后都要将所设计的网页转换为HTML语言，当前最新版本是HTML5。图31(a)为网易网的主页，在Chrome 浏览器中选择【查看源】菜单命令即可打开网页源代码，如图31(b)所示， 图31网页与HTML 不难发现网页源代码是用HTML5语言编写的。 本单元主要介绍HTML5新增的元素，使用HBuilder（X）或Notepad++编写简单的网页，让读者对HTML5代码有一个初步认识，能看懂基本的HTML5源代码。 学习任务 了解HTML5的特点。 了解HTML5与HTML4的区别。 掌握HTML5新增的元素。 掌握HTML5废弃的元素和属性。 能够使用Notepad++、HBuilder（X）等工具编写简单网页。 任务3.1认识HTML5 理解HTML5新增功能，了解HTML5的特点。 HTML使用一套标记(标签)来描述网页中的文字、图片、声音、动画、视频、表格、链接等，是制作网页的基础语言。 HTML5是目前HTML的标准版本，它取代了1999年所制定HTML4.01和XHTML1.0标准，简称H5。该版本仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。广义而论，HTML5实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。HTML5的设计目的是在移动设备上支持多媒体。它引进新的语法特征以支持这一点，如video、audio和canvas 标记。 1. HTML5新增功能 HTML5新增功能如下。 （1） 新增语义化标签，使文档结构明确。 （2） 新的文档对象模型(DOM)。 （3） 实现2D绘图的Canvas对象。 （4） 可控媒体播放。 （5） 离线存储。 （6） 文档编辑。 （7） 拖放。 （8） 跨文档消息。 （9） 浏览器历史管理。 （10） MIME类型和协议管理。 2. HTML5的语法特点 HTML5的最大优势是语法结构非常简单，其语法特点如下。 （1） HTML5编写简单。即使没有任何网页制作经验的使用者，也可以通过在文本上添加标记完成网页编辑。 （2） HTML标记数目有限。在W3C所建议使用的HTML5规范中，所有控制标记都是固定的且数目是有限的。所谓固定是指控制标记的名称固定不变，且每个控制标记都已被定义过，其所提供的功能与相关属性的设置都是固定的。 （3） HTML语法较弱。在W3C制定的HTML5规范中，对于HTML5在语法结构上的规格限制是较松散的，如<html>、<Html>或<HTML>在浏览器中具有同样的功能，是不区分大小写的。另外，也没有严格要求每个控制标记都要有相对应的结束控制标记。 HTML5最基本的语法是<标记符></标记符>，标记符通常都是成对使用的，有一个开头标记和结束标记，如<div>...</div>，结束标记只比开头标记多了一个“/”。浏览器收到HTML文件后，就会解释文件中的标记符，然后把标记符所对应的功能表达出来。 任务3.2HTML5与HTML4的区别 掌握HTML5与HTML4的区别。 HTML5是HTML4标准的新版本。越来越多的程序员开始用HTML5来构建网站。如果同时使用HTML4和HTML5，会发现用HTML5从头构建，比从HTML4迁移到HTML5要方便很多。虽然HTML5没有完全颠覆HTML4，它们还是有很多相似之处，但是它们也有一些关键的不同。HTML5与HTML4的不同之处有三点。 1. 语法的简化 HTML的doctype、html、meta、script等标签在HTML5中有大幅度的简化。例如，HTML5的doctype的声明为<!doctype html>，HTML4的doctype的声明如图32所示。 图32HTML4的doctype的声明 2. 新增了<canvas>标签，可以绘制图形 <canvas>标签来代替Flash，很多时候，如果在网页中放入很多的Flash，是很不友好的，现在只要使用<canvas>标签就可以产生交互，并且可以实现很多Flash的功能。 3. 统一网页内嵌多媒体语法 以前，在网页中播放多媒体时，需使用ActiveX或Plugin的方式来完成。有了HTML5后，可用<video>或<audio>标签播放视频和音频，无需再安装其他软件了。 4. 新增了语义标签 为了增加网页的可读性，HTML5增加了<header>、<footer>、<section>、<article>、<nav>、<hgroup>、<aside>、<figure>语义标签。 5. HTML5废除了一些旧标签 废除的大部分是网页美化方面的标签，如<big>、<u>、<font>、<basefont>、<center>、<s>、<tt>。HTML5中不支持frame框架，只支持iframe框架。 6. 全新的表单设计 表单是网页设计者最常用的功能，HTML5对表单做了很大的更改，不但新增了几项新的标签，对原来的<form>标签也增加了许多属性。 任务3.3认识HTML5新增的元素 (1) 理解常见的HTML元素的语法格式及属性。 (2) 熟练运用常见的HTML元素编写简单的网页。 HTML5中新增了大量的元素，这些新增的元素和属性使HTML5的功能变得更加强大，使网页设计效果有了更多的实现可能。 任务3.3.1文档结构元素 在HTML5版本之前通常直接使用<div>元素进行网页整体布局，常见的布局包括页眉、导航栏、正文部分和页脚部分。为了区分文档结构中不同的div内容，一般会为其配上不同的id名称。 <body> <div id="header">这是网页的页眉部分</div> <div id="content">这是网页的正文部分</div> <div id="footer">这是网页的页脚部分</div> </body> 每个div的id名称是自定义的，如果作者不提供明确含义的id名称，将会导致div含义不明确。例如，将上述代码中的<div id="content">替换为<div id="a">不影响网页的显示效果，但是查看网页代码时会较难理解其含义。 因此，HTML5为了代码能够更好地语义化，新增了一系列专用的文档结构元素代替以前用<div>加上id名称的做法。HTML5新增的文档结构元素如表31所示。 表31HTML5新增的文档结构元素 元 素 名 称含义 <header>页眉元素，用于定义整个网页文档或其中一节的标题 <nav>导航元素，用于定义导航栏菜单 <section>节元素，用于定义节段落 <article>文章元素，用于定义正文内容。每个article都可以包含自己的页眉和页脚 <aside>侧栏元素，用于定义网页正文两侧的侧栏内容 <footer>页脚元素，用于定义整个网页文档或其中一节的页脚 1. 页眉元素header 页眉元素header用于定义网页文档或节的页眉，其用法如下。 （1） 一种具有引导和导航作用的结构元素。 （2） 通常放置在整个页面或者页面内的一个内容区块的标题。 （3） 一个网页内并没有限制header标签的个数。 header元素的代码结构如下。 <header> <h1>...</h1> <p>...</p> </header> 任务实例331页眉元素header案例 该案例的主要操作步骤如下。 (1) 打开HBuilder（X），输入如下代码。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>header元素的应用</title> </head> <body> <header> <h2>网页标题</h2> <p>文章正文</p> </header> </body> </html> (2) 将其保存为网页文件。 (3) 在浏览器中预览的效果如图33所示。 图33页眉元素header案例 2. 导航元素nav 导航元素nav用于定义网页文档的导航菜单，可通过超级链接跳转到其他页面。其中nav是navigation(导航)的简写。 导航元素nav的代码结构如下。 <nav> <a href="...">Home</a> <a href="...">Previous</a> <a href="...">Next</a> </nav> 任务实例332导航元素nav案例 该案例的主要操作步骤如下。 (1) 打开HBuilder（X），输入如下代码。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>导航元素nav的应用</title> </head> <body> <h2>网页制作技术</h2> <nav> <ul> <li><a href="/">网站首页</a></li> <li><a href="/">HTML教程</a></li> <li><a href="/">CSS教程</a></li> </ul> </nav> </body> </html> (2) 将其保存为网页文件。 (3) 在浏览器中预览的效果如图34所示。 图34导航元素nav案例 3. 节元素section 节元素section用于定义文档或应用程序中的一个区段，如章节、页眉、页脚或文档中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，显示文档结构。 section元素的代码结构如下。 <section> <h1>...</h1> <p>...</p> </section> 任务实例333节元素section案例 该案例的主要操作步骤如下。 (1) 打开HBuilder（X），输入如下代码。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>section元素的应用</title> </head> <body> <section> <h3>section元素的使用</h3> <p>section用于定义独立的文章区域，里面可以包含一篇或多篇文章。</p> </section> </body> </html> (2) 将其保存为网页文件。 (3) 在浏览器中预览的效果如图35所示。 图35节元素section案例 4. 文章元素article 文章元素article用于定义独立的文章区域，根据文章内容的长短可以包含一个或多个段落元素<p>。它可以是一篇博客或者报纸中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。 除了内容部分，一个article元素通常有它自己的标题(通常放在一个header元素中)，有时还有自己的脚注。 任务实例334文章元素article案例 该案例的主要操作步骤如下。 (1) 打开HBuilder（X），输入如下代码。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>新闻</title> </head> <body> <article> <header> <h2>谷歌董事长斯密特： 每天把手机计算杨关机1小时</h2> <time pubdate="pubdate">2019年05月21日 09:04</time> </header> <p>新浪科技讯 北京时间5月21日早间消息，谷歌执行董事长埃里克斯密特周日在波士顿大学发表演讲时表示，大学生应当将目光从智能手机和计算机屏幕上移开。 </p> <footer> <p>http://www.sina.com.cn</p> </footer> </article> </body> </html> (2) 将其保存为网页文件。 (3) 在浏览器中预览的效果如图36所示。 图36文章元素article案例 5. 侧栏元素aside aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条。 任务实例335侧栏元素aside案例 该案例的主要操作步骤如下。 (1) 打开HBuilder（X），输入如下代码。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>aside元素的应用</title> </head> <body> <header> <h1>HTML5</h1> </header> <article> <h1>HTML5历史</h1> <p>HTML5是构建Web内容的一种语言描述方式。</p> <aside> <h1>名词解释</h1> <dl> <dt>超文本标记语言</dt> <dd>超文本标记语言是一种用来制作超文本文档的简单标记语言。</dd> </dl> </aside> </article> </body> </html> (2) 将其保存为网页文件。 (3) 在浏览器中预览的效果如图37所示。 图37侧栏元素aside案例 6. 页脚元素footer 页脚元素footer用来定义整个网页文档或节的页脚，通常包含文档的作者、版权、联系方式等信息。 使用footer元素设置文档页脚的代码如下。 <footer>...</footer>