HTML5入门指南：免费下载

需积分: 10 19 浏览量更新于2024-07-23 收藏 4.04MB PDF 举报

"HTML5 up and running" 《HTML5 Up and Running》是由Mark Pilgrim编写的，旨在帮助读者快速上手并深入理解HTML5这一重要的Web技术。这本书详细介绍了HTML5的新特性和改进，旨在推动HTML5的学习和发展，鼓励读者与社区共同进步。 HTML5是超文本标记语言（HTML）的最新版本，它对Web开发产生了深远影响。在《HTML5 Up and Running》一书中，作者Mark Pilgrim将带领读者探索以下关键知识点： 1. **结构元素**：HTML5引入了新的结构元素，如<header>、<nav>、<section>、<article>和<footer>，这些元素帮助开发者更好地组织网页内容，提升页面语义化。 2. **表单控件**：HTML5对表单进行了重大更新，新增了诸如<input type="date">、<input type="email">等新输入类型，以及<output>、<datalist>和<keygen>等元素，提高了用户体验和数据验证能力。 3. **媒体元素**：HTML5引入了<audio>和<video>元素，使得在网页中内嵌音频和视频变得更加直接和简单，减少了对外部插件的依赖。 4. **离线存储**：利用 localStorage 和 sessionStorage，HTML5 提供了在用户浏览器中本地存储数据的能力，使得应用程序可以实现离线工作模式。 5. **Canvas**：HTML5的<canvas>元素提供了一个二维绘图环境，允许开发者通过JavaScript进行动态图形绘制，用于创建交互式图形和游戏。 6. **SVG**：Scalable Vector Graphics（可缩放矢量图形）是HTML5的一部分，支持创建高质量的矢量图像，适合用于图表、图标和复杂图形。 7. **Geolocation**：HTML5的地理位置API允许网页应用获取用户的地理位置信息，为移动应用和位置服务提供了基础。 8. **Web Workers和Web Storage**：这两项技术提升了Web应用的性能，Web Workers允许可后台运行的多线程脚本，Web Storage则提供了比cookie更高效的数据存储解决方案。 9. **WebSockets**：HTML5的WebSockets API提供了全双工的通信协议，使得实时交互成为可能，如在线聊天和实时数据流应用。 10. **兼容性与渐进增强**：书中会讲解如何在旧版浏览器中实现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页未读，继续阅读

冲动忍者

粉丝: 0
资源: 6

HTML5入门指南：免费下载

HTML5：Up.and.Running

html5的网页设计与制作研究参考文献

html,css,javascript,node.js,Mysql数据库的参考文献

How to add dash into pyqt5

html 语言 编写检查网站存活的代码

javaweb外文文献

在乌班图中搭建web服务器

maven-surefire-plugin

帮我用html写一个运动的静态网站

fish conda

最新资源

html 语言编写检查网站存活的代码