• Save
Semantics
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
334
On Slideshare
333
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 1

http://localhost 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 开发Web,MobileWeb & Apps范圣刚安博中程在线
  • 2. SEMANTICS
  • 3. SEMANTICSHTML5 的语法更加简化,其增加的新元素的特点是更好的结构化(语义化),更好的表单处理和呈现,以及对绘画和媒体的原生支持,同时还移走了HTML4.01 中认为是过时的元素。安博中程在线HTML5 对语法的简化新的语义化/结构化元素新的媒体元素新的表单元素从HTML5 中移走的HTML 4.01 元素·····3/50
  • 4. HTML5 简洁化的语法
  • 5. 简化的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> HTML5/50
  • 6. 简化的根元素XHTMLHTML5安博中程在线<htmlxmlns="http://www.w3.org/1999/xhtml"> HTML<html> HTML6/50
  • 7. 简化的字符集声明HTML4HTML5安博中程在线<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> HTML<metacharset="utf-8"> HTML7/50
  • 8. 简化的JavaScript 嵌入HTML5HTML4安博中程在线<script>...</script>JAVASCRIPT<scripttype="text/javascript">...</script>JAVASCRIPT8/50
  • 9. 简化的样式嵌入HTML5HTML4安博中程在线<style>...</style>JAVASCRIPT<styletype="text/css">...</style>JAVASCRIPT9/50
  • 10. 简化的样式表链接HTML5HTML4安博中程在线<linkrel="stylesheet"href="style.css"/> JAVASCRIPT<linkrel="stylesheet"href="style.css"type="text/css"media="all"/> JAVASCRIPT10/50
  • 11. 新增加的元素安博中程在线<article><aside><bdi><command><details><summary><figure><figcaption><footer><header><hgroup>···········<mark><meter><nav><progress><ruby><rt><rp>·······11/50
  • 12. 被去除的的元素下列HTML 4.0的元素被从HTML5 中去除掉了:安博中程在线<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike><tt>············12/50
  • 13. 语义化标记
  • 14. <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>HTML14/50
  • 15. <footer>页脚footer元素代表一个节的末尾("脚")部分。页脚通常含有该节的一些基本信息,例如作者,相关文档的链接,版权资料等。给header和footer设置ID属性,更容易对其操作样式安博中程在线<footer><p><a href="comments"><i>25 个评论</i></a> ...</p></footer>HTMLfooter也可以包含多个,页面的footer,或者文章(article)的footer·15/50
  • 16. <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>HTML16/50
  • 17. <section>节或段安博中程在线section 元素代表文档中的一节或一段,指的是内容按照主题的分组,通常还附有标题。例如:带标签页的对话框上的每个标签页。section 是页面上的逻辑区域,可以使用section替代div标签。··<divclass="span9"><sectionid="global"><sectionid="gridSystem"><sectionid="fluidGridSystem"><sectionid="responsive"></div>HTML17/50
  • 18. <article>安博中程在线article 元素代表在一个文档,页面中自成一体的内容组成。article 适用于描述页面实际内容(除了header,footer,nav,widget,blogroll等之外的真正内容)article 可以是一篇论坛帖子,一篇杂志或者报纸上的文章,一篇blog帖子等。···18/50
  • 19. <aside>安博中程在线aside 元素代表一个页面区域,其中包含和页面主要内容相关,但又可以单独存在的那些内容。可以使用新的aside标签为主要内容添加一些附加信息,例如:引言,图表,补充观点,相关链接等。aside置于article内部,一般紧邻相关内容放置。···19/50
  • 20. <hgroup>标题归组安博中程在线hgroup元素代表”段“或”节“的标题。当标题有多个层级时,可以用hgroup将h1到h6元素归组,用于实现子标题等功能。··<hgroup><h2><hgroup></h2><h3>标题归组</h3></hgroup>HTML20/50
  • 21. 安博中程在线 21/50
  • 22. 一个简单的HTML5页面安博中程在线 22/50
  • 23. 供 application 使用的标记
  • 24. <datalist>输入的时候可以看到一个自动完成的菜单安博中程在线datalist 标签为input 元素指定了一系列的预定义的选项。可以用来提供一种输入"自动完成"的特性,当用户输入数据时将会看到一个预定义项的下拉列表。使用input 的list 属性把它和datalist 元素绑定到一起。支持的浏览器包括:Firefox, Opera和Chrome。····<inputlist="cars"/><datalistid="cars"><optionvalue="BMW"/><optionvalue="Ford"/><optionvalue="Volvo"/><optionvalue="大众"/></datalist>HTML24/50
  • 25. <details>和<summary>Copyright 1999-2011.DetailsIf 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>HTML25/50
  • 26. <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>HTML26/50
  • 27. <progress>安博中程在线progress 元素用于显示实时进度。目前支持的浏览器包括:Firefox, Opera和Chrome。··<progress>working...</progress><progressvalue="75"max="100">3/4complete</progress>HTML27/50
  • 28. 描述性的链接关系普通的链接(<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>HTML28/50
  • 29. rel="stylesheet"rel=“stylesheet”是最常见的一种链接关系,指向一个包含CSS规则的外部独立文件。安博中程在线<linkrel="stylesheet"href="style.css"/> HTML29/50
  • 30. rel="alternate"rel=”alternate“ 的type属性值可以是RSS或者Atom等媒介类型,可以用于像GoogleReader这样的聚合内容阅读器;也可以将rel="alternate"与其他的type属性值结合使用来指明同样内容的其他格式,例如PDF。安博中程在线<linkrel="alternate"type="application/rss+xml"href="http://myblog.com/feed"/> HTML30/50
  • 31. rel="icon"icon应该仅次于stylesheet的第二流行的链接关系。浏览器会将页面和一个小图标相连,这个小图标通常会显示在地址栏的网址旁边,或者在浏览器的标签卡上,或者两处都有。安博中程在线<linkrel="icon"href="/favicon.ico"/> HTML31/50
  • 32. rel="pingback"指定一个pingback 服务器地址。可以在blog被其他网站链接时,自动接收到通知。安博中程在线<linkrel="pingback"href="http://myblog.com/xmlrpc.php"/> HTML32/50
  • 33. rel="prefetch"表示预先获取并缓存特定的资源可能是有好处的,因为用户极有可能会请求这个资源。安博中程在线<linkrel="prefetch"href="http://myblog.com/main.php"/> HTML33/50
  • 34. rel="archives"表示所引用的文档描述了一组收藏,包括记录,文档或者有历史价值的材料。比如blog的索引页可以使用rel="archives"来链接到该blog过去所发表文章的索引目录。安博中程在线<arel="archives"href="http://myblog.com/archives">oldposts</a> HTML34/50
  • 35. rel="external"表示该链接指向一个和当前文档不同的,并不属于站点一部分的文档。WordPress 会给它访客留言中的链接都加上rel="external"属性。安博中程在线<arel="external"href="http://notmysite.com">tutorial</a> HTML35/50
  • 36. rel="licence"表示引用的文件正是当前文档所采用的版权许可证。安博中程在线<arel="license"href="http://www.apache.org/licenses/LICENSE-2.0">license</a> HTML36/50
  • 37. rel="nofollow"表示链接未经页面的作者或出版者的许可,或者该链接主要是由于与对方的商业合作伙伴关系才被添加的。这个链接关系由Google 发明,大多数Blog系统的留言中的链接都会被标注为nofollow,这样在PageRank 中,页面的权重就不会传递给链接的页面。安博中程在线<arel="nofollow"href="http://notmysite.com/sample">wannabe</a> HTML37/50
  • 38. rel="tag"表示所引用的文档代表的标签被应用于当前文档。大多数支持文章分类,关键字和标签的Blog系统都会使用rel="tag"链接。安博中程在线<arel="tag"href="http://myblog.com/category/games">gamesposts</a> HTML38/50
  • 39. HTML5 表单新的输入类型和属性
  • 40. 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">HTML40/50
  • 41. 占位文本Placeholder TextHTML5 标准对Web表单的一项改进就是允许输入框设置占位文本。placeholder 属性目前的所有的主流浏览器中都被支持(Filefox, Opera, Chrome,Safari),除了IE。请输入关键字查找 搜索安博中程在线<form><inputname="q"placeholder="请输入关键字查找"><inputtype="submit"value="搜索"></form>HTML41/50
  • 42. 自动聚焦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!">HTML42/50
  • 43. 数字类型输入框:数字选择器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">HTMLtype="number", 表示这是一个数字类型的输入框。min="0", 表示输入的数值不能小于0;max="10", 表示输入的数值不能大于10;step="2", 表示每次增减的步进,不设置的话默认就是1。····43/50
  • 44. 数字类型输入框:滑块Numbers As Sliders滑块是另外一种数字输入框的展现形式。优先级:安博中程在线<labelfor="priority">优先级:</label><inputtype="range"min="0"max="10"name="priority"value="2"step="2"id="priority">HTML44/50
  • 45. 日期选择器Date Pickers开始日期: 12/01/2010安博中程在线<label for="start_date">开始日期:</label><input type="date" name="start_date" id="start_date" value="2010-12-01">HTML45/50
  • 46. Email 地址Email Address联系邮件:安博中程在线<labelfor="email">联系邮件:</label><inputtype="email"name="email"id="email">HTML46/50
  • 47. Web 地址Web Address网址:安博中程在线<labelfor="url">网址:</label><inputtype="url"name="url"id="url">HTML47/50
  • 48. 颜色选择器Color Pickers项目颜色:安博中程在线<labelfor="project_color">项目颜色:</label><inputtype="color"name="project_color"id="project_color">HTML48/50
  • 49. 搜索框Search BoxesHTML5 中专门提供了用于搜索框的输入框类型。搜索:浏览器会把输入框渲染成圆角的,而且输入内容后,搜索框的右侧会出现一个小"x"按钮,点击此按钮会清空输入框的内容。安博中程在线<labelfor="project_search">搜索:</label><inputtype="search"name="project_search"id="project_search">HTML49/50
  • 50. <Thank you!>微博 @范圣刚博客 www.tfan.orggithub github.com/princetoad