对于HTML的渲染,浏览器一直停留在1999年的水平。所以HTML 5是一个务实的方案,既能继续应对这么多年来分散在世界各地的HTML,又能让浏览器厂商更容易添加新的特性。这被优雅地称为退化 。让我们来看看HTML 5中加入的一些新元素。
HTML 5结构元素
这真令人兴奋。目前只能通过一个“通用”的P来定义结构,通过设置其特征id值如header、footer、 sidebar等来尝试分别表示head、bottom或sidebar。有了它们,代码编写人员再也不用担心id的命名问题,对手机、阅读器等设备有了更多语义上的好处。HTML 5增加了新的结构元素来表达这些最常用的结构:
节:这可以表示一本书的一部分或一章,或者一章中的一节。
◆页眉:页面主体上的页眉。不是头元素
页脚:页面的底部(页脚),可以是电子邮件签名的地方。
◆nav:链接到其他页面的集合。
◆文章:博客、杂志、提纲等独立记录。
比如一个博客的首页用HTML 5写,可以是这样的(有省略):
<<!DOCTYPE HTML> <HTML> <head> <title>realazy</title> </head> <body> <header> <h1>Realazy</h1></header> <section> <article> <h2><a href="http://realazy.org/blog" mce_href="http://realazy.org/blog">标题</a></h2> <p>内容在此...(省略n字)</p> </article> <article> <h2><a href="http://realazy.org/blog" mce_href="http://realazy.org/blog">标题2</a></h2> <p>内容2在此...(省略n字)</p> </article> ... </section> <footer> nav> <ul> <li><a href="http://realazy/blog" mce_href="http://realazy/blog">导航1</a></li> <li><a href="http://realazy/blog" mce_href="http://realazy/blog">导航2</a></li> ... </ul> </nav> <p>© 2007 realazy</p> </footer> </body> </HTML>HTML还添加了以下三个块级元素:
◆一旁
◆图/码& gt
◆对话框
side可以用来表达注释、提示、侧栏、摘要、插入的引文等内容以及补充主题等。例如,像这样表达博客的边栏:
<aside> <h3>最新文章</h3> <ul> <li><a href="http://realazy.org/blog/" mce_href="http://realazy.org/blog/">文章标题</a></li> ... </ul> </aside>figure元素表示带有描述的块级图片。例如:
对话元素用来表达人与人之间的对话。在HTML 5中,dt用来表示说话人,dd用来表示说话人的内容。比如:
<dialog> <dt>佛</dt> <dd>色即是空</dd> <dt>悟空</dt> <dd>现在我需要空的语义元素...内联,m元素用于标记一些不太需要强调的文本。还有争议,最终可能会改成mark.time元素,顾名思义,表示时间。它需要一个日期时间特性来表示机器可以识别的时间,例如:
<time datetime="2008-08-08T20:08:08">2008年8月8日晚上8时8分8秒</tiem>米元素表示特定范围内的数值。可用于薪资、百分比、分数等。例如:
我很遗憾地告诉你,我只有
<p>您的分数是:<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.</p>还有一种进步,顾名思义,表达进步:
目标完成程度:
新增video和audio元素。顾名思义,分别是用来插入视频和声音的。至于格式,交由浏览器实现,HTML再也不需要特别的代码去播放特定的格式。就像img一样,不管是png, jpg还是gif都可以显示。值得注意的是,它们可以包含内容。比如,可以把歌词放到某段歌曲中去:添加视频和音频元素。顾名思义,分别用来插入视频和声音。至于格式,由浏览器实现,HTML不再需要专门的代码来播放特定的格式。就像img一样,不管是png、 jpg还是gif,都可以显示。值得注意的是,它们可以包含内容。例如,你可以把歌词放进一首歌里:
<audio src="谁人伴你睡.mp3" mce_src="谁人伴你睡.mp3"> <p>泪枯干</p> <p>难忍怎么委屈自已</p> <p>曾经有一刻悲与喜</p> ... </audio>交互性
HTML 5又叫Web应用1.0,所以进一步发展了交互能力。创建这些标签是为了改善页面的交互体验:
细节
数据网格
菜单
命令
Details用于表示具体的一段内容,但默认情况下可能不会显示该内容,只会通过某种方式(比如点击)与legend交互来显示。这类似于当前通过JavaScript隐藏一段内容,点击后显示的做法。例如:
用一句话记录生活的点点滴滴,
Datagrid用于控制数据,可以由用户或脚本更新。
MenuHTML 2是存在的,但是HTML 4抛弃了它。HTML 5废物利用,并在句号中添加命令元素。
以上是HTML 5中新元素的细节。更多相关内容请关注www.AdminJS.cn(www.php.cn)!
本文由HTML5中国网编辑转载。使用或转载时请注明出处。