第1关:页面结点元素相关概念
1、<section>元素主要用于定义页面的什么内容?B、文章的节
2、<nav>元素主要用于定义页面的什么内容?C、导航
3、下列选项中,用于表示该网页作者联系信息的是( )元素。D、address
4、HTML5的目标就是通过一些新标签、新功能为开发更加简单、独立、标准的通用Web应用提供标准。A、正确
5、address元素用于代表页面的一个部分,是一个可以作为页面导航的链接组。B、错误
第2关:section元素的使用
文章节的设置
HTML5中的语义化元素section可表示一个文章的节,在其中可以嵌套节标题,文章节的内容可用段落标签或其他标签来设定。 代码结构如下:
<section>
<header>文章的节标题</header>
<p>文章的段落内容</p>
</section>
编程要求
在右侧编辑器中的Begin - End
区域内补充代码,具体要求是: 1.运用HTML5中的语义化元素设计一个文章的节(<section>
)。 2.文章节的头部要设置节标题,标题文字为“什么是红茶”,要求为该标题文字设置三级标题(<h3>
)。 3.节的内容使用段落标签(<p>
)设置,节内容为:“ 红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。”
<!DOCTYPE html>
<html>
<head>
<title>页面结点元素</title>
<style type="text/css">
#Head{border-bottom:4px double #eee;
text-align:center;
font-size :20px
}
</style>
</head>
<body>
<article>
<header id=Head>
<h3>茗茶推荐——祁门红茶</h3>
</header>
<!-- ********* Begin ******* -->
<section>
<header><<h3>什么是红茶</h3></header>
<p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
<!-- ********* End ********* -->
</article>
</body>
</html>
第3关:nav元素的使用
文章区的结构
设计要求文章区设置一个导航区。HTML5中的语义化元素nav可表示一个导航区,在其中可以嵌套超链接标签(a)来实现跳转,外部超链接的常用属性有href和title,href的取值为链宿的路径,title的取值为鼠标悬停在链源上显示的文本。 代码结构如下:
<nav>
<a href="链宿的路径" title="显示文本">链源</a>
......
</nav>
编程要求
在右侧编辑器中的Begin - End
区域内补充代码,具体要求是: 1.运用HTML5中的语义化元素设计一个导航区(<nav>
)。 2.导航区中嵌入两个超链接,第一个超链接的链源文字为“主页”,链宿路径为“https://www.qmhtea.com/”,设置鼠标悬停在链源上时显示提示文字,内容为“主页”。 3.导航区嵌入的第二个超链接的链源文字为“花茶及文化”,链宿路径为空连接“#”,设置鼠标悬停在链源上时显示提示文字,内容为“花茶及文化”。
<!DOCTYPE html>
<html>
<head>
<title>页面结点元素</title>
<style type="text/css">
#Head{border-bottom:4px double #eee;
text-align:center;
font-size :20px
}
</style>
</head>
<body>
<article>
<header id=Head>
<h3>茗茶推荐——祁门红茶</h3>
<!-- ********* Begin ******* -->
<nav>
<a href="https://www.qmhtea.com/"title="主页">主页</a>
<a href="#"title="花茶及文化">花茶及文化</a>
</nav>
<!-- ********* End ********* -->
</header>
<section >
<header><h3>什么是红茶</h3></header>
<p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
</section >
</article>
</body>
</html>
第4关:footer元素和address元素的使用
任务描述
本关任务:运用HTML5的语义化元素设计一个包含版权信息和联系人信息的页脚区。效果图如下:
相关知识
为了完成本关任务,你需要掌握:1.footer元素,2.版权信息的表示,3.address元素。
页脚区的设置
footer元素用于定义文档或节的页脚。作为文档的页脚,通常可以包含页面的版权信息和联系人信息。
版权信息
版权信息通常由版权符号©和相关的信息组成,在网页中显示版权符号©需要使用特殊字符©
,例如要显示“©2008 Yang”,相应的代码为: ©2008 Yang
联系人信息
版权信息通常也嵌套在页脚区,使用语义化元素address来设置,address元素中的文本通常显示为斜体。代码结构如下:
<footer>
<address>联系人信息</address>
</footer>
编程要求
在右侧编辑器中的Begin - End
区域内补充代码,具体要求是: 1.运用HTML5中的语义化元素设计一个文章的页脚(<footer>
)。 2.使用<h4>
标题标签为页脚区添加版权信息,内容为“©2020 Tyut”。 3.使用<address>
元素为页脚区添加联系人信息,内容为“Written by茗茶联系站”,其中“茗茶联系站”为超链接的热字,链宿为“mailto:webmaster@example.com”
<!DOCTYPE html>
<html>
<head>
<title>页面结点元素</title>
<style type="text/css">
#Head{border-bottom:4px double #eee;
text-align:center;
font-size :20px
}
</style>
</head>
<body>
<article>
<header id=Head>
<h3>茗茶推荐——祁门红茶</h3>
<nav>
<a href="https://www.qmhtea.com/" title="主页">主页</a>
<a href="#" title="花茶及文化">花茶及文化</a>
</nav>
</header>
<section >
<header><h3>什么是红茶</h3></header>
<p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
</section >
<hr/>
<!-- ********* Begin ******* -->
<footer>
<h4>©2020 Tyut</h4>
<address>Written by<a href="mailto:webmaster@example.com">茗茶联系站</a></address>
</footer>
<!-- ********* End ********* -->
</article>
</body>
</html>