# HTML 參考資料：[HTML入門](https://www.youtube.com/watch?v=CLUPkcLQm64)、[HTML Tutorial](https://www.w3schools.com/html/) HTML是由很多個 <標籤> 來表示的： 1. 告訴瀏覽器這是一個 html 檔 2. html是整個網頁的最外層 3. head是html的第一層，會包著一些網頁的資訊 4. 例如：告訴我們的網頁，我們要用 utf-8 來做編碼 5. title 就是網頁的標題 6. body 所包含的就是網頁的內容 :bulb: 每個標籤都是成雙成對的，中間要夾著其他東西，html 的架構就是一層一層包起來的 ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>小白的網頁</title> </head> <body> hello 我是小白 </body> </html> 開始標籤 <> 關閉標籤 </> 註解符號 <!----> ``` * 雖然我們目前已經是以 utf-8 來編寫程式，但是我們還是需要告訴電腦需要用什麼編碼解碼，所以要多加一層 meta 來設定，如果 charset 已經設為 utf-8 還是亂碼的話，請用記事本開啟 html 並且另存新檔，將底下編碼改為 utf-8 <br> * html 的標籤在網頁上有兩種顯示方式，一種顯示的寬度與文字寬度相符，另一種不管文字寬度為何，都會顯示一整行的寬度 <br> ## 語法列表 | 語法 | 說明 | 備註 | | --------------------- | ---------------- |:------------------------------------------------------------------------------- | | ```<html> </html>``` | 網頁的最外層 | 網頁的所有程式都要包在裡面 | | ```<p> </p>``` | 代表段落 | 夾在中間裡的文字都是屬於同一個段落的 | | ```<b> </b>``` | 粗體字 | | | ```<i> </i>``` | 斜體字 | | | ```<br/>``` | 換行符號 | ```<br> </br>是換行，但是通常我們不會在中間加入其他東西，所以可以省略為<br/>``` | | ```<hr/>``` | 水平線 | | | ```<a> </a>``` | 超連結 | 可以存放路徑或網址 | | ```<img/>``` | 顯示圖片 | 可以讀取路徑或網址 | | ```<video><video/>``` | 顯示影片 | 記得加 controls 才能播放 | | ```<ul></ul>``` | 點狀列表 | 無排序 | | ```<ol></ol>``` | 排序列表 | 可切換標籤為字母或羅馬數字 | | ```<li></li>``` | 列表條目元素 | | | ```<table></table>``` | 建立表格 | 表格的內容都要放在中間 | | ```<tr></tr>``` | 代表一列 | 中間會夾著同一列的資料 (不可單獨使用) | | ```<td></td>``` | 夾著每一列的資料 | 可以視為欄位的概念 (不可單獨使用) | | ```<div> </div>``` | 容器 | 不管文字寬度為何，都會顯示一整行的寬度 | | ```<span> </span>``` | 容器 | 顯示的寬度與文字寬度相符 | <br> ## 超連結 我們可以透過超連結存放網址或是路徑導向網頁或是圖片 * 我們必須告訴瀏覽器超連結的網址或是路徑，就必須用到超連結 a 的屬性 href，所有寫在語法後面的東西就是它的屬性，再把要顯示的名稱 google 網站打在中間 ```htmlmixed= <!-- 網址 --> <a href="https://google.com">google網站</a> <!-- 路徑 --> <a href="page2.html">第二頁</a> <!-- 圖片 --> <a href="https://images4.alphacoders.com/284/thumb-1920-284804.jpg">Kobe</a> <a href="IMG_2417.JPG">孔雀</a> ``` <br> ## 圖片 我們可以透過輸入網址或是路徑來顯示圖片 ```htmlmixed= <!-- 顯示圖片 --> <img src="https://reurl.cc/xG5v9L" /> <!-- 調整圖片大小 --> <img src="https://reurl.cc/xG5v9L" width="400" height="400"/> ``` <br> ## 影片 我們可以透過輸入網址或是路徑來顯示影片 ```htmlmixed= <!-- 中間夾著的文字會在影片載入失敗時顯示 --> <video src="IMG_2374.MOV">瀏覽器無法載入影片</video> <!-- 一定要加入 controls 屬性影片才有辦法播放，一樣可以針對影片大小作調整 --> <video src="IMG_2374.MOV" controls height="600">影片載入失敗</video> <!-- youtube影片--> <iframe width="560" height="315" src="https://www.youtube.com/embed/pC5mGB5enkw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ``` * 如果想加入youtube影片，直接把嵌入內的程式全部複製貼上就可以用了 ![](https://i.imgur.com/bG3isfv.jpg) <br> ## 列表與表格 ### 列表 我們可以使用點狀列表或是序列列表 * google * facebook * instagram * ppt ```htmlmixed= <ul> <li>google</li> <li>facebook</li> <li>instagram</li> <li>ppt</li> <ul/> ``` 1. google 2. facebook 3. instagram 4. ppt ```htmlmixed= <ol type="1"> <!--"1", "a", "A", "i", "I" ...--> <li>google</li> <li>facebook</li> <li>instagram</li> <li>ppt</li> <ol/> ``` <br> ### 表格 使用 table 標籤可以建立一個表格，建立表格時可以在 table 設置表格大小 tr 標籤可以創建自己想要的列數，每一列的資訊就可以放在 td 標籤裡 ```htmlmixed= <table width="400"> <tr> <td>日期</td> <td>數學</td> <td>英文</td> </tr> <tr> <td>2/8</td> <td>80</td> <td>60</td> </tr> </table> ``` ## 容器 容器是讓我們做排版和美化的時候非常好用的一個工具，兩者差別在於占用的空間，span 容器只會占用與內容長度相符的空間，而 span 容器則不論內容長度都會占用一整行的空間 * div 當我們今天想要改變文字顏色的時候，我們可以選擇在 table 標籤內一個一個設置 css 樣式 ```htmlmixed= <ol type="A" style="color:red;"> <li>google</li> <li>facebook</li> <li>ig</li> <li>ppt</li> </ol> <table width="400" style="color:red;"> <tr> <td>日期</td> <td>數學</td> <td>英文</td> </tr> </table> ``` 或者，把它們裝進一個 div 裡，一起設定它們的樣式 ```htmlmixed= <div style="color:red;"> <ol type="A"> <li>google</li> <li>facebook</li> <li>ig</li> <li>ppt</li> </ol> <table width="400"> <tr> <td>日期</td> <td>數學</td> <td>英文</td> </tr> </table> </div> ``` ## 輸入標籤 ```htmlmixed= <input type="text" placeholder="請輸入帳號" /> <input type="password" placeholder="請輸入密碼" /> <input type="date" /> <input type="range" /> <input type="file" /> <input type="checkbox" /> <textarea>你好</textarea> ``` <br> ## meta mate 標籤可以為網頁加上更多的解說 ```htmlmixed= <!-- 告訴瀏覽器網頁的編碼--> <meta charset=utf-8"/> <!-- 為網頁加上解說，讓文字顯示在搜尋頁面--> <meta name="description" content="小白的網站，裡面有很多教學影片" /> <meta name="author" content="小白" /> <meta name="keywords" content="小白, html, 教學" /> <!-- 調整當不同裝置瀏覽網頁時，頁面大小的調整 initialize-scale 可以初始化頁面大小 --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> ``` ###### tags: `HTML`