HTML列表、表格与媒体元素入门指南

HTML列表、表格和媒体元素是构建网页内容和布局的重要组成部分。列表允许我们组织信息，表格用于数据展示，而媒体元素则让网页可以包含视频和音频内容，增强用户体验。 ### HTML列表 列表分为三种类型： 1. **无序列表 (Unordered List)** 使用`<ul>`标签创建无序列表，`<li>`标签定义列表项。无序列表通常用实心圆点作为标记，不涉及顺序，适用于展示无需排序的信息，如导航菜单、侧边栏内容等。 ```html <ul> <li>新建标签页1</li> <li>新建标签页2</li> <li>新建标签页3</li> <li>新建标签页4</li> </ul> ``` 2. **有序列表 (Ordered List)** 使用`<ol>`标签创建有序列表，同样使用`<li>`标签定义列表项。有序列表带有顺序号，适合展示有顺序关系的数据，如试题、步骤说明等。 ```html <ol> <li>新建标签页1</li> <li>新建标签页2</li> <li>新建标签页3</li> <li>新建标签页4</li> </ol> ``` 3. **定义列表 (Definition List)** 定义列表`<dl>`用于定义术语及其解释，`<dt>`标签定义术语，`<dd>`标签提供解释。它没有预设的标记，常用于术语和定义、属性和值等。 ```html <dl> <dt>水果</dt> <dd>苹果</dd> <dd>桃子</dd> <dd>李子</dd> </dl> ``` ### HTML表格 (Table) 表格`<table>`用于展示结构化的数据。基本结构包括`<table>`, `<tr>`（行）、`<th>`（表头单元格）和`<td>`（数据单元格）。例如： ```html <table> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> <tr> <td>张三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>上海</td> </tr> </table> ``` ### HTML媒体元素 HTML5引入了`<video>`和`<audio>`元素，使得在网页中内嵌视频和音频变得简单。它们支持多种格式，如MP4、WebM、Ogg等。同时，它们有多个属性来控制媒体行为，如`autoplay`自动播放，`controls`显示播放控件，`loop`循环播放等。 **视频元素示例：** ```html <video src="myVideo.mp4" autoplay controls></video> ``` **音频元素示例：** ```html <audio src="myAudio.mp3" autoplay controls></audio> ``` 理解并熟练运用这些HTML元素对于创建功能丰富的、易于阅读和交互的网页至关重要。列表可以帮助组织信息，表格便于数据呈现，而媒体元素则丰富了网页的多媒体体验。