html5入门精选.ppt

* HTML 5+CSS 3.0 应用介绍 网站标准的历史 HTML 5+CSS 3.0 应用介绍 XHTML 1 Content CSS2.1 Presentation 2001-2006 2004-Present WHATWG（网页超文本应用） W3C（万维网联盟） Word Wide Web Consortium 网站标准的历史 HTML 5+CSS 3.0 应用介绍 2007-Present HTML5 Content CSS3 Presentation 1998 2000 2002 2004 2007 HTML4.0 XHTML1 XHTML2 WHATG HTML5 HTML发展历史 支持HTML5的浏览器 HTML 5+CSS 3.0 应用介绍 FireFox 3.1+ offline storage and canvas Geolocation/Web Workers/ContentEditable Gecko(more HTML5 APIS) Internet Explorer 8.0+ embed element and contentEditable attribute cross-document messaging Opera 9.5+ Cross-document messaging Server-sent events Web Forms 2.0 Canvas and video Safari 3.1+ video and audio tags Offline data storage API Webkit(Iphone/Chrome/Android/Nokia s60/Palms WebOS) 简化的声明 HTML 5+CSS 3.0 应用介绍 HTML5 !DOCTYPE HTML html head titleTitle of the document/title /head body The content of the document...... /body /html HTML4有三种声明：Strict、Transitional 以及 Frameset !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtd html … … /html !DOCTYPE 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 在 HTML 4.01 中，!DOCTYPE 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML，所以不需要引用 DTD。 更加语义化的结构 HTML 5+CSS 3.0 应用介绍 新增的主体结构元素 article - 独立的内容 section -文档中的节。p是段落 nav - 导航链接的部分 aside - 其所处内容之外的内容。可用作侧栏 time – 表面日期或时间 pubdate属性 -指示 time 元素中的日期/时间是文档的发布日期 新增的非主体结构元素 header - 文档的页眉（介绍信息） hgroup -对网页或区段（section）的标题进行组合 footer -文档的页脚 address - 文档作者或拥有者的联系信息 更加语义化的结构 HTML 5+CSS 3.0 应用介绍 HTML4 HTML5 body h1网页的标题/h1 article section header h1页头/h1 /header /section section hgroup h1文章一级标题/h1 h2文章二级标题/h2 /hgroup p文章内容/p /section /article /body HTML5表单组成 HTML 5+CSS 3.0 应用介绍 datalist - 规定输入域的选项列表 keygen - 提供一种验证用户的可靠方法 output - 用于不同类型的输出，比如计算或脚本输出 autocomplete – 自动完成 novalidate – 无需验证 email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color tel HTML5表单组成 HTML 5+CSS 3.0 应用介绍 autocomplete – 自动完成 autofocus – 自动获得焦点 form – 加入到某form中 form