详解HTML5中的figure元素、details元素和mark元素!

HTML5中,不仅增加了很多的表单元素,同时也增加和改良了可以应用在整个页面中的元素。下面为大家介绍常见的几个html5中页面元素。

figure元素和figcaption元素

figure元素是元素组合,带有可选标题。figure元素用来表示网页上一块独立的内容,将它从删除后不会对网页上的其他的内容造成任何影响。figure元素所表示可以是图片、代码统计或者示例,也可以用于视频插件、音频插件。figure元素支持accesskey、class、contenteditable、contentmene、date-*、draggable等html5全局属性,figure元素支持onafterprint、onbeforeprint、onbeforeunload、onerror、onload等事件属性。

详解HTML5中的figure元素、details元素和mark元素!

figcaption元素

figcaption元素表示figure元素的标题,它从属于figure元素,在figure元素内部书写,在figure元素的从属元素的前面或者后面。建议一个figure元素放置一个figcaption元素,可以放多个其他的元素。

详解HTML5中的figure元素、details元素和mark元素!

details元素

details元素可以代码javascript部分功能(画布局部区域展开或收缩的方法),不建议使用这个功能,因为部分浏览器不支持details元素。sunmary元素从属于details元素,鼠标点击sunmary元素中的内容文字时,details元素中的元素会展开或者收缩。如果details元素内没有sunmary元素,浏览器会提供文字供点击,浏览器为提供一个诸如上下箭头之类的图标,标示区域可以被搜索或者展开。details元素可以设置open属性,打开details元素所表示的局部区域处于展开状态。details元素内不仅可以放置文字,也可以放置表单、插件或对于一个统计图提供的详细数据表格。

详解HTML5中的figure元素、details元素和mark元素!

mark元素

mark元素用于突出或者高亮显示,对于用户有重要参考作用的一段文字,使用mark元素通常是为了引起读者注意,因为标出来的文字与用户的当前操作有关,通常该元素对于当前用户具有很好的帮助作用。mark元素对原文内容具有补充作用的元素,它应该用于一段原文作者不认为重要,但为了与原文内容具有补充作用的一个元素。在全文检索某个关键词显示的结果经常用到mark元素,现在许多搜索引擎用其他方法实现了mark元素所要达到的功能。

关于html5新增的页面元素还有很多今天就先聊到这,每天学习一个知识点,每日寄语-“是非天天有,不听自然无。”

相关推荐