HTML筆記 - HackMD

# HTML筆記 ## 目錄 > :::spoiler 清單 > [TOC] > ::: --- ### 基本框架 ```html= <!DOCTYPE html> <html lang="en">  <head>  <meta charset="UTF-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 標題 </title> </head> <body> <script type="module" src="/main.js"></script>  </body> </html> ``` > <meta>：用來定義網頁本身設定的標籤 ### block elements - 組成一個可見區塊 - 單獨佔據一行 - 前後以換行分隔 > e.g. `<p>` `<li>` `<nav>` `<footer>` `<div>` > block elements可以巢狀其他block elements，但不能套在inline elements中 ```html=  <div> <p>This is a paragraph inside a div.</p> <div> <h2>Heading 2 inside a nested div</h2> <p>Another paragraph inside the nested div.</p> </div> </div>  <p>This is a paragraph with a <div>block element</div> inside.</p> ``` ### inline elements - 專門放在block elements裡的內容 - 非完整段落或群組，通常只出現在一段文字中 - 不會產生新的一行 > e.g. `<a>` `<span>` `<br>` ### paragraph ( p ) 將一段內容標註為段落，成為block ```html <p>>context</p> ``` ### break ( br ) ```html 在同個block中換行 <p>>text<br>1234</p> ``` > text 1234 ### horizontal rule ( hr ) ```html <hr /> ``` > 水平分隔線 ### strong ```html 強調標示內容 <strong>text</strong> <p><strong>text</strong></p> ``` ### archor target(a target) (錨點) ```html <a href="https://www.google.com">Google首頁</a> ``` - _self(default)：覆蓋當前頁面 - _blank：開新分頁 - _parent：在父框架開啟頁面 - _top：在最頂端框架開啟頁面 > href=#id 可以連結到同頁面指定的block element ### img ```html <img src="./images/1.png" alt="圖片1" /> <img src="https://blog.hubspot.com/hubfs/image8-2.jpg" alt="G_logo" /> ``` ### ordered list (ol) ```html <ol type="1"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> <ol type="A"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> <ol type="a"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> <ol type="I"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> <ol type="i"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> ``` <p> <img src="https://i.imgur.com/S3mgTvo.png" width="50"> </p> ### Unordered List (ul) ```html <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> ``` <p> <img src="https://i.imgur.com/lQVTItF.png" width="50"> </p> > 項目符號樣式交由CSS list-style-type設定 ### table `<th>`：表格標題 (table header) `<tr>`：表格列(table row) `<td>`：表格資料 (table data) ```html <table> <tr> <th>title A</th> <th>title B</th> <th>title C</th> </tr> <tr> <td>content A</td> <td>content B</td> <td>content C</td> </tr> </table> ``` <p> <img src="https://i.imgur.com/RPBIGfj.png" width="200"> </p> > 可以在 `<th>`、`<tr>`、`<td>`中加入 ` colspan="n"` 或 ` rowspan="n"`讓該儲存格跨越n欄或n列 ```html <table> <tr> <th colspan="3">Table</th> </tr> <tr> <th>title A</th> <th>title B</th> <th>title C</th> </tr> <tr> <td>content A</td> <td>content B</td> <td>content C</td> </tr> </table> ``` <p> <img src="https://i.imgur.com/LmascWo.png" width="200"> </p> >可使用 `<thead>`、`<tbody>`、`<tfoot>`將表格內容分區。不影響外觀，但提升code可讀性 ```html <table> <thead> <tr> <th colspan="3">Table</th> </tr> <tr> <th>title A</th> <th>title B</th> <th>title C</th> </tr> </thead> <tbody> <tr> <td>content A</td> <td>content B</td> <td>content C</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">Update Information</td> </tr> </tfoot> </table> ``` <p> <img src="https://i.imgur.com/m9cPkEz.png" width="200"> </p> ### form - label - action：送到的頁面 - for：label限定的參數 - method：表單送出的方法GET或POST >method="" 預設為get >get -> 會將資訊夾帶在網址，適合提交公開非隱私資料(如搜尋關鍵字) >post -> 會隱藏傳送的參數，適合提交隱私資訊(如登入帳號密碼) - type：定義input型別，根據型別可輸入各種值 - size：輸入框的長度 - maxlength：輸入框字數限制 - input <p> <img src="https://i.imgur.com/604NvcP.png" width="400"> </p> [🔗More Input List](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) sample： ```html <body> <form action="" method="post"> <label for="username">帳號</label> <input id="username" type="text" name="username" /> <label for="password">密碼</label> <input id="password" name="password" type="password" /> <input type="checkbox" id="show" /> 顯示密碼 <button type="submit">登入</button> </form> <script> let checkbox = document.querySelector('#show'); let password = document.querySelector('#password'); checkbox.addEventListener('click', () => { if (password.type == 'password') { password.type = 'text'; } else { password.type = 'password'; } }); </script> </body> ``` >加入required參數為必填 >checkbox加入checked參數為預設打勾 >button放在form裡面時預設type=submit，會將form當中name參數的value傳給後端，若放在form外面時預設type=button，無任何效果 >只有name參數會被傳送到後端，HTML也以相同name名稱視為同一主體，例如有3個input的name相同，則這個name回傳的值由這3個input的內容共同決定，像是3選1或複選 ### select ```html <select name="gender" id="gender" required> <option disabled selected value>請選擇性別</option> <option value="male">男性</option> <option value="female">女性</option> <option value="other">其他</option> </select> ``` > select-option設定下拉式選單 ### datalist ```html <label for="area">地區</label> <input list="area_list" type="text" name="area" id="area" /> <datalist id="area_list"> <option value="台北市">台北市</option> <option value="台中市">台中市</option> <option value="高雄市">高雄市</option> </datalist> ``` > input設定list = datalist，將user的input值控制在datalist設定好的選項之中 ### textarea ```html <label for="introduction">自我介紹</label> <textarea name="introduction" id="introduction" placeholder="請介紹自己" cols="30" rows="10" ></textarea> ``` > 多行內容輸入框 ### entity code > [符號代碼清單](https://www.htmlsymbols.xyz/) ### icon ```html <head> <link rel="icon" href="./favicon.ico" /> </head> ``` > 於網頁頁籤顯示icon --- <br> ## 進階內容 ### Semantic Tags (語意標籤) > HTML5用更精確的element取代div，方便維護及閱讀並增強SEO - section: 有意義的主題區塊，例如表格的篩選列 - article: 可以獨立的完整區塊，例如一篇文章 - nav: 導航連結區塊 - header: 標頭區塊 - footer: 頁尾區塊 - main: 頁面主要內容區塊，每個頁面只能有 1 個 - aside: 跟主要內容無關的區塊 ![](https://i.imgur.com/WyX5qEn.png) ###### tags: `Front-end` `HTML`