第1关:文档结构元素相关概念
1、<article>元素主要用于定义页面的什么内容?
A、文章
2、以下选项,哪个不属于语义化的元素?
C、<span>
3、在HTML5中,( )元素用于定义文章的页眉信息。
B、<header>
4、aside元素用于定义当前页面或当前文章的附属信息。
A、正确
5、figcaption元素用于表示独立的流内容,例如图像、图表、照片、代码等。
B、错误
第2关:header元素和article元素的应用
编程要求
在右侧编辑器中的Begin - End
区域内补充代码,具体要求是: 1.运用HTML5中的语义化元素设计一个文章区(<article>
)。 2.文章区中的头部为文章的标题,标题文字为“茗茶推荐——祁门红茶”,要求为该标题文字设置三级标题(<h3>
)。 3.文章区的内容使用段落标签(<p>
)设置,文章内容为:“ 祁门红茶,茶叶原料选用当地的中叶,中生种茶树制作,是中国历史名茶,著名红茶精品。”
<!DOCTYPE html>
<html>
<head>
<title>页面结构</title>
<style type="text/css">
header{border-bottom:4px double #eee;
text-align:center;
font-size :20px
}
</style>
</head>
<body>
<!-- ********* Begin ******* -->
<article>
<header>
<h3>茗茶推荐——祁门红茶</h3>
</header>
<p>祁门红茶,茶叶原料选用当地的中叶,中生种茶树制作,是中国历史名茶,著名红茶精品。</p>
</article>
<!-- ********* End ********* -->
</body>
</html>
第3关:figure元素和figcaption元素的应用
编程要求
在右侧编辑器中的Begin - End
区域内补充代码,具体要求是: 1.运用HTML5中的语义化元素设计一个图类显示区(<figure>
)。 2.该区中插入的图像如下图所示:
该图的URL为https://www.educoder.net/api/attachments/1223388 3.插图的下方用语义化元素figcaption
添加图名称,图名称为:“ 茶道欣赏”
<!DOCTYPE html>
<html>
<head>
<title>页面结构2</title>
<style type="text/css">
header{border-bottom:4px double #eee;
text-align:center;
font-size:20px
}
</style>
</head>
<body>
<article>
<header>
<h3>茗茶推荐——祁门红茶</h3>
</header>
<p>祁门红茶,茶叶原料选用当地的中叶,中生种茶树制作,是中国历史名茶,著名红茶精品。</p>
<!-- ********* Begin ******* -->
<figure>
<img src="https://www.educoder.net/api/attachments/1223388">
<figcaption>茶道欣赏</figcaption>
</figure>
<!-- ********* End ********* -->
</article>
</body>
</html>