HTML介紹 - HackMD

# HTML介紹 # 什麼是HTML * HTML（HyperText Markup Language，超文本標記語言）算是一種標記語言，與一般的程式語言不太一樣。主要是負責網頁的結構，像是文字、圖片及畫面排版等，可說是網頁的核心。 # 要怎麼看到網頁上的HTML * 滑鼠右鍵後，點選「檢視網頁原始碼」/「檢視網頁來源」 # 基本的HTML架構 ```xml! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>My first page</title> </head> <body> <h1>Hello, world!</h1> </body> </html> ``` # HTML元素的基本觀念 * 標籤的基本格式 ```xml! <tagname attributes=""></tagname> <tagname attributes=""/> ``` :::info * tagname為標籤名稱。 * attributes為屬性，大部分標籤具有不同屬性，但也有共通的共同屬性。 * <tagname attributes="">為opening tag； * </tagname>為closing tag。 ::: * 標籤的巢狀結構 * 標籤的共同屬性、個別的屬性 ```xml! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>My first page</title> </head> <body> <H1>Hello world</H1> <img src="" alt=""/> <nav> <a href="#">新知所網首頁</a> <a href="#">W3C school HTML</a> <a href="#">W3C school CSS</a> <a href="#">W3C school javascript</a> </nav> <div> <img src="" alt=""/> <p>......</p> <p>......</p> <p>......</p> </div> </body> </html> ``` # 文字 ### 標題(heading) :::info - h1~h6，共有6個層級 - h1通常只寫一個，代表最重要的標題 - h4以下的標題與內文差不多大，較少使用，改採CSS控制。 ::: ```xml! <h1>This is heading H1</h1> <h2>This is heading H2</h2> <h3>This is heading H3</h3> <h4>This is heading H4</h4> <h5>This is heading H5</h5> <h6>This is heading H6</h6> ``` <style> #heading-demo * { border-bottom: none; color: #000; padding: 0; margin-top: 12px; margin-bottom: 8px; } </style> <div id="heading-demo"> <h1>This is heading H1</h1> <h2>This is heading H2</h2> <h3>This is heading H3</h3> <h4>This is heading H4</h4> <h5>This is heading H5</h5> <h6>This is heading H6</h6> </div>  ### 段落(paragraph) ```xml! <p>This is a paragraph</p> ``` <p>This is a paragraph</p>  ### 文字裝飾：Strong、Emphasis...... :::info 這一類的HTML標籤叫做text formatting，有以下的類別。下列只展示其中幾種文字的效果，其他標籤的大家可以上網搜尋試試看。 ::: - Bold text - Important text - Italic text - Emphasized text - Marked text - Smaller text - Deleted text - Inserted text - Subscript text - Superscript text ```xml! <p><strong>我是粗體文字</strong></p> <p><em>我是斜體文字</em></p>  ``` <p><strong>我是粗體文字</strong></p> <p><em>我是斜體文字</em></p>  ### 換行(Line Break) :::info 用於換行，不需要Closing Tag ::: ```xml! <p>我要<br/>換行</p> ``` <p>我要<br/>換行</p>  # 清單 ### 有序清單(ordered list) ```xml! <ol> <li>List1</li> <li>List2</li> <li>List3</li> </ol> ``` <ol> <li>List1</li> <li>List2</li> <li>List3</li> </ol>  ### 無序清單(unordered list) ```xml! <ul> <li>List1</li> <li>List2</li> <li>List3</li> </ul> ``` <ul> <li>List1</li> <li>List2</li> <li>List3</li> </ul>  # 超連結 (Anchor) :::info - href (Hypertext reference) 後面的雙引號中放入所要連結的東西，可以是網頁（絕對位置或相對位置）、網頁的特定段落、信箱甚至是電話。 - target：決定連結打開的方式 - `_self` 在原本的頁面開啟 - `_blank` 在新視窗開啟 ::: ```xml! <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">點我</a>  ``` [點我](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwj6zeLXzqn-AhXHb94KHUPXBAQQwqsBegQIDRAB&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdQw4w9WgXcQ&usg=AOvVaw0aHtehaphMhOCAkCydRLZU) :::success ❓想想看，如何用新分頁打開連結 ::: # 圖片( Image) :::info * src: 檔案來源位置 * alt: 當瀏覽器找不到檔案的時候，會顯示alt裡面的文字 ::: ```xml! <img src="https://imgur.dcard.tw/AwMs0MBh.jpg" alt="快逃"/> ``` ![](https://i.imgur.com/97Eufp4.png) :::success ❓想想看，如何讓圖片具有超連結效果 ::: <a href="https://linktr.ee/ncu_nkfw"> <img src="https://i.imgur.com/6WBk89Y.png" alt="NKFW宣傳頁"/> </a> :::spoiler 解答在這裡 ```xml! <a href="https://linktr.ee/ncu_nkfw"> <img src="https://i.imgur.com/6WBk89Y.png" alt="NKFW宣傳頁"/> </a> ``` ::: # 容器 ### div :::info 分類 elements（區塊） ::: ```xml! <div> <h1>我是標題</h1> <p>我是內文</p> </div> ``` <div> <h3>我是標題</h3> <p>我是內文</p> </div>  ### span :::info 分類 elements（字） ::: ```xml! <p>I am <span>span</span> tag.</p> ``` <p>I am <span>span</span> tag.</p>  # 表格(Table) - 表格橫列 table row (tr) - 橫列標題 table head (th) - 詳細內容 table detail (td) ```xml! <table> <tr> <th>表格標題1</th> <th>表格標題2</th> </tr> <tr> <td>表格內容1</td> <td>表格內容2</td> </tr> </table> ``` <table class="rev"> <tr style="all:revert;"> <th style="all:revert;">表格標題1</th> <th style="all:revert;">表格標題2</th> </tr> <tr style="all:revert;"> <td style="all:revert;">表格內容1</td> <td style="all:revert;">表格內容2</td> </tr> </table>  # Project 1: 用表格做出自己的課表 ![](https://i.imgur.com/Dl3jgOz.png) :::spoiler 範例在這裡 ```xml! <table> <tr> <th></th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> </tr> <tr> <td>1</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>2</td> <td></td> <td>Chinese</td> <td>Electronic Circuits</td> <td></td> <td></td> </tr> <tr> <td>3</td> <td>Electronic Circuits</td> <td></td> <td>Calculus</td> <td>Chinese</td> <td>Freshman English</td> </tr> <tr> <td>4</td> <td>Electronic Circuits</td> <td></td> <td>Calculus</td> <td>Chinese</td> <td>Freshman English</td> </tr> <tr> <td>5</td> <td>Calculus</td> <td>Physical Education</td> <td>Freshman English</td> <td>Introduction to Computer Science</td> <td></td> </tr> <tr> <td>6</td> <td>Calculus</td> <td>Physical Education</td> <td>Freshman English</td> <td>Introduction to Computer Science</td> <td></td> </tr> <tr> <td>7</td> <td>Principles of Programming Languages</td> <td></td> <td></td> <td>Introduction to Computer Science</td> <td></td> </tr> <tr> <td>8</td> <td>Principles of Programming Languages</td> <td></td> <td></td> <td></td> <td>Introduction to Computer Science Lab</td> </tr> <tr> <td>9</td> <td>Principles of Programming Languages</td> <td></td> <td>Freshman English</td> <td>Theory and Skills of Creativity</td> <td>Introduction to Computer Science Lab</td> </tr> <tr> <td>A</td> <td></td> <td></td> <td>Digital Logic Circuit Labs</td> <td>Theory and Skills of Creativity</td> <td></td> </tr> <tr> <td>B</td> <td></td> <td></td> <td>Digital Logic Circuit Labs</td> <td></td> <td></td> </tr> <tr> <td>C</td> <td></td> <td></td> <td>Digital Logic Circuit Labs</td> <td></td> <td></td> </tr> </table> ``` ::: # 表單(form) ### 表單的組成 :::info 表單主要由兩個元素所組成，分別是： * input：透過控制type，input可以有很多不同類型，包含文字輸入框、選項、下拉式清單等 * label：label則是用來顯示在螢幕上的文字，跟相對應的input綁定在一起。以底下的範例來說，"電話"這個label的`for`屬性必須跟input的`id`一樣。 ::: ```xml! <form action="/action_page.php"> <label for="phone">電話：</label><br/> <input type="text" id="phone" name="phone" value=""/><br/> <label for="name">姓名：</label><br/> <input type="text" id="name" name="name" value=""/><br/><br/> <input type="submit" value="Submit"/> </form> ``` ![](https://i.imgur.com/R3NeSTb.png) ### input的種類 * text：輸入單行文字 ```xml! <input type="text"/> ``` ![](https://i.imgur.com/r7wXhR9.png) * radio：從多個選項當中選取一個(單選) ```xml! <input type="radio" name="Gender"/>Male <input type="radio" name="Gender"/>Female ``` ![](https://i.imgur.com/sjc10Pl.png) * checkbox：從多個選項當中選取好多個(複選) - [ ] HTML - [x] CSS - [ ] JavaScript * select：下拉選單 ```xml! <select name="school"> <option>a</option> <option>b</option> <option>c</option> </select> ``` ![](https://i.imgur.com/0kTLcua.png) * submit：送出表單資料 ```xml! <input type="submit"/> ``` ![](https://i.imgur.com/SMS212F.png) * button ```xml! <button>我是按鈕</button> ``` ![](https://i.imgur.com/7wgRDoX.png) # Project 2: 表單-xx商品訂購姓名、電話、地址、商品選項(蘋果、香蕉、鳳梨、芭樂)、數量、最後金額、 ![](https://i.imgur.com/fR3E2oo.png) :::spoiler 範例在這裡! ```xml! <!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> <h1 class="head"><strong>來來水果線上預訂</strong></h1> <div class="announce"> <p>大家歡迎購買我們店裡的水果，裡面有豐富又新鮮的水果給大家選擇，現在填寫表單線上購買!</p> <p><strong>價錢: 蘋果一箱100元鳳梨一箱200元芭樂一箱300元</strong></p> </div> <form> <label for="name">姓名:</label> <input type="text" name="name" id="name"> <br><br> <label for="phone number">電話:</label> <input type="text" name="phone number" id="phone number"> <br><br> <label for="mail">gmail:</label> <input type="text" name="mail" id="mail"> <br><br> <div> 你要買的水果: <label for="fruit"></label> <input type="checkbox" name="fruit" id="fruit"/>蘋果 <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select>箱 <input type="checkbox" name="fruit" id="fruit"/>鳳梨 <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select>箱 <input type="checkbox" name="fruit" id="fruit"/>芭樂 <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select>箱 </div> <br> <div>  <label for="time">取貨時間:</label> <input type="radio" name="time" id="time"/>11:00 <input type="radio" name="time" id="time"/>12:00 <input type="radio" name="time" id="time"/>13:00 <input type="radio" name="time" id="time"/>14:00 <input type="radio" name="time" id="time"/>15:00 <input type="radio" name="time" id="time"/>16:00 </div> <br> <input type="submit"/> </form> </body> </html> ``` ::: # Project 3: 自我介紹 :::info 運用以上所學的內容，製作一個自我介紹的網站格式可自由發揮，成品大致如下 ::: ![](https://i.imgur.com/joa1X0V.png) <style> .rev, .rev *{ all:revert; } </style>