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

什么是列表？

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

列表的分类：

一、无序列表

无序列表的特性：

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

二、有序列表

有序列表的特性：

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

三、定义列表

定义列表的特性：

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

列表对比：

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

列表样式：

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;

}

表格：

为什么使用表格？

简单通用
结构稳定

基本结构：

行（tr）
单元格（td）

表格的基本语法：

<table>

<tr>

<td>第1个单元格的内容</td>

<td>第2个单元格的内容</td>

</tr>

</table>

表格的跨列：

<tr>

<td colspan="n">单元格内容</td> 【colspan="n"所跨的列数】

</tr>

<tr>

<td>单元格内容</td>

</tr>

</table>

表格的跨行：

<tr>

<td rowspan="n">单元格内容</td> 【rowspan ="n"所跨的列数】

</tr>

<tr>

<td>单元格内容</td>

</tr>

</table>

表格的跨行和跨列：

<tr>

</tr>

<tr>

</tr>

</table>

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

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

视频元素：video

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

浏览器	IE	Firefox	Opera	Chrome	Safari
视频格式	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+	不支持

播放视频：

</video>

自动播放视频：

你的浏览器不支持video元素

</video>

音频元素：audio

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

浏览器	IE	Firefox	Opera	Chrome	Safari
音频格式	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元素

</audio>

HTML5的结构元素：

页面布局分析：

结构元素：

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

<section><h2>网页主体部分</h2></section>

<iframe>内联框架：

可以设置src的属性值为http://www.bdqn.cn，在这个页面中也可以打开一个线上的网页

在被打开的框架上加name属性：

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

<a href="subframe/the_second.html " target="mainFrame">下边显示第二页</a>

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

总结：

猜你喜欢