HTML5的中的新元素_下面哪个是HTML5的新元素资源-CSDN文库

需积分: 9 54 浏览量 2011-11-23 14:01:45 上传评论收藏 106KB DOC 举报

新千年以来，超文本标记语言（HTML）5 第一次向 HTML 中引入新的元素。新的结构元素包括 aside、figure 和 section。新的内联元素包括 time、meter 和 progress。新的内嵌元素有 video 和 audio。新的交互元素有 details、datagrid 和 command。超文本标记语言（HTML）的开发到 1999 年 HTML 4 就停止了。万维网联盟（W3C）把重点转向将 HTML 的底层语法从标准通用标记语言（SGML）改为可扩展标记语言（XML），以及可缩放向量图型（SVG）、XForms 和 MathML 这些全新的标记语言。浏览器厂商则把精力放到选项卡和富站点摘要（RSS）阅读器这类浏览器特性上。Web 设计人员开始学习使用异步 JavaScript + XML（Ajax），在现有的框架下通过层叠样式表（CSS）和 JavaScript™ 语言建立自己的应用程序。但是在接下来的八年中，HTML 本身没有任何变化。 ### HTML5的新元素详解 #### 一、背景与概述自1999年HTML4发布以来，HTML的标准并未有实质性的更新。然而，在这段时间里，互联网技术经历了快速的发展，如Ajax、CSS2等新技术的出现，使得网页设计更加丰富和动态。然而，HTML本身并没有随着这些变化而发展。直到2004年，苹果、Opera和Mozilla基金会共同创立了Web Hypertext Application Technology Working Group (WHATWG)来推动HTML的进一步发展。这一努力的结果就是HTML5，它是HTML标准的重要更新。 #### 二、HTML5新增结构元素 HTML5引入了一系列新的结构元素来更好地组织和定义网页内容，使得文档结构更清晰且语义化更强。这些元素包括： - **`<aside>`**：用于定义页面内容之外的信息，例如侧边栏、注释或相关链接。 - **`<figure>`**：用于包含像图片、图表、视频等多媒体对象，并可包含标题（通过`<figcaption>`标签）。 - **`<section>`**：定义文档中的一个独立部分，如章节、页眉或页脚。 - **`<header>`**：用于定义文档或某个区域的头部。 - **`<footer>`**：用于定义文档或某个区域的尾部。 - **`<nav>`**：用于定义页面导航链接的部分。 - **`<article>`**：用于定义文档、页面或应用中的独立内容，如博客文章或新闻故事。 #### 三、HTML5新增内联元素除了结构元素外，HTML5还引入了一些新的内联元素，用于描述文档中的特定部分，这些元素包括： - **`<time>`**：用于定义时间或日期。 - **`<meter>`**：用于表示某个范围内的数值，常用于进度条或测量值。 - **`<progress>`**：用于显示任务完成的程度。 - **`<mark>`**：用于高亮显示文本中的关键字或词组。 - **`<ruby>`**：用于定义注音文字（如汉语拼音标注汉字）。 - **`<rt>`**：用于定义`<ruby>`元素中的文字替代。 - **`<rp>`**：用于定义`<ruby>`元素中的括号。 #### 四、HTML5新增内嵌元素内嵌元素主要用于嵌入多媒体内容，例如音频和视频文件，无需依赖第三方插件即可直接播放。新增的内嵌元素包括： - **`<video>`**：用于定义视频播放器。 - **`<audio>`**：用于定义音频播放器。 #### 五、HTML5新增交互元素 HTML5还引入了一些新的交互元素，以增强用户体验和提供更丰富的交互功能： - **`<details>`**：用于创建可折叠的详情摘要。 - **`<summary>`**：配合`<details>`元素使用，定义摘要或标题。 - **`<dialog>`**：用于创建对话框或提示框。 - **`<datagrid>`**：用于定义数据表格，虽然这个元素目前并未被广泛支持。 - **`<command>`**：用于定义命令按钮，如工具栏上的按钮，不过该元素已被废弃。 #### 六、兼容性考虑 HTML5的一个重要设计理念是向前兼容，即旧版本的浏览器可以平滑地处理新元素而不破坏页面的整体布局。这意味着即使浏览器不认识新的HTML5元素，也会将其当作普通的`<div>`元素来处理，确保页面内容完整显示。这种设计确保了HTML5可以在各种浏览器中稳定工作，同时也为开发者提供了更多灵活性。 #### 七、案例分析以下是一个典型的博客主页示例，使用了HTML5的新结构元素进行布局： ```html <!DOCTYPE html> <html> <head> <title>Mokkamit Schlag</title> </head> <body> <header> <h1><a href="http://www.elharo.com/blog">Mokkamit Schlag</a></h1> </header> <nav> <ul> <li><a href="#about">关于</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> <main> <article> <h2>欢迎来到Mokkamit Schlag</h2> <p>这里是我们的最新文章...</p> </article> </main> <aside> <h3>热门文章</h3> <ul> <li><a href="#post1">文章1</a></li> <li><a href="#post2">文章2</a></li> </ul> </aside> <footer> <p>© 2023 Mokkamit Schlag. All rights reserved.</p> </footer> </body> </html> ``` 通过以上示例可以看出，HTML5的新元素不仅提高了代码的可读性和可维护性，还增强了网页的语义结构，有助于提高搜索引擎优化的效果。 #### 结论 HTML5的推出标志着HTML标准进入了一个新时代。新增的元素不仅增强了网页的语义结构，还为开发者提供了更多强大的功能，同时确保了向后兼容性，使得HTML5能够在不断发展的网络环境中发挥重要作用。随着浏览器对HTML5的支持不断增强，这些新元素将会越来越广泛地应用于实际项目中，从而带来更好的用户体验。

资源推荐

资源详情

资源评论

HTML5 中国：hp://www.html5cn.org

HTML5 的中的新元素

新千年以来，超文本标记语言（）第一次向中引入新的元素。

新的结构元素包括、和。新的内联元素包括、

和。新的内嵌元素有和。新的交互元素有

、和。

超文本标记语言（）的开发到年就停止了。万维网联盟

（）把重点转向将的底层语法从标准通用标记语言（）改为

可扩展标记语言（ ），以及可缩放向量图型（!）、 "和

#这些全新的标记语言。浏览器厂商则把精力放到选项卡和富站点摘要

（$）阅读器这类浏览器特性上。%设计人员开始学习使用异步

&' （()*），在现有的框架下通过层叠样式表（）和

&+语言建立自己的应用程序。但是在接下来的八年中，本身

没有任何变化。

最近，它又复活了。三家重要的浏览器厂商—(、,和-

".成立了%/*(#/0

（#）来开发传统的新版本。最近，也注意到了这

些活动，也启动了自己的新一代项目，双方的成员有很多是相同的。这

两个项目最终很可能合并。虽然很多细节还在争论之中，但下一版本的

大体轮廓已经清楚了。

%开发人员从年就一直期待的新版本（通常称为，但

是也称为%(12），现在它终于发布了。它保持了原来

的特色：没有名称空间或模式。元素不必结束。浏览器会宽容地对待错误。

仍然是，%仍然是%。

如果在年将一位%开发人员冷冻起来，现在再解冻，那么他会遇到一

些新的让人迷惑的元素。是的，他熟悉的元素（比如）仍然保留了；但是，

现在还包含、#、和等新元素。、和

仍然存在，但是增加了、和。和%仍然可用，

但是还增加了和。但是，他仔细观察一下就会发现，这些元素实

际上没什么区别。其中许多元素可能在年是开发人员需要而没有得到的。

通过与他已经掌握的元素进行简单的类比，这些新元素都很容易理解。实际上，

与()*或相比，它们非常容易掌握。

最后，当他打开22-的笔记本（运行的是34，也是在年

冷冻起来的）时，他可能对5和3678*6中

显示的新页面效果很吃惊。当然，这些老式浏览器不认识新元素，会完全忽略

它们，但是页面仍然会显示，内容仍然是完整的。

这并不是什么虚构的故事。的设计原则就是在不支持它的浏览器中能

够平稳地退化。原因很简单：我们都是这样的“原始人”。浏览器现在有选项卡、

HTML5 中国：hp://www.html5cn.org

和 $9，但是它们的显示引擎仍然停留在年的

水平。除了用户量大大增加之外，%其实在本质上没什么进步。考

虑到了这一点。它目前为%开发人员一些真正的好处，随着浏览器的缓慢

升级，页面浏览者会逐渐享受到这些好处。我们来看看提供了什么。

结构

由于缺少结构，即使是形式良好的页面也比较难以处理。必须分析标题

的级别，才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容

区和各篇文章都由通用的元素来表示。添加了一些新元素，专门

用来标识这些常见的结构：

：这可以是书中的一章或一节，实际上可以是在中有自己的标

题的任何东西

#：页面上显示的页眉；与#元素不一样

：页脚；可以显示电子邮件中的签名

：指向其他页面的一组链接

：%、杂志、文章汇编等中的一篇文章

我们来考虑一个典型的%主页，它的顶部有页眉，底部有页脚，还有几篇文

章、一个导航区和一个边栏，见清单。

清单1典型的%页面

:#;

<:#;

<<<:;00#:=;

<:=#;

:%/;

:>??;

<:>?#?;

<<<:#;:#>?#@==3331#1=%?;00#:=;:=#;

<:=;

<:>??;

<<<:>??>??;<<<<<<<<<<<<<<

<<<<<:>??>?A222BC?;

<<<<<<<:#C;:#>

<<<<<?=%=%=C22B=2=C=AAAAA*A/=?;

<<<<<DE*/:=;:=#C;

<<<<<<<

<<<<<<<:>?/?;

<<<<<<<<<:;F/7)#G0/G%

<<<<<<<<<53&/H//

<<<<<<<<<H//#17

HTML5 中国：hp://www.html5cn.org

<<<<<<<<<33#3

<<<<<<<<<#B@2(11H

<<<<<<<<<2@22(11H#/%/2@1:=;

<<<<<<<:=;

<<<<<:=;

<<<<<:>??>?A222B?;

<<<<<<<:#C;:#>

<<<<<<<<<?=%=%=C22B=2=C=%AAAAA/AA=?;

<<<<<<<<<<G/I:=;:=#C;

<<<<<<<

<<<<<<<:>?/?;

<<<<<<<<<:;/3:

<<<<<<<<<#>?#@==333131===3=

<<<<<<<<<C22B=2=J?;%3##7:=;17

<<<<<<<<<#K%%/DC2

<<<<<<<<</E%#/1

<<<<<<<<<L/H7K

<<<<<<<<</%#%//1

<<<<<<<<<,###H7K3/9

<<<<<<<<<%3#%

<<<<<<<<<#%/#017

<<<<<<<<<##%#1(

<<<<<<<<</%%/!H

<<<<<<<<<##1#/

<<<<<<<<<#1:=;

<<<<<<<:=;

<<<<<:=;

<<<

<<<:>??;

<<<<<:>??;

<<<<<<<<:#>?=%==C=?;ML8:=;

<<<<<<:=;

<<<<<:>?#?;:=;

<<<:=;

<:=;

<:>?#?>??;

<<<:>?%?;

<<<<<:;:#C;7:=#C;

<<<<<:;

剩余17页未读，继续阅读

评论收藏

内容反馈

tingtingxj

粉丝: 1
资源: 55

HTML5的中的新元素

HTML5中的新元素介绍

HTML5新元素标签系列:使用HTML5设计自己的博客

HTML5 新元素

HTML5中的新元素--结构和语义

web前端基础入门教程之HTML5 新元素

html5shiv.js

html5培训资料

完整版《HTML5高级程序设计》5

完整版《HTML5高级程序设计》2

HTML5高级程序设计

解读html5关于html5的应用与认识

html5shiv-master.zip

完整版《HTML5高级程序设计》4

正则表达式与HTML5新元素

爱心代码 李峋同款爱心等免费下载 exe、py、html格式

网页设计期末大作业+html+css

HTML5图表框架echarts实战项目(50套源码)，大数据平台展示可视化效果

谷歌兼容axure插件

小米官网simply.zip

【微信小程序-毕设期末大作业】源码电商类微信小程序

2023个税抵扣 Apsara Clouder云计算专项技能认证：云服务器ECS入门 以及个⼈所得税年度应纳税额抵扣

HTML+CSS 仿原神官网源码

Postman中文版 64位 9.12.2

FlashPlayer10.3专开swf，可创建本地播放器exe，无升级更新弹窗，亲测可用不必跪

2022起名取名测算网源码PHP+数据 完整无错版

适用于前端字体-&amp;gt;鸿蒙字体压缩字体包8068k-&amp;gt;869k（ttf）-&amp;gt;468k（woff2）

html实现好看的多种风格导航菜单(源码)

精选33款数据大屏HTML页面源代码

H5腾讯地图选择位置组件

最新资源

爱心代码李峋同款爱心等免费下载 exe、py、html格式

2023个税抵扣 Apsara Clouder云计算专项技能认证：云服务器ECS入门以及个⼈所得税年度应纳税额抵扣

2022起名取名测算网源码PHP+数据完整无错版

适用于前端字体->鸿蒙字体压缩字体包8068k->869k（ttf）->468k（woff2）