知识点:
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:单元格与内容之间的距离,填充(单位:像素,也可以不写单位)