html5概览
HTML5是HTML的新一代标准,现在仍处于发展阶段。HTML5添加了许多新的语法特征,其中包括<video>, <audio>, 和<canvas>元素,同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素包括<section>, <article>,<header>, 和<nav>,是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。
1.1 html5设计原理 避免不必要的复杂性 支持已有的内容 解决现实的问题 平稳退化 最终用户优先详见Jeremy Keith在 Fronteers 2010 上的主题演讲The Design of HTML5,中文翻译见李松峰老师的翻译HTML5设计原理。
1.2 浏览器支持性况:最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9支持某些 HTML5 特性。具体可查看http://html5test.com/results/desktop.html。
对于ie9以下的ie浏览器,可以使用html5shiv使其支持HTML5标签,将下面代码插入到<head>标签中即。
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->二、Doctype 2.1 DOCTYPE 简介
DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写 DTD)。最初是XML的概念,即通过一种特定的语法,作为一种元数据,来描述XML文档中允许出现的元素,以及各元素的组成、嵌套规则等。参考wiki。
在HTML中,DOCTYPE声明位于文档中的最前面的位置,处于 <html> 标签之前。浏览器需要在解析 HTML 文档之前就确定当前文档的类型,以决定其需要采用的渲染模式,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。如果没有DOCTYPE,浏览器会进入一种被称为Quirks模式(又叫混杂模式,怪异模式,Quirks mode)渲染模式,在该模式下,浏览器的盒模型、样式解析、布局等都与标准规定的存在差异。
没有声明DOCTYPE情况:
<html><head> <title>document</title></head><body><script>document.write(document.compatMode); //BackCompat</script></body></html>
声明DOCTYPE情况:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>document</title></head><body><script>document.write(document.compatMode); //CSS1Compat</script></body></html>
document.compatMode 最先出现在 IE6 中,它的值标示了浏览器的工作模式,这是一个只读的属性,返回一个字符串,只可能存在两种返回值:
BackCompat:标准兼容模式(Standards-compliant mode)未开启CSS1Compat:标准兼容模式(又叫严格模式,Standards mode 或者 Strict mode)已开启
需要注意的是:在后来出现的接近标准模式中,document.compatMode 的返回值与标准模式一致,为CSS1Compat。也就是说,不能通过 document.compatMode 来详细区分浏览器的工作模式,只能用来判断浏览器是否工作在Quirks模式下。因为“标准模式”与“接近标准模式”之间的差异并不大,所以这个方法至今仍被广泛使用。
注意:
对于IE6-9,如果DOCTYPE前存在注释,会进入Quirks模式。 对于IE6,如果DOCTYPE前存在一个XML声明,会进入Quirks模式。 2.2 HTML4 的DOCTYPEHTML 4.01的标准中指定了3种DOCTYPE:
严格模式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">过渡模式:<!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 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
在HTML4的标准中,每一个DOCTYPE对应的dtd文件都是有合法的URL指定的,可以通过互联网进行下载。浏览器可以根据URL获得到dtd的具体内容,并根据内容的规定来解析文档。
2.3 XHTML DOCTYPEXHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
严格模式:<!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.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">框架模式:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">2.4 HTML5 DOCTYPE
HTML5具有更简单的DOCTYPE,在html5中,只需要写<!DOCTYPE html>就可以了。所有的主流浏览器都将这种DOCTYPE视为标准模式。这样写的好处:
你可以轻松的写下这个DOCTYPE,而不用担心会写错; 它是向后兼容的。<!DOCTYPE html>
注:DOCTYPE大小写不敏感。
三、标签 3.1 新增的HTML5 标签新增加的英文标签不翻译了,直接看英文理解更准确些。
//Sections<section> Defines a section in a document<nav> Defines a section that contains only navigation links<article> Defines self-contained content that could exist independantly of the rest of the content<aside> Defines some content set aside from the rest of page content. If it is removed, the remaining content still make sense.<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels<header> Defines the header of a page or section. It often contains a logo, the title of the Web site and a navigational table of content.<footer> Defines the footer for a page or section. It often contains a copyright notice, some links to legal information or addresses to give feedback.<main> Defines the main or important content in the document. There is only one <main> element in the document.//Grouping content<figure> Represents a figure illustrated a part of the document.<figcaption> Represents the legend of a figure.//Text-level semantics<data> Associates to its content a machine-readable equivalent. (This element is only in the WHATWG version of the HTML standard, and not in the W3C version of HTML5).<time> Represents a date and time value, eventually with a machine-readable equivalent.<mark> Represents text highlighted for reference purposes, that is for its relevance in another context.<ruby> Represents content to be marked with ruby annotations, short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese furigana.<rt> Represents the text of a ruby annotation.<rp> Represents parenthesis around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.<bdi> Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows to embed span of text with a different, or unknown, directionality.<wbr> Represents a line break opportunity, that is a suggested wrapping point in order to improve readability of text split on several lines.//Embedded content<embed> Represents a integration point for an external, often non_HTML, application or interactive content.<video> Represents a video, and its associated audio files and captions, with the necessary interface to play it.<audio> Represents a sound, or an audio stream.<source> Allows authors to specify alternative media resources for media elements like <video> or <audio>.<track> Allows authors to specify timed text track for media elements like <video> or <audio>.<canvas> Represents a bitmap area that scripts can be used to render graphics, like graphs, game graphics, any visual images on the fly.<svg> Defines an embedded vectorial image.<math> Defines a mathematical formula.//Forms<datalist> Represents a set of predefined options for other controls.<keygen> Represents a key pair generator control.<output> Represents the result of a calculation.<progress> Represents the completion progress of a task.<meter> Represents a scalar measurement (or a fractional value), within a known range//Interactive elements<details> Represents a widget from which the user can obtain additional information or controls.<summary> Represents a summary, caption, or legend for a given <details>.<command> Represents a command that the user can invoke.<menu> Represents a list of commands.3.2 HTML 4.01的和HTML5标签比较
html5引入了新API,新的API的意义:
增强了html原生功能 丰富动画效果,增强web表现力 强大的后台运算和通信支持html5新增API:
离线 & 存储(OFFLINE & STORAGE) Offline resources: 离线资源:应用程序缓存 Online and offline events:在线和离线事件,可以让应用程序和扩展检测是否存在可用的网络连接,以及在连接建立和断开时能感知到。 WEB Storage(又名 DOM Storage):sessionStorage 和 localStorage。 IndexedDB:是一个为了能够在浏览器中存储大量结构化数据,并且能够在这些数据上使用索引进行高性能检索的 web 标准。 Using files from web applications 设备访问(DEVICE ACCESS) Using the Camera API:允许使用和操作计算机的摄像头,并从中存取照片。 Touch events:对用户按下触控屏的事件做出反应的处理程序。 Geolocation:让浏览器使用地理位置服务定位用户的位置,用户可共享地理位置,并在Web应用的协助下享用位置感知服务。 Detecting device orientation:检测设备方向,让用户在运行浏览器的设备变更方向时能够得到信息。 Pointer Lock API 连通性(CONNECTIVITY) Web Sockets:允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。 Server-sent events:允许服务器向客户端推送事件,而不是仅在响应客户端请求时服务器才能发送数据的传统范式。 WebRTC:这项技术,其中的 RTC 代表的是即时通信,允许连接到其他人,直接在浏览器中控制视频会议,而不需要一个插件或是外部的应用程序。 多媒体(MULTIMEDIA) Audio and Video: HTML5 音频与视频:HTML5里新增的元素,它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API,而无需安装任何插件。 Camera API:允许使用,操作计算机摄像头,并从中存储图像。 Track 和 WebVTT: 元素支持字幕和章节。WebVTT 一个文本轨道格式。 3D, 图像 & 效果(3D, GRAPHICS & EFFECTS) Canvas:有关动态产出与渲染图形、图表、图像和动画的API。 SVG: 一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。 WebGL:WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 <canvas> 元素中的 API 给 web 带来了 3D 图像功能。 性能 & 集成(PERFORMANCE & INTEGRATION) Web Workers:把JavaScript 计算委托给后台线程,通过允许这些活动以防止使交互型事件变得缓慢。 XMLHttpRequest Level 2 History API:允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。 conentEditable 属性:HTML5 已经把 contentEditable 属性标准化了。 Drag and drop:HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。 Fullscreen API:为一个网页或者应用程序控制使用整个屏幕,而不显示浏览器界面。 扩展阅读 Doctype dev.w3.org/html5/markup/syntax.html#doctype-syntax www.w3help.org/zh-cn/kb/001#common_dtd w3help.org/zh-cn/casestudies/002 hsivonen.iki.fi/doctype/ otakustay.com/learning-html5-doctype/ html5 HTML5 Reference HTML5 differences from HTML4 HTML5 - MDN HTML5设计原理 dev.w3.org/html5/ www.w3.org/html/ig/zh/wiki/HTML5 www.w3help.org/zh-cn/kb/001#common_dtd zh.wikipedia.org/zh-cn/HTML5 html5 logo developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_element_list html5doctor.com/element-index/ modernizr [html5shiv]:(github.com/aFarkas/html5shiv) demo HTML 5 Demos and Examples HTML5ROCKS www.apple.com/html5/ developer.mozilla.org/en-US/demos/tag/tech:html5/ HTML5 无障碍 HTML5 Accessibility HTML5 无障碍