HTML5新标签的学习

发表于   |   分类于   |     |   阅读次数

虽说已经知道html5很长时间了，但是我们平常写页面的时候是不是还是会这样呢？

1
2
3
4
5
6
7
8
9
10
11
<div class="header">
  //一些内容
</div>

<div class="main-body">
  //一些内容
</div>

<div class="footer">
  //一些内容
</div>

其实我们可以这么写：

1
2
3
4
5
6
7
8
9
10
11
<header>
  //一些内容
</header>

<main>
  //一些内容
</main>

<footer>
  //一些内容
</footer>

html5给了我们很多新的标签可供使用，以前对html5有些了解，但没有仔细的学习，正好最近在看百度ife的任务题(点击这里)，我们就来一起学一学我们以前知道但是没有注意的html5新标签吧~~~

就像我们上面那个例子看到的那样，我觉得这是里面最常用的的标签了。<header>、<footer>、<main>、<section>、<nav>，以前我们都会用id或者class去表明这个div的意图，现在我们多了这几个标签之后，我们可以更加语义化的去编写html的结构了。

header和footer标签

<header>和<footer>标签就是定义页眉和页脚，语义很明显。用法和div和没有本质的区别。

main标签

接下来是<main>标签了，这个标签貌似不是h5新出来的标签，但是之前我都没有注意过，W3School给出他的定义和用法是这样的(w3c的在这里。。。。有能力的同学可以看这个地址)。

<main> 标签规定文档的主要内容。
<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

根据这个说明，我们可以知道<main>标签很适合做主要内容的标签，而不用再用div来定义一个class="main-body"类似这样的结构来编写主要内容部分了。

以前在写头部的导航标签的时候我们一般是这样：

1
2
3
4
5
<ul>
	<li><a href="/html/index.asp">Home</a></li>
	<li><a href="/html/index.asp">Home</a></li>
	<li><a href="/html/index.asp">Home</a></li>
</ul>

但是html5新加了一个专门用于导航的标签<nav>，他主要是应用在需要导航链接的地方和页脚需要加很多链接列表的地方，所以以后我们在写导航栏的时候就可以这样：

1
2
3
4
5
6
7
<nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/events">Current Events</a></li>
      ...more...
    </ul>
  </nav>

section和article标签

我在review别的同学的代码的时候看到了有些同学用section标签来代替div标签来做容器标签，其实这样是不对的。

官方的文档里是这么说的这里：

The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

我英语不好。。。用百度翻译了一下。。。。大概的意思就是这个<section>标签并不是一个通用的容器标签，如果只是为了布局需要用到容器元素的话还是推荐div，section标签是在文章中单独内容区块所用的(就好像我们小学时候的内容段，额。。。就是整篇文章分为几个大段。。。)。

而且section标签内应该包含<h>和<p>标签，他应该和<article>标签一起用，<article>表示一整篇文章，而<section>来区分里面的内容段。

figure和figcaption标签

用途：<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。以前我们在写一个<img>标签的时候如果需要给这个img标签定位的话我们会在外面包裹一个<div>或者是设置<img>标签的display，现在就有一个专门的标签来包裹他了。

<figcaption>的用法如下：

标签定义 figure 元素的标题（caption）。
“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

剩下的还有很多新标签，我就不在这里叙述了，有兴趣的可以到相关网站上看一下，我觉得以后在相关可以语义化的时候，我们可以尝试用一下新的标签~

以上。