HTML5中列表、表格与媒体元素重点总结

什么是列表？

1. 列表就是信息资源的一种展示形式。
2. 可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
3. 列表中ul、ol、dl不能嵌套其他标签，但是li中可以嵌套其他标签

列表的分类：

一、无序列表

无序列表的特性：

1. 没有顺序，每个
2. 标签独占一行（块元素）
3. 默认
4. 标签项前面有个实心小圆点
5. 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

二、有序列表

有序列表的特性：

1. 有顺序，每个
2. 标签独占一行（块元素）
3. 默认
4. 标签项前面有顺序标记
5. 一般用于排序类型的列表，如试卷、问卷选项等

 

三、定义列表

定义列表的特性：

1. 没有顺序，每个
   标签、
   标签独占一行（块元素）
2. 默认没有标记
3. 一般用于一个标题下有一个或多个列表项的情况

 

列表对比：

类型	说明	项目符号
无序列表	以 标签来实现 以 标签表示列表项	无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容
有序列表	以 标签来实现 以 标签表示列表项	有序列表ol-li一般用于显示带有顺序编号的特定场合
定义类表	以 标签来实现 以 标签定义列表项 以 标签定义内容	定义列表一般适用于带有标题和标题解释性内容的场合

 

列表样式：

list-style-type

list-style-image

可以放小图片

list-style-position

可以改变位置

list-style

值	说明	语法示例
none	无标记符号	list-style-type:none;
disc	实心圆，默认类型	list-style-type:disc;
circle	空心圆	list-style-type:circle;
square	实心正方形	list-style-type:square;
decimal	数字	list-style-type:decimal

例如：

li {

       list-style:none;

}

 

表格：

为什么使用表格？

1. 简单通用
2. 结构稳定

基本结构：

1. 行（tr）
2. 单元格（td）

 

表格的基本语法：

   

        

        

   

第1个单元格的内容

第2个单元格的内容

表格的跨列：

 

   

         【colspan="n"所跨的列数】

 

 

   

 

colspan="n">单元格内容

单元格内容

表格的跨行：

 

        【rowspan ="n"所跨的列数】

 

 

 

rowspan="n">单元格内容

单元格内容

表格的跨行和跨列：

       

       

       

       

colspan="3">学生成绩
rowspan="2">张三	语文	98

 

如何实现在网页上播放视频和音频？

1. 第三方自主开发的播放器
2. Flash
3. HTML5媒体元素

 

视频元素：video

主流浏览器支持的视频格式：

浏览器	IE	Firefox	Opera	Chrome	Safari
视频格式
Ogg	不支持	3.5+	10.5+	5.0+	不支持
MPEG4	9.0+	不支持	不支持	5.0+	3.0+
WebM	不支持	4.0+	10.6+	6.0+	不支持

播放视频：

    <source src="video/video.webm" type="video/webm"/>

    <source src="video/video.mp4" type="video/mp4"/>

自动播放视频：

   

   

    你的浏览器不支持video元素

 

音频元素：audio

主流浏览器支持的音频格式：

浏览器	IE	Firefox	Opera	Chrome	Safari
音频格式
Ogg	不支持	3.5+	10.5+	3.0+	不支持
MP3	9.0+	不支持	不支持	3.0+	3.0+
WAV	不支持	4.0+	10.6+	不支持	3.0+

播放音频：

<audio controls>

    music/music.mp3" type="audio/mpeg"/>

    music/music.ogg" type="audio/ogg"/>

    你的浏览器不支持audio元素

audio>

 

HTML5的结构元素：

页面布局分析：

结构元素：

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

<header>

网页头部

header>

<section>

网页主体部分

section>

<footer>

网页底部

footer>

 

在超链接上设置target目标窗口属性为希望显示的框架窗口名：

target="mainFrame">下边显示第二页

总结：