替换元素（置换元素）学习心得

替换元素包括 img、input、iframe、audio、video

特点：属于行内块元素，可以设置宽高、不独占一行、通过display：inline-block来转换，当设置成inline时仍能设置宽高，可以使用vertical-align来设置垂直布局。

注：vertical-align：文本的垂直对齐方式

可选值：baseline（默认值） 基线对齐(基线-文字底部的水平线) / top （父元素的顶部）/ bottom（父元素的底部） / middle（与中线对齐，中线并不是父元素的中心，而是文本的中心想要严格对齐需要使用line-height） / text-top（底部与文字底部对齐） / text-bottom（顶部与文字顶部对齐）

1、img 向当前页面引入一个外部图片  单标签

可选属性：src 图片的路径 可以添加本地地址也可以使用网上图片的链接

                alt 图片的描述 默认情况下不会显示，只有当浏览器无法显示图片的时候才会显示的内容、且浏览器会根据alt中的内容识别图片如果不写就不会被搜索引擎收录。

                border 图片的边框

                title 图片的标题，当鼠标悬停的时候显示的内容

                height/width 图片的宽高（一般在PC端，不建议修改图片的大小，需要多大就裁多大-大图缩放占内存，小图缩放会失真，但在移动端经常会需要对图片进行修改大图缩小来增加清晰度）

2 input 用于搜集用户的信息  单标签 具体用法写在别的博客中

3 iframe 内联框架 用于向当前页面中引入一个其他页面 双标签

可选属性值：src 指定要引入的网页的路径

                width/height 宽高

                scrolling 滚动条  auto/yes/no

                frameborder 指定内联框架的边框

注：可以利用iframe去除边框来引入多个页面共同的部分来节省内存代码量

4 audio 音频标签 用于向页面引入一个外部的音频文件 双标签

可选属性：src 音频的路径 可以添加本地地址也可以使用网上音频的链接

                autoplay 设置音频文件是否可以自动播放 但这项功能对用户体验极差，目前除ie浏览器以外绝大多数浏览器都不兼容autoplay 但当复数次访问时可能会有效。

                loop 音乐是否循环播放

                controls 是否允许用户控制播放

                muted 静音属性

还可以在audio中添加source来添加多类型文件以使不同浏览器兼容

<audio controls>
 <!-- controls可以不添加 -->
<!--  这个位置可以添加文字 -->
 <sorce src="~ ~.mp3" type="mp3">
 <sorce src="~ ~.ogg" type="ogg">
</audio>

type用于向浏览器说明文件的格式类型，可以不写浏览器可以直接识别src中的地址格式

浏览器自上向下依次执行sorce中的格式是否可以执行   

如果所有的格式全部无法兼容就会返回最上部检查是否添加文字，如果有就会显示添加的文字例如“对不起，您的浏览器版本不支持！”    

注：还有embed标签，支持老版本浏览器，且会自动播放，不能设置宽高（显示可能不正常），了解一下即可现在已经不会使用这个标签了。

5 video 视频标签 用于向页面引入一个视频文件 双标签

含 src、autoplay、loop、controls、muted、同样可以使用source和embed

多了一个poster属性 控制视频未播放时显示的画面 属性值为图片的地址。