html5篇——新增文档标签

56 阅读 0 评论 37 点赞

我是靠谱客的博主内向白猫，最近开发中收集的这篇文章主要介绍html5篇——新增文档标签，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

html5比html4新增了一些标签，这一篇介绍新增的文档标签。

写过html页面的都知道，在html中创建内容块主要用的是div，比如：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="header">html5--新增标签</div>
<div id="content">html5新增的标签有。。。</div>
<div id="footer">by 你若精彩_天自安排<</div>
</body>
</html>

我们一般用id或者class命名来区别哪个内容块是页眉、内容块还是页脚，而div本身是没有指出内容类型的功能，因此html5新增了一些标签来描述页面包含的内容类型，让web页面的逻辑部分更清楚明朗一些。比如：

<!DOCTYPE html> 
 <html> 
  <head> 
    <title></title> 
  </head> 
  <body> 
    <article>
    <header>
        <h1>html5--新增标签</h1>
        <p>html5...</p>
    </header>
    <nav>
   
<ul>
        <li>
          <a href="#">header</a>
        </li>
        <li>
          <a href="#">section</a>
        </li>
        <li>
          <a href="#">article</a>
        </li>
      </ul>
     </nav>
    <section>
        <h2>header/h2>
        <p>header标签定义。。。</p>
    </section>
    <section>
        <h2>section</h2>
        <p>section标签定义。。。</p>
    </section>
    <footer>
        <p>by 你若精彩_天自安排</p>
    </footer>
  </article>
  <aside>
      <h2>更多连接</h2>
      <ul>
        <li><a href="http://www.w3school.com.cn/">w3school</a></li>
        <li><a href="http://www.w3school.com.cn/">w3school</a></li>
      </ul>
    </aside>
  </body> 
 </html>

新增的文档标签有header，article，section，aside，footer，nav。接下来就来分别介绍一下各个标签。

<header>标签

<header>标签用来定义文档的页眉，表示页面的头部分。

以前我们是利用div中的id属性来表示页面的头部分

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="header">header</div>
<div id="content">main</div>
<div id="footer">footer</div>
</body>
</html>

使用header就可以这样

<!DOCTYPE html> 
 <html> 
  <head> 
    <title></title> 
  </head> 
  <body> 
    <header>
      <h1>html5--新增标签</h1>
      <p>html5...</p>
    </header>
    <div id="content">main</div>
    <div id="footer">footer</div>
  </body> 
 </html>

一般来说，我们通常将<header>标签放在页面的顶部，但是并不是一定的，你可以放在页面的任何地方，标签只是定义了该内容块在页面中的角色，它没有定义位置，也没有赋予样式。

注意：如果你的header标签只包含一个顶部元素，那么丢弃header元素吧，article标签已经保证了顶部元素会出现在文章概要中，何必要多写一行<header>标签的代码。

<section>标签

section，部分，章节。顾名思义，它就是用来定义文档中的一个节。一篇文档通常可以拆分成多个section(章节)，且section与section之间又具有相关性，一般来说，一个section包含标题(h1-6)和内容块，不推荐没有标题的section。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<h1>html5--新增标签</h1>
<p>html5...</p>
</header>
<p>html5新增的标签有。。。</p>
<section>
<h2>header</h2>
<p>header标签定义。。。</p>
</section>
<section>
<h2>section</h2>
<p>section标签定义。。。</p>
</section>
<div id="footer">by 你若精彩_天自安排<</div>
</body>
</html>

注意：div标签本就是一个容器，section标签不是html5增加来代替div的，section标签不是一个通用的容器，html5新增的这些标签只是为了页面代码更加规范化。所以如果仅仅是用于样式设置和脚本处理，应该用div，只有元素内容会被列为文档大纲时，才可以用section标签。

<article>标签

<article>标签是一个特殊的section标签，后面要说的<nav>标签、<aside>标签也是特殊的<section>标签，它们比<section>标签具有更明确的意义，所以能用<article>、<nav>、<aside>标签的时候就不要用<section>标签。<article>标签代表一个独立的、完整的内容块，比如：论坛的帖子，博客上的文章，一篇用户的评论。那怎么才算一个内容块是独立的和完整的呢？就是看该内容脱离当前的语境，是否还是完整的、独立的。

通常来说，<article>标签会有一个标题(一般在header内)，还会有一个footer页脚，下面有一段示例代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<article>
<header>
<h1>html5--新增标签</h1>
<p>html5...</p>
</header>
<p>html5新增的标签有。。。</p>
<section>
<h2>header</h2>
<p>header标签定义。。。</p>
</section>
<section>
<h2>section</h2>
<p>section标签定义。。。</p>
</section>
<div id="footer">by 你若精彩_天自安排<</div>
</article>
</body>
</html>

<article>标签还可以内嵌<article>标签，此时就代表内嵌的<article>标签的内容是和它外部的<article>标签的内容有关联的，比如：一篇博客文章和它的评论。

<aside>标签

aside，旁边。<aside>标签定义article以外的内容，即跟主内容相关，但是又可以独立的内容。比如：广告，引用，侧边栏等。

目前，<aside>标签在html5中有两种使用方法：

1，被包含在<article>标签中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、名字解释等。

</pre><p><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<article>
<header>
<h1>html5--新增标签</h1>
<p>html5...</p>
</header>
<section>
<h2>header</h2>
<p>header标签定义。。。</p>
</section> <section>
<h2>section</h2>
<p>section标签定义。。。</p>
</section>
<aside>
<p>更详细的介绍请看http://blog.csdn.net/u010556394</p>
</aside>
<div id="footer">by 你若精彩_天自安排</div>
</article>
</body>
</html>

2，在<article>标签外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是友情链接、附属导航、广告单元等。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<article>
<header>
<h1>html5--新增标签</h1>
<p>html5...</p>
</header>
<section>
<h2>header</h2>
<p>header标签定义。。。</p>
</section>
<section>
<h2>section</h2>
<p>section标签定义。。。</p>
</section>
<div id="footer">by 你若精彩_天自安排<</div>
</article>
<aside>
<h2>更多连接</h2>
<ul>
<li><a href="http://www.w3school.com.cn/">w3school</a></li>
<li><a href="http://www.w3school.com.cn/">w3school</a></li>
</ul>
</aside>
</body>
</html>

<nav>标签

nav的全称是navigation，就是导航的意思。<nav>标签就是页面中一个用来链接到其他页面或当前页面的区域。

在以前我们通常是用命名为nav的div包含ul来定义一个导航，比如：

<div id="nav">
<ul>
<li>
<a href="#">header</a>
</li>
<li>
<a href="#">section</a>
</li>
<li>
<a href="#">article</a>
</li>
</ul>
</div>

现在，我们就可以这么使用

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<article>
<header>
<h1>html5--新增标签</h1>
<p>html5...</p>
</header>
<nav>
<ul>
<li>
<a href="#">header</a>
</li>
<li>
<a href="#">section</a>
</li>
<li>
<a href="#">article</a>
</li>
</ul>
</nav>
<section>
<h2>header/h2>
<p>header标签定义。。。</p>
</section>
<section>
<h2>section</h2>
<p>section标签定义。。。</p>
</section>
<div id="footer">by 你若精彩_天自安排<</div>
</article>
<aside>
<h2>更多连接</h2>
<ul>
<li><a href="http://www.w3school.com.cn/">w3school</a></li>
<li><a href="http://www.w3school.com.cn/">w3school</a></li>
</ul>
</aside>
</body>
</html>

注意：不要把所有列表式的链接都放在nav中

<footer>标签

<footer>标签和<header>标签类似，只是<footer>标签是用来表示页面和部分内容的页脚。现在我们就可以用<footer>标签表示页面的页脚部分。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<article>
<header>
<h1>html5--新增标签</h1>
<p>html5...</p>
</header>
<nav>
<ul>
<li> <a href="#">header</a> </li>
<li> <a href="#">section</a> </li>
<li> <a href="#">article</a> </li>
</ul>
</nav>
<section>
<h2>header</h2>
<p>header标签定义。。。</p>
</section>
<section>
<h2>section</h2>
<p>section标签定义。。。</p>
</section>
<footer>
<p>by 你若精彩_天自安排</p>
</footer>
</article>
<aside>
<h2>更多连接</h2>
<ul>
<li><a href="http://www.w3school.com.cn/">w3school</a></li>
<li><a href="http://www.w3school.com.cn/">w3school</a></li>
</ul>
</aside>
</body>
</html>