狠狠撸

HTML5 开发
Web,MobileWeb & Apps
范圣刚
安博中程在线

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

简化的Doctype声明
之前的各种HTML(XHTML)中的Doctype声明
HTML5
安博中程在线
<!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">
HTML
<!doctype html> HTML
5/50

简化的根元素
XHTML
HTML5
安博中程在线
<htmlxmlns="http://www.w3.org/1999/xhtml"> HTML
<html> HTML
6/50

简化的字符集声明
HTML4
HTML5
安博中程在线
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> HTML
<metacharset="utf-8"> HTML
7/50

简化的JavaScript 嵌入
HTML5
HTML4
安博中程在线
<script>
...
</script>
JAVASCRIPT
<scripttype="text/javascript">
...
</script>
JAVASCRIPT
8/50

简化的样式嵌入
HTML5
HTML4
安博中程在线
<style>
...
</style>
JAVASCRIPT
<styletype="text/css">
...
</style>
JAVASCRIPT
9/50

简化的样式表链接
HTML5
HTML4
安博中程在线
<linkrel="stylesheet"href="style.css"/> JAVASCRIPT
<linkrel="stylesheet"href="style.css"type="text/css"media="all"/> JAVASCRIPT
10/50

新增加的元素
安博中程在线
<article>
<aside>
<bdi>
<command>
<details>
<summary>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
·
·
·
·
·
·
·
·
·
·
·
<mark>
<meter>
<nav>
<progress>
<ruby>
<rt>
<rp>
·
·
·
·
·
·
·
11/50

被去除的的元素
下列HTML 4.0的元素被从HTML5 中去除掉了：
安博中程在线
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
·
·
·
·
·
·
·
·
·
·
·
·
12/50

<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>
HTML
14/50

<footer>
页脚
footer元素代表一个节的末尾("脚")部分。页脚通常含有该节的一些基本信息，例如作者，相关文档的链接，版
权资料等。
给header和footer设置ID属性，更容易对其操作样式
安博中程在线
<footer>
<p><a href="comments"><i>25 个评论</i></a> ...</p>
</footer>
HTML
footer也可以包含多个，页面的footer，或者文章(article)的footer·
15/50

<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>
HTML
16/50

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

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

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

<hgroup>
标题归组
安博中程在线
hgroup元素代表”段“或”节“的标题。
当标题有多个层级时，可以用hgroup将h1到h6元素归组，用于实现子标题等功
能。
·
·
<hgroup>
<h2><hgroup></h2>
<h3>标题归组</h3>
</hgroup>
HTML
20/50

一个简单的HTML5页面
安博中程在线 22/50

供 application 使用的标记

<datalist>
输入的时候可以看到一个自动完成的菜单
安博中程在线
datalist 标签为input 元素指定了一系列的预定义的选项。
可以用来提供一种输入"自动完成"的特性，当用户输入数据时将会看到一个预定义
项的下拉列表。
使用input 的list 属性把它和datalist 元素绑定到一起。
支持的浏览器包括：Firefox, Opera和Chrome。
·
·
·
·
<inputlist="cars"/>
<datalistid="cars">
<optionvalue="BMW"/>
<optionvalue="Ford"/>
<optionvalue="Volvo"/>
<optionvalue="大众"/>
</datalist>
HTML
24/50

<details>和<summary>
Copyright 1999-2011.
Details
If your browser supports this element, it should allow you to expand and collapse these details.
安博中程在线
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>
HTML
25/50

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

<progress>
安博中程在线
progress 元素用于显示实时进度。
目前支持的浏览器包括：Firefox, Opera和Chrome。
·
·
<progress>working...</progress>
<progressvalue="75"max="100">3/4complete</progress>
HTML
27/50

描述性的链接关系
普通的链接(<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="/favicon1.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>
HTML
28/50

rel="stylesheet"
rel=“stylesheet”是最常见的一种链接关系，指向一个包含CSS规则的外部独立文件。
安博中程在线
<linkrel="stylesheet"href="style.css"/> HTML
29/50

rel="alternate"
rel=”alternate“ 的type属性值可以是RSS或者Atom等媒介类型，可以用于像Google
Reader这样的聚合内容阅读器；
也可以将rel="alternate"与其他的type属性值结合使用来指明同样内容的其他格式，
例如PDF。
安博中程在线
<linkrel="alternate"type="application/rss+xml"href="http://myblog.com/feed"/> HTML
30/50

rel="icon"
icon应该仅次于stylesheet的第二流行的链接关系。
浏览器会将页面和一个小图标相连，这个小图标通常会显示在地址栏的网址旁边，或
者在浏览器的标签卡上，或者两处都有。
安博中程在线
<linkrel="icon"href="/favicon1.ico"/> HTML
31/50

rel="pingback"
指定一个pingback 服务器地址。可以在blog被其他网站链接时，自动接收到通知。
安博中程在线
<linkrel="pingback"href="http://myblog.com/xmlrpc.php"/> HTML
32/50

rel="prefetch"
表示预先获取并缓存特定的资源可能是有好处的，因为用户极有可能会请求这个资
源。
安博中程在线
<linkrel="prefetch"href="http://myblog.com/main.php"/> HTML
33/50

rel="archives"
表示所引用的文档描述了一组收藏，包括记录，文档或者有历史价值的材料。
比如blog的索引页可以使用rel="archives"来链接到该blog过去所发表文章的索引目
录。
安博中程在线
<arel="archives"href="http://myblog.com/archives">oldposts</a> HTML
34/50

rel="external"
表示该链接指向一个和当前文档不同的，并不属于站点一部分的文档。
WordPress 会给它访客留言中的链接都加上rel="external"属性。
安博中程在线
<arel="external"href="http://notmysite.com">tutorial</a> HTML
35/50

rel="licence"
表示引用的文件正是当前文档所采用的版权许可证。
安博中程在线
<arel="license"href="http://www.apache.org/licenses/LICENSE-2.0">license</a> HTML
36/50

rel="nofollow"
表示链接未经页面的作者或出版者的许可，或者该链接主要是由于与对方的商业合作
伙伴关系才被添加的。
这个链接关系由Google 发明，大多数Blog系统的留言中的链接都会被标注为
nofollow，这样在PageRank 中，页面的权重就不会传递给链接的页面。
安博中程在线
<arel="nofollow"href="http://notmysite.com/sample">wannabe</a> HTML
37/50

rel="tag"
表示所引用的文档代表的标签被应用于当前文档。
大多数支持文章分类，关键字和标签的Blog系统都会使用rel="tag"链接。
安博中程在线
<arel="tag"href="http://myblog.com/category/games">gamesposts</a> HTML
38/50

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">
HTML
40/50

占位文本
Placeholder Text
HTML5 标准对Web表单的一项改进就是允许输入框设置占位文本。
placeholder 属性目前的所有的主流浏览器中都被支持(Filefox, Opera, Chrome,
Safari)，除了IE。
请输入关键字查找搜索
安博中程在线
<form>
<inputname="q"placeholder="请输入关键字查找">
<inputtype="submit"value="搜索">
</form>
HTML
41/50

自动聚焦
Audofocus Fields
以前我们一般使用JavaScript 脚本在页面加载后让首个输入框自动获得焦点，现在HTML5 标准为所有的表单控
件都引入了一个autofocus 属性。
Go!
安博中程在线
<form name="f">
<input id="q" autofocus>
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
</script>
<input type="submit" value="Go!">
HTML
42/50

数字类型输入框：数字选择器
Numbers As Spinboxes
预估时间: 6
安博中程在线
<label for="estimated_hours">预估时间:</label>
<input type="number" name="estimated_hours"
min="0"
max="10"
value="6"
step="2"
id="estimated_hours">
HTML
type="number", 表示这是一个数字类型的输入框。
min="0", 表示输入的数值不能小于0；
max="10", 表示输入的数值不能大于10；
step="2", 表示每次增减的步进，不设置的话默认就是1。
·
·
·
·
43/50

数字类型输入框：滑块
Numbers As 狠狠撸rs
滑块是另外一种数字输入框的展现形式。
优先级：
安博中程在线
<labelfor="priority">优先级：</label>
<inputtype="range"min="0"max="10"
name="priority"value="2"step="2"id="priority">
HTML
44/50

日期选择器
Date Pickers
开始日期： 12/01/2010
安博中程在线
<label for="start_date">开始日期：</label>
<input type="date" name="start_date" id="start_date" value="2010-12-01">
HTML
45/50

Email 地址
Email Address
联系邮件：
安博中程在线
<labelfor="email">联系邮件：</label>
<inputtype="email"name="email"id="email">
HTML
46/50

Web 地址
Web Address
网址:
安博中程在线
<labelfor="url">网址:</label>
<inputtype="url"name="url"id="url">
HTML
47/50

颜色选择器
Color Pickers
项目颜色:
安博中程在线
<labelfor="project_color">项目颜色:</label>
<inputtype="color"name="project_color"id="project_color">
HTML
48/50

搜索框
Search Boxes
HTML5 中专门提供了用于搜索框的输入框类型。
搜索:
浏览器会把输入框渲染成圆角的，而且输入内容后，搜索框的右侧会出现一个小"x"按
钮，点击此按钮会清空输入框的内容。
安博中程在线
<labelfor="project_search">搜索:</label>
<inputtype="search"name="project_search"id="project_search">
HTML
49/50

<Thank you!>
微博 @范圣刚
博客 www.tfan.org
github github.com/princetoad

狠狠撸

Semantics

More Related Content

Semantics