2011年11月21日 星期一

HTML5 & CSS3 For The Real World


人民幣:RMB 45 元

為確保所有瀏覽器能夠正確讀取字符編碼,整個字符編碼聲明必須包含在文檔的前512 個字符中。必須將它放在所有基於內容的元素前面。

To ensure that all browsers read the character encoding correctly, the entire character encoding declaration must be included somewhere within the first 512 characters of your document. It should also appear before any content-based elements (like the <title> element that follows it in our example site).

Bear: 這裡說的就是 charset="utf-8"

我們將 script 元素放在頁面底部,以使其符合嵌入 JavaScript 的最佳做法。

We’ve put the script element at the bottom of our page to conform to best practices for embedding JavaScript. This has to do with the page loading speed; when a browser encounters a script, it will pause downloading and rendering the rest of the page while it parses the script. This results in the page appearing to load much more slowly when large scripts are included at the top of the page before any content. This is why most scripts should be placed at the very bottom of the page, so that they’ll only be parsed after the rest of the page has loaded.

Bear: 這裡所指的是 JavaScript ,但若考慮使用 jQuery的話,應該是要把 jQuery 的定義檔放在最前面,接下來的自已的 JavaScript 檔就可以接受這裡的建議了。


HTML5’s syntax was defined after a careful study of what older browsers can and can’t handle. For example, the 15 characters that comprise the doctype declaration in HTML5 are the minimum characters required to get every browser to display a page in standards mode.

Bear: 這裡說的就是 <!doctype html> 這15個字


Although you can leave attribute values unquoted, it’s highly likely that you’ll have attributes that require quotes (for example, when declaring multiple classes separated by spaces, or when appending a query string value to a URL). As a result, we suggest that you always use quotes for the sake of consistency.


Omit the trailing slash from elements that have no content (like meta or input).


Avoid providing redundant values for Boolean attributes (for instance, use <input type="checkbox" checked> rather than <input type="checkbox" checked="checked">).

Even Bruce Lawson, a well-respected authority on HTML5, has admitted to using section incorrectly in the past. For a bit of clarity, Bruce’s post12 explaining his error is well worth the read. In short:

section元素是通用的,所以如果有一個更具體的語義元素更恰當(比如article, aside, 或 nav),那麼就使用這些替代 section 元素。

section is generic, so if a more specific semantic element is appropriate (like article, aside, or nav), use that instead.

section元素有語義含議,意味著它所包含的內容具有相關性,如果您無法簡潔地用幾個詞描述放在 section 元素中的內容,那麼極有可能需要一個中立的容器替代它:更低級的div。

section has semantic meaning; it implies that the content it contains is related in some way. If you’re unable to succinctly describe all the content you’re trying to put in a section using just a few words, it’s likely you need a semantically neutral container instead: the humble div.


That said, as is always the case with semantics, it’s open to interpretation in some instances. If you feel you can make a case for why you’re using a given element rather than another, go for it. In the unlikely event that anyone ever calls you on it, the resulting discussion can be both entertaining and enriching for everyone involved, and might even contribute to the wider community’s understanding of the specification.

Ian Hickson直接回答了這個問題:使用它就像使用 class=nav 一樣。

This decision will ultimately be up to you, the developer. Ian Hickson, the primary editor of WHATWG’s HTML5 specification, responded to the question directly: “use [it] whenever you would have used class=nav”.


Avoid confusing mark with em or strong; those elements add contextual importance, whereas mark separates the targeted content based on a user’s current browsing or search activity.


The mark element can be added to the document either using server-side code, or JavaScript once the page has loaded.

在上百的示例中,T字符用來表示時間的開始。格式為 HH:MM:SS 以及小數點後的毫秒。Z字符是可選的,並且表示該時區是世界標準時間(UTC)。為了表示時區偏移量(代替UTC),您需要追加一個加號或減號。

<time datetime="2011-10-12T16:24:34.014Z">12 October of this year.</time>

In the above example, the T character is used to indicate the start of the time. The format is HH:MM:SS with milliseconds after the decimal point. The Z character is optional and indicates that the time zone is Coordinated Universal Time (UTC). To indicate a time zone offset (instead of UTC), you would append it with a plus or minus, like this:

<time datetime="2011-10-12T16:24:34.014-04:00">12 October of this year</time>

如果time元素缺乏 datetime 屬性,那麼元素的文本內容(無論怎樣,要出現在開始和結束標記之間)需要是一個有效的日期字符串。

If the time element lacks a datetime attribute, the element’s text content (whatever appears between the opening and closing tags) needs to be a valid date string.

summary元素僅可被用於 details 元素的子代,並且必須是第一子代。

The summary element can only be used as a child of details, and it must be the first child, if used.


Quotes are unnecessary around attribute values, unless multiple space-delimited values are used, or a URL appears as a value and contains a query string with an equals (=) character in it.

為了提高可訪問性,在需要包含 required 屬性時,請添加 ARIA 屬性 aria-required="true"。

For improved accessibility, whenever the required attribute is included, add the ARIA attribute aria-required="true". Many screen readers lack support for the new HTML5 attributes, but many do have support for WAI-ARIA roles, so there’s a chance that adding this role could let a user know that the field is required—see Appendix B for a brief introduction to WAI-ARIA.


The pattern attribute enables you to provide a regular expression that the user’s input must match in order to be considered valid. For any input where the user can enter free-form text, you can limit what syntax is acceptable with the pattern attribute.

使用 disabled 屬性的表單控件並不隨表單提交,所以它們的值對服務器端的表單處理代碼不可用。如果您想使該值不被用戶編輯,但是能夠看到並提交它,可使用 readonly 屬性。

Form controls with the disabled attribute aren’t submitted along with the form; so their values will be inaccessible to your form processing code on the server side. If you want a value that users are unable to edit, but can still see and submit, use the readonly attribute.

如果您決定採用number輸入類型的方式,請記住在number類型中是不支援 pattern 屬性的。

If you do decide that number is the way to go, remember also that the pattern attribute is unsupported in the number type. In other words, if the browser supports the number type, that supersedes any pattern. That said, feel free to include a pattern, in case the browser supports pattern but not the number input type.

值得注意的是, output 元素的名稱和值與表單一起提交。

It’s worth noting that the output element’s name and value are submitted along with the form.


The :visited pseudo-class may pose a security risk, and may not be fully supported in the future. In short, malicious sites can apply a style to a visited link, then use JavaScript to check the styles of links to popular sites. This allows the attacker to glimpse the user’s browsing history without their permission. As a result, several browsers have begun limiting the styles that can be applied with :visited, and some others (notably Safari 5) have disabled it entirely.