HTML5新标签有哪些呢？

1.<article>标签

<!--
	<article> 标签 
	标签定义独立的内容。
	标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
		
	<article> 的潜在来源：
	1.论坛帖子
	2.博客文章
	3.新闻故事
	4.评论
-->
<article>
  <h1>这是h1</h1>
  <p>这是段落</p>
</article>

2.<aside>标签

<!--
	<aside> 标签定义 <article> 标签外的内容。
	aside 的内容应该与附近的内容相关。	
	<aside> 的内容可用作文章的侧栏。
-->
<p>今年夏天，我和家人参观了奥兰多市。</p>
<aside>
	<h4>奥兰多市</h4>
	<p>美国佛罗里达州奥兰多市的迪士尼主题乐园</p>
</aside>

3.<audio>标签

1.在谷歌浏览器和Microsoft Edge浏览器上显示
2.在火狐浏览器上显示

3.IE

<!--
	<audio> 标签定义声音，比如音乐或其他音频流。
	目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。
-->
<audio controls>
  <source src="music.ogg" >
  <source src="music.mp3" >
	您的浏览器不支持 audio 元素。
</audio>

HTML5 中的新属性。

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。经常用
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL。经常用

4.<video>标签

<!--
	<video> 标签定义视频，比如电影片段或其他视频流。
    目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
    
    可以在 <video> 和 </video> 标签之间放置文本内容，
    这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。
-->

HTML5 中的新属性。

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。经常用
height	pixels	设置视频播放器的高度。经常用
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。经常用
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	URL	要播放的视频的 URL。经常用
width	pixels	设置视频播放器的宽度。经常用

5.<header>定义了文档的头部区域

6.<footer>定义 section 或 document 的页脚。

7<footer>定义 section 或 document 的页脚。

8.<template>定义在页面加载时隐藏的一些内容。

<!--
	<template> 标签定义在页面加载时隐藏的一些内容，该标签中的内容可以稍后使用 JavaScript 呈现。
	如果您有一些需要重复使用的 HTML 代码，则可以使用 <template> 设置为公用的模板。
-->
<template>
  <h2>logo</h2>
  <img src="http://static.runoob.com/images/runoob-logo.png" >
</template>

显示隐藏内容

<button onclick="showContent()">显示隐藏内容</button>
 
<template>
  <h2>logo</h2>
  <img src="https://static.runoob.com/images/runoob-logo.png" >
</template>
 
<script>
function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

查看浏览器是否支持 template 标签：

if (document.createElement("template").content) {
  document.write("您的浏览器支持 template 标签！");
} else {
  document.write("您的浏览器不支持 template 标签！");
}