html5常见列表 html5中的列表

什么是列表？

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

列表的分类：

一、无序列表

无序列表的特性：

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

二、有序列表

有序列表的特性：

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

 

三、定义列表

定义列表的特性：

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

 

列表对比：

类型	说明	项目符号
无序列表	以<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;
}

表格：

为什么使用表格？

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

基本结构：

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

 

表格的基本语法：

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

表格的跨列：

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

表格的跨行：

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

表格的跨行和跨列：

<table border="10">
<tr>
colspan="3">学生成绩</td>
</tr>
<tr>
rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
</tr>
</table>

 

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

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+	不支持

播放视频：

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

自动播放视频：

<video controls autoplay
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
    你的浏览器不支持video元素
</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
music/music.mp3" type="audio/mpeg"/>
music/music.ogg" type="audio/ogg"/>
    你的浏览器不支持audio元素
</audio>

 

HTML5的结构元素：

页面布局分析：

结构元素：

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

<header><h2>网页头部</h2> </header>
<section><h2>网页主体部分</h2></section>
<footer><h2>网页底部</h2></footer>

 

<iframe>内联框架：

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

<iframe>属性（实现页面间的相互跳转）

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

<iframe name="mainFrame" src="subframe/the_second.html" ></iframe>

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

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

总结：