HTML5新元素汇总及其已经不支持的元素_HTML5+CSS3

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

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

HTML5 新的语义和结构元素

HTML5 提供的新元素可以创建更好的页面结构。HTML5 添加了很多语义元素如下所示：

标签	描述
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义导航链接的部分。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

使用 HTML5 新元素实现的网页结构，这是一个非常典型的博客首页页面布局：头部、尾部、水平导航栏、侧边栏导航以及内容。

HTML5 图像【<canvas> <svg>】

标签	描述
<canvas>	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API。
<svg>	定义使用 SVG 的图像绘制。

新多媒介元素

标签	描述
<audio>	定义声音或音乐内容。
<embed>	定义外部应用程序的容器（比如插件）。
<source>	定义多媒体资源 <video> 和 <audio> 的来源。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
<video>	定义视频或影片内容。

新的表单元素

标签	描述
<datalist>	定义输入控件的预定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	规定用于表单的密钥对生成器字段（用于表单）。
<output>	定义不同类型的计算结果。比如脚本的输出。

新的输入类型与属性

新的输入类型	新的输入属性
color date datetime datetime-local email month number range search tel time url week	autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 和 width list min 和 max multiple pattern (regexp) placeholder required step

HTML5 - 新的属性语法

HTML5 允许四种不同的属性语法。

该例演示 <input> 标签中使用的不同语法：

标签	描述
Empty	<input type="text" value="John Doe" disabled>
Unquoted	<input type="text" value=John>
Double-quoted	<input type="text" value="John Doe">
Single-quoted	<input type="text" value='John Doe'>

在 HTML5 中，根据属性所需，可能会使用所有这四种语法。

HTML5 已移除元素

以下的 HTML 4.01 元素在 HTML5 中已经被删除:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

使用 HTML5 新元素模仿博客首页布局的实例

通过简单的页面布局的例子，来展示上述 HTML5 新标签的使用方法。

<!DOCTYPE html> <!-- HTML5的文档声明 -->
<html lang="en-US">
<head>
<meta charset="utf-8"> <!-- 声明编码 -->
<link rel="stylesheet" href="style.css" type="text/css">
<title>网页布局结构</title>
</head>
 
<body>
  <h2>body</h2>
  <header id="page_header">
    <h1>Header 标签定义页面或区段的头部</h1>
    <nav>
      <ul>
        <li><a href="#">导航区域</a></li>
        <li><a href="#">导航的重要性</a></li>
        <li><a href="#">对于一个网页至关重要</a></li>
        <li><a href="#">快速方便的</a></li>
        <li><a href="#">导航是留住访客所必须的</a></li>         
      </ul>
    </nav>
  </header>
  <section id="posts">
    <h2>Section 元素将页面的逻辑区域或内容合理归类，合理布局。可以包含多个 article 标签</h2>
    <article class="post">
      <h2>article 定义正文或一篇完整的内容</h2>
      <header>
        <h2>Article Header</h2>
      </header>
      <aside>
        <h2>Aside 定义补充或相关内容</h2>
      </aside>
      <ul>
      <li>aside 标签实现旁白，侧边栏则由 section 实现。</li>
      <li>aside 是为主内容添的附加信息，入引言，图片等</li>
      <li>aside 一般加在 article 中使用</li></ul>
      <footer>
        <h2>Article Footer</h2>
      </footer>
    </article>
    <article class="post">
      <h2>article</h2>
      <header>
        <h2>Article Header</h2>
      </header>
      <aside>
        <h2>Article Aside</h2>        
      </aside>
      <p>Without you?I'd be a soul without a purpose. </p>
      <footer>
        <h2>Article Footer</h2>
      </footer>
    </article>
  </section>
 
  <section id="sidebar">
    <h2>Section</h2>
    <header>
      <h2>Sidebar Header</h2>
    </header>
    <nav>
      <h3>侧边栏，不是旁白！看做是右面的一个区域，包含链接，用section和nav实现即可。</h3>
      <ul>
        <li><a href="#">April 2012</a></li>
        <li><a href="#">March 2012</a></li>
        <li><a href="#">February 2012</a></li>
        <li><a href="#">January 2012</a></li>
      </ul>
    </nav>
  </section>
 
  <footer id="page_footer">
    <h2>Footer 标签定义页面或区段的尾部</h2>
  </footer>
 
</body>
</html>

对 HTML5 新标签CSS的属性定义。命名为：style.css

@charset "utf-8";
/* CSS Document */
body { /*整个页面的属性设定*/
    background-color: #CCCCCC; /*背景色*/
    font-family: Geneva, sans-serif; /*可用字体*/
    margin: 10px auto; /*页边空白*/
    max-width: 800px;
    border: solid; /*边缘立体*/
    border-color: #FFFFFF; /*边缘颜色*/
}
 
h2 { /*设定整个body内的h2的共同属性*/
    text-align: center; /*文本居中*/
}
 
header { /*整个body页面的header适用*/
    background-color: #F47D31;
    color: #FFFFFF;
    text-align: center;
}
 
article { /*整个body页面的article适用*/
    background-color: #eee;
}
 
p { /*整个body页面的p适用*/
    color: #F36;
}
 
nav,article,aside { /*共同属性*/
    margin: 10px;
    padding: 10px;
    display: block;
}
 
header#page_header nav { /*header#page_header nav的属性*/
    list-style: none;
    margin: 0;
    padding: 0;
}
 
header#page_header nav ul li { /*header#page_header nav ul li属性*/
    padding: 0;
    margin: 0 20px 0 0;
    display: inline;
}
 
section#posts { /*#posts 的section属性*/
    display: block;
    float: left;
    width: 70%;
    height: auto;
    background-color: #F69;
}
 
section#posts article footer { /*section#posts article footer属性*/
    background-color: #039;
    clear: both;
    height: 50px;
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
}
 
section#posts aside { /*section#posts aside属性*/
    background-color: #069;
    display: block;
    float: right;
    width: 35%;
    margin-left: 5%;
    font-size: 20px;
    line-height: 40px;
}
 
section#sidebar { /*section#sidebar属性*/
    background-color: #eee;
    display: block;
    float: right;
    width: 25%;
    height: auto;
    background-color: #699;
    margin-right: 15px;
}
 
footer#page_footer { /*footer#page_footer属性*/
    display: block;
    clear: both;
    width: 100%;
    margin-top: 15px;
    display: block;
    color: #FFFFFF;
    text-align: center;
    background-color: #06C;
}

本文地址：http://aszhi.com/jishu/html5/76.html
关注我们：请关注一下微信号：扫描二维码爱思智前端的微信号