html5删除标签,HTML5新增标签和删除的标签

一、新增标签

结构标签

相当于有意义的div标签

article：用于定义一篇文章

header：定义页面的头部

footer：

nav：导航条链接

section：定义一个区域

aside：定义页面内容的侧边栏

hgroup：定义文件中一个区块的相关信息

例如：

标题一

标题二

figure：定义一组媒体内容以及它们的标题(可以用于包裹canvas，video等多媒体标签)

figcaption：用于figure标签内定义媒体的标题

footer：定义一个页面区域的底部

dialog：定义一个对话框(例如微信的对话框)

补充一：header/section/footer/aside/article/footer这几个标签最好不要嵌套在里面，放在最外边

补充二：使用层级(header=section=footer：写在外层)>(aside/article/figure/hgroup/nav：写在内层)

多媒体标签

第一类

video：定义一个视频

video标签和audio标签使用差不多

1.autoplay：是否自动播放

2.controls：是否展示控制器

4.可以用css控制视频框的宽度和高度

3.可以包裹source标签

audio：定义一个音频

1.autoplay：是否自动播放(autoplay="autoplay"：自动播放，不写则默认不自动播放)

2.loop：是否重复以及重复几次(loop='-1'时无限重复，=数字时重复数字次数)

3.controls：是否显示控制器(controls="controls"时显示，不写则默认不显示)

4.可以包裹source标签

source：定义媒体资源

可以用于audio和video标签内部，并且可以添加不同格式的媒体文件，type属性用于填写转码格式，如下：

第二类

canvas(图片标签)：定义图片

第三类

embed：定义外部可交互内容和插件，例如flash

使用方法和audio和video标签类似

1.可以使用css控制资源显示的大小

多媒体标签出现的意义：不使用插件就能控制媒体文件，极大地提升了用户的体验

Web应用标签

第一类：状态标签

meter：实时状态显示：气压、气温等(目前只支持谷歌和opera)

属性：

1.value：定义目前所处状态(数值)

2.min：最低数值

3.max：最高数值

4.low：最低显示(低于该值为为黄色)

5.high：最高显示(高于该值为黄色)

6.optimum：最优值

用法一

image.png

75%

image.png

progress：显示任务过程：安装、加载等(目前只支持谷歌，火狐和opera)

属性

1.value：当前的状态值

2.max：最大状态值

用法一：显示正在加载状态

image.png

用法二：显示当前加载的百分比

image.png

列表标签

datalist：为input标签定义一个下拉列表，配合option(兼容火狐和谷歌)

用法：input标签中的list属性的值和datalist标签中的id必须相同，才能进行下拉拓展

image.png

details：定义一个元素的详细内容，配合summary标签，用于展示省略的信息(兼容谷歌和其他一些高版本浏览器)

用法：

image.png

显示(未点击展开时候)：

image.png

点击展开后：

image.png

另外可以配合summary标签修改标题的显示

很多的a

image.png

open属性：可以设置为open='open'用于设置默认打开

Menu标签(很多浏览器都不支持，建议少用或不用)

menu：命令列表

menuitem：menu命令列表标签(只有火狐8.0以上支持)

command：menu标签定义的一个命令按钮(只有IE9支持，以上或以下都不支持)

注释标签(不是平时的注释，这个标签主要用于类似注释拼音之类，会显示出来)

ruby和rt标签

用法：用ruby标签将字括起来，然后rt标签填写注释信息

注释shi标签

[图片上传中。。。(10)]

image.png

mark：用于标黄(所有主流浏览器都支持，IE要9以上)

aaaaaaaaaa

image.png

二、删除的标签

纯表现元素(删除后利于表现与结构分离)

1.Basefont

2.big

3.center

4.font

5.s

6.strike

7.tt

8.u

可能有负面影响的元素

1.frame

2.frameset(使用该标签时会将body标签去掉，破坏原始结构，并且将网页拆分，不利于搜索)

3.noframes

因为HTML5详细兼容，所以以上标签还是可以使用，但是最好不要用

产生混淆的元素

1.acronym

2.applet

3.isindex

4.dir

完全没用过....

三、使用HTML5新标签进行布局的意义

1.提升语义化特性和网页的质量

2.减少了用于css调用的class和id属性

3.对搜索引擎更友好