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

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

figure元素和figcaption元素

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

figcaption元素

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

details元素

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

mark元素

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

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

【H5教程2.1.3】

Html元素

是指从开始标签到结束标签之间的所有代码

hhhhhhhh //段落 //空标签 or 换行123123

元素语法
空元素( )在开始标签中进行关闭
大多数HTML元素可拥有属性
嵌套的HTML元素

在

http://blog.csdn.net/jarlen/article/details/44277681

有案例介绍

HTML属性

标签可以拥有属性为元素提供更多的信息
属性以键/值对的形式出现

<a href = "www.baidu.com">baidu</a>11

常用的标签属性

<h1>:align //对齐方式<body>:bgcolor//背景色<a>:target//规定在何处打开链接123123

通用的属性

class://规定元素的类名，用来引用自定义样式id://规定元素的唯一IDstyle:规定元素的样式title:规定元素的额外信息12341234

<title>Html Test</title></head><body>定义粗体文本 <big>定义大号字</big> 定义着重文字

定义斜体文字 <del>定义删除文字</del>

<ins>定义插入文字</ins>

定义加重语气

定义下标字

定义上标字

定义小号字

</body></html>1234567891011121314151617181920212223242526272829303132333435363712345678910111213141516171819202122232425262728293031323334353637

格式化结果显示

其他

010年上半年的苹果与Adobe的冲突，使HTML5的存在一夜之间被很多人所知晓。在乔布斯的煽动下，这一已经在科技界潜行数年的下一代Web标准，被迅速拎到了台面上，苹果、谷歌、微软这科技界三巨头，连同众多业界明星，似乎突然对HTML5变得情有独钟，利益集团的之间的争夺，成了这个技术最好的催化剂。

HTML5的火热似乎暗合了“合久必分，分久必合”的旧理。愈发多样化的互联网应用与现有平台割据之间的矛盾，产生了对标准统一Web标准的迫切需求，而HTML5正是担负这一使命的最佳候选——现在看来，也是唯一候选。

显然，它的重要性不言而喻。而围绕着这一标准的争夺，势必会激起科技界的惊涛骇浪。

HTML5的革命

HTML即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是制作网页的主要语言。诞生于1993年的HTML，其文档制作并不是很复杂，且功能强大，支持不同数据格式的文件嵌入。

然而，HTML的最近一次升级还是1999年12月发布的HTML4。

乔布斯在檄文《关于Flash的思考》一文中说：“Flash是PC时代的产物，它是为个人电脑与鼠标发明的。”──其言外之意就是说已经不适应现在移动终端的需求。的确，诞生于上世纪末的HTML4仅是PC时代的产物（后继的XHTML语言除了语法外与 HTML4几乎没有区别），在它诞生至今的10年里面，互联网世界已经发生了天翻地覆的变化：Netscape灰飞烟灭，微软的IE如今已经演化到了 IE9；Firefox 从 Netscape 的死灰中诞生，重新占据了第二位；Safari和Chrome组成的Webkit（浏览器架构的一种）阵营为移动互联网世界勾画出了蓝图。

更重要的是，在如今的后Web2.0时代，人机交互、人网交互已经成为常态，对富媒体应用和本地存储的支持乏力成为现有浏览器的心腹之患。而将Web由内容平台改造为标准化的应用平台，并统一各大平台阵营的标准，正是HTML5的终极使命。

HTML5主要有以下几个特色：降低插件的重要性，简化Web开发；大幅提高对动态图像、位置服务、本地存储的支持；提高浏览器安全性。

很多业内人士认为HTML5以上特点是具有革命性的，特别是其丰富的标签体系，类似于内置了很多快捷键，将取代那些完成比较简单任务的插件，可以降低应用开发的技术门槛。

其实，由于鼓励创新，互联网在之前是非常欢迎浏览器插件的。而声音、动画及其他一些非常生动的网页，通过Adobe、 RealAudio、微软以及其他的一些公司开发的插件在网络呈现时也的确让人耳目一新。然而，问题很快就出现了，插件的接口是向所有人开放的，每个人都在尝试用自己定义的技术给网页增加新的功能，混乱不可避免。其中最有名的插件就是Flash，其他类似的插件更是数不胜数。

HTML5有望解决这一问题。举例来说，HTML5中的“video”标签使Web开发人员很容易地把视频内容与网页中的其他内容整合起来，使得Web的多媒体开发不再仅仅是使用Adobe的Flash、微软的Silverlight和升阳的JavaFX——这些被垄断的富媒体开发工具的人员的专利。显然，这对互联网的富媒体化大有裨益。

总之，从获取到互动，从图片到视频，从云端到终端，当下互联网的复杂性，迫切需要HTML5这样的救世主出现。

其实，HTML5的诞生本身就是创新派“革命”的结果:万维网之父Tim Berners-Lee在创造出HTML的同时，建立了互联网标准化组织W3C（万维网联盟）。然而，在HTML之路上行走数年之后，W3C已经跟不上互联网时代的步伐。W3C当时认为，HTML4已经功德圆满，他们的下一步工作是语法升级的可扩展超文本置标语言XHTML。他们认为其可以将Web带入光明的未来。

然而，作为第三方的W3C组织忽略了一个重要的变量——在互联网时代崛起的科技巨头。实际上，在Netscape消失之后，IE并没有一统江湖。恰恰相反，浏览器进入了战国时代。Firefox、Opera、Safari相继诞生，而它们的背后都有着强大的支持力量。

于是，由于不满“互联网造物主”——W3C的思维僵化行为拖沓，苹果公司等新贵们自发组织成立了新的超文本语言标准工作组，这就是WHATWG（超文本应用科技工作组），其使命便是致力于HTML5的规范和普及。

自己是从事了五年的前端工程师，整理了一份2019最全面前端学习资料，需要的伙伴可以私信“前端”获取领取地址，对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我。

现在看来，这些充满了野心和动力的科技巨擘，显然比无私的“互联网造物主”有力量的多。

巨人的战场

毫无疑问，HTML5将是未来互联网技术的制高点。围绕这个制高点，科技巨头们必将展开激烈的争夺。目前来看，争夺的主角，再一次锁定在了苹果和谷歌为首的两大阵营。

在苹果方面，其不断扩张的业务结构中，软件的权重始终是处于较弱的位置，比起Mac机与iPhone，其核心软件在业界的影响还要小的多。而HTML5为苹果改变这种局面，提供了千载难逢的良机。可以预见，依托其出色硬件平台，苹果将向HTML5高地展开持续攻势。

在谷歌方面，虽然它入局较晚，但其必然不会将互联网技术的优势地位拱手相让。实际上，除了在线软件领域的优势之外，谷歌TV、谷歌手机等硬件尝试，其根本目的便是为其软件拓展探路。比如谷歌的Nexus One手机就曾被用来展示最新的Flash Player 10.1。

在这场抢占互联网未来的制高点战役中，苹果与谷歌可谓针锋相对：

乔布斯批判Flash，谷歌马上在I/O大会上抨击苹果违背互联网精神；由于HTML5标准中没有指定任何的视频编解码器，在苹果明确提出自己掌握知识产权的H.264标准建议之后，谷歌在I/O大会上便提出了WebM标准；当苹果在主页中为HTML5特别开辟一个栏目之后，谷歌针锋相对地推出自己的 HTML5“练兵场”——HTML5 ROCKS；双方都在抢先发布HTML5新特性……

在巨头们的强硬姿态下，各种科技力量已经开始站队。例如，包括Opera,Mozilla,Adobe等软件巨头和AMD,ARM,NVIDIA，Qualcomm在内硬件巨头明确表示支持谷歌的 WebM标准；而之前蓝光阵营的索尼、富士、三星等公司，则本身就是H.264的专利拥有方之一。

在这场争夺中，特别值得关注的是软件领域的老大微软的态度。其也已经在HTML5领域密集布局。目前来看，一方面，微软欲利用既得优势树立自己的标准，如其宣布Chrome, Firefox和Safari并不适合处理HTML5内容，而自己的IE9渲染HTML5动画的速度是Chrome 5、Safari的12倍以上等。另一方面，与谷歌放弃正在开发的位置服务技术Gear而转投HTML5不同，微软肯定不会轻易放弃 Silverlight，其在口头支持HTML5的同时，是否会沿用捆绑销售的老伎俩尚未可知。

除了主张自己的主导标准外，在其他HTML5细节上，微软似乎与苹果站得更近些。例如，其已经公开宣布支持H.264标准。当然，这可能与其和苹果一样同为封闭性研发体系，并同为H.264专利拥有方之一有关。

按照计划，WHATWG将在2012年向W3C提交HTML5规划。但历史证明：HTML5完成它的使命将并非易事。

从2003年WHATWG公布HTML5草案算起，已过7年光景，HTML5并没有诞生，WHATWG的最大进展仅是促使潜在对手XHTML 2.0的夭折——2008年，W3C宣布，其工作重点已经转移到HTML5方向上。

之所以WHATWG进展也如此缓慢，原因同样是由于平台的割据，并且形态更为复杂。从采用不同操作系统的手机，到各家的应用程序商店；从尚处于少年期的云端技术到各家保留的专利。特别是已经势同水火的苹果与谷歌，对于连互联网电视都要各立山头的它们来说，什么变量才会使他们妥协于同一种大互联网标准呢？

而对于那些“卫星国”来说，滋味可能更为难受。虽然与苹果都有某种嫌隙的它们被谷歌拉到I/O大会上，势成“倒乔联盟”，但在实际商业生存中它们会与哪方合作还尚未可知。

比如，H.264在团结了硬件播放器阵营发展多年之后，已经成为实际上的下一代互联网视频技术，连谷歌自己的Youtube都已经向它敞开了大门，“卫星们”还会拒绝么？对于它们来说，不停的换队（如同Palm的生存状态）显然是件痛苦的事情，但商业利益的考量显然要压倒一切。

可见，虽然各方对统一标准、提高互联网易用性的目标还是一致的，但是在各方完成博弈之前，人们还要一直等待下去。

在线咨询

上一篇：初识HTML5（二）
下一篇：html开发笔记15-图片标签-向网页添加图片

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

您的项目需求