# HTML 基礎(上) ###### tags: `HTML` 教學資源： [MDN HTML](https://developer.mozilla.org/zh-TW/docs/Web/HTML) [Treehouse HTML Basic](https://teamtreehouse.com/library/html-basics-2) >HTML（HyperText Markup Language，超文本標記語言）是打造網頁的基石。 ## :pushpin:HTML元素組成 ```html= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p class="dog">這裡有一隻可愛的小狗</p> </body> </html> ``` * Document Type文件類型：`<!DOCTYPE html>` * `<head></head>`文檔的資訊不會顯示於網頁上 ex:title、scripts、style sheets. * `<body></body>`HTML的文件內容，文件中只能有一個 * `<p>`起始標籤opening tag * `</p>`結束標籤closing tag * `這裡有一隻可愛的小狗`內容content * `class="dog"`屬性attribute：提供更多的資訊：色彩、對齊方式、圖表的格線等等 ## :pushpin:常用區塊元素 |元素|說明| |-|:-| |div|html中最常用到的塊級標籤元素| |h1~h6|標題元素標籤| |form|表單元素標籤| |hr|水平分隔線標籤| |p|段落標籤| |pre|格式化標籤| |table|表格標籤| |ul|無序列表| |ol|有序列表| |li|列表裡的項目| ## :pushpin:常用行內標籤 |標籤|說明| |-|:-| |a|文字轉連結| |strong|粗體強調| |br|換行| |em|強調| ## :pushpin:範例 ### 標題與段落 ```html= <h1>h1標題</h1> <h2>h2標題</h2> <h3>h3標題</h3> <h4>h4標題</h4> <h5>h5標題</h5> <h6>h6標題</h6> <p>內文</p> ``` ### 清單 無序清單 ```html= <ul> <li>Milk</li> <li>Cheese</li> </ul> ``` 有序清單 ```html= <ol> <li>Milk</li> <li>Cheese</li> </ol> ``` 說明清單：自動縮排的內容 ```html= <dl> <dt>標題一</dt> <dd>說明一</dd> <dt>標題二</dt> <dd>說明二</dd> <dt>標題三</dt> <dd>說明三</dd> </dl> ``` ![](https://i.imgur.com/nDZjv4p.png) ### 連結 ```html= <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Contact</a></li> </ul> ``` * 超連結指向的 URL 或本地資料夾位置