amazon的參考
HTML5揭秘
作者：皮爾格林|譯者:常可//胡金埔//趙靜
出版社：電子工業
ISBN：9787121124082
出版日期：2010/12/01
頁數：206
人民幣：RMB 45 元
P.16
Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 and CSS3 features. At the time of writing, the latest version is 1.1. You should always use the latest version. To do so, include the following <script> element at the top of your page:
<script src="modernizr.min.js"></script>
P.22
注意，JavaScript是大小寫敏感的，Modernizr庫中的屬性名稱是localstorage(全部小寫)，而DOM中的屬性名稱是 window.localStorage(大小寫都有)。
Note that JavaScript is case-sensitive. The Modernizr attribute is called localstorage (all lowercase), but the DOM property is called window.localStorage (mixed case).
HTML5本地存儲的安全性如何？是不是所有人都可以讀取存儲的數據？
Q: How secure is my HTML5 Storage database? Can anyone read it?
任何物理上能訪問你計算機的人都可以查看(或是修改)，你HTML5的本地數據庫。在瀏覽器中，任何網站都可以讀取和修改它們自已的數據，但是不同站點的存儲數據是不能相互訪問的。這被稱為"同源限制"(same-origin restriction)。
A: Anyone who has physical access to your computer can probably look at (or even change) your HTML5 Storage database. Within your browser, any website can read and modify its own values, but sites can’t access values stored by other sites. This is called a same-origin restriction.
P.23
Modernizr中的屬性名稱是 webworkers(全部小寫 )，而DOM中的屬性名稱是window.Worker(Worker中首 W 字母是大寫)。
Note that JavaScript is case-sensitive. The Modernizr attribute is called webworkers (all lowercase), but the DOM object is called window.Worker (with a capital “W” in “Worker”).
P.24
Modernizr庫中這個屬性名稱是 applicationcache(全部小寫)，但是DOM中的屬性名稱是window.applicationCache(大小寫都有)。
Note that JavaScript is case-sensitive. The Modernizr attribute is called applicationc ache (all lowercase), but the DOM object is called window.applicationCache (mixed case).
P.26
Instead of writing 13 separate functions yourself, you can use Modernizr (see “Modernizr: An HTML5 Detection Library” on page 16) to detect support for all the new input types defined in HTML5. Modernizr reuses a single <input> element to efficiently detect support for all 13 input types. Then it builds a hash called Modernizr.input types, which contains 13 keys (the HTML5 type attributes) and 13 Boolean values (true if supported, false if not):
if (!Modernizr.inputtypes.date) {
// no native support for <input type="date"> :(
// maybe build one yourself with
// Dojo
// or jQueryUI
}
P.29
Modernizr does not yet support checking for the microdata API, so you’ll need to use a function like this one.
P.33
這就是HTML5的doctype:
<DOCTYPE html>
就是這樣，僅僅15個字符。
This is the HTML5 doctype:
<DOCTYPE html>
That’s it. Just 15 characters. It’s so easy, you can type it by hand and not screw it up.
doctype必須位於HTML源文件的第一行，如果它前面還有東西，那怕一個空行，某些瀏覽器都會認為該頁面不具有doctype。
Your doctype needs to be on the first line of your HTML file. If there’s anything else before it—even a single blank line—certain browsers will treat your page as if it has no doctype at all. Without a doctype, the browser will render your page in quirks mode. This can be a very difficult error to catch. Extra whitespace usually doesn’t matter in HTML, so my eyes tend to just skip over it, but in this case it’s very important!
P.36
問：我從來沒有用過什麼怪異字符，那我還需要顯示聲明字符編碼嗎？
答：是的！在每一個HTML頁上你都應該總是指明所用的字符編碼。不指定編碼可能會導致安全漏洞。
Q: I never use funny characters. Do I still need to declare my character encoding?
A: Yes! You should always specify a character encoding on every HTML page you serve. Not specifying an encoding can lead to security vulnerabilities.
P.42
不在該清單上的元素都將被視為"未知元素"。對於未知元素存在兩個基本的問題：
Every browser has a master list of HTML elements that it supports. For example, Mozilla Firefox’s list is stored in nsElementTable.cpp. Elements not in this list are treated as “unknown elements.” There are two fundamental questions regarding unknown elements:
應當如何設定元素的樣式？
How should the element be styled?
By default, <p> has spacing on the top and bottom, <blockquote> is indented with a left margin, and <h1> is displayed in a larger font.
元素的DOM是什麼樣？
What should the element’s DOM look like?
Mozilla’s nsElementTable.cpp includes information about what kinds of other elements each element can contain. If you include markup like <p><p>, the second paragraph element implicitly closes the first one, so the elements end up as siblings, not parent and child. But if you write <p><span>, the span does not close the paragraph, because Firefox knows that <p> is a block element that can contain the inline element <span>. So the <span> ends up as a child of the <p> in the DOM.
P.48
在HTML5中，每個節都可以有自已的<h1>元素。
In HTML 4, the only way to create a document outline was with the <h1>–<h6> elements. If you only wanted one root node in your outline, you had to limit yourself to one <h1> in your markup. But the HTML5 specification defines an algorithm for generating a document outline that incorporates the new semantic elements in HTML5. The HTML5 algorithm says that an <article> element creates a new section, that is, a new node in the document outline. And in HTML5, each section can have its own <h1> element.
P.49
新的顯式分節元素(比如包裹於<article>中的<h1>)，可能會以意料之外的方式同舊的"隱式"分節元素(<h1>到<h6>)互相影響。為了避免麻煩，你最好只用二者其中之一，而不是同時使用。如果不得不同時使用，那就要確保用HTML5 Outliner檢查頁面代碼，並確認文檔大綱是正確無誤的。
As with all things on the Web, reality is a little more complicated than I’m letting on. The new “explicit” sectioning elements (like <h1> wrapped in <article>) may interact in unexpected ways with the old “implicit” sectioning elements (<h1>-<h6> by themselves). Your life will be simpler if you use one or the other, but not both. If you must use both on the same page, be sure to check the result in the HTML5 Outliner and verify that your document outline makes sense.
P.50
在這個例子中，datetime屬性只能指定一個日期，而不是時間。其格式是四個數字的年份，兩位數字的月份和兩位數字的天數，由減號分隔：
In this example, the datetime attribute only specifies a date, not a time. The format is a four-digit year, two-digit month, and two-digit day, separated by dashes:
<time datetime="2009-10-22" pubdate>October 22, 2009</time>
如果你還想包含時間，那就在日期後面上字母T，然後跟24小時格式的時間值，以及時區偏移量：
If you want to include a time too, add the letter T after the date, then the time in 24-hour format, then a timezone offset:
<time datetime="2009-10-22T13:59:47-04:00" pubdate>
October 22, 2009 1:59pm EDT
</time>
如果該<time>元素位於一個<article>元素之中，那麼它表示該時間戳是這篇文章的發表時間。如果不在一個<article>裡，那就表示整個文檔的發布時間。
What does the pubdate attribute mean? It means one of two things. If the <time> element is in an <article> element, it means that this timestamp is the publication date of the article. If the <time> element is not in an <article> element, it means that this timestamp is the publication date of the entire document.
P.57
同一個頁面裡可以有多個<canvas>元素。
You can have several <canvas> elements on the same page. Each canvas will show up in the DOM, and each canvas maintains its own state. If you give each canvas an id attribute, you can access them just like you would any other element.
P.58
一旦你從DOM中找到一個<canvas> 元素(使用by using document.getElementById()或任何你喜歡的方式)，你就可以調用它的getContext()方法。你必須要給getContext()傳遞一個字符串"2d"作為參數。
The first line of the function is nothing special; it just finds the <canvas> element in the DOM. The second line is where it gets more interesting. Every canvas has a drawing context, which is where all the fun stuff happens. Once you’ve found a <canvas> element in the DOM (by using document.getElementById() or any other method you like), you can call its getContext() method. You must pass the string "2d" to the getContext() method:
function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
P.59
問：我可以"重置"一個canvas嗎？
答：當然可以。只要你設置<canvas>的高度或者寬度就可以讓繪圖上下文里的屬性值重置為預設值。你甚至不需要改變它的寬度，只要簡單地設置為當前的寬度就行，就像這樣：
Q: Can I “reset” a canvas?
A: Yes. Setting the width or height of a <canvas> element will erase its contents and reset all the properties of its drawing context to their default values. You don’t even need to change the width; you can simply set it to its current value, like this:
var b_canvas = document.getElementById("b");
b_canvas.width = b_canvas.width;
P.62
Q: Why did you start x and y at 0.5? Why not 0?
A: Imagine each pixel as a large square. The whole-number coordinates (0, 1, 2...) are the edges of the squares. If you draw a one-unit-wide line between whole-number coordinates, it will overlap opposite sides of the pixel square, and the resulting line will be drawn two pixels wide. To draw a line that is only one pixel wide, you need to shift the coordinates by 0.5 perpendicular to the line’s direction.
P.73
canvas坐標系圖表(參見第60頁的Canvas 坐標系一節)中包含了文字、線條和圖形，文本只是其中的一小部份。更復雜的圖表可以簡單地通過調用 drawImage() 來繪制小圖標，合成背景圖或其它一些圖形。
The simple answer is that you’d do this for the same reason you might want to draw text on a canvas (see “Text” on page 63). Our canvas coordinates diagram (see “Canvas Coordinates” on page 60) included text, lines, and shapes; the text-on-a-canvas element was just one part of a larger work. A more complex diagram could easily use drawImage() to include icons, sprites, or other graphics.
P.77
嘿！雖然鼠標事件棘手，但是你可以把同樣的邏輯(事實上，同樣的代碼)用在其他基於canvas的應用中。記住：鼠標點擊→文檔相對坐標→canvas相對坐標→應用程序特定的代碼。
Whew! Mouse events are tough. But you can use the same logic (in fact, this exact code) in all of your own canvas-based applications. Remember: mouse click→documentrelative coordinates→canvas-relative coordinates→application-specific code.
P.111
打住。如果你認真學習了整個章節，就會知道，你不只鍵接了一個視頻文件，往往是3個。
But wait a second. If you’ve been following along through this whole chapter, you know that you don’t have just one video file; you have three. One is an .ogv file that you created with Firefogg (see “Encoding Ogg Video with Firefogg” on page 91) or ffmpeg2theora (see “Batch Encoding Ogg Video with ffmpeg2theora” on page 98). The second is an .mp4 file that you created with HandBrake (see “Encoding H.264 Video with HandBrake” on page 100). The third is a .webm file that you created with ffmpeg (see “Encoding WebM Video with ffmpeg” on page 108). HTML5 provides a way to link to all three of them: the <source> element.
每個<video>可以包含任意數目的<source>元素。瀏覽器會按照順序下載對應視頻文件，並播放最先能播放的那個文件。
Each <video> element can contain as many <source> elements as you need. Your browser will go down the list of video sources, in order, and play the first one it’s able to play.
P.112
codecs的值需要用引號圍起來，所以對於type的值需要使用不同的引號來區別於codecs的值。
The type attribute looks complicated—hell, it is complicated. It contains three pieces of information: the container format (see “Video Containers” on page 81), the video codec (see “Video Codecs” on page 83), and the audio codec (see “Audio Codecs” on page 85). Let’s start from the bottom. For the .ogv video file, the container format is Ogg, represented here as video/ogg. (Technically speaking, that’s the MIME type for Ogg video files.) The video codec is Theora, and the audio codec is Vorbis. That’s simple enough, except the format of the attribute value is a little screwy. The codecs value itself has to include quotation marks, which means you’ll need to use a different kind of quotation mark to surround the entire type value:
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
The <source> element for the WebM file is much the same, but with a different MIME type (video/webm instead of video/ogg) and a different video codec (vp8 instead of theora) listed within the codecs parameter:
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
The <source> element for the H.264 file is even more complicated. Remember when I said that both H.264 video (see “H.264” on page 84) and AAC audio (see “Advanced Audio Coding” on page 87) can come in different “profiles”? We encoded with the H.264 Baseline profile and the AAC low-complexity profile, then wrapped it all in an MPEG-4 container. All of that information is included in the type attribute:
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
上面如此麻煩的指示，最大的好處就是瀏覽器可以檢查type屬性，直接得知是否可以播放此視頻文件。如果瀏覽器確定無法播放此文件，就完全不用下載此文件。為你節省大量的頻寬，訪客也可以更快地看到視頻。
The benefit of going to all this trouble is that the browser will be able to check the type attribute first to see if it can play a particular video file. If a browser decides it can’t play a particular video, it won’t download the file. Not even part of the file. You’ll save on bandwidth, and your visitors will see the video they came for, faster.
P.113
頻文件必須使用正確的MIME類型！
VIDEO FILES MUST BE SERVED WITH THE PROPER MIME TYPE!
什麼才是正確的MIME類型呢？你已經看到，就是<source>元素裡的type屬性的值。但光設置HTML標簽里type屬性是不夠的。還應該確保服務器在Content-Type標頭信息中也有相應的設置。
What’s the proper MIME type? You’ve already seen it; it’s part of the value of the type attribute of a <source> element. But setting the type attribute in your HTML markup is not sufficient. You also need to ensure that your web server includes the proper MIME type in the Content-Type HTTP header.
P.131
url屬性最初叫uri。在標準作出改動前，有些瀏覽器稱該屬性為uri，因此為了兼容性考量，應該首先檢測url屬性是否存在，如果不存在再檢測uri屬性是否存在。
The url property was originally called uri. Some browsers shipped with that property before the specification changed. For maximum compatibility, you should check whether the url property exists and, if not, check for the uri property instead.
P.133
此函數中最重要的一部份，之前在本章中已經提到過，現在再重覆一次：數據最終是以字符串形式來存儲的。如果存儲了其它非字符串類形的數據，獲取時需要手動做類形轉換。
The most important part of this function is the caveat that I mentioned earlier in this chapter, which I’ll repeat here: Data is stored as strings. If you are storing something other than a string, you’ll need to coerce it yourself when you retrieve it. For example, the flag for whether there is a game in progress (gGameInProgress) is a Boolean. In the saveGameState() function, we just stored it and didn’t worry about the datatype:
localStorage["halma.game.in.progress"] = gGameInProgress;
But in the resumeGame() function, we need to treat the value we got from the local storage area as a string and manually construct the proper Boolean value ourselves:
gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
P.142~145
