HTML5与CSS3基础（四）
15列表
15.1:创建有序列表和无序列表
有序列表：定义方法
<ol>
<li> </li>
......
</ol>
无序列表：定义方法
<ul>
<li> </li>
......
</ul>
无序列表的应用更加广泛
提示：使用列表标记链接时，大多数情况下均可以使用无序列表。对于面包屑导航则应该使用有序列表（当顺序是有意义的情况下就要使用有序列表）
15.2选择标记：
创建列表的时候，不管是有序列表还是无序列表都可以选择出现在列表项目左侧的标记类型。
1选择标记
在样式表中，输入list-style-type：marker
这里的marker可以是一下熟悉里的任意一项
Disc(圆点)
Circle(圆圈)
Square(方块)
Decimal(数字)
Upper-alpha(大写字母)
Upper-roman(大写罗马数字)
Lower-roman(小写罗马数字)
15.3使用定制的标签
Outline：属性
实例
设置 4 个边框的样式：
p
{
outline:#00FF00 dotted thick;
}
浏览器支持
所有浏览器都支持 outline 属性。
注释：如果规定了 !DOCTYPE，则 IE8 支持 outline 属性。
定义和用法
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性：
outline-color
outline-style
outline-width
如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。
|
默认值： |
invert none medium |
|
继承性： |
no |
|
版本： |
CSS2 |
|
JavaScript 语法： |
object.style.outline="#0000FF dotted thin" |
可能的值
|
值 |
描述 |
|
outline-color |
规定边框的颜色。参阅：outline-color 中可能的值。 |
|
outline-style |
规定边框的样式。参阅：outline-style 中可能的值。 |
|
outline-width |
规定边框的宽度。参阅：outline-width 中可能的值。 |
|
inherit |
规定应该从父元素继承 outline 属性的设置。 |
TIY 实例
本例演示使用 outline 属性在元素周围画一条线。
设置自定义样式：
1：清除默认样式：list-style:none;
2:清除内外边距:margin:0;padding:0
3：在CSS里设置background：URL（图片的地址） no-repeat 0 0；//不重复 位置为 0 0（x-offset y-offset）
4：对li元素设置内边距的值即可
15.4选择列表的其实编号
1 设置整个列表编号的初始值
在<ol>里输入 start=n,这里的n指的是列表的初始值
2设置有序列表中某列项目的编号
在li元素内输入value=“n”这里的n代表该列表的项目值
提示：value的值会取代start的值
15.5标记控制的位置
通常标记都是在文本块的外面，我们可以通过一些属性对其进行设置使它缩进到文本框里面
Ul{
List-style-position:inside;
}
15.6同时设置所有的列表样式属性
Ul{
List-style:circle inside;
}
取消列表的通常设置是：list-style:none；
15.7设置嵌套列表的样式
设置嵌套列表样式的步骤
先设置最外层的列表样式
设置第2层
第一层 第二层{}
设置第n层
1 ... 第n-1层 第n层{}
15.8创建描述列表
步骤：
17:视屏、音频和其他多媒体
17.2视屏文件格式
HTML5支持三种视屏文件格式（即编解码器）
1：ogg theora 拓展名为.Ogg或者.ogv
2：MP4 拓展名：.mp4 .m4v
3：webM 拓展名为: .webm
什么时候编解码器：
使用压缩算法对数据的数字流行编码和解码，使之更加适合播放的计算机程序
编解码器的目的是能保证音频和视屏能所达到的最高质量的情况下减少文件尺寸
设置MIME类型
如果浏览器中没有正确的设置正确的MIME类型，媒体文件就不会播放
17.3 在网页中添加单个视屏
使用HTML5中最新的元素<video>,浏览器会计算视屏的尺寸，并在加载文件后计算出视屏的尺寸
Video属性：
如果浏览器不支持某种类型的格式
他会只出现播放控件或者出现一大片空白的区域
17.7使用多种来源的视屏和备用文本
就要用到source元素
步骤
1：获取视屏资源
2：输入<video control>开始video元素
3输入<source src=”” type=”video/视屏类型”>
4：输入<source src=”” type=”video/视屏类型”>第二种类型的视屏源文件
5：输入备用链接或者文本信息
6:结束</video>
17.8提供可访问性
去了解WebVTT
17.10：在网页中添加带控件的单个音频文件
提供多个音频源和视屏源一样都是使用source属性
步骤
1：获取音频资源
2：输入<audio control>开始video元素
3输入<source src=”” type=”audio/音频类型”>
4：输入<source src=”” type=”audio/音频类型”>第二种类型的视屏源文件
5：输入备用链接或者文本信息
6:结束</audio>
为音频添加备用FLASH的步骤
1：获取音频资源
2：输入<audio control>开始video元素
3输入<source src=”” type=”audio/音频类型”>
4：输入<source src=”” type=”audio/音频类型”>第二种类型的视屏源文件
5：输入备用链接或者文本信息
6:结束</audio>
7:输入<script>(视屏的话就在选择器里填写video)
$(‘audio’).mediaelementplayer();
</script>
什么是SVG（可缩放矢量图形）
18表格
18.1 结构化表格
从基本层面来看，table元素是由行组成的，行又是由单元格组成的，每个行（tr）都包括标题单元格（th）或数据单元格（td），或者同时包含行或者列
控制行列标题单元格通过属性 scope=“”；col 列； row行；
结构化语句：通过<thead> <tbody> <tfoot> 结构化标签把
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="../css/3.27.css" rel="stylesheet"> </head> <body> <div> <main role="main"> <article role="article"> <p class="nav">Read More</p> <ol> <li>1</li> <li>2</li> <li>3</li> </ol> </article> </main> </div> <div> <article> <nav role="navigation"> <h1> the great USA</h1> <ol> <li>introduactor <ol> <li>boy's childhood</li> <li>girl's childhood</li> </ol> </li> <li>Development <ol> <li>B meet G</li> <li>B and G fall in love</li> <li>B and G have fight</li> </ol> </li> <li>Climax <ol> <li>B give G <ol> <li>G don't believe her ear</li> <li>B don't love G anymore</li> </ol> </li> </ol> </li> <li>Break</li> <li>Ending</li> </ol> </nav> </article> </div> <dl> <dt>sectionA</dt> <dd>1</dd> <dd>2</dd> <dd>3 <dl> <dt>3-1</dt> <dd>3.1.1</dd> <dd>3.1.2</dd> <dd>3.1.3</dd> <dt>3-2</dt> <dd>3.2.1</dd> <dd>3.2.2</dd> <dd>3.2.3</dd> </dl> </dd> <dt>sectionB</dt> <dd>1</dd> <dd>2</dd> <dd>3</dd> </dl> <article> <table> <caption>this is a normal demo</caption> <thead> <tr> <th scope="col">Quarter</th> <th scope="col">1962</th> <th scope="col">1963</th> <th scope="col">1964</th> </tr> </thead> <tbody> <tr> <th scope="row">Q1</th> <td>$145</td> <td>$146</td> <td>$147</td> </tr> <tr> <th scope="row">Q2</th> <td>$167</td> <td>$168</td> <td>$169</td> </tr> </tbody> <tfoot> <tr> <th scope="row">totle</th> <td>$</td> <td>$</td> <td>$</td> </tr> </tfoot> </table> </article> </body> </html>
<caption>this is a normal demo</caption>
可以输入caption对表格进行描述
让单元格跨越两个或两个以上：借助rowspan=”n”或者colspan=“n”属性
