HTML5_新标签
2016-11-27 本文已影响26人
07120665a058
（一）HTML5 添加的一些新标签：
<section>, <video>, <progress>, <nav>, <meter>, <time>, <aside>, <canvas>- 作用：更加的语义化
（二）新的布局页面展示：
-
- 代码如下：
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<article>
<section>section</section>
</article>
<aside>aside</aside>
<footer>footer</footer>
</body>
</html>
（三）HTML5标签详解
- <section>——对内容进行分块,分段
-
section表示一段专题性的内容，一个section元素通常由内容以及标题组成。 - 例如：文章分段等
- 代码示例：
<section>
<h1>潜行者m的个人介绍</h1>
<p>潜行者m是一个男的中国人。。。。。。</p>
</section>
- note：
相邻的section元素的内容应当是相关的，而不是像article那样独立
- <article>——代表一个独立的、完整的相关内容块
- 当我们描述一件具体的事物的时候，通常鼓励使用
article，而不是section。
- 例如：博客中的一篇文章，论坛中的一个帖子等,
article中通常包含头部（header）、底部（footer） - 代码示例：
<article>
<header>
<h1>潜行者m的个人介绍</h1>
</header>
<p>潜行者m是一个男的中国人。。。。。</p>
<footer>
<p>潜行者m版权所有</p>
</footer>
</article>
-
note：
特殊的section标签，它比section的语义更明确 -
<nav>——页面导航的链接组
-
代码示例：
<nav>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>
- <aside>——用来呈现非正文的内容，是页面里一个单独的部分
- 它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息
- 例如：广告，侧边栏
- 代码示例：
<aside>
<h1>作者简介</h1>
</aside>
- <header>——定义文档的页眉，通常是一些导航信息
- 它不局限于写在网页头部，也可以写在网页内容里
- 代码示例：
<header>
<hgroup>
<h1>网站标题</h1>
</hgroup>
</header>
-
note：
通常header标签至少包含一个标题标记h1-h6,还可以包括hgroup,table,search,nav等 -
<footer>——定义section或document的页脚
- 例如：文章的作者或者日期
- 代码示例：
<footer> 页脚信息</footer>
- note：
它和header标签使用基本一样，可以在一个页面中多次使用
-
<hgroup>——是对标题元素
h1-h6进行组合- 例如：可以用
hgroup将连续的h标签括起来
- 例如：可以用
- 代码示例：
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
<h6>...</h6>
</hgroup>
-
<figure>——用于对元素进行组合
- 多用于图片与图片描述组合
- 代码示例：
<figure>
[站外图片上传中……(2)]
<figcaption>这儿是图片的描述信息</figcaption>
</figure>
（四）、article与section的详解
-
区别：
article 元素更强调独立性、完整性，section 更强调相关性。
-
联系：
-
section和article可以互相嵌套，也就是说他们没有上下级关系，section可以包含article，article也可以包含section
-
-
代码示例：
<article>
<header>
<h1>潜行者m的个人介绍</h1>
</header>
<p>潜行者m是一个中国男人，是一个帅哥。。。。</p>
<section>
<h2>评论</h2>
<article>
<h3>评论者：潜行者n</h3>
<p>确实，m同学真的很帅</p>
</article>
<article>
<h3>评论者：潜行者a</h3>
<p>M今天吃药了没？</p>
</article>
</section>
</article>
-
article、section 与 div 的区别
-
article、section是用来划分区域的，但是我们也不可以用article、section来取代div用来布局网页，这样做，就相当于用ul来打造表格table一样 -
div的用处就是用来布局网页，划分大的区域，但在不同的内容块中，我们需要按照需求添加article、section等内容块，并且显示其中的内容，这样才是合理的使用这些元素 -
使用
section标签需要注意的地方 -
不要将
section作为用来设置样式或行为，那是div的工作 -
如果
article,aside,nav更符合状况，不要使用section -
不要为没有标题的内容区块使用
section
参考文章推荐：
