HTML网页制作学习基础三-CSDN博客

本文链接：https://blog.csdn.net/m0_73864217/article/details/133713832

文章目录

5.fjgure和figcaption元素

前言

抱歉拖更一段时间，加上中秋和国庆的好几天假期，这周我们接着来小白学习网页制作的第三周，今天来学习HTML的几个元素，并制作案例。

一、结构布局元素

HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。其基本语法格式如下：

<header>
 <h1>网页主题</h1>
 ...
</header>

2.nav元素

nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其中<ul>是无序列表。例如下面这段示例代码：

<nav>
  <ul>
  <li><a href="#">首页</li>
  <li><a href="#">公司盛况</li>
  <li><a href="#">产品展示</li>
  <li><a href="#">联系我们</li>
  </ul>
</nav>

3.article元素

article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。

section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。


<article>

   <header>

	 <h2>第一章</h2>

   </header>

   <section>

     <header>

	   <h2>第1节</h2>

     </header>

   </section>

   <section>

      <header>

	     <h2>第2节</h2>

      </header>

   </section>

</article>

<article>

   <header>

	   <h2>第二章</h2>

   </header>

</article>

4.details和summary元素

details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。标题是可见的，当用户点击标题时，会显示或隐藏details中的其他内容。


<details>

   <summary>显示列表</summary>

   <ul>

       <li>列表1</li>

       <li>列表2</li>

   </ul>

</details>

5.fjgure和figcaption元素

2.3 知识点讲解

figure元素用于定义独立的流内容（图像、图表、照片、代码等等），一般指一个单独的单元。

figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。

figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。

<p> “鸟巢”国家体育场是2008年北京奥

运会的标志性建筑，她位于北京北四环边，

包含在奥林匹克国家森林公园之中。占地面

积20.4万平米，总建筑面积25.8万平米，拥

有9.1万个固定座位。2008年奥运会期间，

承担开幕式、闭幕式、田径比赛、男子足球

决赛等赛事活动。

</p >

<figure>

	<figcaption>北京鸟巢</figcaption>

	<p>拍摄时间：2015 年 12 月</p >

	< img src="images/niaochao.jpg">

</figure>