HTML5 的语法更加简化,其增加的新元素的特点是更好的结构化(语义化),更好的表单处理和呈现,以及对绘画和媒体的原生支持,同时还移走了HTML4.01 中认为是过时的元素。
- HTML5 对语法的简化
- 新的语义化/结构化元素
- 新的媒体元素
- 新的表单元素
- 从HTML5 中移走的HTML 4.01 元素
HTML5 的语法更加简化,其增加的新元素的特点是更好的结构化(语义化),更好的表单处理和呈现,以及对绘画和媒体的原生支持,同时还移走了HTML4.01 中认为是过时的元素。
之前的各种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">
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" />
下列HTML 4.0的元素被从HTML5 中去除掉了:
语义化标记的作用是为了描述内容,使机器和开发人员更容易理解内容的语义。
header 元素代表了一组介绍性内容或者导航辅助。header 元素通常用来包含各节的标题(一个h1-h6元素或者hgroup元素), 也可以用来包含搜索框,公司logo,目录列表等。
<header> <h2>欢迎...</h2> <p>发布时间 <time datetime="2012-08-01T14:39">2012/08/01 14:39</time> </p> </header>
footer元素代表一个节的末尾("脚")部分。页脚通常含有该节的一些基本信息,例如作者,相关文档的链接,版权资料等。
<footer> <p><a href="comments"><i>25 个评论</i></a> ...</p> </footer>
给header和footer设置ID属性,更容易对其操作样式
nav 元素代表页面的导航链接区域。但是并不是页面上所有的链接组都要位于nav 元素中 - 只有那些由主要的导航区块所组成的部分才适合。
例如页脚区域的指向服务条款,首页,隐私条款等,使用footer 元素就足够了。
<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>
<div class="span9"> <section id="global"> <section id="gridSystem"> <section id="fluidGridSystem"> <section id="responsive"> </div>
<hgroup> <h2><hgroup></h2> <h3>标题归组</h3> </hgroup>
<input list="cars"/> <datalist id="cars"> <option value="BMW"/> <option value="Ford"/> <option value="Volvo"/> <option value="大众"/> </datalist>
<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>
- 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 min="0" max="100" value="25">25%</meter> <meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
<progress>working...</progress> <progress value="75" max="100">3/4 complete</progress>
普通的链接(<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”是最常见的一种链接关系,指向一个包含CSS规则的外部独立文件。
<link rel="stylesheet" href="style.css"/>
rel=”alternate“ 的type属性值可以是RSS或者Atom等媒介类型,可以用于像Google Reader这样的聚合内容阅读器;
也可以将rel="alternate"与其他的type属性值结合使用来指明同样内容的其他格式,例如PDF。
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"/>
icon应该仅次于stylesheet的第二流行的链接关系。
<link rel="icon" href="/favicon.ico"/>
浏览器会将页面和一个小图标相连,这个小图标通常会显示在地址栏的网址旁边,或者在浏览器的标签卡上,或者两处都有。
指定一个pingback 服务器地址。可以在blog被其他网站链接时,自动接收到通知。
<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>
比如blog的索引页可以使用rel="archives"来链接到该blog过去所发表文章的索引目录。
表示该链接指向一个和当前文档不同的,并不属于站点一部分的文档。
<a rel="external" href="http://notmysite.com">tutorial</a>
WordPress 会给它访客留言中的链接都加上rel="external"属性。
表示引用的文件正是当前文档所采用的版权许可证。
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
表示链接未经页面的作者或出版者的许可,或者该链接主要是由于与对方的商业合作伙伴关系才被添加的。
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
这个链接关系由Google 发明,大多数Blog系统的留言中的链接都会被标注为nofollow,这样在PageRank 中,页面的权重就不会传递给链接的页面。
表示所引用的文档代表的标签被应用于当前文档。
<a rel="tag" href="http://myblog.com/category/games">games posts</a>
大多数支持文章分类,关键字和标签的Blog系统都会使用rel="tag"链接。
HTML5 标准中定义了许多新的输入框类型可以用在表单中。
<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">
HTML5 标准对Web表单的一项改进就是允许输入框设置占位文本。
placeholder 属性目前的所有的主流浏览器中都被支持(Filefox, Opera, Chrome, Safari),除了IE。
<form> <input name="q" placeholder="请输入关键字查找"> <input type="submit" value="搜索"> </form>
以前我们一般使用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!">
<label for="estimated_hours">预估时间:</label> <input type="number" name="estimated_hours" min="0" max="10" value="6" step="2" id="estimated_hours">
滑块是另外一种数字输入框的展现形式。
<label for="priority">优先级:</label> <input type="range" min="0" max="10" name="priority" value="2" step="2"id="priority">
<label for="start_date">开始日期:</label> <input type="date" name="start_date" id="start_date" value="2010-12-01">
<label for="email">联系邮件:</label> <input type="email" name="email" id="email">
<label for="url">网址:</label> <input type="url" name="url" id="url">
<label for="project_color">项目颜色: </label> <input type="color" name="project_color" id="project_color">
HTML5 中专门提供了用于搜索框的输入框类型。
<label for="project_search">搜索: </label> <input type="search" name="project_search" id="project_search">
浏览器会把输入框渲染成圆角的,而且输入内容后,搜索框的右侧会出现一个小"x"按钮,点击此按钮会清空输入框的内容。