1.2 HTML5概述_HTML5+CSS3网页设计-QQ阅读女生中文青春网

上QQ阅读APP看书，第一时间看更新

1.2 HTML5概述

1.2.1 HTML5特点及语法介绍

HTML概述

1.HTML5特点

HTML的出现推动了万维网的快速发展，但是随着互联网应用的不断变化，HTML暴露出了种种弊端，不能再满足未来网络的需要。具体来讲，HTML的缺点主要包含以下几点：

●标准不统一，扩展困难。

●标记固定，语义性较差，对多媒体应用不够，对移动设备支持力度不大，网页布局不够清晰明了。

为了彻底解决上述问题，2004年，W3C提出了HTML5方案。该方案表明它是HTML的下一个主要版本，于2008年1月正式公布第一份草案，并指出HTML5有两大主要特点。

●强化了网页的表现功能，对网页中的音频、视频、动画等标签有了更多的支持。

●增加了网页对移动端的处理能力，对手机端的触摸与移动功能支持力度加大，并改善了本地数据库等网页功能，包含信息存储、本地定位等。

因此所谓的HTML5，实际上是一个包含了HTML、CSS、JavaScript在内的等多种技术的组合，其中HTML和CSS主要负责页面的搭建，而JavaScript负责逻辑处理。它在图形处理、动画制作、视频播放、网页应用、页面布局等多个方面给网页结构带来了巨大的改变。HTML5的目标是取代HTML4以及XHTML1.0标准，降低网页对插件的依赖，如Flash等软件的应用，将网页带入一个成熟的应用平台，实现各种设备的互联与应用，更好满足人们的需求。

与HTML4相比，HTML5主要变化如下：

●取消了一些过时的HTML4标记，如包含显示效果的标记＜font＞等，已经被CSS所取代，＜u＞、＜strike＞等标记则被完全去掉。除此之外，在HTML5中加入了大量的新标记，如＜nav＞、＜footer＞、＜section＞、＜article＞、＜aside＞等，以便在制作网页时使用新标记进行全新的布局设计。

●加入了全新的表单输入对象，例如＜date＞、＜time＞、＜email＞、＜url＞等标记，进行新的表单控件开发。

●强化了Web页面的表现性，增加了本地数据库特性。HTML5支持语义化标记，支持网页中的多媒体属性，并引入了新的音频标记audio和视频标记video。在数据存储中对本地离线存储有了更好的支持。

●引入Canvas画布的概念，通过使用Canvas画布和SVG技术实现在网页中二维图形的绘制。

●用户无需安装插件，HTML5取代Flash在移动设备的地位。

●采用了开放的标准与技术，加强了浏览器中的异常处理。上述特点决定了HTML5能够解决许多Web中不能逾越的问题，前途一片光明。但是同时HTML5目前还存在以下问题亟待解决：

●HTML5开发应用性能较差，启动较慢。

●HTML5对浏览器兼容性参差不齐，导致部分HTML5应用无法跨平台。

●目前在市场上HTML5还缺少优秀的开发工具。

2.HTML5语法介绍HTML5标记的书写和HTML之前的语法基本一致，在书写中注意以下几点：

●标记采用大小写都可以。

●标记要正确封闭。

●如果需要显示中文，需设置编码格式。

●属性的双引号可选。

此外在HTML5中有着丰富的语义结构标记，与HTML4不同，它的书写更加简洁与高效。在HTML5出现前，人们书写网页时常常会出现如下的代码：

＜！DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN" "http：//www.w3.org/TR/html4/loose.dtd"＞该语句用来表示文档的类型声明和介绍该文档要符合HTML规范。

HTML5重新规范了网页的书写方式，简化了这一约定，使用如下语法：

＜！DOCTYPE html＞

需要指出的是：

●在HTML4.01中，＜！DOCTYPE＞声明引用DTD，因为HTML4.01基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确呈现内容。而HTML5不基于SGML，所以不需要引用DTD。

●每一个HTML5文档必须DOCTYPE元素开头。＜！DOCTYPE HTML＞告诉浏览器处理的是HTML文档。

●＜！DOCTYPE＞声明没有结束标记。

●＜！DOCTYPE＞声明对大小写不敏感。

【例1-2】制作HTML5标记的网页，在浏览器中显示如图1-3所示。

图1-3 HTML5网页

代码如下：

＜！DOCTYPE html＞

＜html lang="zh"＞

＜head＞

＜title＞这是我的网页＜/title＞

＜/head＞

＜body＞

＜h1＞我的第一个标题＜/h1＞

＜p＞我的第一个段落。＜/p＞

＜/body＞

＜/html＞

该例是一个使用HTML5标记开发的网页，用语句＜！DOCTYPE html＞表示。

值得注意的是：lang="zh"语句用来设置文档的主语言，对于中文网页，HTML5标记应当是zh。

此外，在HTML5出现前，页面中的编码格式一般写成如下格式：＜meta http-equiv="Content-Type"content="text/html；charset=utf-8"/＞，该语句出现在“meta”标记中，能够被浏览器所识别。

在HTML5出现后，对字符集做了简化，书写为：＜meta charset=utf-8"＞，以此提高了浏览器的运行效率。

需要指出的是：

●HTML5推荐使用utf-8字符集。

●使用meta标记确认字符集编码。

练一练

书写一个HTML5网页并在浏览器中显示。

1.2.2 HTML5页面布局及新元素介绍

1.HTML5页面布局元素介绍

HTML5页面布局与传统的Web页面有所区别，HTML5页面布局方式如图1-4所示。

图1-4 HTML5布局

HTML5页面布局及新元素介绍

图1-4中，HTML5的布局把整个页面分成了5个区域，分别如下。

●＜header＞:页面标题区域，用于表示区域内的个体标题，可用在整个文档中，也可以在局部使用。

●＜nav＞：页而导航区域，专门放置网页中菜单导航和链接导航的区域。

●＜section＞与＜article＞:页而主内容区域，网页中的主要内容部分，用于放置网页的主要内容，也可以嵌套放置其他标记。

●＜aside＞:页面侧内容区域，与section相似，也用于放置网页内容。

●＜footer＞:页面页脚区域，网页最底部的区域，用于放置作者信息、用户导航、联系方式以及广告插入等内容。

通过页面布局元素标记描述对应的页面区域，这样使用HTML5开发的网页结构更加清晰明了。

【例1-3】制作使用HTML5新布局元素布局网页。

＜！DOCTYPE html＞

＜html＞

＜head＞

＜title＞这是HTML5网页＜/title＞

＜/head＞

＜body＞

＜header＞＜/header＞

＜hgroup＞＜/hgroup＞

＜nav＞＜/nav＞

＜article＞＜/article＞

＜sectionclass="intros"＞＜/section＞

＜asideclass="content"＞＜/aside＞

＜footer＞＜/footer＞

＜/body＞

＜/html＞

布局元素详细介绍如下。

（1）header元素

header元素用来放置页面内的一个内容区块的标题，header区域代码如下：

＜header＞

＜h1＞HTML5页面＜/h1＞

＜/header＞

值得注意是：一个页面中可以拥有多个header元素，如果将页面分为多个区域，可以为每个区域加入header元素。代码如下：

＜header＞

＜h1＞HTML5页面＜/h1＞

＜/header＞

＜section class="content"＞

＜header＞文章标题＜/header＞

＜p＞这是网页的主要内容区域＜/p＞

＜/section＞

（2）hgroup元素

hgroup区域用于对网页的标题进行组合，通常它与h1～h6元素组合使用，一般将＜hgroup＞元素放在＜header＞元素中，代码如下：

＜hgroup＞

＜h2＞网页元素＜/h2＞

＜h2＞group元素＜/h2＞

＜/hgroup＞

值得注意的是：如果只有一个标题元素则不建议使用hgroup元素。

（3）nav元素

nav元素用于定义导航链接，该元素将具有导航的链接放在同一个区域中，并且一个页面可以拥有多个nav元素。HTML5页面导航区域nav部分代码如下：

＜divid="menu"＞

＜ul＞

＜li＞＜a href="#"class="top"＞Home＜/a＞＜ahre f="#"＞首页＜/a＞＜/li＞

＜li＞＜a href="#"class="top"＞News＜/a＞＜ahre f="#"＞新闻＜/a＞＜/li＞

＜li＞＜a href="#"class="top"＞Sports＜/a＞＜ahre f="#"＞体育＜/a＞＜/li＞

＜li＞＜a href="#"class="top"＞Contact＜/a＞＜ahre f="#"＞联系方式＜/a＞＜/li＞

＜li＞＜a href="#"class="top"＞Logo＜/a＞＜ahre f="#"＞博客＜/a＞＜/li＞

＜/ul＞

＜/div＞

这里使用ul无序列表作为导航的结构。设置id="menu"是为了CSS样式表引用。

（4）article元素

article区域用于定义独立的内容，如一篇完整的文章及对应的评论等，代码如下：

＜article＞

＜header＞

＜h1＞我的HTML5页面＜/h1＞

＜/header＞

＜hgroup＞

＜h2＞网页元素＜/h2＞

＜h2＞group元素＜/h2＞

＜/hgroup＞

＜p＞HTML5新元素＜/p＞

＜/article＞

该段代码描述了article区域，该区域包含一个header元素和一个hgroup元素。

（5）section元素

section元素可用于划分文档的节，包含与主题相关的内容。节通常包含标题和其他子素。section区域代码如下：

＜section class="content"＞

＜p＞这是网页的主要内容区域＜/p＞

＜/section＞

也可以写成如下的复杂形式：

＜section id="sidebar"＞

＜h2＞Section＜/h2＞

＜header＞

＜h2＞Side Header＜/h2＞

＜/header＞

＜nav＞

＜h3＞dao hang＜/h3＞

＜ul＞

＜li＞＜a href="2017/04"＞2014＜/a＞＜/li＞

＜li＞＜a href="2017/03"＞2015＜/a＞＜/li＞

＜li＞＜a href="2017/02"＞2016＜/a＞＜/li＞

＜li＞＜a href="2017/01"＞2017＜/a＞＜/li＞

＜/ul＞

＜/nav＞

＜/section＞

值得注意的是，在section中可以包含任意的内容。

（6）aside元素

aside元素用来表示当前页面的附加信息，aside区域代码如下：

＜aside＞

＜h3＞welcome＜/h3＞

＜ul＞

＜li＞＜ahre f="#"＞HTML5标记＜/a＞＜/li＞

＜/ul＞

＜/aside＞

（7）footer元素

footer元素用来描述页面的页脚区域，footer区域代码如下：

＜footer class="foot"＞

＜h2＞Footer＜/h2＞

＜/footer＞

同样可以写成如下的复杂形式：

＜footer＞

＜section id="part1"＞

＜h2＞关于＜/h2＞

＜/section＞

＜section id="part2"＞

＜h2＞联系＜/h2＞

＜/section＞

＜section id="part3"＞

＜h2＞友情链接＜/h2＞

＜/section＞

＜section id="part4"＞

＜/section＞

＜/footer＞

上述代码在通过CSS样式表修饰后即可在支持HTML5的浏览器上显示网页效果。

值得注意的是：在一个页面中可以出现多个＜header＞、＜section＞、＜nav＞元素，需要为每一个元素都编写特定的CSS样式。

此外，在HTML5中，还可以在网页内部放置＜main＞元素，该元素用于表示网页中的主要内容。常见语法如下：

值得注意的是：每一个网页内部只能放置一个＜main＞元素，并且＜main＞元素不能放在＜article＞、＜nav＞、＜footer＞、＜header＞、＜aside＞内部。

对比HTML4和HTML5不同的网页布局代码书写方式如下。

●HTML4：

＜body＞

＜div id="header"＞...＜/div＞

＜div id="navigation"＞...＜/div＞

＜div id="main"＞...＜/div＞

＜div id="sidebar"＞...＜/div＞

＜div id="footer"＞...＜/div＞

＜/body＞

在HTML4中，页面布局常使用大量的＜div＞标记进行划分区域，并命名不同的区域，如语句“＜div id="header"＞...＜/div＞”表示网页头部区域，语句“＜div id="footer"＞...＜/div＞”表示网页页脚部分区域。

●HTML5：

＜body＞

＜header＞...＜/header＞

＜nav＞...＜/nav＞

＜div id="main"＞...＜/div＞

＜section＞..＜/section＞

＜footer＞...＜/footer＞

＜/body＞

在HTML5中，页面布局主要使用＜header＞、＜nav＞、＜section＞和＜footer＞等标记进行设计，也可在其中穿插使用＜div＞标记。

综上所述，HTML5改变了以往网页设计的模式，引入了大量的新布局元素使得Web页面在结构上变得简单且语义明确。在设计网页时，设计人员应当学会使用新的布局标记设计HTML页面。

练一练

将上述代码用记事本编写并保存后用浏览器打开，查看运行结果。

练一练

编写如下网页并运行。该例运用了HTML5中标记＜head＞、＜title＞、＜body＞、＜h2＞、＜p＞及布局元素＜header＞、＜hgroup＞、＜article＞、＜section＞、＜nav＞、＜aside＞、＜footer＞。

在该例中使用标记＜head＞表示网页的头部，标记＜header＞表示网页正文的头部区域；标记＜article＞表示网页正文部分的标题栏区域，标记＜hgroup＞、＜section＞表示网页正文部分的主要栏目区域，标记＜footer＞表示网页正文部分的页脚区域。

2.HTML5其他新标签元素介绍

除了上节介绍的布局元素之外，HTML5还引入了大量的新元素用于对网页的设计。

1）figure：是一种元素的组合，可以带有标题，用于关联独立的流内容，表示网页中的一块独立区域，可用来制作图表、视频和图片。常见语法如下：

＜figure＞

＜p＞重庆嘉陵江大桥＜/p＞

＜imgsrc="bridge.jpg"width="300"height="270"/＞

＜/figure＞

2）mark：用于标记文本，突出显示文本内容。常见语法如下：

＜！DOCTYPE html＞

＜html＞

＜body＞

＜p＞＜mark＞CSS3＜/mark＞样式表技术＜/p＞

＜/body＞

＜/html＞

该例对mark标记中的内容“CSS3”作了亮度的改变。

3）datalist：与表单属性input配合，定义input出现的值。常见语法如下：

＜！DOCTYPE html＞

＜html＞

＜body＞

＜input list="city"/＞

＜datalist id="city"＞

＜option value="中国"＞

＜option value="美国"＞

＜option value="德国"＞

＜option value="韩国"＞

＜/datalist＞

＜/body＞

＜/html＞

4）progress：用于显示页面中的进度条状态。常见语法如下：

＜！DOCTYPE html＞

＜html＞

＜body＞

当前下载进度：＜progress value=80 max=100＞＜/progress＞

＜/body＞

＜/html＞

运行结果如图1-5所示。

图1-5 进度条显示

5）meter：与progress类似，主要用于显示网页中一定范围内的值。常见语法如下：

＜！DOCTYPE html＞

＜html＞

＜body＞

＜p＞支持率：＜/p＞

＜p＞中国：

＜meter value="90"optimum="100"high="100"max="100"＞＜/meter＞＜span＞90%＜/span＞

＜/p＞

＜p＞韩国：

＜meter value="10"optimum="100"high="100"max="100"＞＜/meter＞＜span＞10%＜/span＞

＜/p＞

＜/body＞

＜/html＞

运行结果如图1-6所示。

图1-6 meter标记

6）video：用于显示视频。常见语法如下：

＜video src="movie1.ogg"controls="controls"＞

浏览器不支持

＜/video＞

7）audio：用于显示音频。常见如法如下：

＜audio src="audio1.wav"controls="controls"＞

浏览器不支持

＜/audio＞

8）canvas：中文称为“画布”，主要用于图形的绘制，通过脚本（通常是JavaScript）来完成。常见语法如下：

＜！DOCTYPE html＞

＜html＞

＜head＞

＜meta charset="utf-8"＞

＜title＞画布＜/title＞

＜/head＞

＜body＞

＜canvas id="myCanvas"width="200"height="100"style="border：1px solid#000000；"＞

浏览器不支持HTML5 canvas标签。

＜/canvas＞

＜/body＞

＜/html＞

运行结果如图1-7所示。

图1-7 canvas显示

9）details：用于描述文档部分的细节，常与summary元素配合使用。常见语法如下：

＜details＞

＜summary＞商品显示列表＜/summary＞

＜ul＞

＜li＞商品1＜/li＞

＜li＞商品2＜/li＞

＜/ul＞

＜/details＞

10）em：为文本添加样式，强调内容中的重点。常见语法如下：

＜em＞强调的文本＜/em＞

11）i：为文字添加效果，将文本定义为斜体类型。常见语法如下：

＜i＞斜体文本＜/i＞

12）time：该标记用来定义时间，可以代表24小时中的某一时间。常见属性值包含以下两种。

●datetime：定义相应的日期或时间。

●pubdate：定义文档的发布日期。

13）cite：用于在文档中创建一个引用标记，作为对文档参考文献的引用说明。常见语法如下：

＜p＞

＜cite＞故宫博物院＜/cite＞建立于1925年。

＜/p＞

14）menu：用于定义菜单列表，常用在表单中。常见语法如下：

＜menu＞

＜li＞＜input type="checkbox"＞中国＜/li＞

＜li＞＜input type="checkbox"＞韩国＜/li＞

＜/menu＞

15）keygen：用于生成密钥。常见语法如下：

加密：＜keygen name="security"/＞

练一练

将上述代码用记事本编写并保存后用浏览器打开，查看运行结果。

1.2.3 HTML5常见元素介绍

1.HTML5图像和文本标签的应用

（1）图像

在HTML5中，图像与文本标签的使用和HTML4是一样的。通常使用＜img＞定义图像标签，属性src给出图像的地址，width和height定义图像的宽度和高度，alt描述图像的相关信息。常见语法如下：

＜img src="2.jpg"width="128"height="128"alt="人物图像"/＞

值得注意的是，在HTML5不再支持下列属性：“align”“border”“hspace”以及“vspace”。

（2）文本

对于文本字符，可以将网页中的文本内容直接输入在＜body＞＜/body＞之间，也可在文本中应用下列标记设置文本：标记＜p＞分段，标记＜br＞分行，标记＜hr＞加入水平线，标记＜h1＞-＜h6＞设置文档标题，标记＜b＞＜/b＞设置粗体文字，标记＜sub＞＜/sub＞设置文字下标，标记＜sup＞＜/sup＞设置文字上标。

【例1-4】制作一个纯文本显示的网页，该例使用了＜sub＞标记。在浏览器中显示如图1-8所示。

图1-8 网页中的文本

代码如下：

＜！DOCTYPE HTML＞

＜html＞

＜body＞

＜p＞HTML5基础教程＜/p＞

＜p＞H＜sub＞2＜/sub＞O是水分子＜/p＞

＜/body＞

＜/html＞

（3）图像和文字的排列

【例1-5】制作网页中的图文排列，在浏览器中显示如图1-9所示。

图1-9 图像的显示

代码如下：

＜！DOCTYPE HTML＞

＜html＞

＜body＞

＜img src="1.jpg"width="50"height="50"＞

＜br/＞

＜img src="1.jpg"width="100"height="100"＞

＜br/＞

＜img src="1.jpg"width="200"height="200"＞

＜p＞通过改变img标签的"height"和"width"属性的值，放大或缩小图像。＜/p＞

＜/body＞

＜/html＞

该例在网页中显示了3幅图像，并在图像下方加入了说明性的文字。

（4）网页中背景图像的显示

【例1-6】制作网页中的背景图像，在浏览器中显示如图1-10所示。

图1-10 网页中的背景图像

代码如下：

＜！DOCTYPE HTML＞

＜html＞

＜body background="1.jpg"＞

＜h3＞图像背景＜/h3＞

＜p＞gif和jpg文件均可用作HTML背景。＜/p＞

＜p＞如果图像小于页面，图像会进行重复。＜/p＞

＜/body＞

＜/html＞

该例用标记background实现了背景图像的制作。

列表与超链接

2.列表标记

在网页中进行文本排版时，经常会用到列表标记，HTML5主要有3种列表形式：＜ul＞无序列表、＜ol＞有序列表和＜dl＞定义列表。

（1）无序列表

无序列表中的列表项没有顺序，只有项目符号放在最前面。常见语法如下：

＜ul type="类型"＞

＜li＞列表项＜/li＞

＜/ul＞

在无序列表存在着下列的type属性，如表1-2所示。

表1-2 无序列表类型

值得注意的是：＜ul＞＜/ul＞表示一个无序列表的开始和结束，＜li＞表示一个列表项，在＜ul＞中可以包含多个＜li＞。一般来说＜ul＞标记和＜li＞标记要配合使用，并且在＜ul＞标记内部不能出现其他的标记。＜ol＞标记与＜dl＞标记存在同样的用法。

（2）有序列表

有序列表的列表项排列有顺序，常见语法如下：

＜ol＞

＜li＞列表项＜/li＞

＜/ol＞

（3）定义列表

定义列表在列表的各项前没有任何数字和符号，常见语法如下：

＜dl＞

＜dt＞列表项＜/dt＞

＜dd＞列表项＜/dd＞

＜dt＞列表项＜/dt＞

＜dd＞列表项＜/dd＞

＜/dl＞

【例1-7】制作列表网页，在浏览器中显示如图1-11所示。

图1-11 列表的运用

代码如下：

＜！DOCTYPE HTML＞

＜html＞

＜body＞

＜h1＞列表的使用＜/h1＞

＜ol＞

＜li＞早上＜/li＞

＜li＞中午＜/li＞

＜li＞晚上＜/li＞

＜/ol＞

＜ul＞

＜li＞早上＜/li＞

＜li＞中午＜/li＞

＜li＞晚上＜/li＞

＜/ul＞

＜/body＞

＜/html＞

该例包含一个有序列表和一个无序列表。

3.超链接标记

超链接是网站的灵魂，超链接标记是网站中最重要的标记。通过超链接的制作可以让网站中的每个页面相互访问。超链接标记的常见语法如下：

＜a herf=""＞内容＜/a＞

其中元素＜a＞表示超链接的开始，＜/a＞表示超链接的结束。属性href表示该超链接的链接地址，链接路径必须为URL地址，URL用于标识Web或者本地磁盘上的文件，如＜a href="http：//www.baidu.com"＞百度＜/a＞，或者＜a href="image/1.jpg"＞图片＜/a＞。前者表示该链接方式为绝对路径，后者表示链接方式为相对路径。也可以将地址设置为空链接，用href="#"表示。

值得注意的是：在制作超链接时，网页里的任何文字和图像都可以创建相应的链接。

【例1-8】制作超链接网页，在浏览器中显示如图1-12所示。

图1-12 超链接的运用

代码如下：

＜！DOCTYPE html＞

＜html lang="zh"＞

＜head＞

＜title＞超链接网页＜/title＞

＜/head＞

＜body＞

＜h1＞热门电影＜/h1＞

＜a href="#"＞大上海＜/a＞

＜a href="#"＞情圣＜/a＞

＜a href="#"＞金刚狼3＜/a＞

＜a href="#"＞乘风破浪＜/a＞

＜a href="#"＞朗读者＜/a＞

＜/body＞

＜/html＞

该例在页面中制作5个超链接。

4.表格标记

在HTML5中使用标记＜table＞＜/table＞来定义表格。但是这还不够，要表示一个完整的表格，还需要使用＜tr＞、＜td＞、＜th＞以及＜caption＞等标记。其中＜tr＞表示表格的行，＜td＞表示表格中的单元格，＜th＞表示表格的列，＜caption＞表示表格的标题。此外，＜table＞还保留了一个属性border用来设置表格的边框。

使用表格常见的语法如下：

＜table border="1"＞

＜tr＞

＜td＞...＜/td＞

＜/tr＞

＜/table＞

【例1-9】制作表格网页，在浏览器中显示如图1-13所示。

图1-13 表格的运用

代码如下：

＜！DOCTYPE html＞

＜html lang="zh"＞

＜head＞

＜title＞表格网页＜/title＞

＜/head＞

＜body＞

＜table border="1"＞

＜tr＞

＜td＞年份＜/td＞

＜td＞月份＜/td＞

＜td＞销售数量＜/td＞

＜/tr＞

＜tr＞

＜td＞2016年＜/td＞

＜td＞7月＜/td＞

＜td＞300台＜/td＞

＜/tr＞

＜tr＞

＜td＞2016年＜/td＞

＜td＞8月＜/td＞

＜td＞400台＜/td＞

＜/tr＞

＜tr＞

＜td＞2016年＜/td＞

＜td＞9月＜/td＞

＜td＞500台＜/td＞

＜/tr＞

＜/table＞

＜/body＞

＜/html＞

该例在网页中用表格显示企业中的销售量。

5.HTML5标记综合练习

【例1-10】制作HTML5标记完整的网页，在该例中用＜article＞标记放置正文内容，其中包含3个＜section＞标记和1个页脚＜footer＞标记。在＜section＞标记中又包含了＜h3＞字体标记和＜p＞段落标记，在＜footer＞标记中又包含了＜h4＞和＜h5＞文字大小标记。

代码如下：

练一练

将上述代码用记事本编写并保存后用浏览器打开，查看运行结果。

练一练

为下列文档添加内容，并插入图像显示在浏览器中。

＜！DOCTYPE html＞

＜html＞

＜head＞

＜title＞这是HTML5网页＜/title＞

＜/head＞

＜body＞

＜header＞＜/header＞

＜hgroup＞＜/hgroup＞

＜nav＞＜/nav＞

＜article＞＜/article＞

＜p＞＜/p＞

＜section class="intros"＞＜/section＞

＜aside class="content"＞＜/aside＞

＜footer＞＜/footer＞

＜/body＞

＜/html＞