Semantics

664 views

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
664
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Semantics

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

×