From d562b5147868e8a31ef754e8be7d2bf955b0da90 Mon Sep 17 00:00:00 2001 From: bblurock Date: Mon, 29 Sep 2014 19:51:34 +0800 Subject: [PATCH 1/3] =?UTF-8?q?html.md=20=E7=BF=BB=E8=AD=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../zh-TW/coding-standards/chapters/html.md | 133 +++++++++--------- 1 file changed, 70 insertions(+), 63 deletions(-) diff --git a/manual/zh-TW/coding-standards/chapters/html.md b/manual/zh-TW/coding-standards/chapters/html.md index 9a7a641f..bb08666b 100644 --- a/manual/zh-TW/coding-standards/chapters/html.md +++ b/manual/zh-TW/coding-standards/chapters/html.md @@ -1,6 +1,6 @@ ## html -These guidelines have been assembled following an examination of emerging practices, ideas and existing styleguides, and include items from: +這份準則是透過檢視一些新興的程式實作、想法、以及現有的編碼規範所集思廣益而成，並引用以下清單中所使用的概念： 1. [Google's html styleguide](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml) 2. [JQuery's HTML Styleguide](http://contribute.jquery.org/style-guide/html/) @@ -11,34 +11,36 @@ These guidelines have been assembled following an examination of emerging practi ### Doctype -Always use the minimal, versionless doctype. +永遠使用精簡且不帶版本號的 html 文件宣告。 ```html ``` -### Language +### 語言 -Always define which language the page is written in. +永遠定義該頁面所使用的語言 ```html ``` -### Encoding -Always define the character encoding. The encoding should be defined as early as possible. -Make sure your editor uses UTF-8 as character encoding, without a byte order mark (UTF-8, no BOM). -Do not specify the encoding of style sheets as these assume UTF-8. +### 編碼 + +永遠需定義字源編碼。編碼在程式之中越早定義越好。 +確認你的編輯器是使用 UTF-8 的字源編碼，且不使用位元組順序記號(byte order mark)。 +不要在樣式表中設定編碼，因為樣式表的編碼已經預設為 UTF-8。 ```html ``` -[More on encodings and when and how to specify them can be found in Handling character encodings in HTML and CSS](http://www.w3.org/International/tutorials/tutorial-char-enc/) - +[更多有關如何以及何時設定這些編碼，請見此篇文章 Handling character encodings in HTML and CSS](http://www.w3.org/International/tutorials/tutorial-char-enc/) ### Capitalisation -All html should be lowercase; element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values (with the exception of strings). Additionally, there is no need to use CDATA to escape inline JavaScript, formerly a requirement to meet XML strictness in XHTML. +### 大小寫規則 + +所有 html 皆必須為小寫；元素名稱、屬性、屬性值(除非是 text/CDATA)、CSS 選擇器、變數、變數值(字串例外，可有大小寫)。此外，在使用內嵌的 JavaScript 時不需使用跳脫字串 CDTA，這在以前是為了讓 XHTML 符合 XML 標準時所要求的規定。 ```html @@ -60,11 +62,11 @@ a { } ``` -### Protocol +### 通訊協定 -Omit the protocol portion (http:, https:) from URLs pointing to images and other media files, style sheets, and scripts unless they are not available over both protocols. +在圖片、多媒體、樣式表或任何腳本程式的 URLs 連結上，省略通訊協定的部分 (http:, https:)，除非其來源不屬於這兩種通訊協定的範疇。 -This prevents mixed content issues and results in minor file size savings. +這可以避免混合內容的安全性問題，並小量減少檔案大小。 ```html @@ -74,12 +76,13 @@ This prevents mixed content issues and results in minor file size savings. ``` -### Elements and Attributes +### 元素及屬性 -Always include html, head, and body tags. +永遠加入 html，head 和 body 標籤。 + +### Type 屬性 +引入樣式表時不要使用 type 屬性(除非不是使用CSS)。引入腳本程式時不要使用 type 屬性(除非不是使用JavaScript)。 -### Type attributes -Do not use type or attributes for style sheets (unless not using CSS) and scripts (unless not using JavaScript). ```html @@ -88,8 +91,9 @@ Do not use type or attributes for style sheets (unless not using CSS) and script ``` -### Language attributes -Do not use language attributes on script tags. +### Language 屬性 +使用 Script 標籤時不要使用 language 屬性。 + ```html ``` - -Use attribute/value pairs for boolean attributes +布林值形態的屬性需使用 屬性/值 對。 ```html @@ -117,12 +120,12 @@ Use attribute/value pairs for boolean attributes ``` -HTML attributes should be listed in an order that reflects the fact that class names are the primary interface through which CSS and JavaScript select elements. +HTML 元素中的屬性值應以 class 為首並建議依以下順序排列，這同時反映出 class 名稱在 css 與 javascript 中是最主要的選擇器 (selector) 1. class 2. id 3. data-* -4. Everything else +4. 任何其他的屬性 ```html Text @@ -130,7 +133,7 @@ HTML attributes should be listed in an order that reflects the fact that class n Text ``` -Elements with multiple attributes can have attributes arranged across multiple lines in an effort to improve readability and produce more useful diffs: +當元素標籤擁有多個屬性值的時候可以以多行顯示，來提升文件的可讀性並產生更好用的 diffs: ```html ``` -### Elements -Optional closing tags may not be omitted. +### 元素 + +當元素結尾標籤是可選的時候，永遠不要省略結尾標籤。 + ```html

The quick brown fox jumps over the lazy dog.

@@ -150,7 +155,8 @@ Optional closing tags may not be omitted.

The quick brown fox jumps over the lazy dog. ``` -Self-closing (void) elements should not be closed. Trailing forward slashes and spaces should be omitted. +可以自我閉合(Self-closing)的元素不應該有閉合標籤，結尾的斜線以及空白必須忽略。 + ```html @@ -159,8 +165,8 @@ Self-closing (void) elements should not be closed. Trailing forward slashes and ``` -### Formatting -Use a new line for every block, list, or table element, and indent every such child element. +### 格式 +每個區塊標籤(div, list 或 table)都應該使用單獨的一行，並在每一個子元素縮排。 ```html @@ -178,11 +184,11 @@ Use a new line for every block, list, or table element, and indent every such ch ``` -We prefer readability over file-size savings when it comes to maintaining existing files. Plenty of whitespace is encouraged. Use whitespace to visually separate groups of related markup and to improve the readability and maintainability of your HTML. Use two empty lines between larger blocks, and use a single empty line between child blocks of larger blocks. Be consistent. (If you are worried about your document's size, spaces (as well as repeated use of the same strings - for instance class names) are excellent candidates for compression. Also, you may use a markup minifier to decrease your document's file size.) +當維護程式碼時，相較於節省檔案大小我們偏好以可讀性作為優先考量。我們鼓勵適當且足夠的空白。使用空白來使不同的群組在視覺上有所區分，並提高您的 HTML 的可維護性以及可讀性。主要的大區塊以兩行空白隔開，其大區塊之內的小區塊以一行空白隔開。注意維持其一致性。如果您擔心文件的大小，空白(包含一些重複被使用的字串、class 等等)是被很適合被壓縮的目標之一，您可以使用一些標記語言的壓縮器來縮減檔案大小。 -Keep line-length to a sensible maximum, e.g., 80 columns. +單行的長度應維持在適當的合理範圍內，如: 80 columns -Tip: configure your editor to "show invisibles". This will allow you to eliminate end of line whitespace, eliminate unintended blank line whitespace, and avoid polluting commits. +小技巧：設定您的編輯器選項為 "show invisibles"。這個選項可以替您消除不必要的空白，不會讓您的 commit 被過多的空行所影響顯示。 ```html

@@ -211,9 +217,9 @@ Tip: configure your editor to "show invisibles". This will allow you to eliminat ``` -### Indentation -Don't indent inside html, body, script, or style. Indent inside head and all other elements. -Indent by four spaces at a time. Don’t use tabs or mix tabs and spaces for indentation. +### 縮排 +html、body、script 或 style 等等的標籤底下不需要縮排。head 以及任何其他的標籤底下都需縮排。 +縮排一次是四個空白。不要使用 tab 縮排或是把 tab 和空白混著使用。 ```html @@ -246,8 +252,9 @@ Indent by four spaces at a time. Don’t use tabs or mix tabs and spaces for ind ``` -### Trailing Whitespace -Remove trailing white spaces. Trailing white spaces are unnecessary and can complicate diffs. +### 後綴空白 + +移除後綴的空白。後綴空白是不必要的而且會造成複雜的 diffs 顯示. ```html @@ -259,9 +266,11 @@ Remove trailing white spaces. Trailing white spaces are unnecessary and can comp ### Entity References -Do not use entity references. There is no need to use entity references like —, ”, or ☺, assuming the same encoding (UTF-8) is used for files and editors as well as among teams. -The only exceptions apply to characters with special meaning in HTML (like < and &) as well as control or “invisible” characters (like no-break spaces). +不要使用字符實體引用(entity references)。若開發團隊中每位成員的編輯器編碼都相同的話(都為UTF-8)，便不需要使用例如 —、” 或 ☺。 + +唯有的例外是，當該字符在 HTML 之中具有特殊意義 (如 < 和 &)、控制碼或屬於 "看不見 (invisible) " 的字元時(像是 ``` ``` non-breaking spaces) + ```html

The currency symbol for the Euro is “€”.

@@ -270,9 +279,10 @@ The only exceptions apply to characters with special meaning in HTML (like < and

The currency symbol for the Euro is “&eur;”.

``` -### Inline CSS +### 行內樣式(Inline CSS) + +不要使用行內樣式。當使用 JavaScript 去改變樣式或狀態時，如果可以，儘量使用 Unobtrusive JavaScript(一種將Javascript從HTML結構抽離的設計概念)的模式去改變或新增 class 名稱。 -Inline CSS must be avoided. When altering states using JavaScript, use CSS to define your states, and only use onobtrusive JavaScript to alter class names whenever possible. ```html Home @@ -283,14 +293,16 @@ Inline CSS must be avoided. When altering states using JavaScript, use CSS to de @todo more meaningful example. -### Style Attributes -You should not use border, align, valign, or clear attributes. Avoid use of style attributes, except where using syndicated content or internal syndicating systems. +### Style 屬性 + +你不應該使用 border、align、valign 或 clear 等等的屬性。不要使用 style 屬性。避免使用 style 屬性，除非使用 syndicated content 或 internal syndicating systems。 +### 語意化 -### Semantics -Use HTML according to its purpose. For example, use heading elements for headings, p elements for paragraphs, a elements for anchors, etc. +根據其意義使用 HTML。舉例來說，使用標題元素(h1 ~ h6)來表示標題，段落元素 p 表示段落，連結元素 a 表示連結等等。 + +依據不同的考量來使用 HTML 對於易使用性、重複使用性以及程式碼效率等等是相當重要的。 -Using HTML according to its purpose is important for accessibility, reuse, and code efficiency reasons. ```html View subscriptions @@ -299,19 +311,18 @@ Using HTML according to its purpose is important for accessibility, reuse, and c
View subscriptions
``` +### 標記(Markup) - -### Markup - -#### Image Tags -Image elements () must have an alt attribute. Height and width attributes are optional and may be omitted. +#### 圖片標籤 +圖片元素 () 必須包含 alt 屬性. Height 和 width 屬性是可選的，可以被忽略。 @todo add examples from here http://www.bbc.co.uk/guidelines/futuremedia/technical/semantic_markup.shtml -### Comments +### 註解 @todo: comment styles in JS, CSS, HTML -For more complex blocks of HTML, it may be useful to add a comment to the closing tag: +HTML 中複雜的區塊可以在結束標籤之後加上一段註解： + ```html
@@ -321,10 +332,8 @@ For more complex blocks of HTML, it may be useful to add a comment to the closin
``` - - -### Mark todos -Highlight todos by using the keyword TODO, eg: +### 在檔案中標記 Todo +在檔案中註解待完成清單時可以使用 TODO 關鍵字，例如： ```html @@ -334,9 +343,7 @@ Highlight todos by using the keyword TODO, eg: ``` - - -### Markup validation tools +### 標記驗證工具 @todo: list various testing tools: * http://validator.w3.org/nu/ * http://csslint.net/ From 4cbd708667d223e67e545023bfcb252407a525d1 Mon Sep 17 00:00:00 2001 From: bblurock Date: Mon, 6 Oct 2014 11:19:57 +0800 Subject: [PATCH 2/3] =?UTF-8?q?CSS.md=20=E7=BF=BB=E8=AD=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manual/zh-TW/coding-standards/chapters/css.md | 107 +++++++++--------- 1 file changed, 54 insertions(+), 53 deletions(-) diff --git a/manual/zh-TW/coding-standards/chapters/css.md b/manual/zh-TW/coding-standards/chapters/css.md index 91979236..9254d65d 100644 --- a/manual/zh-TW/coding-standards/chapters/css.md +++ b/manual/zh-TW/coding-standards/chapters/css.md @@ -1,93 +1,93 @@ ## CSS -These guidelines have been assembled following an examination of emerging practices, ideas and existing styleguides, namely: +這份準則是透過檢視一些新興的程式實作、想法、以及現有的編碼規範所集思廣益而成，並引用以下清單中所使用的概念： 1. [OOCSS Code Standards](https://github.com/stubbornella/oocss-code-standards) 2. [Oneweb Style Guide](https://github.com/nternetinspired/OneWeb/blob/master/STYLEGUIDE.md) 3. [Idiomatic CSS](https://github.com/necolas/idiomatic-css) -## Commenting +## 註解 + +### 主要段落 +主要的程式碼段落必須以完整的註解區塊作為開頭，例如： -### Major sections -Major code sections should be named in caps and within a full comment block, eg: ```css /* ========================================================================== PRIMARY NAVIGATION ========================================================================== */ ``` -### Sub sections -Subsections should be normally cased and within an open comment block. +### 次要段落 +次要段落須以開放式的註解區塊為開頭： + ```css /* Mobile navigation ========================================================================== */ ``` -### Verbose comments +### 文字註解 ```css /** - * Short description using Doxygen-style comment format + * 短的註解描述使用 Doxygen 風格的註解格式 * * The first sentence of the long description starts here and continues on this * line for a while finally concluding here at the end of this paragraph. * - * The long description is ideal for more detailed explanations and - * documentation. It can include example HTML, URLs, or any other information - * that is deemed necessary or useful. + * 長的註解描述很適合做詳細的解釋與說明。如果有需要，可以使用 HTML、URLs 或其他資訊作為範例。 * * @tag This is a tag named 'tag' * - * TODO: This is a todo statement that describes an atomic task to be completed - * at a later date. It wraps after 80 characters and following lines are - * indented by 2 spaces. + * TODO: 這是一個註解區塊中 todo 的範例，描述之後需要被完成的項目。 + * 一行應小於 80 個字元，換行之後須以兩個空白作為縮排開頭 */ ``` -### Basic comments +### 基本註解方式 ```css /* Basic comment */ ``` -### Uncompiled LESS/Scss comments +### 為編譯的 LESS/Scss 註解 ```css -// These are stripped on compile. +// 這段註解在編譯的時候會被移除 ``` -## Class naming -Use dashes to create compound class names: +## Class 命名方式 +使用破折號 (-) 來處理復合式命名： ```css -/* Good - use dashes */ +/* 正確 - 使用破折號 */ .compound-class-name {…} -/* Bad - uses underscores */ +/* 錯誤 - 使用底線 */ .compound_class_name {…} -/* Bad - uses camelCase */ +/* 錯誤 - 使用駝峰式命名 */ .compoundClassName {…} -/* Bad - does not use seperators */ +/* 錯誤 - 不使用符號分隔 */ .compoundclassname {…} ``` -### Indentation -Rules should be indented one tab (equal to 4 spaces): +### 縮排 +須以一個 tab 來縮排 (等於 4 個空白) ```css -/* Good */ +/* 正確 */ .example { color: #000; visibility: hidden; } -/* Bad - all on one line */ +/* 錯誤 - 寫在同一行 */ .example {color: #000; visibility: hidden;} ``` +LESS/Scss 也應該正確被縮排寫成巢狀，其子選擇器還有樣式規則都應該縮排。巢狀的規則須以一空行作為間隔： LESS/Scss should also be nested , with child selectors and rules indented again. Nested rules should also be spaced by one line: ```css -/* Good */ +/* 正確 */ .example { > li { @@ -101,7 +101,7 @@ LESS/Scss should also be nested , with child selectors and rules indented again. } } -/* Bad - nested rules not indented */ +/* 錯誤 - 巢狀的樣式沒有正確縮排 */ .example { > li { @@ -115,7 +115,7 @@ LESS/Scss should also be nested , with child selectors and rules indented again. } } -/* Bad - nested rules not spaced */ +/* 錯誤 - 巢狀的規則沒有以一空行作為間隔 */ .example { > li { float: none; @@ -127,93 +127,94 @@ LESS/Scss should also be nested , with child selectors and rules indented again. } ``` -### Alignment -The opening brace must be on the same line as the last selector and preceded by a space. The closing brace must be on its own line after the last property and be indented to the same level as the opening brace. +### 對齊 +左大括號必須跟選擇器位於同一行，並前綴一空白字元。右大括號須存在於最後一個屬性規則之後並獨立於新的一行，且應與左大括號處於相同的縮排。 ```css -/* Good */ +/* 正確 */ .example { color: #fff; } -/* Bad - closing brace is in the wrong place */ +/* 錯誤 - 右大括號的位置錯了，沒有正確縮排 */ .example { color: #fff; } -/* Bad - opening brace missing space */ +/* 錯誤 - 左大括號之前沒有空白 */ .example{ color: #fff; } ``` -### Property Format -Each property must be on its own line and indented one level. There should be no space before the colon and one space after. All properties must end with a semicolon. +### 樣式屬性格式 +每一個屬性都應該存在獨立的一行，並縮排一個層級。冒號之前不應該有空白字元，但須後綴一空白字元。所有的樣式屬性須以分號 (;) 作為結尾。 ```css -/* Good */ +/* 正確 */ .example { background: black; color: #fff; } -/* Bad - missing spaces after colons */ +/* 錯誤 - 冒號後面沒有後綴空白 */ .example { background:black; color:#fff; } -/* Bad - missing last semicolon */ +/* 錯誤 - 沒有以分號作為結尾 */ .example { background: black; color: #fff } ``` -### HEX values -HEX values must be declared in lowercase and shorthand: +### HEX 值 +HEX 值應該使用小寫並以最小縮寫宣告： + ```css -/* Good */ +/* 正確 */ .example { color: #eee; } -/* Bad */ +/* 錯誤 */ .example { color: #EEEEEE; } ``` -### Attribute selectors -Always use double quotes around attribute selectors. +### HTML 屬性選擇器 +屬性選擇器須以雙引號包含。 ```css -/* Good */ +/* 正確 */ input[type="button"] { ... } -/* Bad - missing quotes */ +/* 錯誤 - 沒有雙引號 */ input[type=button] { ... } -/* Bad - using single quote */ +/* 錯誤 - 使用單引號 */ input[type='button'] { ... } ``` -### Zero value units -Zero values should not carry units. +### 零值的單位 +零值不應該使用單位。 ```css -/* Good */ +/* 正確 */ .example { padding: 0; } -/* Bad - uses units */ +/* 錯誤 - 使用單位 */ .example { padding: 0px; } From 9fa82d0e0c9a1a944f5f42d20263ba0e80284df8 Mon Sep 17 00:00:00 2001 From: bblurock Date: Mon, 6 Oct 2014 14:33:21 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E9=8C=AF=E5=AD=97=EF=BC=8C=E6=AD=A3?= =?UTF-8?q?=E7=A2=BA=20good=20=E9=8C=AF=E8=AA=A4=20bad?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manual/zh-TW/coding-standards/chapters/css.md | 2 +- .../zh-TW/coding-standards/chapters/html.md | 64 +++++++++---------- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/manual/zh-TW/coding-standards/chapters/css.md b/manual/zh-TW/coding-standards/chapters/css.md index 9254d65d..3b9267a9 100644 --- a/manual/zh-TW/coding-standards/chapters/css.md +++ b/manual/zh-TW/coding-standards/chapters/css.md @@ -47,7 +47,7 @@ /* Basic comment */ ``` -### 為編譯的 LESS/Scss 註解 +### 未編譯的 LESS/Scss 註解 ```css // 這段註解在編譯的時候會被移除 ``` diff --git a/manual/zh-TW/coding-standards/chapters/html.md b/manual/zh-TW/coding-standards/chapters/html.md index bb08666b..0840f4f3 100644 --- a/manual/zh-TW/coding-standards/chapters/html.md +++ b/manual/zh-TW/coding-standards/chapters/html.md @@ -28,7 +28,7 @@ ### 編碼 永遠需定義字源編碼。編碼在程式之中越早定義越好。 -確認你的編輯器是使用 UTF-8 的字源編碼，且不使用位元組順序記號(byte order mark)。 +確認你的編輯器是使用 UTF-8 的字源編碼，且不使用 BOM (byte order mark 位元組順序記號)。 不要在樣式表中設定編碼，因為樣式表的編碼已經預設為 UTF-8。 ```html @@ -43,20 +43,20 @@ 所有 html 皆必須為小寫；元素名稱、屬性、屬性值(除非是 text/CDATA)、CSS 選擇器、變數、變數值(字串例外，可有大小寫)。此外，在使用內嵌的 JavaScript 時不需使用跳脫字串 CDTA，這在以前是為了讓 XHTML 符合 XML 標準時所要求的規定。 ```html - + Joomla - + Home ``` ```html - + a { color: #a3a3a3; } - + a { color: #A3A3A3; } @@ -69,10 +69,10 @@ a { 這可以避免混合內容的安全性問題，並小量減少檔案大小。 ```html - + - + ``` @@ -84,10 +84,10 @@ a { 引入樣式表時不要使用 type 屬性(除非不是使用CSS)。引入腳本程式時不要使用 type 屬性(除非不是使用JavaScript)。 ```html - + - + ``` @@ -95,10 +95,10 @@ a { 使用 Script 標籤時不要使用 language 屬性。 ```html - + - + ``` 布林值形態的屬性需使用 屬性/值 對。 ```html - + - + ``` @@ -127,9 +127,9 @@ HTML 元素中的屬性值應以 class 為首並建議依以下順序排列， 3. data-* 4. 任何其他的屬性 ```html - + Text - + Text ``` @@ -149,18 +149,18 @@ HTML 元素中的屬性值應以 class 為首並建議依以下順序排列， 當元素結尾標籤是可選的時候，永遠不要省略結尾標籤。 ```html - +

The quick brown fox jumps over the lazy dog.

- +

The quick brown fox jumps over the lazy dog. ``` 可以自我閉合(Self-closing)的元素不應該有閉合標籤，結尾的斜線以及空白必須忽略。 ```html - + - + ``` @@ -169,7 +169,7 @@ HTML 元素中的屬性值應以 class 為首並建議依以下順序排列， 每個區塊標籤(div, list 或 table)都應該使用單獨的一行，並在每一個子元素縮排。 ```html - +

  • Home
    • @@ -177,7 +177,7 @@ HTML 元素中的屬性值應以 class 為首並建議依以下順序排列，
- +
  • Home
  • Blog
    • @@ -223,7 +223,7 @@ html、body、script 或 style 等等的標籤底下不需要縮排。head 以 ```html - + @@ -257,10 +257,10 @@ html、body、script 或 style 等等的標籤底下不需要縮排。head 以 移除後綴的空白。後綴空白是不必要的而且會造成複雜的 diffs 顯示. ```html - +

    Yes please.

    - +

    No, thank you.

    ``` @@ -272,10 +272,10 @@ html、body、script 或 style 等等的標籤底下不需要縮排。head 以 唯有的例外是，當該字符在 HTML 之中具有特殊意義 (如 < 和 &)、控制碼或屬於 "看不見 (invisible) " 的字元時(像是 ``` ``` non-breaking spaces) ```html - +

    The currency symbol for the Euro is “€”.

    - +

    The currency symbol for the Euro is “&eur;”.

    ``` @@ -284,10 +284,10 @@ html、body、script 或 style 等等的標籤底下不需要縮排。head 以 不要使用行內樣式。當使用 JavaScript 去改變樣式或狀態時，如果可以，儘量使用 Unobtrusive JavaScript(一種將Javascript從HTML結構抽離的設計概念)的模式去改變或新增 class 名稱。 ```html - + Home - + Home ``` @@ -304,10 +304,10 @@ html、body、script 或 style 等等的標籤底下不需要縮排。head 以 依據不同的考量來使用 HTML 對於易使用性、重複使用性以及程式碼效率等等是相當重要的。 ```html - + View subscriptions - +
    View subscriptions
    ```