HTML - HackMD

# HTML ## 基本架構 ```html= <!DOCTYPE html> <html> <head> <mata charset="UTF-8"/> <title>你網頁的名稱</title> </head> <body>  </body> </html> ``` ## 常見標籤 ### 標題 ```html= <h1>文字</h1> <h2>文字</h2> . . . <h6>文字</h6> ``` ### 段落 ```html= <p> 文字 </p> ``` ### 粗體 ```html= <b>文字</b> ``` ### 斜體 ```html= <i>文字</i> ``` ### 換行 ```html= <br/> ``` ### 水平線 ```html= <hr/> ``` ### 註解 ```html=  ``` ### 嵌入其他種程式語言如果想加入Js，可以用 script ```html= <script> 程式碼 </script> ``` ## 連結、圖片、影片 ### 連結 ```html= <a href="網址">網頁上所顯示的樣子</a> ``` 如果要去同資料夾的HTML，只要把網址改成檔名就行。如果要去資料夾內的資料夾，像下面的圖示，連結通向別的頁面裡的HTML ```html=  <a href="別的頁面/檔名">前往別的頁面</a>  <a href="../index.html">回主頁</a> ``` ![image](https://hackmd.io/_uploads/HJ0VQKCIC.png) ### 圖片可以在後面加上 height="數字"或width="數字" 設定其大小，則一就行他會等比例縮放。 ```html= <img src="圖片所在的地方"/> <img src="圖片所在的地方" width="數字"/> ``` ### 影片和圖片一樣可以用height、width控制大小。如果要插入YT影片，找到影片的分享->嵌入->複製後直接用就行 ```html= <video src="影片所在的地方" controls/> ``` ## 列表、表格以下皆具有支援屬性，支援「全域屬性」以及「可見元素的事件屬性」可以加入 style 屬性，改變顏色之類的東西。 ### 無序清單 ```html= <ul> <li>項目一</li> <li>項目二</li> </ul> ``` 可以在清單中再包一個清單 ```html= <ul> <li>項目一 <ul> <li>項目狀態</li> <ul> <li>已完成</li> <li>未完成</li> </ul> </ul> </li> <li>項目二</li> </ul> ``` 呈現效果: ![image](https://hackmd.io/_uploads/BJH50AnwC.png) ### 有序列表 ```html= <ol> <li>項目一</li> <li>項目二</li> </ol> ``` 在ol後面可以加type=""，可以設定項目的編號樣式，像把123改成abc之類的。 <table> <tr> <td style="background:rgb(195, 195, 195);">type 屬性</td> <td style="background:rgb(195, 195, 195);">說明</td> </tr> <tr> <td>1</td> <td>十進位數字</td> </tr> <tr> <td>i</td> <td>小寫羅馬數字</td> </tr> <tr> <td>I</td> <td>大寫羅馬數字</td> </tr> <tr> <td>a</td> <td>小寫字母</td> </tr> <tr> <td>A</td> <td>大寫字母</td> </tr> </table> ```html= <ol type="I"> <li>項目一</li> <li>項目二</li> </ol> ``` start 屬性可以設定項目的起始編號，加入 reversed 屬性可以反轉清單編號。 ### 表格 table後可以加height、width控制大小。 ```html= <table> <tr> <td>項目</td> <td>期限</td> </tr> <tr> <td>project1</td> <td>下禮拜一</td> </tr> </table> ``` ## 區塊 ### 文字區塊 article(有支援屬性) 是 HTML 裡作為定義文章的元素，文章區塊裡面可以放入標題、文字、圖片...等內容，顯示類型為「block 塊級元素」，預設會強制換行。 ```html= <article> <h1>標題</h1> <p>文章內容</p> </article> ``` 支援「全域屬性」以及「可見元素的事件屬性」 ```html= <article style="background:#ddf;"> <h1>標題</h1> <p>文章內容</p> </article> ``` 呈現效果: ![image](https://hackmd.io/_uploads/BkvJcA2wA.png) ### 章節區塊 section(有支援屬性) 是 HTML 裡作為定義章節的元素，文章區塊裡面可以放入標題、文字、圖片...等內容，如果網頁屬於文字型網頁，當中包含多個「段落」或「章節」 ```html= <section> <h1>標題</h1> <p>文章內容</p> </section> ``` 支援「全域屬性」以及「可見元素的事件屬性」 ```html= <section style="background:#ddf;"> <h1>標題</h1> <p>文章內容</p> </section> ``` 呈現效果: ![image](https://hackmd.io/_uploads/BkvJcA2wA.png) ## 容器div&span 容器是銜接css的重要東西，可以把一整塊程式碼包起來 ### div 不管長度，佔一整行 ```html= <div> 程式碼1 </div> <div> 程式碼2 </div> ``` 呈現效果: 程式碼1 程式碼2 ### span 長度多少，寬度多少 ```html= <span> 程式碼1 </span> <span> 程式碼2 </span> ``` 呈現效果: 程式碼1 程式碼2 ## input&textarea 會產生一個文字框供使用者輸入 ### input type可以放很多種東西，一般就text，還有像data、range、file、checkbox、password等，其樣式也會改變。 placeholder為可以在待輸入的文字框內顯示文字，告訴使用者該輸入什麼樣的資料。 ```html= <input type="text" placeholder="請輸入帳號"/> ``` 呈現效果: ![image](https://hackmd.io/_uploads/HkDyzoALC.png) ### textarea 一個可縮放的文字框，拉右下角控制。 ```html= <textarea>輸入你的答案:</textarea> ``` 呈現效果: ![image](https://hackmd.io/_uploads/HJK9zjRL0.png) ## 按鈕 ### button 按鈕的屬性可以從預設的submit，改成reset ```html= <button>按鈕</button> ``` 也可以用js做一些別的操作，此時按下按鈕則會執行函式的結果 ```html= <button onclick=test()>按鈕</button> <script> function test() { console.log("hello world") } </script> ``` ## Meta 可以告訴瀏覽器，你的網頁有甚麼樣的屬性像description:描述、author:作者、keyword:搜尋關鍵字、viewport:讓在不同裝置下看的比例不會跑掉 ```html= <meta charset="UTF-8"/> <meta name="description" content = ""/> <meta name="author" content=""/> <meta name="viewport" content="width = device-width,initial-scale=1.0"/> ``` ## 更多資源 w3c html: https://www.w3schools.com/html/ --- - Contributor: 王鈞宇