2011年10月17日 星期一

HTML Manual of Style: A Clear, Concise Reference for Hypertext Markup Language (including HTML5), Fourth Edition

Bear在這裡買的
amazon的參考

HTML5和樣式應用指南
作者:(美)阿倫森|譯者:劉紅偉
出版社:機械工業
ISBN:9787111331957
出版日期:2011/03/01
頁數:227
人民幣:RMB 45 元




Bear:讀這本書讓我有點驚訝,平淡無奇的內容穿插著自已未曾注意到的小細節和注意事項,也難怪在amazon中有著不錯的評價,推薦給對HTML, CSS有初步概念的人閱讀。


P.26(原文.P.36)
使用命名的實體是優先的選擇,因為不同的語言編碼有著不同的數值。

A character entity is an escape sequence that defines a single letter or symbol that normally cannot be entered in the text content. A character entity begins with an ampersand (&) and is followed by either the name of a predefined entity or a pound sign (#) and by the character’s decimal number. A semicolon is used to terminate the character entity. The tilde (~), for example, can be generated by either ˜ or ~. Using the named entity is preferable because different language encodings have different numberings.

P.27(原文.P.38)
等號兩邊不應該有任何空白,因為空白是用來分隔開每一個屬性-值對的。屬性在列表中順序無關緊要。

Attributes are written in name and value pairs with an equals sign (=) between and with the value enclosed in double quote marks. There should not be any spaces around the equals sign, because spaces are used to separate attribute-value pairs from each other. The ordering of attributes in a list does not matter.

P.27(原文.P.38)
我認為總是將屬性值放在引號是一種較好的實踐。

Note: The HTML5 specification does not require quotation marks around attribute values if the meaning is unambiguous, however other versions of HTML do require them. I think it is a good practice to always enclose attribute values in quotes.

P.29(原文.P.40)
但標簽相對於內容放在何處是無關緊要的。瀏覽器會忽略任何前面、後面或多餘的空白。

Although the HTML source code in Example 2.4 is neatly formatted, it does not matter where the tags are placed with respect to the content. Browsers are supposed to ignore any leading, trailing, or redundant white space. The following HTML segments all produce the exact same heading as the one shown in Figure 2.4:

P.41(原文.P.56)
在HTML5中,WEB開發者可以創建自已的屬性並添加給任意HTML元素,只要屬性名稱是以字符"data-"開始的。

In HTML5, a web developer can create his own attributes to add to any HTML element as long as the attribute name begins with the characters "data-" and has at least one more letter or number following the dash. As many data attributes as needed can be added to an HTML element, provided that there are no duplicate attribute names in any single element. The value of a data attribute follows the same restrictions as other attributes: Character entities are needed for special symbols, but other markup is not parsed as HTML. For example, the following HTML element (a list item) has extra data attributes that can be used by a client-side script to sort a listing or highlight specific items in response to a user action.

P.41(原文.P.57)
數據屬性的作用是提供關於一個元素內容的額外信息,這些信息可供客戶端腳本訪問。當HTML源代碼自身是由服務器上運行的腳本所產生的,這就變成了一個強大的工具,因為它允許將數據庫記錄中的信息直接加入到HTML元素中。

The purpose of data attributes is to provide extra information about the contents of an element that can be accessed by client-side scripts. When the HTML source code is itself generated by scripts running on a server, it becomes a powerful tool, because it allows information in database records to be directly incorporated into HTML elements. This was possible in earlier versions of HTML because any attribute attached to an HTML element became a property of the DOM object representing that element. However, in HTML5, this technique is formalized so that pages can have HTML elements containing data attributes and still pass syntax checkers and validation services.

P.47(原文.P.)
最好使用CSS來控制垂直空間,而不是試圖使用額外的換行或空的段落來定位內容。

Two line breaks in a row does not mean twice the vertical space on the page. A break element calls for a line break to be present in the content flow. The browser is free to ignore the tag if a line break already exists at that point. Also, when working with many WYSIWYG and online content editors, the software strips extra line breaks from the HTML or adds its own. It is better to control vertical space using CSS than to try to position things with extra line breaks or empty paragraphs. Example 2.13 shows how to use line breaks in formatting lines of a poem.

P.65(原文.P.88)
可以通過在URL的末尾添加一個問號(?),帶上用 & 符號隔開的名-值對的一個列表,從而向WEB服務器資源發送可選的參數。

Optional parameters can be sent to a web server resource by adding a question mark (?) to the end of the URL with a list of name-value pairs separated by ampersands (&). Usually, the resource is a server-side script that knows what to do with the parameters. For example, the following anchor element could represent a link to a server-side script named show_log:

P.68(原文.P.92)
An inline image behaves on a web page as if it were a large character of text. This is the key to understanding how to use images on a Web page. It not only means that anywhere a text character can go, an inline image can go; it also means that inline images are bound to adjacent characters (or other inline images) the same way as letters are bound into words. This sequence of image elements:

<img src="..." alt=""/>
<img src="..." alt=""/>
<img src="..." alt=""/>

is not the same as this sequence:

<img src="..." alt=""/><img src="..." alt=""/><img src="..." alt=""/>

在前一種情況下,HTML源代碼中結束每一行的回車會當作圖像之間的空白對待。如果圖像加起來比包含元素還要寬,那麼會在那些空白的地方進行單詞折返。在後一種情況中,圖像之間沒有空白,它們就像是一個3字母單詞中的字符。如果包含元素比3幅圖像的總寬度要窄,可能要支持水平滾動,或者根據包含元素的屬性,要麼裁減圖像,要麼允許圖像覆蓋相鄰的內容。

In the former case, the carriage returns ending each line in the HTML source are treated as white space between the images. If the images together are wider then the containing element, it word-wraps on those spaces. In the latter case, there are no spaces between the images. They are like the characters in a three-letter word. If the containing element is narrower than the total width of the three images, horizontal scrolling may be enabled. Or depending on the properties of the containing element, the images can either be clipped or allowed to overflow into adjacent content.

P.77(原文.P.103)
在使用這樣的一個tabindex屬性來確定順序時,我推薦指定10作為數字的增量,以使容易插入新的項或隨後重新調整順序。

Wherever an ordering such as the tabindex attribute is used, I recommend specifying numbers in increments of 10 to make it easier to insert new items or rearrange the ordering later.

P.82(原文.P.110)
還有另一個重要的區別。沒有 multiple 屬性的 select 元素總是返回一個值,它默認地是第一個 option 項。帶有 multiple 屬性的 option 元素,如果當表單提交時用戶沒有選中任何一個選項,它不會返回一個值。為了覆蓋這一行為,可以給任何 option 元素添加 selected 屬性。

There is another important difference. The select element without the multiple attribute always returns a value that, by default, is the first option item. The select element with the multiple attribute does not return a value if the user does not leave any of the options selected when the form is submitted. To override this behavior, the selected attribute can be added to any option element. For example:

P.87(原文.P.118)
一個HTML元素的 style 屬性中的CSS規則,比之前對該元素的屬性生效的任何規則都優先。

CSS rules in the value of an HTML element’s style attribute take precedence over any rules previously in effect for that element’s properties. In the following HTML, the level-two heading will be bold, italic, and blue when viewed in a typical browser:

<!DOCTYPE html>
<html>
<head>
<title>Example 3.0</title>
<style type="text/css">
h2 { font-style: italic; color: red; }
</style>
</head>
<body>
<h2 style="color:blue; font-weight: bold">Earthquakes!</h2>
</body>
</html>

可以通過在一條CSS規則的後面添加一個驚嘆號(!)和 important 關鍵字,從而覆蓋常規的層疊順序。

The normal order of the cascade can be overridden by adding an exclamation point (!) and the important keyword after a CSS rule. For example, changing the rule for the h2 element in the preceding code to this

h2 { font-style: italic; color: red !important; }

instructs the browser to ignore any further settings of h2 elements’ color property, unless those settings also include the important keyword. As a result, the level-two heading will be bold italic and red.

P.89(原文.P.120)
以點號後面跟著類名開始的一條CSS語句,與 *.classname 是相同的,並且將該樣式規則應用於擁有該 class 屬性值的每一個元素。

Different kinds of HTML elements can be selected by their class attribute values as well. A CSS statement beginning with a dot followed by a class name is the same as *.classname and applies the style rule to every element that has that class attribute value.

P.89(原文.P.120)
要選擇一個父元素的第一代孩子,使用如下的語法:

A descendent element is selected no matter how deeply it is nested inside the parent element. To select an element that is the first-generation child of a parent element, the following syntax is used:

body > div { margin-top: 0px; margin-bottom: 36px; }

P.95(原文.P.128)
p.joke:after { content: url(/icons/smiley.gif); }
a[href]:before { content: "[LINK] "; }

應該強調的是,使用before 和 after 偽元素並不是向頁面中插入有意義的內容的一種可接受的方法,這些內容對於忽略CSS的機器人和其它用戶代理來說是不可見的。

The first CSS statement inserts a smiley-face icon (if the image file exists at the URL provided) after any paragraph that has a class attribute with the value joke. The second statement inserts the text [LINK] before any anchor element that has an href attribute. It should be emphasized that using the before and after pseudo-elements is not an acceptable means of inserting meaningful content into a page. The content will not be visible to robots or other user agents that ignore CSS.

P.101(原文.P.136)
當使用縮寫的font屬性時,包含空白的字體家族名稱應該放在雙引號中,以避免混淆。然而,當你在style 屬產中指定CSS時,雙引號已經用於整個屬性值了,因此,字體族族名稱應該放在單引號中。

When using the shorthand font property, font family names that contain blanks should be enclosed in double quotes to avoid confusion. However, when you specify the CSS in a style attribute, double quotes are already in use for the entire attribute value, so the font family name should be enclosed in single quotes. For example:

<h2 style="font: italic 18pt Times,'Times New Roman',serif;">...</h2>

P.107(原文.P.144)
沒有縮寫的形式來將各種單個的屬性組合起來,以設置元素text的特徵。

The important CSS properties that affect the appearance of text include textalign, text-decoration, text-indent, text-transform, line-height, letterspacing, word-spacing, white-space, and vertical-align. Unlike the font, background, and some other properties, there is no shorthand form to combine the various individual properties that set the characteristics of element text.