section 元素定义文档或应用程序中的一个区段, 比如章节, 页眉, 页脚或文档中的其他部分. 它可以与 h1,h2,h3,h4,h5,h6 元素结合起来使用, 标示文档结构.
html5 中代码示例: <section>...</section>
HTML4 中代码示例:<div>...</div>
article 元素
article 元素表示文档中的一块独立的内容, 譬如博客中的一篇文章或报纸中的一篇文章.
HTML5 中代码示例 :<article>...</article>
HTML4 中代码示例 :<div class="article">...</div>
header 元素
header 元素表示页面中一个内容区块或整个页面的标题. HTML5 中代码
示例:...
HTML4 中代码示例 :<div>...</div>
nav 元素
nav 元素表示导航链接的部分.
HTML5 中代码示例 : <nav>...</nav>
HTML4 中代码示例 :<ul>...</ul>
footer 元素
footer 元素表示整个页面或页面中一个内容区块的脚注. 一般来说, 它会包含创作者的姓名, 文档的创作日期以及创建者联系信息.
HTML5 中代码示例 :<footer>...</footer>
HTML4 中代码示例 :<div>...</div>
--------------------------------------------------------
新增块级语义元素:
aside 元素
aside 元素表示 article 元素的内容之外的与 article 元素的内容相关的有关内容.
HTML5 中代码示例 :<aside>...</aside>
HTML4 中代码示例 :<div>...</div>
figure 元素
figure 元素表示一段独立的流内容, 一般表示文档主体流内容中的一个独立单元. 使用 <figcaption> 元素为 figure 元素组添
加标题.
HTML5 中代码示例:
- <figure>
- <figcaption>
- PRC
- </figcaption>
- <p>
- The People's Republic of China was born in 1949...
- </p>
- </figure>
HTML4 中代码示例:
- <dl>
- <h1>
- PRC
- </h1>
- <p>
- The People's Republic of China was born in 1949...
- </p>
- </dl>
dialog 元素
dialog 标签定义对话, 比如交谈. 注意: 对话中的每个句子都必须属于 <dt> 标签所定义的部分.
HTML5 中代码示例:
- <dialog>
- <dt>
- 老师
- </dt>
- <dd>
- 2+2 等于?
- </dd>
- <dt>
- 学生
- </dt>
- <dd>
- 4
- </dd>
- <dt>
- 老师
- </dt>
- <dd>
- 答对了!
- </dd>
- </dialog>
- --------------------------------------------------------
新增行内语义元素:
mark 元素
mark 元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字. mark 元素的一个比较典型的应用就是在搜索结果中向用户
高亮显示搜索关键词.
HTML5 中代码示例 :<mark>...</mark>
HTML4 中代码示例 :<span>...</span>
time 元素
time 元素表示日期或时间, 也可以同时表示两者.
HTML5 中代码示例 : <time>...</time>
HTML4 中代码示例 :<span>...</span>
meter 元素
meter 元素表示度量衡. 仅用于已知最大和最小值的度量. 必须定义度量的范围, 既可以在元素的文本中, 也可以在 min/max 属性中定
义.
HTML5 中代码示例 : <meter>...</meter>
progress 元素
progress 元素表示运行中的进程. 可以使用 progress 元素来显示 JavaScript 中耗费时间的函数的进程.
HTML5 中代码示例 :<progress>...</progress>
--------------------------------------------------------
新增多媒体与交互性元素:
video 元素 & audio 元素
video 用来插入视频, audio 用来插入声音, 当然, 用下面这个:
<video src="XX.wmv"> 您的浏览器不支持 video 标签 </video>
如果不支持的话, 就会显示标签内的文字
details 元素
details 元素表示用户要求得到并且可以得到的细节信息. 它可以与 summary 元素配合使用. summary 元素提供标题或图例. 标题是可
见的, 用户点击标题时, 会显示出 details.summary 元素应该是 details 元素的第一个子元素.
HTML5 中代码示例:
- <details>
- <summary>
- HTML 5
- </summary>
- This document teaches you everything you have to learn about HTML 5.
- </details>
- <!-- 实践证明没用啊...->
datagrid 元素
datagrid 元素表示可选数据的列表, 与 input 元素配合使用, 可以制作出输入值的下拉列表.
HTML5 中代码示例 :<datagrid>...</datagrid>
menu 元素
menu 元素表示菜单列表. 当希望列出表单控件时使用该标签.
HTML5 中代码示例:
- <menu>
- <li>
- <input type="checkbox" />
- Red
- </li>
- <li>
- <input type="checkbox" />
- blue
- </li>
- </menu>
U 注意: HTML4 中 menu 元素不被推荐使用.
command 元素
command 元素表示命令按钮, 比如单选按钮, 复选框或按钮.
HTML5 中代码示例:
Øcommand 元素
command 元素表示命令按钮, 比如单选按钮, 复选框或按
钮.
HTML5 中代码示例 : command onclick=cut()"label="cut">
--------------------------------------------------------
新增 input 类型:
email--email 类型用于应该包含 e-mail 地址的输入域.
url--url 类型用于应该包含 URL 地址的输入域.
number--number 类型用于应该包含数值的输入域.
range--range 类型用于应该包含一定范围内数字值的输入域.
Date Pickers(数据检出器)
search--search 类型用于搜索域, 比如站点搜索或 Google 搜索. search 域显示为常规的文本域.
--------------------------------------------------------
多个可供选取日期和时间的新输入类型:
date - 选取日, 月, 年
month - 选取月, 年
week - 选取周和年
time - 选取时间 (小时和分钟)
datetime - 选取时间, 日, 月, 年 (UTC 时间)
datetime-local - 选取时间, 日, 月, 年 (本地时间)
--------------------------------------------------------
废除的元素:
•1. 能使用 CSS 代替的元素
对于 basefont,big,center,font,s,strike,tt,u 这些元素, 由于他们的功能都是纯粹为画面展示服务的, 而在 HTML5 中提
倡把画面展示性功能放在 CSS 样式表中统一编辑, 所以将这些元素废除, 并使用编辑 CSS 样式表的方式进行替代.
•2. 不再使用 frame 框架
对于 frameset 元素, frame 元素与 nofranes 元素, 由于 frame 框架对页面可存在负面影响, 在 html5 中已不再支持 frame 框架, 只支持 iframe 框架, 或者用服务器方创建的由多个页面组成的复合页面的形式, 同时将以上三个元素废除.
•3. 只有部分浏览器支持的元素
对于 applet,bgsound,blink,marguee 等元素, 由于只有部分浏览器支持这些元素, 所以在 HTML5 中被废除. 其中 applet 元素可由 embed 元素替代, bgsound 元素可由 audio 元素替代, marquee 可以由 JavaScript 编程的方式所替代.
来源: http://www.jianshu.com/p/ad112abd953f