html5新增那些标签

概要

h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。 
- h5新增的标签

新增元素	说明
video	表示一段视频并提供播放的用户界面
audio	表示音频
canvas	表示位图区域
source	为video和audio提供数据源
track	为video和audio指定字母
svg	定义矢量图
code	代码段
figure	和文档有关的图例
figcaption	图例的说明
main
time	日期和时间值
mark	高亮的引用文字
datalist	提供给其他控件的预定义选项
keygen	秘钥对生成器控件
output	计算值
progress	进度条
menu	菜单
embed	嵌入的外部资源
menuitem	用户可点击的菜单项
menu	菜单
template
section
nav
aside
article
footer
header

1. HTML5 简介： （HTML5 是目前-2017年来说，是最新的一代HTML标准）

2. HTML5 一些新的规则： 
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 
减少对外部插件的需求（比如 Flash） 
更优秀的错误处理 
更多取代脚本的标记（新增了一些语义化的标签： 在HTML4当中，很明显的一个形象就是用DIV来进行任何的布局。） 
HTML5 应该独立于设备 （对于各个移动设备说来，也是完美兼容的） 
开发进程应对公众透明 。

3. 新特性： 
HTML5 中的一些有趣的新特性： 
新的特殊内容元素，比如 article、footer、header、nav、section 
新的表单控件，比如 calendar、date、time、email、url、search 
用于媒介回放的 video 和 audio 元素 
用于绘画的 canvas 元素 
对本地离线存储的更好的支持（我们讲JS的时候，会讲到技能点）

4. 兼容性情况： 针对浏览器的支持（除了IE6/IE7/IE8/IE9以为，其他的大部分主流的浏览器都是完美兼容的）

5：HTML5新增标签（常用的） 
如何去理解标签： 
（1） 基本语境（语义化），用在场景是什么？ 
（2） 默认样式、是否块/行内元素、是否是闭合元素。

1. header 页眉（网页（部分区域）的头部 顶部 导航区域等等），闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 
   
   
2. nav 导航链接部分；闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟 DIV标签，可以说是完全一样的特性。 
   
   
3. section 标签定义网页中的区域（部分）。比如章节、页眉、页脚或文档中的其他部分。闭合 标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的 特性； 
   
   
4. footer 页脚（网页（部分区域）的底部|版权区域等等），闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 
   
   
5. article 内容是引用其他地方的。一个区域中的，另外一部分内容；闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性 
   
   
6. aside 跟 article 是一起使用；是辅助 article 区域的内容。也可以理解为整个网页的 辅助区域；（最常见的京东的右侧的工具栏） 
   
   
7. hgroup 给标题分组，为标题或者子标题进行分组，通常与h1-h6元素组合使用。如果文章中只有一个标题，则不使用hgroup。 
   闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 
   
   
8. figure 对多个元素进行组合。通常与figcaption联合使用。闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上跟DIV标签，可以说是完全一样的特性；figcaption 定义figure元素组的标题，必须写在figure元素中。一个figure元素内最多只允许放置一个figcaption元素。闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 
   
   
9. audio 播放声音文件，比如音乐或其它音频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。闭合标签；行内元素；默认的宽:controls的宽度300px；高:controls的高度32px；autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。src url 要播放的音频的 URL。 
   
   
10. video 播放视频文件，比如电影或其它视频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。闭合标签；行内元素；默认的宽：300px 高：150px。autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。height 设置视频播放器的高度。loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。src 要播放的视频的 URL。width 设置视频播放器的宽度。 
    
    
11. source为媒介元素（比如 video 和 audio）指定多个播放格式与编码，浏览器会自动选择第一个可以识别的格式。非闭合标签，只有开始标签，没有结束标签。source 行内元素，默认无宽度和高度。media 定义媒介资源的类型，供浏览器决定是否下载。src 媒介的 URL。type 定义播放器在音频流中的什么位置开始播放。默认，音频从开头播放。 
    
    
12. canvas定义图形，比如图表和其他图像。 
    闭合标签；行内元素；默认情况下，canvas创建的画布宽：300px;高：150px; 
    
    
13. datalist 定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。 
    闭合标签；行内元素；默认无宽度和高度。 
    
    
14. embed 定义嵌入的内容，比如插件。用来插入各种多媒体，格式可以是MIDI、MP3等。 
    非闭合标签，只有开始标签，没有结束标签。行内元素；默认的宽：300px；高：150px。 
    
    
15. time 定义日期或时间，或者两者。闭合标签；行内元素，默认情况下，宽：内容的宽度；高：内容的高度； 
    
    
16. address 为文档或 section 定义联系信息，比如：电子邮箱、地址、电话、QQ、微信号等。 
    闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 
    
    
17. map定义客户端的图像映射。图像映射是带有可点击区域的图像。 
    闭合标签；行内元素；默认情况下，无宽度和高度； 
    
    
18. area area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。 
    闭合标签，行内元素；只有结束标签，没有开始标签。默认情况下，无宽度和高度； 
    
    
19. mark定义页面中需要突出显示或高亮显示的内容，通常在引用原文时，使用此元素，目的就是引起当前用户的注意。闭合标签；行内元素；默认情况下，宽：内容的宽度；高：内容的高度； 
    
    
20. details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。(备注信息)， 块元素 
    ；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 
    但是有一个动态的效果，点击可以显示(展开)内容，再点击可以隐藏(收起)内容； 
    
    
    

1. 1-12 的标签一定要好好掌握； 多媒体（音乐、视频、图形）是结合 js 来做项目的。