1.3-多媒体语义化标签

1、图片标签

images source 图片来源

<img src="" />

图片本质上没有被插入到网页中，只是被引入到网页中

alt属性

1、如果由于某种原因无法加载图像。游览器会在页面上显示alt属性中的备用文本

2、供视力不方便的朋友使用的网页朗读器，也会 朗读alt中的文本

width、height（不需要写单位）如果省略其中一个属性，则表示按原始比列缩放图片

 扩展：

背景属性

• 1、背景颜色 {background-color:颜色值;}
• 2、背景图片的设置 background-image：url(背景图片的路径及全称)；背景图片的显示原则
• （1）容器尺寸等于图片尺寸，背景图片正好显示在容器中 （2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素； （3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
• 网页上有两种图片形式：插入图片、背景图； 插入图片：属于网页内容，也就是结构。 背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。
• 3、背景图片平铺属性{background-repeat:no-repeat/repeat/repeat-x/repeat-y }
• 4、背景图的位置性{background-position:left/center/right/数值 top/center/bottom/数值;}水平方向上的对齐方式（left/center/right）或值垂直方向上的对齐方式(top/center/bottom)或值 background-position:值1 值2; 两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。 当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置 说明：向左方向，向上方向是负值 背景属性的缩写语法： background:属性值1 属性值2 属性值3； 
• 网页上常用的图片格式（压缩图片）
• （1）jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )如果网页中（2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像; （3）png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;
• 5、背景图的固定性{background-attachment:scroll(滚动)/fixed(固定);}fixed 固定，不随内容一块滚动； scroll:随内容一块滚动。
• 6、background-origin 背景原点   说明：指定{background-origin:padding-box(背景图像填充框的相对位置)/border-box(背景图像边界框的相对位置)/content-box(背景图像的相对位置的内容框)}属性应该是相对位置
• 7、background-clip 背景裁切 说明：{background-clip:border-box(背景被裁剪到边框盒。表示背景图在border、padding、content区域中显示)/padding-box (背景被裁剪到内边距框。 表示背景图在padding和content中显示。 默认值 容器大小和内景图大小不一样，图片显示不完整、或者容器留白)} 属性规定背景的绘制区域。 设置背景图最终显示的区域
• 8、background-size 背景尺寸 说明：{background-size:length (10px) (规定背景图的大小。第一个值宽度，第二个值高度)/Percentage(%) (以百分比为值设置背景图大小/cover 把图片宽高等比例放大（或缩小），直到容器被图片完全覆盖， 才会停止放大，不需要留白，图片不会变形)} 规定背景图像的尺寸 

问题一：图片完全显示

解决方案：需要改变背景图的大小

问题二：把图片正中间放在容器的正中间显示，并不留白

解决方法: background-size:cover; background-position:center center;

背景属性总写：background：reg(255,0,0) none repeat scroll 0% 0%/auto;

background：值1 值2 值3 值4 值5 值6 值7 值8

值1：背景颜色 background-color 默认值:rgba(0,0,0,0) 透明度

值2：背景图片 background-images 默认值:none

值3：是否平铺 background-repeat 默认值:repeat

值4：是否滚动 background-attachment 默认值:scroll

值5：背景图的定位 background-position 默认值:0% 0%

值6：背景的大小 background-size 默认值:auto

值7：背景的排放位置 background-origin 默认值:padding-box

值8：背景显示的区域 background-clip 默认值:borde-box

图片边框：

图片边框 border-image 属性是一个简写属性，用于设置以下属性:

border-image-source 用在边框的图片的路径。

border-image-slice 图片边框向内偏移(不加单位)。

border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)

border-image-outset 边框图像区域超出边框的量(值是一个倍数)

img引入图片和css中使用背景图的区别：

如果是一些图标 或者是轮播图的图片就用背景图引入

如果图片是根据某个内容决定或者是一个商品的图片，这种类型基本上都是用img标签引入

当用img引入的时候，不需要设置容器大小，就能正常显示，大小默认为图片的宽高

当用背景图显示的时候，容器没有宽高的时候，背景图是不显示的

2、相对路径

描述从网页出发，如何找到图片

3、绝对路径

描述图片精准地址（一般是图片的网址）

4、超级链接

（1）<a>标签href属性支持相对路径和绝对路径

（2）<a>标签的title属性用于设置鼠标的悬停文本

（3）在新窗口中打开网页target=" " ; (_self:在当前页面跳转；_blank:新开一个网页跳转)

   (4)图片设置超级链接，只需要用<a>标签包裹img标签

5、页面锚点

h系列标签添加id属性，将成为页面的“锚点”

当网址后面添加#时，页面将自动滚动到锚点所在的位置

方法一：使用a标签作为锚记和链接，俗称使用name定位

<a href="#mao"> 点击此处到目标位置</a>

<a name="mao">目标位置</a>

方法二：使用a标签作为链接，使用其他元素（建议使用块元素）作为锚记，俗称id定位

<a href="#mao">点击此处到目标位置</a>

<div id="mao">这里是目标的位置</div>

6、下载链接

邮件链接、电话链接

7、音频和视频

音频<audio>标签

常用的音频格式：mp3、ogg

    autoplay属性，音频自动播放

    loop属性，循环播放音频

    muted属性，静音

    poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮

视频<video>标签

 

 常用的视频格式：mp4、ogv、webm

• source
• <source>标签为媒介元素（比如 <video>和<audio>）定义媒介资源。
• <source>标签允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
• Type属性值：
• 用于视频：video/ogg video/mp4 video/webm
• 用于音频：audio/ogg audio/mpeg audio/mav

注： object-fit: cover; 可以让视频覆盖整个父容器。