三星文档html删除吗,HTML5新增标签和删除的标签

本文介绍了HTML5新增的标签,包括结构标签如article、header、footer等,多媒体标签如video、audio,以及Web应用标签meter、progress等。同时讨论了这些标签如何改善网页布局和用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、新增标签

结构标签

相当于有意义的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:最优值

用法一

bc08bc37cf2e

image.png

75%

bc08bc37cf2e

image.png

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

属性

1.value:当前的状态值

2.max:最大状态值

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

bc08bc37cf2e

image.png

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

bc08bc37cf2e

image.png

列表标签

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

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

bc08bc37cf2e

image.png

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

用法:

bc08bc37cf2e

image.png

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

bc08bc37cf2e

image.png

点击展开后:

bc08bc37cf2e

image.png

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

很多的a

bc08bc37cf2e

image.png

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

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

menu:命令列表

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

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

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

ruby和rt标签

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

注释shi标签

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

bc08bc37cf2e

image.png

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

aaaaaaaaaa

bc08bc37cf2e

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.对搜索引擎更友好

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值