css的入门——HTML5布局

Posted 2021-12-07 banbianfengxue

html5布局

 　　一直以来，网页设计人员都利用<div>元素将页面中的相关元素集中在一起（比如哪些组成页眉，文章，页脚，侧边栏的元素），并使用class或id特性来指定<div>元素在页面结构中的作用。HTML5引入了一组新的元素，这些元素允许你对页面的哥哥部分进行分割。它们的名称直接表明了其中包含的内容。

1.页眉和页脚 <header> <footer>

　　<header>元素和<footer>元素可以用作：

①网站中出现的每个页面顶部的主也没或底部的主页脚。

②页面中单独的<article>或<section>中的页眉或页脚。

　　每个单独的<article>元素和<section>元素还可以利用自己<header>元素和<footer>元素来包含页面中相应区域的页眉和页脚信息。

2.导航 <nav>

　　<nav>元素专门用于包含网站的主要导航块，比如网站的主导航。

3.文章 <article>

　　<article>元素就像是页面中任意部分（可能是单独存在的部分，也可能是联合出现的某一部分）的一个容器。它们可以是一个单独的文章，博客日志，论坛贴子，或者任何其他独立的内容。如果一个页面容器包含多篇文章，那么每个单独的文章都应当位于其专属的<article>元素中。<article>元素还可以彼此嵌套。例如，一片博客日志可能位于一个<article>元素中，而这篇日志的每条评论则位于其子<article>元素中。

4.附属信息 <aside>

　　<aside>元素有两个作用，具体具有那种作用取决于其是否位于<article>元素中。当<aside>元素在<article>元素内出现时，他应该包含与当前文章相关的信息，而不必涉及页面的整体信息。当<aside>元素在<article>元素之外出现时，它应该包含与整个页面相关的内容。

5.部分 <section>

　　<section>元素用于将相关的额内容集中到一块，而且每个部分通常带有一个标题。例如，一个网站的首页可能包含多个<section>元素，每个<section>元素用于包含页面的不同部分，比如最新消息，热门产品，新闻稿注册等。由于<section>元素集中了相关的项目，因此它可能包含具有相同主体或用途的多个不同的<article>元素。相反，如果页面内有一篇很长的文章，<section>元素也可以用来将这篇文章分成几个部分。<section>元素不能作为整个页面的容器使用。如果你需要一个用来包含震整个页面的元素，那么这项工作最好留给<div>元素。

6.标题组 <hgroup>

　　<hgroup>元素的作用是将一个或多个<h1>到<h6>的标题元素组合到一块，将他们当成一个标题看待。例如，<hgroup>元素可用来包含一个位于<h2>元素中的标题和一个位于<h3>元素中的子标题。

7.图形 <figure> <figcaption>

　　之前学习过<figure>元素。他可以用来包含一篇文章正文中引用的任何内容（而不仅仅是图像）。值得注意的是，如果<figure>元素的内容被移到其他为u之，问政仍应该是合理的。处于这个原因，仅当内容引用<figure>元素时才使用该元素，而不应该对页面不可或缺的内容上使用该元素。使用示例包括：

图像　　视频　　图形　　图标　　代码示例　　文章主体的辅助文本

　　<figure>元素还应该包含一个<figcaption>元素，<figcaption>元素为<figure>元素的内容提供文本说明。

8.分节元素 <div>

　　在介绍完新元素之后又回顾<div>元素。在没有合适的元素用来组合一组元素时，仍可以使用<div>元素。在这个示例中，<div>元素作为整个页面的容器来使用。