html5复习二

知识点：
1、音频标签
<audio controls="controls"
loop="loop"
preload="auto"
src="张恒远 - 追梦赤子心.mp3"
muted="muted"   >
</audio>
controls:显示控件  必须写
loop：循环播放，播放的次数
preload：预加载，在页面加载时加载音频，就绪 none（不加载）/metadata(加载)/auto（自动）
src：音频的路径
muted:初始加载为静音

如果适应不同的浏览器都能加载音频，那么调整如下
<audio>
<source  src="张恒远 - 追梦赤子心.ogg"/>     --source:来源
<source  src="张恒远 - 追梦赤子心.mp3"/>
<source  src="张恒远 - 追梦赤子心.mav"/>
</audio>

2、视频标签
<video     controls="controls"
 width="800"
 height="400"
        poster="360_phone.png"     --预加载时显示的图片
 loop="loop"
 preload="metadata" >
            <source src="video001.mp4" />
</video>

3、列表标签
<!--有序列表-->
    <ol type="I">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
        type:类型   1 数字 a 小写字母  A 大写字母  /i（罗马数字1）/I （罗马数字大写1）

<!--无序列表-->   （导航、新闻列表）
<ul type="square">
        <li>信息1</li>
        <li>信息2</li>
        <li>信息3</li>
</ul>
type:  square正方形/circle空心圆环/disc实心圆

<!--自定义列表-->
<dl>
    <dt>这是自定义列表的标题</dt>
    <dd>这里是自定义列表项标题所对应的描述           </dd>
</dl>
说明：<dt>自定义列表的标题    dd自定义列表项标题所对应的描述   一个dt可对应多个dd

4、容器标签
<div>    </div>      可以存放任意标签   ，块级标签：  独占一行，从上往下排
<span></span> 只适用于文字     行内标签：共用一行，从左往右排

5、表格标签
1）基本语法
<table border="1">
<tr>
<td></td>
...
</tr>
<tr>
<td></td>
...
</tr>
</table>
table:表格标签   border:边框的宽度
tr:行标签
td:单元格标签

2）单元格的合并：
<table>
  <tr>
<td colspan=“所跨的列数”> 单元格内容 </td>
<td rowspan="所跨的行数"></td>
  </tr>
</table>
 
解读：
rowspan属性：跨行合并
colspan属性：跨列合并
注意：跨行合并两行时，需在下一行中删除一个td标签
 跨列合并两个单元格时，需在同一行中删除一个td标签

3）表格相关其他标签：
语法：
<table border="1">
<caption>本周畅销笔记本排名TOP3</caption>
  <thead>
  <tr>
      <th>排名</th><th>品牌</th>  ......
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td><td>联想</td> ......
  </tr>
  ......
  </tbody>
  <tfoot>
  <tr>
  </tfoot>
</table>
  <td>总销售量：</td>
  <td>737</td>
  </tr>
解读：
caption标签：表格标题标签
thead标签：表格表头标签
th标签：表格表头单元格标签，有加粗效果
tbody标签：表格主体数据标签
tfoot标签：表格底部标签

4）表格的美化修饰和布局
属性：
width：宽度（单位：像素、百分比） 表格、单元格标签上
height：高度（单位：像素、百分比）  行标签上
border：边框宽度（单位：像素）表格标签上
bgcolor：背景颜色（十六进制、英文单词）
background：背景图片的地址(建议用相对地址)
align:对齐方式（right、center、left）,如果align="center" 写在table标签上，即表格居中内容不居中，写在tr/td表示内容在单元格中居中显示。
cellspacing：单元格与单元格之间的距离，间距（单位：像素，也可以不写单位）
cellpadding：单元格与内容之间的距离，填充（单位：像素，也可以不写单位）