HTML中的列表、表格、媒体元素和内联框架
本章目标
- 会使用有序列表、无序列表和定义列表实现数据展示(重点)
- 会使用表格实现数据
- 会使用媒体元素在网页中播放视频(重点)
- 会使用html5结构元素进行网页布局(重点)
一、列表
1.无序列表
ul:unordered list
快捷键:ul>li*5>a ul>li>img+p
语法
<ul><li>...<li><li>...<li><li>...<li>
</ul>
注意:ul里面第一层只能是li,如果有其他标签应该放在li里面
无序列表特性:
无序列表是没有顺序的,每一个
- 标签都独占一行(块元素)
默认
- 标签前面是一个实心圆点
一般用于无序类型的列表如:导航栏、侧边栏新闻、有规律的图文组合的模块等
案例
2.有序列表
ol:ordered list
语法
<ol><li>...<li><li>...<li><li>...<li>...
</ol>
案例
有序列表特性:
有顺序,每一个
- 标签独占一行(块元素)
默认
- 标签前面有顺序标记
一般用于排序类型的列表,如:试卷、问卷选项等
3.定义列表
dl:definition list
语法
<dl><dt>...</dt><dt>...</dt><dt>...</dt>...<dt>...</dt><dd>...</dd><dd>...</dd>...
</dl>
案例
定义列表特性:
没有顺序,每个
标签- 标签都独占一行(块元素)
默认没有标记
一般用于一个标题下有一个或多个列表项的情况
二、表格
1.为什么要用表格
- 简单通用
- 结构稳定
2.语法
<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表格跨列
<!-- 跨列的语法 -->
<table><tr><td colspan="所跨的列数"></td></tr>
</table>
col:column 列
span:距离
4.2表格跨行
<!-- 跨行的语法 -->
<table><tr><td rowspan="所跨的行数"></td></tr>
</table>
row: 行
span:距离
三、媒体元素
网页中播放的音频和视频
1.视频
语法
<video src="视频路径" controls></video>
推荐的写法
<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.音频
语法
<audio src="音频路径" contorls></audio>
推荐写法
<!-- 推荐写法 -->
<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 | 导航类辅助内容 |
<!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语法
<iframe src="引用页面地址" name="框架标识名"></iframe>
3.2案例
<iframe src="https://fanyi.baidu.com/" name="fanyi" width="1000" height="600"></iframe>