细谈新增的元素有哪些(新发现的元素)

lxf2023-06-07 16:30:01

对于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中国网编辑转载。使用或转载时请注明出处。

adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 在Adminjs.cn中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!