# HTML 標記語言、樹狀結構、DOM(Document Object Model) ![](https://i.imgur.com/xiz0ryW.png) <a href = "https://getbootstrap.com/docs/4.1/components/buttons/" target = "_parent">Bootstrap</a> ## Basic structure * 宣告為HTML5的文件 ```htmlmixed=+ <!DOCTYPE html> ``` * HTML 的 root element ```htmlmixed=+ <html></html> ``` * 紀錄資料的資料 (引用函式庫、引用的js檔案、頁面名稱等等) ```htmlmixed=+ <head></head> ``` * 頁面的 title ```htmlmixed=+ <title></title> ``` * 頁面內容 ```htmlmixed=+ <body></body> ``` * 巢狀的元素 ```htmlmixed=+ <div class = "" id = ""></div> ``` * 註解 ```htmlmixed=+ <!----> ``` ## HTML 的各種標籤 (tag) * Heading 六種不同的大小，從 \<h1> ~ \<h6> (大到小) * Horizontal rule 加一條線 ```htmlmixed= <hr/> ``` * Line break 空一行 ```htmlmixed=+ <br/> ``` * Link Structure: ```htmlmixed= <a href = "url">link text</a> ``` * \<a>裡頭的參數設定 1. href: 連結網址 2. title: 游標在連結上時會浮現的字樣 3. target: 目標頁面 * \_blank：在新分頁/視窗開啟 * \_self：在原視窗/分頁開啟 (default) * \_parent：Opens the linked document in the parent frame * \_top：Opens the linked document in the full body of the window Bookmark 應用 ```htmlmixed=+ <a href = "#id名稱">跳到指定id的位置</a> ```