图片和多媒体
在区域中填充内容
一、页面制作过程回顾
1. 得到设计图
2. 划分页面区域
1· HTML：结构元素
2· CSS：块盒
3. 填充区域中的内容
1· HTML：文字、图片和多媒体元素等
2· CSS：行盒
二、图片和多媒体
1. 图片：img元素
1· src属性：图片路径
2· alt属性：图片无法显示时使用的替代文本
3· title属性：鼠标悬停时显示的文字
2. 视频：video元素
1· src属性：视频路径
2· controls属性：【布尔属性】指定后，会显示播放控件
1· controls="controls" 这种写法的属性叫做布尔属性
2· 布尔属性只有两种状态，指定和未指定
3· 布尔属性可以只书写属性名即可
3· autoplay：【布尔属性】指定后，视频在页面上显示后会立即进入播放状态
3. 音频：audio元素
1· src属性：音频路径
2· controls属性：【布尔属性】指定后，会显示播放控件
3· autoplay：【布尔属性】指定后，音频在页面上显示后会立即进入播放状态
4· 用figure和figcaption来表示一个图片和多媒体单元
5· 可替换元素和非可替换元素
1· 可替换元素：元素的显示内容，由其属性决定，比如img、video、audio
2· 非可替换元素：元素的显示内容，由元素内容决定，绝大部分元素都是非可替换元素
示例：
<!--muted 静音 controls 控件 autoplay 是否自动播放 loop 是否循环播放 --> <video muted controls="controls" autoplay="autoplay" loop="loop" src="herocute.mp4"></video> <video muted controls="controls" autoplay="autoplay" loop="loop" src="loop.mp4"></video>
**嵌入式元素**
嵌入式元素用于向网页中嵌入外部的资源
img、area、map：向网页中嵌入图片资源
video：向网页中嵌入视频资源
audio：向网页中嵌入音频资源
embed、object：向网页中嵌入flash程序
iframe：向网页中嵌入另一个页面
*嵌入页面*
1· 使用iframe元素可以在页面中嵌入其他页面
示例：
<!-- 嵌入外网内容 --> <iframe id="rest" name="test" src="http://www.w3school.com.cn/" frameborder="1"></iframe> <!-- 嵌入本地内容 --> <iframe src="../test1.html" frameborder="1"></iframe> <iframe src="../../practice04/index.html" frameborder="1"></iframe>
2· 嵌入flash程序
使用object或embed元素，可以在页面中嵌入外部资源，通常嵌入的是flash程序
示例：
<style> object,embed{ height: 500px; width: 600px; } </style> <h1>使用object元素嵌入flash</h1> <object data="example.swf" type="application/x-shockwave-flash"> <param name="quality" value="high"> </object> <h1>使用 embed 元素嵌入flash</h1> <embed src="example.swf" type="application/x-shockwave-flash" quality="high"> <h1>兼容的做法</h1> <object data="example.swf" type="application/x-shockwave-flash"> <param name="quality" value="high"> <embed src="example.swf" type="application/x-shockwave-flash" quality="high"> </object>
三、行盒
1、行盒概述
1· 常见的行盒:
display属性为inline（默认值）的元素
常见的行盒：大部分文字元素：span、abbr、em、i、strong、b
图片和多媒体：img、video、audio
2· 行盒的含义：
1· 页面的具体内容（文字、图片、多媒体）都会生成行盒
1· 文字：必须放置到行盒内，否则会生成匿名行盒
2· 图片和多媒体：默认会生成行盒，通常不要对它们的盒子类型进行改动
1· 页面区域中包含内容，所以块盒包含行盒
2· 块盒内放置行盒
3· 行盒内不要放置块盒
2、行盒的特征
1· 行盒可被折断，因为内容可被折断换行
可通过word-break属性设置截断位置
2· 同一个包含块中，连续的多个行盒水平依次排列
3· 空白折叠的规则仅适用于行盒内部和行盒之间
4· 行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置
三、行盒的尺寸
1· 行盒-可替换元素：图片和多媒体
1· 与块盒完全一致
2· 对于图片和视频，仅设置宽高中的一个时，另一个会自动按比例适应
3· 对于图片和视频，如果同时设置宽高，可通过object-fit属性设置适应方式
object-fit：
1· 含义：内容尺寸如何适应，仅用于可替换元素
2· 不可继承
3· 默认值：fill
4· 取值：
1· fill：无视宽高比例缩放，充满设置的尺寸
2· contain：保持宽高比例缩放，并且保证不超出内容盒
3· cover：保持宽高比例缩放，充满设置的尺寸，某些部分会被隐藏
4· none：不进行任何缩放
2· 行盒-非可替换元素：文字类元素
1· width和height无效
2· 垂直方向上的margin、border、padding不占据布局空间
3· 可使用line-height设置一行的文字高度
1· line-height属性
1· 含义：行高，可继承，默认值：normal
2· 取值：
1· normal：使用浏览器默认行高
2· 20px：固定值，20个像素的行高
3· 2em：相对值，按当前元素的字体大小计算，计算后被子元素继承
4· 200%：同2em
5· 2【推荐】：按当前元素的字体大小计算，计算前的值被子元素继承
2· line-height属性可用于单行文字垂直居中
四、行盒的位置
1· 行盒的定位体系必定的常规流
2· 行盒在包含块中，避开浮动和常规流盒子
3· 包含行盒的块盒，可使用text-align调整行盒在它内部的对齐方式
4· 行盒之间的对齐方式，可使用vertical-align调整【了解】
1· 每一个行盒以及包含行盒的元素，会在其内部创建多根参考线
2· 行盒默认使用基线对齐【vertical-align:baseline】：将自己的基线与包含块的基线对齐
3· 可调整vertical-align属性值，选择其他对齐方式
4· 可使用vertical-align调整图片和其前后文字的对齐方式
5· 可使用vertical-align消除行盒与外部块盒底部的空隙
五、行块盒
display属性值为inline-block的元素生成的盒子
行块盒在某些方面表现的像行盒，某些方面表现的像块盒
与行盒的区别：
1· 行块盒内部可以放块盒，行盒不行
2· 行块盒的所有盒模型尺寸都是有效的，而行盒不是
1· 行盒垂直方向上的margin、border、padding的尺寸不占据空间
2· 行盒不能设置宽高
行块盒通常用于宽度自动的水平居中
