图片

图片和多媒体

图片：img元素

src 属性：图片路径 alt 属性：图片无法显示时使用的替代文字 title （全局属性）：鼠标悬停时显示的文字   全局属性：所有元素通用的属性   title 、 lang （该元素内使用的是什么自然语言）

视频：video元素

src 属性：视频路径 （推荐mp4） controls 属性：【布尔属性】指定后，会显示播放精简 autoplay ：【布尔属性】指定后，视频在页面显示后立即进入播放状态 muted  ：静音 某些新浏览器强制提升用户体验 自动播放时 需设置该属性 loop ：【布尔属性】指定后，视频将循环播放

音频：audio元素

src 属性：音频路径 （推荐mp3） controls 属性：【布尔属性】指定后，会显示播放精简 autoplay ：【布尔属性】指定后，视频在页面显示后立即进入播放状态 muted  ：静音 某些新浏览器强制提升用户体验 自动播放时 需设置该属性 loop  ：【布尔属性】指定后，视频将循环播放

用figure和figcaption来表示一个图片和多媒体单元

嵌入式元素

概述：嵌入式元素用于向页面中嵌入外部资源   img   area   map  向网页嵌入图片资源   video  向网页嵌入视频资源   audio  向网页嵌入音频资源   embed   object  向网页嵌入flash程序  data  相当于路径  type  嵌入资源是什么类型 MIME格式   iframe  向网页嵌入图另一个页面   frameset  嵌入页面 废弃

行盒

行盒概述

什么是行盒： display 属性为 inline （默认值）的元素 有哪些常见的行盒   大部分文字元素：span、abbr、em、i、strong、b、 图片和多媒体：img、video、audio

理解行盒的含义：   页面的具体内容（文字、图片、多媒体）都会生成行盒   文字：必须放到行盒内，否则会生成匿名行盒 图片和多媒体：默认会生成行盒，通常不要对他们的盒子类型进行改动

页面区域中包含内容，所以块盒包含行盒   块盒内放置行盒 行盒内不要放置块盒   块级元素可以包含行级元素，而行级元素不可以包含块级元素，a元素除外旧标 准 新标准完全抛弃此规则，新–标题中不要包含段落，段落中不要包含区域或标 题

行盒的显著特征

图片和多媒体

图片：img元素

src 属性：图片路径 alt 属性：图片无法显示时使用的替代文字 title （全局属性）：鼠标悬停时显示的文字   全局属性：所有元素通用的属性   title 、 lang （该元素内使用的是什么自然语言）

视频：video元素

src 属性：视频路径 （推荐mp4） controls 属性：【布尔属性】指定后，会显示播放精简 autoplay ：【布尔属性】指定后，视频在页面显示后立即进入播放状态 muted  ：静音 某些新浏览器强制提升用户体验 自动播放时 需设置该属性 loop ：【布尔属性】指定后，视频将循环播放

音频：audio元素

src 属性：音频路径 （推荐mp3） controls 属性：【布尔属性】指定后，会显示播放精简 autoplay ：【布尔属性】指定后，视频在页面显示后立即进入播放状态 muted  ：静音 某些新浏览器强制提升用户体验 自动播放时 需设置该属性 loop  ：【布尔属性】指定后，视频将循环播放

用figure和figcaption来表示一个图片和多媒体单元

嵌入式元素

概述：嵌入式元素用于向页面中嵌入外部资源   img   area   map  向网页嵌入图片资源   video  向网页嵌入视频资源   audio  向网页嵌入音频资源   embed   object  向网页嵌入flash程序  data  相当于路径  type  嵌入资源是什么类型 MIME格式   iframe  向网页嵌入图另一个页面   frameset  嵌入页面 废弃

行盒

行盒概述

什么是行盒： display 属性为 inline （默认值）的元素 有哪些常见的行盒   大部分文字元素：span、abbr、em、i、strong、b、 图片和多媒体：img、video、audio

理解行盒的含义：   页面的具体内容（文字、图片、多媒体）都会生成行盒   文字：必须放到行盒内，否则会生成匿名行盒 图片和多媒体：默认会生成行盒，通常不要对他们的盒子类型进行改动

页面区域中包含内容，所以块盒包含行盒   块盒内放置行盒 行盒内不要放置块盒   块级元素可以包含行级元素，而行级元素不可以包含块级元素，a元素除外旧标 准 新标准完全抛弃此规则，新–标题中不要包含段落，段落中不要包含区域或标 题

行盒的显著特征

行盒可被折断，因为内容可以被折断换行 可通过 word-break 属性设置折断 同一个包含块中，连续的多个行盒水平依次排列

空白折叠的规则仅适用于行盒内部和行盒之间 行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置

行盒的尺寸

行盒­可替换元素：图片和多媒体

与块盒完全一致 对图片和视频，仅设置宽高中的一个时，另一个会自动按比例适应 对于图片和视频，如果同时设置宽高，可通过 object-fit 属性设置适应方式   object-fit  不可继承   含义：内容尺寸如何适应，仅用于可替换元素 默认值  fill ：无视宽高比例缩放，充满设置的尺寸 取值：   contain ：保持宽高比例缩放，并且保证不超出内容盒 cover ：保持宽高比例缩放，充满设置的尺寸，某些部分会被隐藏 none ：不进行任何缩放

非可替换元素：文字类元素

width和height无效（宽高取决于内容大小） 垂直方向上的margin、border、padding不占据布局空间 可使用 line-height 设置一行的文字高度   line-height 属性   含义：行高 可继承 默认值： normal ：使用浏览器默认行高   取值：   20px，固定值，20个像素的行高 2em：相对值，按当前元素的字体大小计算，计算后被元素 继承 200%：同2em 2【推荐】：按当前元素的字体大小计算，计算前的值被子 元素继承

line-height 属性可用于单行文字垂直居中

行盒可被折断，因为内容可以被折断换行 可通过 word-break 属性设置折断 同一个包含块中，连续的多个行盒水平依次排列

空白折叠的规则仅适用于行盒内部和行盒之间 行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置

行盒的尺寸

行盒­可替换元素：图片和多媒体

与块盒完全一致 对图片和视频，仅设置宽高中的一个时，另一个会自动按比例适应 对于图片和视频，如果同时设置宽高，可通过 object-fit 属性设置适应方式   object-fit  不可继承   含义：内容尺寸如何适应，仅用于可替换元素 默认值  fill ：无视宽高比例缩放，充满设置的尺寸 取值：   contain ：保持宽高比例缩放，并且保证不超出内容盒 cover ：保持宽高比例缩放，充满设置的尺寸，某些部分会被隐藏 none ：不进行任何缩放

非可替换元素：文字类元素

width和height无效（宽高取决于内容大小） 垂直方向上的margin、border、padding不占据布局空间 可使用 line-height 设置一行的文字高度   line-height 属性   含义：行高 可继承 默认值： normal ：使用浏览器默认行高   取值：   20px，固定值，20个像素的行高 2em：相对值，按当前元素的字体大小计算，计算后被元素 继承 200%：同2em 2【推荐】：按当前元素的字体大小计算，计算前的值被子 元素继承

line-height 属性可用于单行文字垂直居中

来源：https://www.cnblogs.com/akangwx0624/p/10995897.html