HTML中的列表、表格、媒体元素和内联框架
本章目标
- 会使用有序列表、无序列表和定义列表实现数据展示（重点）
- 会使用表格实现数据
- 会使用媒体元素在网页中播放视频（重点）
- 会使用html5结构元素进行网页布局（重点）
一、列表
1.无序列表
ul:unordered list
快捷键：ul>li*5>a ul>li>img+p
语法
html
<ul>
<li>...<li>
<li>...<li>
<li>...<li>
</ul> 注意：ul里面第一层只能是li，如果有其他标签应该放在li里面
无序列表特性：
无序列表是没有顺序的，每一个
标签都独占一行（块元素）
默认
标签前面是一个实心圆点
一般用于无序类型的列表如：导航栏、侧边栏新闻、有规律的图文组合的模块等
案例
2.有序列表
ol:ordered list
语法
html
<ol>
<li>...<li>
<li>...<li>
<li>...<li>
...
</ol> 案例
有序列表特性：
有顺序，每一个
标签独占一行（块元素）
默认
标签前面有顺序标记
一般用于排序类型的列表，如：试卷、问卷选项等
3.定义列表
dl:definition list
语法
html
<dl>
<dt>...</dt>
<dt>...</dt>
<dt>...</dt>
...
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
...
</dl> 案例
定义列表特性：
没有顺序，每个
标签 标签都独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况
二、表格
1.为什么要用表格
- 简单通用
- 结构稳定
2.语法
html
<table>
<tr>
<td>单元格中的内容</td>
<td>单元格中的内容</td>
...
</tr>
<tr>
<td>单元格中的内容</td>
<td>单元格中的内容</td>
...
</tr>
...
</table>table：表格标签
tr：行标签
td：单元格标签 ps：td可以改为th加粗
3.table的基本语法结构
4.表格中的跨行和跨列
4.1表格跨列
html
<!-- 跨列的语法 -->
<table>
<tr>
<td colspan="所跨的列数"></td>
</tr>
</table> col:column 列
span：距离
4.2表格跨行
html
<!-- 跨行的语法 -->
<table>
<tr>
<td rowspan="所跨的行数"></td>
</tr>
</table> row: 行
span：距离
三、媒体元素
网页中播放的音频和视频
1.视频
语法
html
<video src="视频路径" controls></video>推荐的写法
html
<video controls>
<source src="" type=""/>
<source src="" type=""/>
<source src="" type=""/>
</video>video支持的视频格式
| Edge | FireFox | Opera | Safari | Chrom | |
|---|---|---|---|---|---|
| Ogg | 不支持 | 3.5+ | 10.5+ | 5.0+ | 支持 |
| MPEG4(mp4) | 9.0+ | 不支持 | 不支持 | 5.0+ | 3.0+ |
| WebM | 不支持 | 10.6+ | 10.6+ | 6.0 | 支持 |
2.音频
语法
html
<audio src="音频路径" contorls></audio>推荐写法
html
<!-- 推荐写法 -->
<audio controls>
<source src="video/xxxx.ogg" type="audio/ogg" />
<source src="video/qt.mp3" type="audio/mpeg"/>
</audio>支持的格式
ogg、mp3、wav
四、页面结构
1.页面结构分析
2.HTML5中的结构元素
| 元素名元素名 | 描述 |
|---|---|
| header | 标题头部区域的类容（用于页面或页面中的一块区域） |
| footer | 标题脚部区域的类容（用于整个页面或页面一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用侧边栏） |
| nav | 导航类辅助内容 |
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11网易邮箱页面布局</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主题部分</h2>
</section>
<footer>
<h2>网页底部</h2>
</footer>
</body>
</html>3.内联框架
3.1语法
html
<iframe src="引用页面地址" name="框架标识名"></iframe>3.2案例
html
<iframe src="https://fanyi.baidu.com/" name="fanyi" width="1000" height="600"></iframe>3.3target属性
五、总结
