草稿资料

最新推荐文章于 2025-08-20 16:20:23 发布

原创最新推荐文章于 2025-08-20 16:20:23 发布 · 584 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #xhtml #xmlhttprequest #mozilla #parsing #function

HTML 5 is the robust replacement of HTML4, XHTML 1
and DOM2/HTML

HTML5, XHTML2 Learning from history how to drive the future of the Web

From 1997 through the end of 2006, work on HTML within the W3C focused exclusively on the
XHTML dialect.

Things HTML5 doesn’t do :Does not favor XML facilities ,Does not avoid scripting ,Does not consider integration with the SemWeb a priority
•No arbitrary namespaces

Things XHTML2 doesn’t do Does not support existing content in the same way that HTML5 does ,Does not precisely define UA behavior ,Does not handle errors nondraconically
(uses “catch fire and fail”error handling)

HTML5 has a major focus on facilitating use of a browser as a Web application platform (or
Web application runtime environment).

XHTML2 has a major focus on providing a generalpurpose document language declarative mechanisms for
enabling interactive features.

HTML5 support specific native browser
support being implemented major browser vendors

XHTML2 support
• no specific client-side native
browser support from any major
browser vendor
• … but possible to “bolt on” some
level of support using CSS+JS

HTML5 is the only HTML
dialect that will be natively
supported in browsers on
the client side.

XHTML2 will likely remain useful
more as a choice for authoring
and storing documents on the
server side and downtransforming
them to HTML+JS.

HTML5 defines HTML as an abstract
language with two standard
syntaxes supported by browsers:
• a text/html syntax, with parsing
rules defined by the HTML5 spec
• an XML syntax, with parsing rules
defined by the XML spec

However, there’s only one standard
in-memory representation supported
by browsers: The W3C DOM.
The HTML5 spec precisely defines
the DOM representation that
browsers must use to represent
HTML content in memory.

HTML5 features that
work in browsers now
• canvas element: scriptable image
• video and audio elements: embed
interactive video and audio
easily, without plugins
• new form attributes & APIs, for
client-side form validation & new
native form widgets in browsers
• API for offline Web applications:
ApplicationCache
• APIs for client-side data storage
per-session (sessionStorage)
and persistently across sessions
(localStorage and client-side
SQL database storage)
• postMessage() mechanism for
cross-document messaging
• API for native drag-and-drop
(without need for script library)
• native getElementsByClassName
• more...

accesskey and spellcheck
• keygen element
• how to handle SVG in text/html
•Web Storage, Web Sockets,
Server-Sent Events moved out
• Mozilla development build
(Minefield) with conformant
HTML5 parser (same parser as
validator.nu)
• incremental updates/refinements
being made to validator.nu code
Somewhat related
work outside of the
core HTML5 effort...
•Web Workers
• SVG in Opera, Mozilla, WebKit
• CSS transforms/animations
• CSS3 Selectors
• CSS3 Selectors API
• XMLHttpRequest level 1 and 2
• Cross-Origin Resource Sharing
• Geolocation API
• native JSON support in browsers
• JavaScript 3.1 “Harmony”

NEW APIs
Sunday, July 19, 2009
Drag & Drop API
Browser Support: Drag and Drop API
Allows objects (images and links,
by default) to be dragged and then
dropped onto a target.
The target is enabled by canceling
the ‘dragover’ (for sane browsers)
or ‘dragenter’ (for IE) events for
the drop target. Then listen for a
‘drop’ event which contains a
‘dataTransfer’ object with info.
+
Sunday, July 19, 2009
getElementsByClassName
Browser Support: getElementsByClassName
Works just like getElementsById,
but selects an array of all elements
based on a shared class name.
No more varied custom functions
to make this happen, and
performance is significantly better.
Sunday, July 19, 2009
Cross-Document Messaging
Browser Support: Cross-Doc Messaging
This allows non-hostile documents
on different domains to simply
communicate with each other.
The sending document can call
postMessage() on the window
object of the receiving document,
while the receiving document listens
for a ‘message’ event.
MAIN DOCUMENT
FOREIGN
IFRAME
Sunday, July 19, 2009
Simple Client Storage
Browser Support: Simple Client Storage
The sessionStorage DOM attribute
stores session data for a single
window, like cookies on crack.
The localStorage DOM attribute
allows each site to store megabytes
of data across sessions to improve
performance.
Both methods store only strings.
<input
type="checkbox"
onchange="
localStorage.insurance=checked
"
/>
Sunday, July 19, 2009
Structured Client Storage
Browser Support: Structured Client Storage
HTML 5’s Web Storage module
provides an SQL server within the
client, accessible using Javascript. It
uses fairly standard SQL queries
for both reading and writing.
There’s a lot to be explained about
the built-in SQL server, so go
check out the docs for more
information.
tx.executeSql(
‘SELECT * FROM Notes’,
[],
function(tx, rs) {
for(var i = 0;
i < rs.rows.length; i++) {
renderNote(rs.rows[i]);
}
Sunday, July 19, 2009
Offline Application Caching
Browser Support: Offline Application Caching
Allow the client to refer directly to
its cache, authoritatively, for
certain resources, even if the
browser is offline.
Resources listed in the “network”
section are never cached.
<html manifest=”/cache.manifest”>
CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png
NETWORK:
server.cgi
Sunday, July 19, 2009
Canvas
Browser Support: canvas
Provides an API for drawing
directly in the browser window,
using instructions that define
vector-based shapes and lines.
This allows SVG-like graphics to be
created on the fly in the browser,
with fallback content (like Flash?)

-------------------------
HTML5 features that
work in browsers now
• canvas element: scriptable image
• video and audio elements: embed
interactive video and audio
easily, without plugins
• new form attributes & APIs, for
client-side form validation & new
native form widgets in browsers
• API for offline Web applications:
ApplicationCache
• APIs for client-side data storage
per-session (sessionStorage)
and persistently across sessions
(localStorage and client-side
SQL database storage)
• postMessage() mechanism for
cross-document messaging
• API for native drag-and-drop
(without need for script library)
• native getElementsByClassName
• more...
December 1997
December 1997:
HTML4 published as
W3C Recommendation
In other words...
It’s been ten years since
the last major update
to the HTML language.
So have we all just been
sitting around on the
boat doing nothing for
the last ten+ years?
Well, no...
Work on Web
technologies at the
W3C was focusing on
some other things...
XML, XML Schema,
XForms, XHTML2...
XHTML 2.0 seems to me the live
proof that something is going wrong
at W3C... I strongly suggest
dropping all XHTML 2.0 efforts in
favor of a new “xHTML 5.0”
language. Clearly a successor to
HTML 4, feature-oriented, made for
the web.
Daniel Glazman, December 2002
Meanwhile, elsewhere...
September 2003:
Opera CTO Håkon Lie
first announces what
will become
Web Forms 2.
Web Forms 2
represented the early
beginnings of the work
that led to HTML5.
April 2004:
Web Applications 1.0,
which eventually
becomes HTML5.
June 2004:
W3C workshop on
Web applications, a
turning point that
led to...
June 2004:
WHATWG launched,
with Apple, Opera,
Mozilla on board.
The dream of a new web, based on
XHTML+SVG+SMIL+XForms, is just
that — a dream... The best way to
help the Web is to incrementally
improve the existing web
standards... so that web content
authors can actually deploy new
formats interoperably.
Brendan Eich, June 2004
“HTML is the assembly
language of the Web.”
Web Forms 2,
Web Applications 1.0...
So who actually wrote
the drafts?
Ian “Hixie” Hickson
March 2007:
W3C launches a new
HTML Working Group
to work on HTML5.
Co-chairs:
Dan Connolly, W3C
Chris Wilson, Microsoft
http://esw.w3.org/topic/
HTML/history
What’s the value
proposition for the
HTML5 work?
HTML5 makes life
easier and better for
Web developers.
How?
HTML5 increases
interoperability, reduces
need for UA sniffing &
multiple code paths.
HTML5 provides better
feature parity with
proprietary singlevendor
stuff like Flash.
Frankly, HTML5 also
provides new business
opportunities for Web
professionals like
yourselves.
So what exactly does
“HTML5” consist of?
• The HTML5 spec itself
• Support for HTML5 features in
4 major browser engines and in
other applications
• HTML5 parsing libraries
• validator.nu HTML5 validator
How many of you have
read some part of the
HTML5 spec in detail?
The HTML5
spec itself...
A wee bit overloaded.
Focuses mostly on
specifying conformance
criteria for browsers.
Introduces many
new APIs.
But also conflates
conformance criteria
for HTML content
authors into same spec.
Would like to have a
separate spec for just
the HTML5 markup
language itself?
That is, a spec for the
HTML5 markup
language without the
APIs and browser spec?
The HTML5 draft
provides a formal spec
for HTML parsing and
error handling.
HTML is not XML.
HTML is not SGML.
Most HTML content is
not well-formed XML.
•
Well-formed XML:
<input disabled="disabled">
•
Empty attribute: <input disabled>
•
Without quotes: <input value=yes>
•
Single quotes: <input type='checkbox'>
•
Double quotes: <input name="be evil">
More than 93% of
Alexa Top 500 sites
are not valid.
We need to specify error handling
behavior to ensure interoperability
“even in the face of documents that
do not comply to the letter of the
specifications”.
http://www.whatwg.org/news/start
Authors will write invalid content
regardless of what we spec. So the
spec states “what authors must not
do, and then tells implementors what
they must do when an author
does it anyway”.
Ian Hickson, “Error handling and Web language
design”, http://ln.hixie.ch/?start=1074730186
Don’t get hung up on syntax.
HTML5 defines HTML as an abstract
language with two standard
syntaxes supported by browsers:
• a text/html syntax, with parsing
rules defined by the HTML5 spec
• an XML syntax, with parsing rules
defined by the XML spec
Similarly, applications can potentially
represent HTML in memory in any
number of ways.
However, there’s only one standard
in-memory representation supported
by browsers: The W3C DOM.
The HTML5 spec precisely defines
the DOM representation that
browsers must use to represent
HTML content in memory.
Simplify where we can.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<meta charset="utf-8">
• canvas element: scriptable image
• video and audio elements: embed
interactive video and audio
easily, without plugins
• new form attributes & APIs, for
client-side form validation & new
native form widgets in browsers
• API for offline Web applications:
ApplicationCache
• APIs for client-side data storage
per-session (sessionStorage)
and persistently across sessions
(localStorage and client-side
SQL database storage)
• postMessage() mechanism for
cross-document messaging
• API for native drag-and-drop
(without need for script library)
• native getElementsByClassName
• more...
Demos:
http://www.whatwg.org/
demos/2008-sept/
Somewhat related
work outside of the
core HTML5 effort...
• SVG in Opera, Mozilla, WebKit
• CSS transforms/animations
• CSS3 Selectors
• Selectors API
• XMLHttpRequest level 1 and 2
• Access Control for Cross-Site
Requests
• native JSON support in browsers
• JavaScript 3.1 “Harmony”

------------------------------------------------------------------
JavaScript APIs
HTML5
Remy Sharp
@rem
standards.next
JavaScript APIs
HTML5
Remy Sharp
@rem
standards.next
& friends!
HTML5: 2022?
Bollocks.
APIs
•Canvas
•Drag & Drop
•History
•Inline Editing
•Messaging
•Of!ine Apps
•Video & Audio
•Geolocation
•Local Storage
•Selectors
•Server Events
•Web Sockets
•Workers
APIs
•Canvas
•Drag & Drop
•History
•Inline Editing
•Messaging
•Of!ine Apps
•Video & Audio
•Geolocation
•Local Storage
•Selectors
•Server Events
•Web Sockets
•Workers
APIs
•Canvas
•Drag & Drop
•History
•Inline Editing
•Messaging
•Of!ine Apps
•Video & Audio
•Geolocation
•Local Storage
•Selectors
•Server Events
•Web Sockets
•Workers
APIs
•Canvas
•Drag & Drop
•History
•Inline Editing
•Messaging
•Of!ine Apps
•Video & Audio
•Geolocation
•Local Storage
•Selectors
•Server Events
•Web Sockets
•Workers
APIs
•Canvas
•Drag & Drop
•History
•Inline Editing
•Messaging
•Of!ine Apps
•Video & Audio
•Geolocation
•Local Storage
•Selectors
•Server Events
•Web Sockets
•Workers
?
Documentation
www.whatwg.org/html5/
dev.w3.org/html5/
irc://irc.freenode.net/#whatwg

Canvas
Canvas
document.querySelector('canvas').getContext("2d")
http://tr.im/pRkz
document.querySelector('canvas').getContext("2d")
http://tr.im/pRkz
Drag'n Drop
Drag'n Drop
Drag & Drop
•draggable="true"
•events: dragstart, drop, etc
•event.transferData
<div draggable="true">drag me</div>
<script>
document.querySelector('div').addEventListener(
"dragstart",
function (e) {
e.dataTransfer.setData("arbitrary","data");
return true;
},
true);
</script>
<div draggable="true">drag me</div>
<script>
document.querySelector('div').addEventListener(
"dragstart",
function (e) {
e.dataTransfer.setData("arbitrary","data");
return true;
},
true);
</script>
???
el.addEventListener('dragover', function (e) {
e.preventDefault();
}, true);
el.addEventListener('drop', function (e) {
e.stopPropagation();
alert(e.dataTransfer.getData('arbitrary'));
}, true);
el.addEventListener('dragover', function (e) {
e.preventDefault();
}, true);
el.addEventListener('drop', function (e) {
e.stopPropagation();
alert(e.dataTransfer.getData('arbitrary'));
}, true);
el.addEventListener('dragover', function (e) {
e.preventDefault();
}, true);
el.addEventListener('drop', function (e) {
e.stopPropagation();
alert(e.dataTransfer.getData('arbitrary'));
}, true);
http://html5demos.com/drag
http://html5demos.com/drag
Of!ine Applications
Of!ine Applications
Of!ine Apps
•Application cache
•Events: of!ine, online
•navigator.onLine property
Enable
<html
manifest="my.manifest"
>
CACHE MANIFEST
images/shade.jpg
images/bin.jpg
my.manifest
Cache
•First line: CACHE MANIFEST
•Requires text/cache-manifest
•Recommend using versioning
•window.applicationCache
Cache
•On load will hit my.manifest
Cache
•On load will hit my.manifest
•Change manifest: trigger reload
Cache
•On load will hit my.manifest
•Change manifest: trigger reload
•applicationCache.update() force
Cache
•On load will hit my.manifest
•Change manifest: trigger reload
•applicationCache.update() force
•Cache events

Firefox
window.addEventListener(
'offline', // online too
online, // function
true
);
function online() {
if (navigator.onLine == false) {
// gone offline
} else {
// else we're online
}
}
http://html5demos.com/offline
http://html5demos.com/offline
navigator.onLine
Geolocation
Geolocation
Not always accurate!

navigator
.geolocation
.getCurrentPosition(
success,
err
);

Messaging
Messaging
Messaging
•Communicate across domains
•Across window object
•With Workers
•String transfer only
.postMessage(str)
.onMessage(event)
event.data == str
Cross Domain
document
.getElementById("iframe")
.contentWindow
.postMessage("my message");
The Catcher
window.addEventListener(
"message",
function(e){
if (e.origin !== "http://example.com") {
return;
}
alert(e.origin + " said: " + e.data);
},
false
);
Web Workers
Web Workers
•Threads
•Threads
•Native or via Gears
•Threads
•Native or via Gears
•Sandboxed
•Threads
•Native or via Gears
•Sandboxed
•Debugging?
•importScripts
•postMessage
•onmessage
•onconnect
Without
http://html5demos.com/worker
Storage
Storage
1. sessionStorage
1. sessionStorage
2. localStorage
1. sessionStorage
2. localStorage
3. database storage
Storage
sessionStorage.setItem(key, value)
sessionStorage.getItem(key)
Storage
localStorage.setItem(key, value)
localStorage.getItem(key)
Remy
Sharp
@rem
remy@leftlogic.com
html5demos.com
remysharp.com
full-frontal.org
And more!