HTML5增强的页面元素

时间:2022-11-23 17:12:40

1.写在前面

  HTML5中新增了许多的标签元素,但是很多标签给人的直观感受就是,并没有什么卵用,包括我之前的博客介绍的HTML新增的一些标签,都可以用div表现出来啊。其实HTML5最大的特点之一就是语义化。以前很多时候看代码不知道这个div包括的内容是干什么的,但是现在比如form,你知道提交表单等,语义化是HTML5的特点。

PS:HTML5里的一些标签并没有全部被所有浏览器使用。

 

2.figure

figure是用来描述图片,图表一类的(从英文翻译就知道了),它里面的figurecaption是对figure的说明(caption就是说明文字的意思),一个figure元素里面只能有一个figurecaption。

 

3.details

details是用来表示隐藏内容的,类似于js里面设置的hide,show()方法。

summary是details里面可以显示的内容。

1 <details>
2 <summary>这个地方一直显示</summary>
3 <p>这个地方在点击相关按钮之后显示</p>
4 </details>

目前谷歌和safri支持。

 

4.mark

mark标记,显示的效果就是高亮。目前主流浏览器都支持。

1 <p>这两个字<mark>高亮</mark></p>

HTML5增强的页面元素

 

5.progress

progress顾名思义,表示项目状态。比如你安装软件的进度表。progress通常和js一起使用。

1 <progress value="1" max="100">

value:表示当前值。max:表示最大值。

HTML5增强的页面元素