深入探索HTML5：技术解析与实践应用

5星 · 超过95%的资源需积分: 10 144 浏览量更新于2024-07-30 收藏 5.56MB PDF 举报

"HTML5揭秘(英文版)" 是一本由Mark Pilgrim编写的关于HTML5技术的书籍，旨在帮助读者理解和掌握HTML5的新特性及其实际应用。 HTML5是Web开发领域的革命性标准，它在HTML4的基础上做了大量的改进和扩展，旨在提升网页的交互性、可访问性和多媒体支持能力。这本书"HTML5: Up and Running"深入浅出地介绍了HTML5的各项核心特性，包括： 1. **语义化标签**：HTML5引入了新的语义化元素，如<header>, <footer>, <article>, <section>, <aside>等，这些元素有助于提高网页结构的清晰度和可读性，对搜索引擎优化（SEO）也有积极影响。 2. **Canvas**：HTML5的<canvas>元素提供了在浏览器中进行动态图形绘制的能力，使得开发者可以通过JavaScript实现各种复杂的图形和动画效果。 3. **SVG（Scalable Vector Graphics)**：HTML5支持内嵌SVG图像，这是一种矢量图格式，可以无损放大，适用于创建高质量的图表和图标。 4. **Video和Audio**：HTML5通过<video>和<audio>标签直接支持视频和音频播放，无需依赖Flash或其他插件，简化了多媒体内容的集成。 5. **离线存储**：通过离线存储机制（Application Cache），HTML5允许网页在用户离线时也能访问部分数据，提高了用户体验。 6. **Web Workers和Web Storage**：Web Workers提供了后台线程处理能力，使网页可以执行更复杂的计算任务而不影响用户界面；Web Storage则提供了比Cookie更高效的数据存储方式。 7. **Geolocation**：HTML5的Geolocation API允许网页获取用户的地理位置信息，为本地化服务和位置感知应用提供了基础。 8. **Forms**：HTML5对表单元素进行了改进，添加了新的输入类型（如date, range, email等），以及验证功能，提升了表单的用户体验和数据安全。 9. **Web sockets**：Web Sockets提供了一种持久化的双向通信协议，使得实时应用（如聊天室、在线游戏等）的开发变得更加简单。 10. **拖放功能（Drag and Drop）**：HTML5实现了拖放功能，用户可以直接在网页上拖动元素，增强了互动性。这本书还可能涵盖了如何在实际项目中应用这些特性，以及如何逐步迁移旧的HTML4代码到HTML5。作者Mark Pilgrim是一位经验丰富的Web开发者，他的讲解既注重理论，又兼顾实践，适合初学者和有一定经验的开发者阅读。 "HTML5: Up and Running"是一本全面介绍HTML5的指南，可以帮助读者跟上Web技术的发展步伐，提升其在HTML5时代的竞争力。如果你对HTML5感兴趣，无论是为了个人学习还是专业发展，这本书都是一份宝贵的参考资料。

stylesheets have their own MIME type. Everything has its own MIME type. The Web

runs on MIME types.

Of course, reality is more complicated than that. Very early web servers (I’m talking

web servers from 1993) didn’t send the Content-Type header, because it didn’t exist yet.

(It wasn’t invented until 1994.) For compatibility reasons that date all the way back to

1993, some popular web browsers will ignore the Content-Type header under certain

circumstances. (This is called “content sniffing.”) But as a general rule of thumb, ev-

erything you’ve ever looked at on the Web—HTML pages, images, scripts, videos,

PDFs, anything with a URL—has been served to you with a specific MIME type in the

Content-Type header.

Tuck that under your hat. We’ll come back to it.

A Long Digression into How Standards Are Made

Why do we have an <img> element? I don’t suppose that’s a question you ask yourself

very often. Obviously someone must have created it. These things don’t just appear out

of nowhere. Every element, every attribute, every feature of HTML that you’ve ever

used—someone created them, decided how they should work, and wrote it all down.

These people are not gods, nor are they flawless. They’re just people. Smart people, to

be sure. But just people.

One of the great things about standards that are developed “out in the open” is that

you can go back in time and answer these kinds of questions. Discussions occur on

mailing lists, which are usually archived and publicly searchable. So, I decided to do a

bit of “email archaeology” to try to answer the <img> element question. I had to go back

to before there was an organization called the World Wide Web Consortium (W3C).

I went back to the earliest days of the Web, when you could count the number of web

servers on the fingers of both hands, and maybe a couple of toes.

On February 25, 1993, Marc Andreessen wrote:

I’d like to propose a new, optional HTML tag:

IMG

Required argument is SRC="url".

This names a bitmap or pixmap file for the browser to attempt to pull over the network

and interpret as an image, to be embedded in the text at the point of the tag’s occurrence.

An example is:

(There is no closing tag; this is just a standalone tag.)

* http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html. The thread described over the next

several pages can be followed by clicking the “Next message” and “Previous message” links.

2 | Chapter 1: How Did We Get Here?

This tag can be embedded in an anchor like anything else; when that happens, it becomes

an icon that’s sensitive to activation just like a regular text anchor.

Browsers should be afforded flexibility as to which image formats they support. Xbm

and Xpm are good ones to support, for example. If a browser cannot interpret a given

format, it can do whatever it wants instead (X Mosaic will pop up a default bitmap as a

placeholder).

This is required functionality for X Mosaic; we have this working, and we’ll at least be

using it internally. I’m certainly open to suggestions as to how this should be handled

within HTML; if you have a better idea than what I’m presenting now, please let me

know. I know this is hazy with regard to image format, but I don’t see an alternative than

to just say “let the browser do what it can” and wait for the perfect solution to come

along (MIME, someday, maybe).

This quote requires some explanation. Xbm and Xpm were popular graphics formats

on Unix systems.

“Mosaic” was one of the earliest web browsers. (“X Mosaic” was the version that ran

on Unix systems.) When he wrote this message in early 1993, Marc had not yet founded

the company that made him famous, Mosaic Communications Corporation, nor had

he started work on that company’s flagship product, “Mosaic Netscape.” (You may

know them better by their later names, “Netscape Corporation” and “Netscape

Navigator.”)

“MIME, someday, maybe” is a reference to content negotiation, a feature of HTTP

where a client (like a web browser) tells the server (like a web server) what types of

resources it supports (like image/jpeg) so the server can return something in the client’s

preferred format. “The Original HTTP as defined in 1991” (the only version that was

implemented in February 1993) did not have a way for clients to tell servers what kinds

of images they supported, thus the design dilemma that Marc faced.

A few hours later, Tony Johnson replied:

I have something very similar in Midas 2.0 (in use here at SLAC, and due for public release

any week now), except that all the names are different, and it has an extra argument

NAME="name". It has almost exactly the same functionality as your proposed IMG tag. e.g.,

The idea of the name parameter was to allow the browser to have a set of “built in”

images. If the name matches a “built in” image it would use that instead of having to go

out and fetch the image. The name could also act as a hint for “line mode” browsers as

to what kind of a symbol to put in place of the image.

I don’t much care about the parameter or tag names, but it would be sensible if we used

the same things. I don’t much care for abbreviations, i.e., why not IMAGE= and SOURCE=. I

somewhat prefer ICON since it implies that the IMAGE should be smallish, but maybe

ICON is an overloaded word?

Midas was another early web browser, a contemporary of X Mosaic. It was cross-

platform; it ran on both Unix and VMS. “SLAC” refers to the Stanford Linear

Accelerator Center, now the SLAC National Accelerator Laboratory, which hosted the

A Long Digression into How Standards Are Made | 3

first web server in the United States (in fact, the first web server outside Europe). When

Tony wrote this message, SLAC was an old-timer on the WWW, having hosted five

pages on its web server for a whopping 441 days.

Tony continued:

While we are on the subject of new tags, I have another, somewhat similar tag, which I

would like to support in Midas 2.0. In principle it is:

The intention here would be that the second document is to be included into the first

document at the place where the tag occurred. In principle the referenced document

could be anything, but the main purpose was to allow images (in this case arbitrary sized)

to be embedded into documents. Again the intention would be that when HTTP2 comes

along the format of the included document would be up for separate negotiation.

“HTTP2” is a reference to Basic HTTP as defined in 1992. At this point, in early 1993,

it was still largely unimplemented. The draft known as “HTTP2” evolved and was

eventually standardized as “HTTP 1.0”. HTTP 1.0 did include request headers for

content negotiation, a.k.a. “MIME, someday, maybe.”

Tony went on:

An alternative I was considering was:

<A HREF="..." INCLUDE>See photo</A>

I don’t much like adding more functionality to the <A> tag, but the idea here is to maintain

compatibility with browsers that can not honour the INCLUDE parameter. The intention

is that browsers which do understand INCLUDE, replace the anchor text (in this case “See

photo”) with the included document (picture), while older or dumber browsers ignore

the INCLUDE tag completely.

This proposal was never implemented, although the idea of providing text if an image

is missing is an important accessibility technique that was missing from Marc’s initial

<IMG> proposal. Many years later, this feature was bolted on as the <img alt>

attribute, which Netscape promptly broke by erroneously treating it as a tooltip.

A few hours after Tony posted his message, Tim Berners-Lee responded:

I had imagined that figures would be represented as

<a name=fig1 href="fghjkdfghj" REL="EMBED, PRESENT">Figure </a>

where the relationship values mean

EMBED Embed this here when presenting it

PRESENT Present this whenever the source document is presented

Note that you can have various combinations of these, and if the browser doesn’t support

either one, it doesn’t break.

[I] see that using this as a method for selectable icons means nesting anchors. Hmmm.

But I hadn’t wanted a special tag.

4 | Chapter 1: How Did We Get Here?

This proposal was never implemented, but the rel attribute is still around (see “Friends

and (Link) Relations” on page 36).

Jim Davis added:

It would be nice if there was a way to specify the content type, e.g.

But I am completely willing to live with the requirement that I specify the content type

by file extension.

This proposal was never implemented, but Netscape did later add support for arbitrary

embedding of media objects with the <embed> element.

Jay C. Weber asked:

While images are at the top of my list of desired medium types in a WWW browser, I

don’t think we should add idiosyncratic hooks for media one at a time. Whatever hap-

pened to the enthusiasm for using the MIME typing mechanism?

Marc Andreessen replied:

This isn’t a substitute for the upcoming use of MIME as a standard document mecha-

nism; this provides a necessary and simple implementation of functionality that’s needed

independently from MIME.

Jay C. Weber responded:

Let’s temporarily forget about MIME, if it clouds the issue. My objection was to the

discussion of “how are we going to support embedded images” rather than “how are we

going to support embedded objections in various media.”

Otherwise, next week someone is going to suggest “let’s put in a new tag <AUD

SRC="file://foobar.com/foo/bar/blargh.snd">” for audio.

There shouldn’t be much cost in going with something that generalizes.

With the benefit of hindsight, it appears that Jay’s concerns were well founded. It took

a little more than a week, but HTML5 did finally add new <video> and <audio> elements.

Responding to Jay’s original message, Dave Raggett said:

True indeed! I want to consider a whole range of possible image/line art types, along with

the possibility of format negotiation. Tim’s note on supporting clickable areas within

images is also important.

Later in 1993, Dave proposed HTML+ as an evolution of the HTML standard. The

proposal was never implemented, and it was superseded by HTML 2.0. HTML 2.0 was

a “retro-spec,” which means it formalized features already in common use: “This

specification brings together, clarifies, and formalizes a set of features that roughly

corresponds to the capabilities of HTML in common use prior to June 1994.”

A Long Digression into How Standards Are Made | 5

Dave later wrote HTML 3.0, based on his earlier HTML+ draft. Outside of the W3C’s

own reference implementation, Arena, HTML 3.0 was never implemented. It was su-

perseded by HTML 3.2, which was also a “retro-spec”: “HTML 3.2 adds widely

deployed features such as tables, applets and text flow around images, while providing

full backward compatibility with the existing standard HTML 2.0.”

Dave later coauthored HTML 4.0, developed HTML Tidy, and went on to help with

XHTML, XForms, MathML, and other modern W3C specifications.

Getting back to 1993, Marc replied to Dave:

Actually, maybe we should think about a general-purpose procedural graphics language

within which we can embed arbitrary hyperlinks attached to icons, images, or text, or

anything. Has anyone else seen Intermedia’s capabilities with regard to this?

Intermedia was a hypertext project from Brown University. It was developed from 1985

to 1991 and ran on A/UX, a Unix-like operating system for early Macintosh computers.

The idea of a “general-purpose procedural graphics language” did eventually catch on.

Modern browsers support both SVG (declarative markup with embedded scripting)

and <canvas> (a procedural direct-mode graphics API), although the latter started as a

proprietary extension before being “retro-specced” by the WHAT Working Group.

Bill Janssen replied:

Other systems to look at which have this (fairly valuable) notion are Andrew and Slate.

Andrew is built with _insets_, each of which has some interesting type, such as text,

bitmap, drawing, animation, message, spreadsheet, etc. The notion of arbitrary recursive

embedding is present, so that an inset of any kind can be embedded in any other kind

which supports embedding. For example, an inset can be embedded at any point in the

text of the text widget, or in any rectangular area in the drawing widget, or in any cell of

the spreadsheet.

“Andrew” is a reference to the Andrew User Interface System, although at that time it

was simply known as the Andrew Project.

Meanwhile, Thomas Fine had a different idea:

Here’s my opinion. The best way to do images in WWW is by using MIME. I’m sure

postscript is already a supported subtype in MIME, and it deals very nicely with mixing

text and graphics.

But it isn’t clickable, you say? Yes, you’re right. I suspect there is already an answer to

this in display postscript. Even if there isn’t the addition to standard postscript is trivial.

Define an anchor command which specifies the URL and uses the current path as a closed

region for the button. Since postscript deals so well with paths, this makes arbitrary

button shapes trivial.

Display PostScript was an onscreen rendering technology codeveloped by Adobe and

NeXT.

This proposal was never implemented, but the idea that the best way to fix HTML is

to replace it with something else altogether still pops up from time to time.

6 | Chapter 1: How Did We Get Here?

剩余221页未读，继续阅读

shaolinNO1

粉丝: 0

深入探索HTML5：技术解析与实践应用

HTML5深度解析：特性、存储与离线应用

HTML5探索之旅：马克·皮格米尔的权威指南

探索HTML5：新一代网页技术解析

HTML5揭秘英文版HTML5:up and running

HTML5揭秘中文版

html5揭秘中文版

HTML5 揭秘中文版

HTML5 揭秘

HTML5揭秘 PDF版本下载.txt

HTML5揭秘 PDF

最新资源