HTML03：列表、表格標籤和媒體元素
阿新 • • 發佈：2022-03-16
列表標籤
無序列表、有序列表、自定義列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的網頁</title> </head> <body> <h1>列表標籤</h1> <!--列表標籤--> <!-- ul：無序列表 ol：有序列表 dl：自定義列表 --> <h2>無序列表</h2> <ul> <li>Java</li> <li>Python</li> <li>PHP</li> <li>Go</li> <li>C/C++</li> </ul> <h2>有序列表</h2> <ol> <li>Java</li> <li>Python</li> <li>PHP</li> <li>Go</li> <li>C/C++</li> </ol> <!--自定義列表--> <!-- dt：列表標題 dd：列表內容 --> <h2>自定義列表</h2> <dl> <dt>程式語言</dt> <dd>Java</dd> <dd>Python</dd> <dd>PHP</dd> <dd>Go</dd> <dd>C/C++</dd> </dl> </body> </html>
表格標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的網頁</title> </head> <body> <h1>表格標籤</h1> <!--表格標籤--> <!-- 邊框線：border --> <table border="1px"> <!--行：tr；列：td--> <tr> <!--跨列：colspan，值為要合併的列數--> <!--居中顯示：align="center"--> <td colspan="2" align="center">程式語言</td> </tr> <tr> <td>Java</td> <td>編譯型語言</td> </tr> <tr> <td>Python</td> <td>解釋型語言</td> </tr> <tr> <!--跨行：rowspan，值為要合併的列數--> <td rowspan="2">C/C++</td> <td>編譯型語言</td> </tr> <tr> <td>編譯型語言</td> </tr> </table> </body> </html>
媒體元素
視訊和音訊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的網頁</title> </head> <body> <h1>媒體元素</h1> <h2>視訊</h2> <!--視訊--> <!-- src：視訊路徑 controls：顯示控制元件 autoplay：自動播放 --> <video src="./名偵探柯南.mp4" controls autoplay></video> <h2>音訊</h2> <!--音訊--> <!-- src：音訊路徑 controls：顯示控制元件 autoplay：自動播放 --> <audio src="./夜、螢火蟲和你.mp3" controls autoplay></audio> </body> </html>