小苏同学的知库

# 表格

  • 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。

    <table>
	<caption>标题</caption>
	<thead>
		<tr>
			<th>表格头部</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>表格主体</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>表格尾部</td>
		</tr>
	</tfoot>
</table>

    • table：用于定义表格的标签，表示表格整体。

    • caption：表格大标题。

    • thead：表格头部。thead内部必须拥有tr标签，一般位于第一行。

    • tbody：表格主体。主要用于存放数据本体。

    • tfoot：表格底部。

    • tr：行，必须嵌套在 <table> </table>标签中。

    • th：表头，表头单元格里面的文字会加粗居中

    • td：单元格，必须嵌套在<tr> </tr>标签中。

    • 注意：表格是用来显示数据的。

      table属性 属性值 描述
      align left、right、center 表格整体在页面中的对齐方式
      border 1 表格单元格的边框
      cellpadding 像素值 内容与单元格边缘之间的空白，默认1像素
      cellspacing 像素值 单元格与单元格之间的空白，默认2像素
      width 像素值 或 百分比 表格的宽度

    • 单元格之间的边框合并

      table {
	border-collapse: collapse;
}

td {
	border: 1px solid pink;
}

  • 合并单元格

    跨行合并：rowspan="合并单元格的个数"，以最上侧单元格为目标单元格向下垂直合并。
跨列合并：colspan="合并单元格的个数"，以最左侧单元格为目标单元格向右水平合并。

注意：
	只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead、tbody、tfoot）。

# 多媒体

# a. 图片

<img src='图片路径' alt='加载失败时的提示信息' title='图片提示文本' width='宽度' height='高度'>

  • scr是图片的必须属性，用于指定图片文件的路径。

    属性 属性值 说明
    src 图片路径 必须属性
    alt 文本 替换文本。图片加载失败时的替代文本
    title 文本 提示文本。鼠标放在图像上显示的文本
    width 像素 设置图像的宽度
    height 像素 设置图像的高度
    border 像素 设置图像的边框粗细

  • 图像标签注意点：

    • 图像标签可以拥有多个属性，必须写在标签名的后面。
    • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
    • 属性采取键值对的格式，即 key = "value" 的格式，属性 = "属性值"。

# b. 音频

<audio src="路径" controls></audio>
属性名 功能
src 音频的路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持）
loop 循环播放
muted 静音播放

注意：音频标签目前支持三种格式：mp3、wav、ogg

# c. 视频

<video src="路径" controls autoplay loop muted poster="./images/bg.gif" preload="auto"></video>
属性名 功能
src 视频的路径
controls 显示播放的控件
autoplay 自动播放（谷歌浏览器中需要配合muted实现静音播放）
loop 循环播放
muted 静音播放
poster 海报图
preload 是否在页面加载后载入视频
auto：一旦页面加载，则开始加载音频/视频
metadata：指示当页面加载后仅加载音频/视频的元数据。
none：指示页面加载后不应加载音频/视频。

注意：视频标签目前支持三种格式：mp4、webm、ogg

# d. 路径

路径分为绝对路径和相对路径

  • 绝对路径：从盘符开始的路径。
  • 相对路径：从当前文件开始出发找目标文件的过程。
相对路径分类 符号 说明
同一级路径 或./ 当前文件和目标文件在同一目录中，如<img src="目标文件名" />
下一级路径 / 目标文件在下级目录中，如<img src="目标文件夹/目标文件名" />
上一级路径 ../ 目标文件在上级目录中，如<img src="../目标文件夹/目标文件名" />

← HTML5 →