1.列表
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
列表的分类
无序列表
有序列表
自定义列表
2.无序列表的特性
没有顺序，每个
- 标签独占一行（块元素）
默认
- 标签项前面有个实心小圆点 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
- 3.有序列表的特性
有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记 一般用于排序类型的列表，如试卷、问卷选项等
4.定义列表：定义列表的特性
没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
默认没有标记 一般用于一个标题下有一个或多个列表项的情况
无序、有序列表习题练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>无序、有序列表</title></head><body> <h2>热搜</h2> <!-- 有序列表 --> <ul> <li>七七事变84周年</li> <li></li> <li></li> <li></li> </ul> <!-- 无序列表 --> <ol> <li></li> <li></li> <li></li> <li></li> </ol> <!-- 定义列表 --> <dl> <dt>动漫</dt> <dd>海贼王</dd> <dd>火影忍者</dd> <dd>龙珠</dd> <dd>妖精的尾巴</dd> <dd>神厨小福贵</dd> </dl></body></html>
5.列表对比
6.表格
table：表格tr:行td:列th:表头rowspan:跨行colspan:跨列tbody:表格主体tfoot:表格底部
为什么使用表格
简单通用
结构稳定
基本结构
单元格
行tr
列td
表格的跨行和跨列
表格的使用习题
<!Doctype html><html><head> <title>表格的跨行和跨列</title></head><body> <h2>流量调查表</h2> <table border="1px" color="red"> <!-- 表头 --> <tr> <th>总页面流量</th> <th>共计来访</th> <th>会员</th> <th>游客</th> </tr> <!-- 表格身体 --> <tbody> <tr> <td>9756488</td> <td>9756488</td> <td>9756488</td> <td>9756488</td> </tr> <tr> <td>9756488</td> <td>9756488</td> <td>9756488</td> <td>9756488</td> </tr> <tr> <td>9756488</td> <td>9756488</td> <td>9756488</td> <td>9756488</td> </tr> <tr> <td>平均每人浏览</td> <td colspan="3">1.58</td> </tr> </tbody> </table></body></html>
7.音频、视屏
视频元素 video
音频元素 audio
8.视频元素
9.主流浏览器支持的视频格式
10.自动播放属性：autoplay
11.主流浏览器支持的音频格式
<audiocontrols><sourcesrc="music/music.mp3"type="audio/mpeg"/><sourcesrc="music/music.ogg"type="audio/ogg"/>你的浏览器不支持audio元素</audio>
12.网上找视屏音频图片资源
网络异常，图片无法展示
|
13.视屏、音频元素应用示例
<body> <video muted src="https://apd-6226fbace7e8bd205c728c74febc9f4b.v.smtcdns.com/mv.music.tc.qq.com/AhzGQacXERAq11RpPSQxBIw6jBKGLAmSuWB8bK6DIr6g/26D8826C99ECB0739D097CD4A9DF08FB523302E8C8EC36ADDEBA0783430C3BAF3A22F0CCD91C3EFD0E3B6E040083AA50ZZqqmusic_default/1049_M0167100004N4OgR4JBxpj1001942099.f9844.mp4?fname=1049_M0167100004N4OgR4JBxpj1001942099.f9844.mp4" controls autoplay height="200px" width="300px"> </video> <audio muted src="https://dl.stream.qqmusic.qq.com/C400003kixRy435XGy.m4a?guid=4404716071&vkey=D62FCD2F3D35FF1C785C0FAEDB4B2102D197C650958B757555D9C424029B4A3D45AF65563804E96006F8492716DB3525F87F1842BB28FE3D&uin=2427321146&fromtag=66" controls autoplay></audio></body>
14.HTML5的结构元素
header :标题头部区域的内容（用于页面或页面中的一块区域）footer :标记脚部区域的内容（用于整个页面或页面的一块区域）section :Web页面中的一块独立区域article: 独立的文章内容headeraside :相关内容或应用（常用于侧边栏）nav: 导航内辅助内容
15.<iframe>内联框架
<iframe>属性（实现页面间的相互跳转）在被打开的框架上加name属性<iframename="mainFrame"src="subframe/the_second.html"/>在超链接上设置target目标窗口属性为希望显示的框架窗口名<ahref="subframe/the_second.html "target="mainFrame">下边显示第二页</a>
示例：
<body> <!-- 内联框架 --> <iframe src="" frameborder="0" width="100%" height="800px" name="anchor"></iframe> <br> <br> <a href="http://www.baidu.com" target="anchor">百度</a> <a href="http://www.taobao.com" target="anchor">淘宝</a> <a href="http://www.bilibili.com" target="anchor">哔哩哔哩</a></body>
16.总结
