02 常用的html元素
阿新 • • 發佈：2020-08-18
假設你已經安裝好了開發環境，如果沒有，請參考《01 認識html、css和javascript》：https://www.cnblogs.com/tengge/p/13519516.html
下面，我們介紹在網頁上常用的元素。
首先，使用VSCode建立02.html，將下面的程式碼複製到該檔案中。並在資料夾中放一個1.png、1.mp3和1.mp4，練習圖片、音訊、視訊的使用。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>常用的html元素</title> </head> <body> <!-- 這是註釋，不會對頁面造成影響 --> <!-- 標題h1-h6 --> <h1>標題一</h1> <h2>標題二</h2> <h3>標題三</h3> <h4>標題四</h4> <h5>標題五</h5> <h6>標題六</h6> <!-- 容器div，可以巢狀，預設佔一行--> <div> 這是div容器 </div> <!-- 各種表單元素 --> <form> <div> <!-- 按鈕 --> <button>按鈕</button> </div> <div> 單選框 <input type="radio" /> </div> <div> 複選框 <input type="checkbox" /> </div> <div> 下拉列表 <select> <option>選項一</option> <option>選項二</option> </select> </div> </form> <!-- 表格，為了明顯，加了個黑色邊框 --> <table style="border: 1px solid #000;"> <!-- 表頭 --> <thead> <!-- 表示一行 --> <tr> <td>表頭一</td> <td>表頭二</td> </tr> </thead> <!-- 表格內容 --> <tbody> <tr> <td>單元格一</td> <td>單元格二</td> </tr> <tr> <td>單元格三</td> <td>單元格四</td> </tr> </tbody> </table> <!-- 這是一個列表 --> <ul> <li>列表項一</li> <li>列表項二</li> </ul> <!-- 圖片，請將1.png放到該資料夾下面，width和height分別設定寬度和高度 --> <img src="1.png" width="80" height="80" /> <!-- 音樂，請將1.mp3放到該資料夾下面 --> <audio src="1.mp3" controls="controls"></audio> <!-- 視訊，請將1.mp4放到該資料夾下面 --> <video src="1.mp4" controls="controls"></video> </body> </html>
啟動Live Server，在瀏覽器中訪問檢視效果：http://localhost:5500/02.html
是不是很簡單？想學習更多html元素的用法，可以檢視w3school中html和html5文件。
html5是html的一個新版本，就是在原來的基礎上增加了一些內容。
w3school html教程：https://www.w3school.com.cn/html/index.asp
w3school html5教程：https://www.w3school.com.cn/html5/index.asp