扣丁学堂浅谈HTML5新版本新增哪些标签

2018-01-18 10:35:22 554浏览

今天扣丁学堂小编给大家总结一下关于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技术交流群：559883758

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>