好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTML5 新元素

html5的语义化 标签 以及 属性 ,可以让开发者非常方便地实现清晰的web 页面 布局, 加上 css3的 效果 渲染, 快速 建立丰富灵活的web 页面 显得非常简单。

html5 新元素

自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被 删除 或重新定义。

为了更好地处理今天的互联网应用,HTML5 添加 了很多新元素及 功能 ,比如: 图形的绘制,多媒体 内容 ,更好的 页面 结构,更好的形式 处理,和几个api拖放元素,定位, 包括 网页 应用程序缓存,存储,网络工作者等。

HTML5的新 标签 元素

<header>定义 页面 或区段的头部;

<footer>定义 页面 或区段的尾部;

<nav>定义 页面 或区段的导航区域;

<section> 页面 的逻辑区域或 内容 组合;

<article>定义正文或一篇完整的 内容 ;

<aside>定义补充或相关 内容 ;

nav导航 标签

示例

<!doctype?html><html><head>
< Meta ?charset="UTF-8">
<title>HTML5?Nav导航 标签 的使用</title>
</head>
<body>
<nav>
????<ul>
????????<li><a?href="#">Home</a></li>
????????<li><a?href="#">One</a></li>
????????<li><a?href="#">Two</a></li>
????????<li><a?href="#">Three</a></li>
????</ul>
</nav>
</body></html>

<header> 标签 实现

示例

<!doctype?html>
<html>

<head>
< Meta ?charset="UTF-8">
<title><header> 标签 实现?by?www.F2er.com</title>
</head>

<body>
<header?id="page_header">
????<h1>Header</h1>
</header>
</body>

</html>

<footer> 标签 实现

示例

<!doctype?html>
<html>

<head>
< Meta ?charset="UTF-8">
<title><footer> 标签 实现?by?www.F2er.com</title>
</head>

<body>
<footer> 标签 实现
<footer?id="page_footer">
????<h2>Footer</h2>
</footer>
</body>

</html>

<section>区块和<article> 文章

示例

<!doctype?html>
<html>

<head>
< Meta ?charset="UTF-8">
<title><section>和<article> 标签 实现?by?www.F2er.com</title>
</head>

<body>
<section>和<article> 标签 实现
<section?id="posts">
????????/*可以包含多个<?article>*/
????<article?class="post">
?????????/*article的 内容 */
????????</article>
????????<article?class="post">
?????????/*article的 内容 */
????????</article>
</section>
</body>

</html>

<canvas> 新元素 标签 描述 <canvas> 标签 定义图形,比如图表和其它图像


新多媒体元素 标签 描述

<au dio >

定义音频 内容

<video>

定义视频 ( video 或者 movie )

<source>

定义多媒体资源 <video> 和 <au dio >

<em bed >

定义嵌入的 内容 ,比如 插件

<track>

为诸如 <video> 和 <au dio > 元素之类的媒介规定外部文本轨道


HTML5 新表单元素 标签 描述

<datalist>

定义选项列表
需要与 input 元素配合使用该元素,来定义 input 可能的值

<keygen>

规定用于表单的密钥对 生成 器字段

<output>

定义不同类型的 输出 ,比如脚本的 输出


新的语义和结构元素

HTML5 提供了新的元素来创建更好的 页面 结构

标签 描述

<article>

定义 页面 独立的 内容 区域

<aside>

定义 页面 的 侧边栏 内容

<bdi>

允许设置一段文本,使其脱离其父元素的文本方向设置

<command>?

定义命令按钮,比如单选按钮、复选框或按钮

<details>

用于描述文档或文档某个部分的细节

<dialog>

定义对话框,比如 提示 框

<summary>

标签 包含 details 元素的 标题

< fig ure>

规定独立的流 内容 (图像、图表、照片、 代码 等等)

< fig caption>

定义 < fig ure> 元素的 标题

<footer>

定义 section 或 document 的页脚

<header>

定义了文档的头部区域

<mark>

定义带有记号的文本

<meter>

定义度量衡。仅用于已知最大和最小值的度量

<nav>

定义导航 链接 的部分

<progress>

定义任何类型的任务的进度

<ruby>

定义 ruby 注释( 中文 注音或字符)

<rt>

定义字符( 中文 注音或字符)的解释或发音

<rp>

在 ruby 注释中使用,定义 不支持 ruby 元素的浏览器所 显示 的 内容

<section>

定义文档中的节(section、区段)

<time>

定义日期或时间

<wbr>

规定在文本中的何处适合 添加 换行符


已移除的元素

下面列出的 HTML 4.01 元素在 HTML5 中已经被 删除

<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<frame>

<frameset>

<noframes>

<strike>

<tt>

HTML5 Video 视频 ? ?HTML5 浏览器支持

查看更多关于HTML5 新元素的详细内容...

  阅读:46次

上一篇

下一篇

第1节:HTML5 教程    第2节:HTML5 浏览器支持    第3节:HTML5 新元素    第4节:HTML5 Video 视频    第5节:HTML 5 Video + DOM    第6节:HTML5 内联 SVG    第7节:HTML5 新的 Input 类型    第8节:HTML5 MathML 数学公式    第9节:HTML5 Geolocation 地理定位    第10节:HTML5 Canvas画布    第11节:HTML5 拖放 ( drag 和 drop )    第12节:HTML5 Audio 音频    第13节:HTML5 Web Workers    第14节:HTML5 表单元素    第15节:HTML5 表单属性    第16节:HTML5 语义元素    第17节:HTML5 Web 存储    第18节:HTML5 Web SQL 数据库    第19节:HTML5 应用程序缓存    第20节:HTML 5 服务器发送事件    第21节:HTML5 WebSocket    第22节:HTML5 历史记录API    第23节:HTML 5 代码规范    第24节:HTML5 Canvas 描边和填充    第25节:HTML5 Canvas 绘制矩形    第26节:HTML5 Canvas 清除画布    第27节:HTML5 Canvas 渐变    第28节:HTML5 Canvas 合成    第29节:HTML5 Canvas 绘制图像    第30节:HTML5 Canvas 绘制文本    第31节:HTML5 Canvas 阴影    第32节:HTML5 Canvas 路径    第33节:HTML5 Canvas 转换    第34节:HTML5 Canvas 状态    第35节:HTML5 Canvas toDataURL()    第36节:HTML5 Canvas 像素处理    第37节:HTML5 Canvas 制作动画