![封面](https://api.iistw.com/blogs/1710267849552-認識HTML.png) # 認識 HTML [toc] ## 前言這篇開始，我們要先了解網站開發的一些知識、技術，以及一些術語等。了解這些東西，對我們在開發網站的時候非常有幫助，它可以幫我們理解官方文檔或是其他地方的資源是在說什麼。 ## 引言一直以來 HTML 的標準都是由 [W3C](https://www.w3.org/)[^1] 制定，直到 2019 年 05 月 28 日，W3C 與 [WHATWG](https://whatwg.org/)[^2] 合作開發 HTML 和 DOM[^3] 的規範（詳見參考資料）。 [^1]: W3C（World Wide Web Consortium，全球資訊網協會）成立於 1994 年，為半自治非政府組織。 [^2]: WHATWG（Web Hypertext Application Technology Working Group，網頁超文字應用技術工作小組）成立於 2004 年，是一個以推動網路HTML標準為目的而成立的組織。 [^3]: DOM（Document Object Model，文件物件模型）是 Web 文件的程式設計介面，它將文件表示為節點和物件，以便程式可以更改文件結構、樣式和內容。 ## 什麼是 HTML HTML[^4] 是一種標記語言（Markup Language）。常聽到的 HTML5 是於 2014 年發佈的最新版本的 HTML 技術，它的前身 HTML4 已於 1999 年 12 月進行了最後一次更新，這個版本簡化了許多語法，讓編寫程式變得更加容易且方便。 ```html 範例頁面

範例標題

這是一個範例頁面，它有一個連結的標籤。

``` 根據上方的 HTML 程式片段可以清晰的了解到 HTML 是由元素和文字組成的**樹狀**結構，每一個元素都是由開始標記為起始以及結束標記為結束表示。（在某些情況下可略，並由其它標記暗示，詳見參考資料第 3 點） ### 嵌套關係元素與元素可以是嵌套關係，但是**不能**是只重疊一部分的關係，如下面的例子： ```html

這是一個錯誤的例子

這是一個正確的例子

``` ### 元素屬性元素可以擁有**屬性**（Attribute），讓元素能夠有不同的工作方式，或者是改變其代表的意義，例如說下面的例子是一個超連結，它擁有一個 `href` 屬性： ```html 連結 ``` #### 規則屬性會在起始的標記內，由名稱、值組成，並以 `=` 作為分隔。如果屬性值不包含： - ASCII 空格（詳見參考資料第 4 點） - 雙引號（"） - 單引號（'） - 反引號（`） - 等於（=） - 小於（<） - 大於（>）則屬性值可以不用以引號（單、雙皆可）包起來。如果值是空字串，可以省略值以及 `=`。下面是一些例子： ```html

Popover 元素

``` ```javascript const openBtn = document.getElementById('openBtn'); const closeBtn = document.getElementById('closeBtn'); const popoverTarget = document.getElementById('popoverTarget'); openBtn.addEventListener('click', () => { popoverTarget.showPopover(); }); closeBtn.addEventListener('click', () => { popoverTarget.hidePopover(); }); ``` 16. `accesskey` 為元素提供一個快捷鍵，且要是可列印字元。這個屬性有點一言難盡，它可能會因為瀏覽器或鍵盤產生一些問題，所以建議不要使用。

	Windows	Linux	Mac
Firefox	`Alt` + `Shift` + `[key]`		Firefox 57（或更新）`Control` + `Option` + `[key]` 或 `Control` + `Alt` + `[key]`
			Firefox 14（或更新）`Control` + `Alt` + `[key]`
			Firefox 13（或更舊）`Control` + `[key]`
Internet Explorer	`Alt` + `[key]`	N/A
Google Chrome	`Alt` + `[key]`		`Control` + `Alt` + `[key]`
Safari	`Alt` + `[key]`	N/A	`Control` + `Alt` + `[key]`
Opera 15+	`Alt` + `[key]`		`Control` + `Alt` + `[key]`
Opera 12	`Shift` + `Esc` 開啓可訪問的清單，然後按 `[key]`

Firefox 可以通過使用者偏好改變修飾鍵。 17. `dir` 枚舉屬性，是用來指定元素中文字的方向。它具有以下值： | 值 | 說明 | | ------ | ------------------------------------------------------------ | | `ltr` | 從左到右，例如中文、英文。 | | `rtl` | 從右到左，例如阿拉伯語。 | | `auto` | 使用者代理（User Agent）[^10]做出決定。它使用基本演算法來解析元素內的字元，直到找到具有強方向性的字元，然後將該方向性應用於整個元素。 | 如果 CSS 的 `direction` 和 `unicode-bidi` 屬性和 `dir` 屬性同時被設定，CSS 優先程度比較高，因此建議盡可能使用 `dir` 而不是相關的 CSS 屬性。這樣，即使在不支援 CSS 或停用 CSS 的瀏覽器上，文字也能正確顯示。 [^10]: 使用者代理（User Agent）是一種軟體，通常是網頁瀏覽器，它在使用者與網站之間充當了一個傳遞訊息的角色。 ## 結語終於寫完了，這篇寫了有點久。其實我在開始介紹 HTML 的時候一直在思考那些要先講、那些要晚一點，後來就想說總得先知道 HTML 的屬性吧？於是先後順序就變成這樣了。這篇先簡單的介紹了一下 HTML 是什麼、屬性的規則、類型，下一篇講一下 HTML 的結構與元素。 ## 參考資料 1. HTML Standard: [https://html.spec.whatwg.org/multipage/ 2. W3C and WHATWG to work together to advance the open Web platform | 2019 | Blog | W3C: [https://www.w3.org/blog/2019/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/](https://www.w3.org/blog/2019/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/) 3. HTML Standard, Edition for Web Developers: [https://html.spec.whatwg.org/dev/syntax.html#syntax-tag-omission](https://html.spec.whatwg.org/dev/syntax.html#syntax-tag-omission) 4. Infra Standard: [https://infra.spec.whatwg.org/#ascii-whitespace](https://infra.spec.whatwg.org/#ascii-whitespace) 5. 學習 HTML ：指南與教學 - 學習該如何開發 Web | MDN：[https://developer.mozilla.org/zh-TW/docs/Learn/HTML](https://developer.mozilla.org/zh-TW/docs/Learn/HTML) 6. Global attributes - HTML: HyperText Markup Language | MDN: [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) 7. HTML Standard - Attributes: [https://html.spec.whatwg.org/multipage/indices.html#attributes-3](https://html.spec.whatwg.org/multipage/indices.html#attributes-3)