HTML - HackMD

💡[HTML教學影片](https://youtu.be/CLUPkcLQm64?si=_1wcsnKbg11-eaSJ) 📑[CSS筆記](https://hackmd.io/@boboshi/BJi6fYcth) 📑[JAVA SCRIPT 筆記](/81IfLDHpQMSeq1MkP6P5dQ) # 基本架構 ```htmlembedded= <!DOCTYPE html> //告訴瀏覽器這個檔案是html，只要是要創建html就要加 <html> //開始標籤 //代表整個網站 <head> //代表網頁內的資訊 <meta charset="UTF-8"></meta> //編碼方式 <title> shibobo.web </title> //網頁標題 </head> <body> //真正看到的網頁內容哈囉你好 </body> </html> //關閉標籤 ``` > 執行結果 ![](https://hackmd.io/_uploads/HJisz4DO2.png) :::danger 可以看到網頁標題跟內容 ::: # 基本標籤 ## 標題＜h1~h6＞ ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="UTF-8"></meta> <title> shibobo.web </title> </head> <body> <h1>第一篇</h1> <h2>第二篇</h2> <h3>第三篇</h3> <h4>第四篇</h4> <h5>第五篇</h5> <h6>第六篇</h6> </body> </html> ``` >執行結果 ![](https://hackmd.io/_uploads/rJqPu4wOh.png) :::danger 依照需求分類標籤大小 ::: ## 段落內容及文字編輯 ```htmlembedded= <!DOCTYPE html> <html> <head> <meta charset="UTF-8"></meta> <title> shibobo.web </title> </head> <body> <h2>第一篇</h2> <p>今天好無聊</p> <br></br> <h2>第二篇</h2> <p>今天好<b>無聊</b></p> <br/> <h2>第三篇</h2> <p>今天好<i><b>無聊</b></i</p> </body> </html> ``` > 執行結果 ![](https://hackmd.io/_uploads/HkDM3VDOn.png) * > p 為段落文字內容 * > b 為文字粗體 * > i 為文字斜體 * > br為空格換行 * > hr為一直線 :::danger 如果執行<>中間沒有文字可以寫成 EX.`<br></br>` -> `<br/>` ::: ## 註解 ```htmlmixed=!  ``` :::danger 適當的使用註解，讓自己更容易理解自己的程式碼 ::: # 連結使用a標籤，href為標籤的屬性可以連外部網站，也可以是自己的網站，也可以是檔案(圖片之類的) ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="UTF-8"></meta> <title> shibobo.web </title> </head> <body> <a href="page2.html">打開看看</a> </body> </html> ``` > 執行結果 > ![](https://hackmd.io/_uploads/S1NuFo5un.png) * > page2.html 為自身創建網站(跟主頁要在同一資料夾下才可以)，也可以放上外部網址 :::warning 注意!! 若是分頁在不同資料夾底下，必須附上路徑如同一個A資料夾，內有index.html和page2.html和B資料夾而B資料夾內有page3.html EX. (1)在主頁附第三頁 index ->`<a herf="B/page3.html" >第三頁</a>` (2)在第三頁附主頁 page3 ->`<a herf="../index.html">homepage</a>` . ./ 為跳出B資料夾，跳出之後便會找到index.html ::: :::danger 網頁應該不只一個頁面，會常常用到:) ::: # 圖片使用標籤img，src為標籤屬性 **和上述的連結結構相似** ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="UTF-8"></meta> <title> shibobo2.web </title> </head> <body> <img src="sunrise.JPG" width="400"/> </body> </html> ``` > 執行結果 > ![](https://hackmd.io/_uploads/SyPppuT_2.png) * > sunrise.JPG為資料夾內的照片，也可使用外部圖片位址 * > 若覺得圖片太大或太小，可使用width寬度及height高度屬性 * > 若只使用其中一屬性，則可以等比例的放大或縮小 :::danger 圖片也很重要，可以增加網頁的豐富度! ::: # 影片&YT影片使用video標籤，src屬性 ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="UTF-8"></meta> <title> shibobo2.web </title> </head> <body> <img src="sunrise.JPG" width="400"/> <video src="my_video.mp4" controls>無法載入內容</video> </body> </html> ``` * > my_video.mp4為資料夾內的照片影片 * > 加上controls 才能播放影片 * > 若覺得影片太大或太小，可使用width寬度及height高度屬性 * > 若只使用其中一屬性，則可以等比例的放大或縮小 * > 中間的文字是如果影片載入失敗跑出的提示字 :::warning 若是要加入youtube的影片則先按下影片下方的分享 ![](https://hackmd.io/_uploads/HJqz7Y6On.png) 選擇嵌入，再複製程式碼放入即可 ::: :::danger 影片沒有範例，因為我YT的影片載入失敗XDD ::: > 執行結果 > ![](https://hackmd.io/_uploads/ryCcEYadn.png) :::danger 結果換了一個影片似乎就行了，不知道是不是版權(?? 放個我推"轟焦凍" ::: # 列表分成標籤ul與ol，而內容標籤為li 1. 標籤ul ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="UTF-8"></meta> <title> shibobo.web </title> </head> <body> <a href="page2.html">打開看看</a> <ul> <li>這個世界太難了</li> <li>過好每天的生活</li> <li>珍惜當下</li> </ul> </body> </html> ``` > 執行結果 >![](https://hackmd.io/_uploads/ryeMxcJkt3.png) * >旁邊列點為黑色點點 2. 標籤ol ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="UTF-8"></meta> <title> shibobo.web </title> </head> <body> <a href="page2.html">打開看看</a> <ol> <li>這個世界太難了</li> <li>過好每天的生活</li> <li>珍惜當下</li> </ol> </body> </html> ``` > ![](https://hackmd.io/_uploads/B1qqq1JYn.png) * >旁邊列點為數字 :::warning 若想更改數字為羅馬數字或者是英文，則可以在標籤ol中使用**type**屬性 EX1. 英文字母(可為大寫或小寫) ```htmlmixed=  <ol type="A"> <li>這個世界太難了</li> <li>過好每天的生活</li> <li>珍惜當下</li> </ol> ``` ![](https://hackmd.io/_uploads/HJZJkxyF3.png) EX2. 羅馬數字(可為大寫或小寫) ```htmlmixed=  <ol type="i"> <li>這個世界太難了</li> <li>過好每天的生活</li> <li>珍惜當下</li> </ol> ``` ![](https://hackmd.io/_uploads/SJbWkeyth.png) ::: :::danger 列點部分好像很普通(ㄏ ::: # 表格使用table標籤，橫列tr標籤，內容td標籤 ```htmlembedded=!  <table width="200"> <tr> <td>學期</td> <td>系排名</td> <td>GPA</td> </tr> <tr> <td>111-1</td> <td>2</td> <td>4.37</td> </tr> <tr> <td>111-2</td> <td>3</td> <td>4.32</td> </tr> </table> ``` > 執行結果 > ![](https://hackmd.io/_uploads/Bk32BxkY2.png) * > 使用width屬性可調整間距 * > 以上為製作3x3表格 :::danger 前面太多真的不想放，我還以為表格會有格子線 `¯\_(ツ)_/¯` 然後...我居然公開了我的成績 ( 快逃 ::: # 容器容器分為div及span標籤，在這兩標籤內，可以放入多種標籤，所呈現的也會是一樣的 ```htmlmixed=  <div> <ul> <li>這個世界太難了</li> <li>過好每天的生活</li> <li>珍惜當下</li> </ul> </div> ``` * > 執行結果會與上述相同 * > span也是相同使用方式 ## div與span差異在哪? 在提到div與span的差別時，先來說說關於佔空間的問題看個例子: ```  <a href="page1.html">link1</a> <a href="page2.html">link2</a> <hr/> <p>hello</p> <p>hihi</p> ``` > 執行結果 > ![](https://hackmd.io/_uploads/rygRGnbY3.png) :::warning 你可以看到，像a標籤為內容多少就佔多少空間而p標籤則為不管內容多長，空間就是佔一整行 ::: div與span的差異點就是佔的空間 **div ->佔一整行 span ->用多少佔多少** > 你可能會說，為甚麼要這麼麻煩多用一個標籤來包，直接分開一個一個寫不好嗎? :::danger 有了容器，在之後學CSS美化網頁或是排版會方便許多 ::: # 輸入標籤使用input標籤，配合type屬性，以下會介紹幾種常用的type ## 1.text 輸入純文字 ```htmlmixed= <input type="text" placeholder="請輸入帳號"/> ``` > 執行結果 > ![](https://hackmd.io/_uploads/BJr1b2fF3.png) * > 以上為兩個輸入帳號的範例 * > placeholder屬性可以加上提示文字 ## 2.password 會將我們輸入的文字隱藏起來 ```htmlembedded= <input type="password" placeholder="請輸入密碼"/> ``` > 執行結果 >![](https://hackmd.io/_uploads/BJkRyhGK3.png) * > 以上為兩個輸入密碼的範例 * > placeholder屬性可以加上提示文字 ## 3.date 可以讓我們選擇日期 ```htmlmixed= <input type="date"/> ``` > 執行結果 > ![](https://hackmd.io/_uploads/Skktb2GF3.png) * > 以上為兩個輸入日期的範例 * > ㄏㄏ是我的生日啦XDD ## 4.range 可以調整範圍 ```htmlmixed= <input type="range"/> ``` > 執行結果 > ![](https://hackmd.io/_uploads/BybvP2MF2.png) * > 自行調整，好像很好玩 ## file 可上傳檔案 ```htmlmixed= <input type="file"/> ``` > 執行結果 > ![](https://hackmd.io/_uploads/S1K2E6zY3.png) * >按下會跑出讓你選擇檔案的小頁面 ## checkbox 打勾勾~ ```htmlmixed= <input type="checkbox"/> ``` >執行結果 >![](https://hackmd.io/_uploads/Skv3P6Mt3.png) * > 以上為兩個輸入勾勾的範例 * > 常用在同意聲明之類的 * > 好像也可以用在Todo List呢~ ## 標籤textarea 可以輸入很多很多文字，文章當然也行 ```htmlmixed= <textarea></textarea> <textarea></textarea> <textarea>hello</textarea> ``` > 執行結果 > ![](https://hackmd.io/_uploads/By6yqafY2.png) * > 方框右下可自行調整大小，如同第二個 * > 在標籤中間加上文字會變成預設文字，如同第三個 * > 精心挑選的歌詞:) # meta標籤從最一開始，基本架構內就有出現meta標籤，我們知道，head標籤內所放的是"一個網站的資訊" :::warning 例如最開頭所使用的`<meta charset="UTF-8"></meta>`，就是在告訴瀏覽器說明這個網頁的編碼方式 ::: 以下還會介紹幾種meta標籤 > 1. `<meta name="description" content="shibobo 的網頁筆記，覺得好難QQ"/>` 這告訴我們的瀏覽器或是搜尋引擎這個**網頁的描述**，讓搜尋引擎更了解我們網頁。舉個例子，當我們在Google瀏覽器搜尋"東華大學" ![](https://hackmd.io/_uploads/HyN1txQtn.jpg) 紅框便是那個網頁的描述 > 2.`<meta name="author" content="shibobo"/>` 這告訴我們的瀏覽器或是搜尋引擎這個**網頁的作者** > 3.`<meta name="keywords" content="shibobo, 筆記，學習"/>` 這告訴我們的瀏覽器或是搜尋引擎這個**網頁的關鍵字** > 4.`<meta name="viewport" content="width=device-width,initial-scale=1.0"/>` viewport是視口之意我們在瀏覽網頁的時候，會用不同的裝置，像是電腦或是手機，畫面大小就會不同，而此標籤就會**依裝置的大小做調整**。 ``` width=device-width 就會依照裝置的不同坐不同的調整 ``` ``` initial-scale=1.0 進入網頁時，初始縮放比是100% ``` :::danger 緊接著就需要學習CSS與JAVA囉 ::: 心很累沒錯，用暑假做點有趣的事吧XDD 阿其實也不知道筆記做這樣自己看不看得懂總之加油吧~~ 點擊快速連結 📑[CSS筆記](https://hackmd.io/@boboshi/BJi6fYcth)