HTML | Lodur46

HTML（Hypertext Markup Language），中文是「超文本標記語言」，是一種用來組織架構與呈現網頁內容的標記語言，本篇文章是分享我學習 HTML 的筆記內容。 1. HTML 簡介 HTML（HyperText Markup Language），中文是「超文本標記語言」。超文本是從某網頁連到其他網頁的連結。 HTML 使用標記（markup）來詮釋文字、圖片或其他顯示內容。例如用段落標籤<p>來表示此句子是段落： <p>My cat is very grumpy</p> HTML、CSS、JavaScript 的關係： HTML：骨架。 CSS：衣服。 JavaScript：動作。 2. 製作第一個網頁下載VS Code，並安裝外掛：Auto Rename Tag、Prettier。使用 VS Code，儲存一個副檔名為.html的檔案。在檔案中，先用簡單的標籤撰寫，例如段落標籤<p>： <p>這是段落</p> 儲存檔案後，用瀏覽器開啟.html檔案，即可看到網頁。 3. 標籤、HTML Validator 範例： <p>我的貓 <strong>非常</strong> 可愛。</p> 起始標籤（opening tag）：<>，例如<p>。結束標籤（closing tag）：</>，例如</p>。內容（content）：元素的內容，例如「我的貓非常可愛。」。元素（element）：以上三者加起來就是元素 HTML element。巢狀元素（Nesting elements）：把元素放進另一個元素裡面，叫巢套（nesting），例如<strong>...</strong>放進<p>...</p>。 HTML Validator：全球資訊網協會（W3C）提供驗證服務，可以檢查 HTML 檔案是否符合 HTML 標準，檢驗網頁：The W3C Markup Validation Service。 4. 物件導向（Object-Oriented）屬性（Attributes）：就像廠牌、年份、顏色。行為（Methods）：就像直走、左轉、鳴喇叭。 5. HTML Skeleton 沒有 Skeleton（骨架）就無法呈現： <!DOCTYPE html> <html> <head></head> <body></body> </html> 6. HTML Skeleton 2 head：網頁的特定信息，包含 title、script、css……。 body：文檔正文，包含標題、段落、圖片……。打!可直接生成基本 HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html> 打command+/可生成註解：  7. head 標籤 head 內的元素可至HEAD查詢。比較重要的有：viewport、description、robots、googlebot。 8. h1-h6 標籤有六種標題元素：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。 <h1>：代表主標題，最重要的，只能有一個。 <h2>：代表副標題。 <h3>：代表更次級的副標題 <h6>：最不重要的副標題。 HTML 標籤是定義架構，不是樣式。 9. p 標籤、anchor tags <p>：段落，HTML 會自動加空行。 <a>：超鏈接。常用標籤可至MDN查詢。 10. img 標籤、絕對路徑與相對路徑 <img>：圖片。絕對路徑：使用完整的 URL。相對路徑：連結到相對於目前文件的檔案。.代表目前 html 文件所在資料夾位置，..代表上層的資料夾位置。 11. ul 與 ol 標籤 <ul>：無序清單。 <ol>：有序清單。 12. block, inline block elements：在頁面中組成區塊，例如：<div>。 inline elements：是指放在 block elements 中的內容，例如：<a>。 13. 表格製作製作表格需要用到標籤<table>、<tr>（每一行）、<th>（標題單元格）、<td>（數據）。 colspan 定義跨越列數，rowspan 定義跨越行數。選擇性使用的標籤：<thead>、<tbody>、<tfoot>。 14. 表單製作 form action：定義數據發送地。 form method：告訴瀏覽器如何將數據發送到伺服器。 15. GET, POST GET：把數據發送到 action 指定的 URL。 POST：隱藏資料或向伺服器寄送被儲存的資料。 16. checkbox, email, file input type： ...