0513 - HackMD

# 0513  slide: https://hackmd.io/@joehung/0513/ --- ## HTML ## （HyperText Markup Language，超文本標記語言） --- ### 歷史 ---- - 前身為 1980 年由 Tim Berners-Lee 提出的 ENQUIRE - 1993 年：1.0 版規範IETF（Internet Engineering Task Force）發布 - 1995 年：2.0 版規範發布 - 1996 年：改由 W3C 維護 - 1997 年 1 月：3.2 版規範發布 - 1997 年 12 月：4.0 版規範發布 - 1999 年：4.01 版規範發布 - 2000 年：成為國際標準（ISO/ IEC15445：2000） - 2014 年：5.0 版規範發布 --- ### 簡介 ---- - 前端專用 - 常與 CSS、JavaScript 一同使用 - 瀏覽器讀取 HTML 文件後渲染成為可視化網頁 - 並不像 C、C++、Python、Java 等等的其他程式語言具有邏輯判斷、算術運算的功能 - 由元素（elements）所組成 --- ### 簡單的 HTML 原始碼及元素介紹 ---- ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <H1>Hello World!</H1> <H2>H2</H2> <H3>H3</H3> <H4>H4</H4> <H5>H5</H5> <H6>H6</H6> <p>NMSL</p> <ul> <li>NTU</li> <li>NTHU</li> <li>NCTU</li> <li>DYU</li> <li>UCCU</li> </ul> <ol> <li>UCCU</li> <li>DYU</li> <li>NTU</li> <li>NTHU</li> <li>NCTU</li> </ol> <a href="https://www.ntu.edu.tw/">112</a><br> <img src="https://i.imgur.com/HrNlUNP.jpg" alt="My test image"> </body> </html> ``` ---- - `<!DOCTYPE html>`：告知瀏覽器這是個 HTML 檔案 - `<html></html>`：將 HTML 程式碼包起來 - `<head></head>`：標頭檔，不顯示在網頁上 - `<meta charset="utf-8">`：告知瀏覽器網頁文字編碼為 UTF-8 - `<title></title>`：網頁標題 ---- - `<body></body>`：網頁主體 - `<H1></H1>`：標題（可用到 H6） - `<p></p>`：段落文字 - `<ol></ol>`：有序清單，每個元素以 `<li></li>` 代表 - `<ul></ul>`：無序清單，每個元素以 `<li></li>` 代表 - `<a href=""></a>`：超連結，`href` 為連結位置，`</a>`前為連結文字 - `<br>`：換行 - `<img src="" alt="">`：圖片，`src` 為圖片位置、`alt` 為圖片描述 ---- ![](https://i.imgur.com/FzUsRQi.png =800x) --- ## DOM ## （Document Object Model，文件物件模型） --- - 讓各個瀏覽器依照此模型進行實作，解決各瀏覽器間物件模型不一致，而無法顯示的問題 - 將一份網頁文件中的所有元素（element）都視為一個物件（object） - 依照位階可形成一個樹狀結構（tree），會有數個節點（node） ---- ![](https://i.imgur.com/hu5mZHO.png) https://mropengate.blogspot.com/2015/01/data-structure-ch1-tree-and-binary-tree.html ---- - Document：網頁文件本身 - Element：各種標籤，例如 `<H1>`、`<p>` - Text：被標籤包起來的文字，例如 `<p>Cool</p>` 中的 Cool 就是 Text - Attribute：標籤屬性 --- ### 範例 ---- ```htmlmixed= <html> <head> <title>example</title> </head> <body> <h1 class="txt">Hello World</h1> </body> </html> ``` ---- ![](https://i.imgur.com/N7CxliB.png) https://ithelp.ithome.com.tw/articles/10202689 --- ### Node 間的關係 ---- - 父子關係(Parent and Child)：上下層的節點，上層為父、下層為子 - 兄弟關係(Siblings)：在同一層節點，分為 Previous 及 Next 兩種 ---- ![](https://i.imgur.com/FIqlPd1.png) https://www.optimizesmart.com/introduction-to-dom-nodes-css-selectors-for-google-tag-manager/ --- ![](https://i.imgur.com/al2vNg0.png)