HTML的觀念 - HackMD

# HTML的觀念 ###### tags: `NKFW 網頁設計入門` - 安裝VScode - Q1 什麼是html :::info ::: - Q2 要怎麼看到網頁上的html - 如何撰寫html # 標籤 Tag ## html - 包裹整個html程式碼 ```xml! <html> </html> ``` ## head - 放給網頁先知道的事，例：title、link ```xml! <head> </head> ``` ## body - 放網頁顯示的內容 ```xml! <body> </body> ``` ## 網頁的標題（Title） - 改變網頁的標題 ```xml! <title>Hello world!</title> ``` ![](https://i.imgur.com/pTRGP8N.png) ## 內文的標題（Heading） - h1~h6，共有6個層級 - h1通常只寫一個，代表最重要的標題 - h4以下的標題與內文差不多大，較少使用，改採CSS控制。 ```xml! <h1>This is heading</h1> <h2>This is heading</h2> <h3>This is heading</h3> <h4>This is heading</h4> <h5>This is heading</h5> <h6>This is heading</h6> ``` ![](https://i.imgur.com/xUOjJYR.png) ## 內文段落（Paragraph） ```xml! <p>This is p tag</p> ``` ![](https://i.imgur.com/IAd76om.png) ## 粗體（Strong） ```xml! <p>無粗體效果</p> <p><strong>有粗體效果</strong></p>  ``` ![](https://i.imgur.com/R9GvKSh.png) ## 斜體（Emphasis） ```xml! <p>無斜體效果</p> <p><em>有斜體效果</em></p>  ``` ![](https://i.imgur.com/valrlVV.png) :::success strong 和 b 有什麼差別，em 和 i 有什麼差別 ::: ## 隔行（Line Break） - 用於換行，不需要Closing Tag ```xml! <p>我要<br>換行</p> ``` ![](https://i.imgur.com/WXEcvfO.png) ## 無序清單（Unordered List） - 用於列點 ```xml! <ul> <li>List1</li> <li>List2</li> <li>List3</li> </ul> ``` ![](https://i.imgur.com/YVV85z9.png) ## 有序清單（Ordered List） - 用於列數 ```xml! <ol> <li>List1</li> <li>List2</li> <li>List3</li> </ol> ``` ![](https://i.imgur.com/SzkweQy.png) # 屬性 Attribute ## 連結（Anchor） - href (Hypertext reference) 後面的雙引號中放入所要連結的東西，可以是網頁（絕對位置或相對位置）、網頁的特定段落、信箱甚至是電話。 ```xml! <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">點我</a>  ``` ![](https://i.imgur.com/XpliIDi.png) :::success 1. 如何用新分頁打開連結 2. 如何讓圖片具有超連結效果 ::: ## 圖片（Image） - 免Closing Tag ```xml! <img src="https://imgur.dcard.tw/AwMs0MBh.jpg" alt="快逃"> ``` ![](https://i.imgur.com/97Eufp4.png) :::success alt 的作用是什麼 ::: ## 內嵌框架（Inline Frame） - 在自已的網頁中嵌入其他網頁 ```xml! <iframe src="https://www.youtube.com/embed/kKrqgz-EXwU"></iframe> ``` ![](https://i.imgur.com/yjk2b5j.png) ## Span - 分類 elements（字） ```htmlembedded! <p>I am <span>span</span> tag.</p> ``` ![](https://i.imgur.com/vinoGwt.png) ## Div - 分類 elements（區塊） ```htmlembedded! <div> <h1>我是標題</h1> <p>我是內文</p> </div> ``` ![](https://i.imgur.com/bg5oOxY.png) ## Project1：自我介紹 :::info 運用以上所學的內容，製作一個自我介紹的網站格式可自由發揮，成品大致如下 ::: ![](https://i.imgur.com/joa1X0V.png) ## 表格（Table） - 表格橫列 table row (tr) - 橫列標題 table head (td) - 詳細內容 table detail (td) ```xml! <table> <tr> <th>表格標題1</th> <th>表格標題2</th> </tr> <tr> <td>表格內容1</td> <td>表格內容2</td> </tr> </table> ``` ![](https://i.imgur.com/7TRida0.png) ## 表單選擇器（Form Tags） - 提供使用者輸入的選項 ### 按鈕（Button） ```htmlembedded! <button>我是按鈕</button> ``` ![](https://i.imgur.com/1vKlXCS.png) ### 勾選（Checkbox） ```htmlembedded! <input type="checkbox">勾選 ``` ![](https://i.imgur.com/yqKK8Sl.png) ### 文字（行）（Text） ```htmlembedded! <input type="text"> ``` ![](https://i.imgur.com/HWe50K1.png) ### 列點選項（Radio） ```htmlembedded! <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female ``` ![](https://i.imgur.com/2SclHyi.png) ### 下拉選項（Select） ```htmlembedded! <select name="school"> <option>a</option> <option>b</option> <option>c</option> </select> ``` ![](https://i.imgur.com/PxC27Q4.png) ### 文字（大片）（Textarea） ```htmlembedded! <textarea name="details"></textarea> ``` ![](https://i.imgur.com/GfEp4yH.png)