HTML5 - New Elements

HTML5 新元素

HTML5 新元素介绍

HTML5 的语法更加简化，其增加的新元素的特点是更好的结构化(语义化)，更好的表单处理和呈现，以及对绘画和媒体的原生支持，同时还移走了HTML4.01 中认为是过时的元素。

  • HTML5 对语法的简化
  • 新的语义化/结构化元素
  • 新的媒体元素
  • 新的表单元素
  • 从HTML5 中移走的HTML 4.01 元素

HTML5 简洁化的语法

简化的Doctype声明

之前的各种HTML(XHTML)中的Doctype声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

HTML5

<!doctype html>

简化的根元素

XHTML

<html xmlns="http://www.w3.org/1999/xhtml">

HTML5

<html>

简化的字符集声明

HTML4

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML5

<meta charset="utf-8">

简化的JavaScript 嵌入

HTML5

<script>
...
</script>

HTML4

<script type="text/javascript">
...
</script>

简化的样式嵌入

HTML5

<style>
...
</style>

HTML4

<style type="text/css">
...
</style>

简化的样式表链接

HTML5

<link rel="stylesheet" href="style.css" />

HTML4

<link rel="stylesheet" href="style.css" type="text/css" media="all" />

新增加的元素

  • <article>
  • <aside>
  • <bdi>
  • <command>
  • <details>
  • <summary>
  • <figure>
  • <figcaption>
  • <footer>
  • <header>
  • <hgroup>
  • <mark>
  • <meter>
  • <nav>
  • <progress>
  • <ruby>
  • <rt>
  • <rp>
  • <section>
  • <time>
  • <wbr>

被去除的的元素

下列HTML 4.0的元素被从HTML5 中去除掉了：

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

语义化标记

<header>

页眉

语义化标记的作用是为了描述内容，使机器和开发人员更容易理解内容的语义。

header 元素代表了一组介绍性内容或者导航辅助。header 元素通常用来包含各节的标题(一个h1-h6元素或者hgroup元素), 也可以用来包含搜索框，公司logo，目录列表等。

  • header != h1, h2, h3...
  • header可以包含从公司logo到搜索框，以及目录列表在内的各式内容
  • 同一个页面可以包含多个header
<header>             
  <h2>欢迎...</h2>             
  <p>发布时间                
    <time datetime="2012-08-01T14:39">2012/08/01 14:39</time>             
  </p>           
</header>

<footer>

页脚

footer元素代表一个节的末尾("脚")部分。页脚通常含有该节的一些基本信息，例如作者，相关文档的链接，版权资料等。

<footer>
  <p><a href="comments"><i>25 个评论</i></a> ...</p>
</footer>
  • footer也可以包含多个，页面的footer，或者文章(article)的footer

给header和footer设置ID属性，更容易对其操作样式

<nav>

导航

nav 元素代表页面的导航链接区域。但是并不是页面上所有的链接组都要位于nav 元素中 - 只有那些由主要的导航区块所组成的部分才适合。

例如页脚区域的指向服务条款，首页，隐私条款等，使用footer 元素就足够了。

  • <nav>和<div id="navigation">
  • 导航也可以包含多个：头部，尾部及内部。
<nav> 
  <ul>
    <li><a href="/">最新发布</a></li>
    <li><a href="archives">存档</a></li>
    <li><a href="contributors">作者</a></li>
    <li><a href="contact">联系我们</a></li>
  </ul>
</nav>

<section>

节或段

  • section 元素代表文档中的一节或一段，指的是内容按照主题的分组，通常还附有标题。例如：带标签页的对话框上的每个标签页。
  • section 是页面上的逻辑区域，可以使用section替代div标签。
<div class="span9">
  <section id="global">
  <section id="gridSystem">
  <section id="fluidGridSystem">
  <section id="responsive">  
</div>

<article>

  • article 元素代表在一个文档，页面中自成一体的内容组成。
  • article 适用于描述页面实际内容(除了header，footer，nav，widget，blogroll等之外的真正内容)
  • article 可以是一篇论坛帖子，一篇杂志或者报纸上的文章，一篇blog帖子等。

<aside>

  • aside 元素代表一个页面区域，其中包含和页面主要内容相关，但又可以单独存在的那些内容。
  • 可以使用新的aside标签为主要内容添加一些附加信息，例如：引言，图表，补充观点，相关链接等。
  • aside置于article内部，一般紧邻相关内容放置。

<hgroup>

标题归组

  • hgroup元素代表”段“或”节“的标题。
  • 当标题有多个层级时，可以用hgroup将h1到h6元素归组，用于实现子标题等功能。
<hgroup>      
  <h2><hgroup></h2>
  <h3>标题归组</h3>
</hgroup>
更好的语义化标记

一个简单的HTML5页面

供 application 使用的标记

<datalist>

  • datalist 标签为input 元素指定了一系列的预定义的选项。
  • 可以用来提供一种输入"自动完成"的特性，当用户输入数据时将会看到一个预定义项的下拉列表。
  • 使用input 的list 属性把它和datalist 元素绑定到一起。
  • 支持的浏览器包括：Firefox, Opera和Chrome。
<input list="cars"/>
<datalist id="cars">
  <option value="BMW"/>
  <option value="Ford"/>
  <option value="Volvo"/>
  <option value="大众"/>
</datalist>

<details>和<summary>

  • details 标签指定了附加的详细信息，用户可以根据需要展开查看或者隐藏。
  • 可以使用details 创建一些可以跟用户交互的小插件。
  • details 中可以放置任何内容。
  • 可以给details 指定open 属性，指定初始是展开还是隐藏的。
  • 目前仅Chrome和Mac上的Safari支持。
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<details open="open">
  <p>If your browser supports this element, it should allow you to expand and collapse these details.</p>
</details>
Copyright 1999-2011.

- by Refsnes Data. All Rights Reserved.

All content and graphics on this web site are the property of the company Refsnes Data.

If your browser supports this element, it should allow you to expand and collapse these details.

<meter>

  • meter 标签用于表示在一个已知范围内的向量度量值,或者一个分数。
  • 比如可以用来表示磁盘使用率，融资过程中数额的增长。
  • meter 主要用于显示当前相对固定的可度量值
  • 目前仅Opera和Chrome支持
<meter min="0" max="100" value="25">25%</meter>
<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
25%

A+

<progress>

  • progress 元素用于显示实时进度。
  • 目前支持的浏览器包括：Firefox, Opera和Chrome。
<progress>working...</progress>
<progress value="75" max="100">3/4 complete</progress>
working... 3/4 complete

描述性的链接关系

普通的链接(<a href>)只是简单的链接到另外一个网页；链接关系(link relations)提供了一种方式以解释为什么要链接到那个页面。

HTML5 的链接关系分为两类，都可以由link 元素创建：

  • 一类是引入外部资源以加强当前文档；
  • 另一类是指向其他文档的超链接。

大多数情况下，链接关系都在一个页面的<head>区域的<link>元素中可见；有些链接关系也可以用于<a>元素。

<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"/>
<link rel="icon" href="/favicon.ico"/>
<link rel="pingback" href="http://myblog.com/xmlrpc.php"/>
<link rel="prefetch" href="http://myblog.com/main.php"/>

<a rel="archives" href="http://myblog.com/archives">old posts</a>
<a rel="external" href="http://notmysite.com">tutorial</a>
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
<a rel="tag" href="http://myblog.com/category/games">games posts</a>

rel="stylesheet"

rel=“stylesheet”是最常见的一种链接关系，指向一个包含CSS规则的外部独立文件。

<link rel="stylesheet" href="style.css"/>

rel="alternate"

rel=”alternate“ 的type属性值可以是RSS或者Atom等媒介类型，可以用于像Google Reader这样的聚合内容阅读器；

也可以将rel="alternate"与其他的type属性值结合使用来指明同样内容的其他格式，例如PDF。

<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"/>

rel="icon"

icon应该仅次于stylesheet的第二流行的链接关系。

<link rel="icon" href="/favicon.ico"/>

浏览器会将页面和一个小图标相连，这个小图标通常会显示在地址栏的网址旁边，或者在浏览器的标签卡上，或者两处都有。

rel="pingback"

指定一个pingback 服务器地址。可以在blog被其他网站链接时，自动接收到通知。

<link rel="pingback" href="http://myblog.com/xmlrpc.php"/>

rel="prefetch"

表示预先获取并缓存特定的资源可能是有好处的，因为用户极有可能会请求这个资源。

<link rel="prefetch" href="http://myblog.com/main.php"/>

rel="archives"

表示所引用的文档描述了一组收藏，包括记录，文档或者有历史价值的材料。

<a rel="archives" href="http://myblog.com/archives">old posts</a>

比如blog的索引页可以使用rel="archives"来链接到该blog过去所发表文章的索引目录。

rel="external"

表示该链接指向一个和当前文档不同的，并不属于站点一部分的文档。

<a rel="external" href="http://notmysite.com">tutorial</a>

WordPress 会给它访客留言中的链接都加上rel="external"属性。

rel="licence"

表示引用的文件正是当前文档所采用的版权许可证。

<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>

rel="nofollow"

表示链接未经页面的作者或出版者的许可，或者该链接主要是由于与对方的商业合作伙伴关系才被添加的。

<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>

这个链接关系由Google 发明，大多数Blog系统的留言中的链接都会被标注为nofollow，这样在PageRank 中，页面的权重就不会传递给链接的页面。

rel="tag"

表示所引用的文档代表的标签被应用于当前文档。

<a rel="tag" href="http://myblog.com/category/games">games posts</a>

大多数支持文章分类，关键字和标签的Blog系统都会使用rel="tag"链接。

HTML5 新的表单元素

HTML5 的新表单

HTML5 标准中定义了许多新的输入框类型可以用在表单中。

  • Web Form 2.0 规范被整合进了HTML5
  • 添加了日期选择器，颜色选择器和数字取值按钮
  • 输入字段类型现在包括email，search，url，tel等
  • 支持占位文本，自动聚焦，客户端验证...等属性
<input type="range" min="0" max="10" 
       name="priority" value="0" id="priority">
<input type="number" name="estimated_hours"
       min="0" max="1000"
       id="estimated_hours">
<input type="date" name="start_date" id="start_date" value="2010-12-01">
<input type="email" name="email" id="email">
<input type="url" name="url" id="url">
<input type="color" name="project_color" id="project_color">

占位文本

Placeholder Text

HTML5 标准对Web表单的一项改进就是允许输入框设置占位文本。

placeholder 属性目前的所有的主流浏览器中都被支持(Filefox, Opera, Chrome, Safari)，除了IE。

<form>
  <input name="q" placeholder="请输入关键字查找">
  <input type="submit" value="搜索">
</form>

自动聚焦

Audofocus Fields

以前我们一般使用JavaScript 脚本在页面加载后让首个输入框自动获得焦点，现在HTML5 标准为所有的表单控件都引入了一个autofocus 属性。

<form name="f">
  <input id="q" autofocus>
  <script>
    if (!("autofocus" in document.createElement("input"))) {
      document.getElementById("q").focus();
    }
  </script>
  <input type="submit" value="Go!">

数字类型输入框：数字选择器

Numbers As Spinboxes

<label for="estimated_hours">预估时间:</label>
<input type="number" name="estimated_hours"
       min="0" 
       max="10" 
       value="6"
       step="2"
       id="estimated_hours">
  • type="number", 表示这是一个数字类型的输入框。
  • min="0", 表示输入的数值不能小于0；
  • max="10", 表示输入的数值不能大于10；
  • step="2", 表示每次增减的步进，不设置的话默认就是1。

数字类型输入框：滑块

Numbers As Sliders

滑块是另外一种数字输入框的展现形式。

<label for="priority">优先级：</label>        
<input type="range" min="0" max="10" 
       name="priority" value="2" step="2"id="priority">

日期选择器

Date Pickers

<label for="start_date">开始日期：</label>
<input type="date" name="start_date" id="start_date" value="2010-12-01">

Email 地址

Email Address

<label for="email">联系邮件：</label>
<input type="email" name="email" id="email">

Web 地址

Web Address

<label for="url">网址:</label>
<input type="url" name="url" id="url">

颜色选择器

Color Pickers

<label for="project_color">项目颜色: </label>
<input type="color" name="project_color" id="project_color">

搜索框

Search Boxes

HTML5 中专门提供了用于搜索框的输入框类型。

<label for="project_search">搜索: </label>
<input type="search" name="project_search" id="project_search">

浏览器会把输入框渲染成圆角的，而且输入内容后，搜索框的右侧会出现一个小"x"按钮，点击此按钮会清空输入框的内容。

<Thank you!>