EEPW论坛

　　今天扣丁学堂小编给大家总结一下关于HTML5新增标签详解，首先HTML5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件(eg：flash)的应用，提高用户体验满意度，让开发更加方便。

　　HTML5新增的标签

　　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)默认样式、是否块/行内元素、是否是闭合元素。

　　header页眉(网页(部分区域)的头部顶部导航区域等等)，闭合标签;块元素;默认的宽是：100%;高：内容的高度;实质上，跟DIV标签，可以说是完全一样的特性;

　　nav导航链接部分;闭合标签;块元素;默认的宽是：100%;高：内容的高度;实质上，跟DIV标签，可以说是完全一样的特性。

　　section标签定义网页中的区域(部分)。比如章节、页眉、页脚或文档中的其他部分。闭合标签;块元素;默认的宽是：100%;高：内容的高度;实质上，跟DIV标签，可以说是完全一样的特性;

　　footer页脚(网页(部分区域)的底部|版权区域等等)，闭合标签;块元素;默认的宽是：100%;高：内容的高度;实质上，跟DIV标签，可以说是完全一样的特性;

　　article内容是引用其他地方的。一个区域中的，另外一部分内容;闭合标签;块元素;默认的宽是：100%;高：内容的高度;实质上，跟DIV标签，可以说是完全一样的特性

　　aside跟article是一起使用;是辅助article区域的内容。也可以理解为整个网页的辅助区域;(最常见的京东的右侧的工具栏)

　　hgroup给标题分组，为标题或者子标题进行分组，通常与h1-h6元素组合使用。如果文章中只有一个标题，则不使用hgroup。

　　闭合标签;块元素;默认的宽是：100%;高：内容的高度;实质上，跟DIV标签，可以说是完全一样的特性;

　　figure对多个元素进行组合。通常与figcaption联合使用。闭合标签;块元素;默认的宽是：100%;高：内容的高度;实质上跟DIV标签，可以说是完全一样的特性;figcaption定义figure元素组的标题，必须写在figure元素中。一个figure元素内最多只允许放置一个figcaption元素。闭合标签;块元素;默认的宽是：100%;高：内容的高度;实质上，跟DIV标签，可以说是完全一样的特性;

　　audio播放声音文件，比如音乐或其它音频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。闭合标签;行内元素;默认的宽:controls的宽度300px;高:controls的高度32px;autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性。srcurl要播放的音频的URL。

　　video播放视频文件，比如电影或其它视频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。闭合标签;行内元素;默认的宽：300px高：150px。autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。height设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性。src要播放的视频的URL。width设置视频播放器的宽度。

　　source为媒介元素(比如video和audio)指定多个播放格式与编码，浏览器会自动选择第一个可以识别的格式。非闭合标签，只有开始标签，没有结束标签。source行内元素，默认无宽度和高度。media定义媒介资源的类型，供浏览器决定是否下载。src媒介的URL。type定义播放器在音频流中的什么位置开始播放。默认，音频从开头播放。

　　canvas定义图形，比如图表和其他图像。

　　闭合标签;行内元素;默认情况下，canvas创建的画布宽：300px;高：150px;

　　datalist定义可选数据的列表。与input元素配合使用，就可以制作出输入值的下拉列表。

　　闭合标签;行内元素;默认无宽度和高度。

　　embed定义嵌入的内容，比如插件。用来插入各种多媒体，格式可以是MIDI、MP3等。

　　非闭合标签，只有开始标签，没有结束标签。行内元素;默认的宽：300px;高：150px。

　　time定义日期或时间，或者两者。闭合标签;行内元素，默认情况下，宽：内容的宽度;高：内容的高度;

　　address为文档或section定义联系信息，比如：电子邮箱、地址、电话、QQ、微信号等。

　　闭合标签;块元素;默认的宽是：100%;高：内容的高度;实质上，跟DIV标签，可以说是完全一样的特性;

　　map定义客户端的图像映射。图像映射是带有可点击区域的图像。

　　闭合标签;行内元素;默认情况下，无宽度和高度;

　　areaarea元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。

　　闭合标签，行内元素;只有结束标签，没有开始标签。默认情况下，无宽度和高度;

　　mark定义页面中需要突出显示或高亮显示的内容，通常在引用原文时，使用此元素，目的就是引起当前用户的注意。闭合标签;行内元素;默认情况下，宽：内容的宽度;高：内容的高度;

　　details标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。(备注信息)，块元素

　　;默认的宽是：100%;高：内容的高度;实质上，跟DIV标签，可以说是完全一样的特性;

　　但是有一个动态的效果，点击可以显示(展开)内容，再点击可以隐藏(收起)内容;

　　以上就是关于HTML5新增标签的详细介绍，最后想要工作不累就要不断的提升自己的技能，想要快速学习HTML5培训技术就到由专业老师授课的扣丁学堂学习吧。扣丁学堂还有名师录制的HTML5视频教程供学员观看学习，想要HTML5视频教程的小伙伴快咨询我们的专业老师索要吧。扣丁学堂H5技术交流群：751662650。