HTML 5新增的元素
HTML 5结构元素
这真是大快人心。目前，我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部，底部或者侧栏等。有了它们，代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。HTML 5增加了新的结构元素来表达这些最常用的结构：
◆section: 这可以表达书本的一部分或一章，或者一章内的一节
◆header: 页面主体上的头部。并非head元素
◆footer: 页面的底部（页脚），可以是一封邮件签名的所在
◆nav: 到其他页面的链接集合
◆article: 诸如blog, 杂志，纲要等之中的一条独立记录。
举个例子，一个blog的首页，用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还增加以下三个块级元素
◆aside
◆figure/code>
◆dialog
aside可以用以表达注记、贴士、侧栏、摘要、插入的引用等诸如作为补充主体的内容。比如这样表达blog的侧栏：
<aside><h3>最新文章</h3><ul><li><a href="http://realazy.org/blog/" mce_href="http://realazy.org/blog/">文章标题</a></li></ul>
</aside>figure元素表示一个有说明的块级图片。比如：
<figure><legend>这是图片的说明</legend><img alt="图片可替换文本" src="/path/to/img.png" mce_src="/path/to/img.png"/>
</figure>dialog元素用于表达人们之间的对话。在HTML 5中，dt用于表示说话者，而dd则用来表示说话者的内容。如：
<dialog><dt>佛</dt><dd>色即是空</dd><dt>悟空</dt><dd>空即是色</dd>
</dialog> 行内（inline）的语义元素
m元素用来标记一些不是那么需要着重强调的文本。现在尚有争议，可能最终会改为mark.
time元素如其名，用来表达时间。它需要一个datetime的特性来标明机器能够认识的时间，如：
<time datetime="2008-08-08T20:08:08">2008年8月8日晚上8时8分8秒</tiem>meter元素表达特定范围内的数值。可用于薪水、百分比、分数等。它还有6个特性来表达各方面的含义，比如：
<p>您的分数是：<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>还有一个progress，也是义如其名，用以表达进度：
<p>目标完成度：<progress value="40" max="100">40%</progress>嵌入多媒体</p>新增video和audio元素。顾名思义，分别是用来插入视频和声音的。至于格式，交由浏览器实现，HTML再也不需要特别的代码去播放特定的格式。就像img一样，不管是png, jpg还是gif都可以显示。值得注意的是，它们可以包含内容。比如，可以把歌词放到某段歌曲中去：
<audio src="谁人伴你睡.mp3" mce_src="谁人伴你睡.mp3"><p>泪枯干</p><p>难忍怎么委屈自已</p><p>曾经有一刻悲与喜</p>
</audio>交互性
HTML 5同时也叫Web Applications 1.0, 因此也进一步发展交互能力。这些标签就是为提高页面的交互体验而生：
◆details: 用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如点击）与legend交互才显示出来。
◆datagrid: 用来控制数据，可以由用户或者脚本来更新。
◆menu
◆command
转载于:https://www.cnblogs.com/fxair/archive/2012/01/06/2313950.html
HTML 5新增的元素相关推荐
- HTML5 新增结构元素分为主体结构元素和非主体结构元素
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介 ...
- HTML5用于定义一篇日志,[网页设计]HTML5之新增的元素
今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...
- HTML5中新增的元素有哪些
HTML5中新增的元素有哪些 1.新增的结构元素 语义化的标签<article></article> 文章<section></section> 独立的 ...
- HTML5新增页面元素与属性
1. 结构元素 (1)<header>元素 HTML5中的header元素是一种具有引导和导航作用的结构元素,该元素可以包含所有通常放在页面头部的内容.其基本语法格式如下: <h ...
- HTML5废除元素,HTML5 与 HTML4 的区别(2) - 新增的元素和废除的元素
新增的结构元素 在 HTML5 中,新增了以下与结构相关的元素: section元素 section 元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分. 它可以与h1.h2.h3. ...
- html5新增标记元素的内容类型,HTML5新标签与javaScript新方法
HTML5 (0106) 1.文档声明 2.字符编码设置 3.验证(http://validator.w3.org/) HTML5新增的语义化标签 1.语义化标签:说明页面内容,便于搜索引擎寻找该内容 ...
- HTML5新增内容元素和表单控件
HTML5新增语义化标签 <header>头部</header> <nav>导航</nav> <main>主体</main> & ...
- js数组再倒数第二个添加元素_归纳JS中数组的使用(一)元素新增和删除
新增元素 js中给数组新增元素主要通过2个方法 push 和 unshift Array.prototype.push 功能概述 push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长 ...
- 下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍
HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...
最新文章
- win8 远程桌面时提示凭证不工作问题的终极解决办法
- WinPhone 开发(1)-----在 XAML 页面之间浏览和数据的传递、保留以及恢复
- [USACO15JAN]草鉴定Grass Cownoisseur
- matlab恢复默认界面布局
- 后端开发实践：Spring Boot项目模板，拿去用吧！
- HTML DOM知识点补充：
- js splice坑_JavaScript的splice()方法在for循环中使用可能会遇到的坑！！！
- 用python做自我介绍_python入门教程NO.2 用python做个自我介绍
- Linux下导出MySQL为SQL文件_在linux命令下导出导入.sql文件的方法
- 《图解算法》第九章之动态规划
- vue项目中使用rem替换px-使用方法-02-问题规整
- 软件we端压力测试,软件压力测试报告
- NZT、AWZ这种一键新机软件原理详解！
- ndk读取assets文件
- MC34063降压电路
- 【WPF】用100行C#代码实现扫雷
- 网络技术基础测试（一）
- Java开发环境搭建-win10
- 2021.8.21NOIP模拟赛总结
- 台式计算机蓝屏代码08e,Win8.1电脑开机出现蓝屏代码0x000008e如何解决