您的位置：首页 > Web前端 > HTML5

05 HTML学习---HTML5新增的结构元素

2019-06-15 08:16 573 查看

05 HTML学习---HTML5新增的结构元素

article与section元素

1、article
  该元素用于代表页面上独立、完整的一篇“文章”，该元素表示的内容可以是一个帖子、一篇blog文章、一篇短文等，只要是一篇独立的文档内容，就应该使用article来实现，使用规则如下：

  • 可以使用header定义标题
  • 可以使用footer定义脚注
  • 可以使用section把文章内容分为几个段落
  • 可以嵌套多个article作为附属文章

2、 section

  该元素用于对页面的内容进行分块，也可以由标题和内容组成，规则如下：

  • 通常建议section包含一个标题
  • 可以包含多个article元素，表示分块内包含多篇文章
  • 可以嵌套section，表示多个子分块

案例

<body>
<h1>浏览器帖子内容</h1>
<!-- 下面是一篇独立的帖子，使用article来表示 -->
<article>
<h2>这里是帖子的标题</h2>
<p>这里是帖子的内容</p>
<!-- 下面是帖子回复模块 -->
<section>
<h2>回复内容</h2>
<!-- 每个article代表一个回复 -->
<article>
<h3>回复的标题</h3>
<div>作者：</div>
<p>评价的内容</p>
</article>
</section>
<!-- 评价部分 -->
<section>
<h2>帖子评价</h2>
<!-- 每个article代表一个评价 -->
<article>
<h3>评价标题</h3>
<p>评价内容</p>
</article>
</section>
</article>
</body>

header和footer元素

1、header

  通常代表标题，该元素里面除了可以包含h1~h6，还可以包含普通元素p、nav等。当页面中包含复杂内容的标题的时候，建议使用header来组织它们。

2、footer

  该元素主要用于父级元素定义“脚注”部分，包括该文章的版权信息、作者授权信息等。

<body>
<h1>浏览器帖子内容</h1>
<!-- 下面是一篇独立的帖子，使用article来表示 -->
<article>
<h2>这里是帖子的标题</h2>
<p>这里是帖子的内容</p>
<!-- 下面是帖子回复模块 -->
<section>
<h2>回复内容</h2>
<!-- 每个article代表一个回复 -->
<article>
<!-- 使用header定义复杂标题 -->
<header>
<h3>回复的标题</h3>
<div>作者：</div>
</header>
<p>评价的内容</p>
</article>
</section>
<!-- 评价部分 -->
<section>
<h2>帖子评价</h2>
<!-- 每个article代表一个评价 -->
<article>
<h3>评价标题</h3>
<p>评价内容</p>
</article>
</section>
<footer>
以上帖子仅代表个人意见
</footer>
</article>
</body>

nav与aside元素

1、nav

  该元素专门用于定义页面上的“导航条”，包括页面上的“主导航条”、侧边的“边栏导航”、页面内容的“页面导航”以及页面下方的“底部导航”等。

2、aside
  专门用于定义当前页面或当前文章的附属信息，通常推荐aside元素使用CSS渲染成侧边栏。

<body>
<h1>浏览器帖子内容</h1>
<!-- 下面是一篇独立的帖子，使用article来表示 -->
<article>
<h2>这里是帖子的标题</h2>
<p>这里是帖子的内容</p>
<!-- 下面是帖子回复模块 -->
<section>
<h2>回复内容</h2>
<!-- 每个article代表一个回复 -->
<article>
<!-- 使用header定义复杂标题 -->
<header>
<h3>回复的标题</h3>
<div>作者：</div>
</header>
<p>评价的内容</p>
</article>
</section>
<!-- 评价部分 -->
<section>
<h2>帖子评价</h2>
<!-- 每个article代表一个评价 -->
<article>
<h3>评价标题</h3>
<p>评价内容</p>
</article>
</section>
<footer>
以上帖子仅代表个人意见
</footer>
<!-- 在article内部，作为该文章的边栏信息 -->
<aside>
<section>
<h4>关于楼主</h4>
<div>用户组：</div>
</section>
</aside>
</article>
<!-- 在body内部，作为整个HTML的边栏信息 -->
<aside>
<h3>页面导航</h3>
<nav>
<ul>
<li><a href="#">导航1</a></li>
</ul>
</nav>
</aside>
</body>

main元素

  一个HTML只能包含一个main元素，该元素用于包含网页中除导航条、logo、版权信息等之外的主要内容。使用了main元素，网页内的article、section、div等元素都应该放到main元素中。
  main元素不应该放在允许重复出现的内容中，比如article、section、aside、nav、footer、header等。

figure和figcaption

  HTML为图像语义添加了figure与figcaption两个元素：

  • figure：用于表示一块独立的图片区域，该元素可以包含一个或者多个img元素。除此之外，内部还可以包含一个figcaption元素，用于定义该图片区域的标题。
  • figcaption：通常在figure内部，用于定义图片区域的标题。
<body>
<figure style="border: 2px solid black;padding:5px;width:510px;">
<figcaption>图片区域的标题</figcaption>
<img src="./bd_logo1.png" style="width: 165px;height: 230px;">
<img src="./bd_logo1.png" style="width: 165px;height: 230px;">
<img src="./bd_logo1.png" style="width: 165px;height: 230px;">
</figure>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航