html5新的网页结构

发表于   |   分类于 ，   |     |   本文总阅读量 次

　　相比于html4,html5新增加了很多属性和标签，本文将对html5的部分新标签进行讲解。

新的HTML5网页结构

　　html5的网页结构相比于html4增加了很多语义化的标签，比如header、nav、article、section、aside、footer元素，相比于html4的网页结构，html5采用新的网页结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">//字符编码
        <title></title>
    </head>
    <body>
        <header>...</header>//表示页面中的一个内容区块或者整个页面的标题
        <nav>...</nav>//表示页面中的导航链接部分
        <article>...</article>//表示页面中的一块与上下文不相关的独立内容，比如一篇文章中的文章
        <section>...</section>//表示页面中的一块内容区块，比如页面的页眉，页脚等，也可以和(h1,h2,...)等一起使用，标示出文档的结构
        <aside>...</aside>//表示artical元素的内容之外的，和内容相关的辅助信息
        <footer>...</footer>//表示页面或者是页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等等
    </body>
</html>

　　网页结构如图所示:
html5新网页结构
　　下面将对这些元素进行讲解：
　　header元素,代表“网页”或者“section”的页眉，通常包含h1-h6元素或者hgroup，整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容增加一个header元素。
　　footer元素，代表“网页”或者“section”的页脚，通常含有该节的一些基本信息，比如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。footer没有个数限制，除了包裹的内容不一样，其他跟header类似。
　　nav元素，代表页面的导航链接区域。用于定义页面的主要导航部分。
　　aside元素，被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。
　　article元素，最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。
　　section元素，代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。
　　hgroup元素，代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。如果只有一个h1-h6就不用hgroup元素，如果有连续的h1-h6就用hgroup元素，如果存在多个文章标题，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签。

dada wechat
欢迎您扫一扫上面的微信号，互相沟通交流

热评文章