整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们看看网页开发和设计的基本知识之一，用alt属性来设计你的HTML，为什么这么重要。
如果页面上的图像不是真的出于任何目的，那么您可能很难为其提供有意义的替代文本，因此将alt属性留在image标签之外是相当常见的：
<img src="background.jpg" />
除了这在技术上是无效的HTML，这对谁从ALT文本中受益的人没有用。
一些用户将依靠屏幕阅读器来向他们描述页面内容。当您为图片添加替代文字时，会通知他们图片的内容。
<img src="search.jpg" alt="Search Button" />
一些图像被归类为装饰性的，意味着它们不表达任何意义或目的。如果它们只是装饰性的，你实际上希望屏幕阅读器完全忽略它们，因为这对用户来说只是不必要的骚扰。
要使屏幕阅读器忽略图像，请提供一个空白的alt属性。这告诉屏幕阅读器跳过它：
<img src="stars.jpg" alt="" />
您可能认为完全不提供alt属性会导致屏幕阅读器跳过图像，但事实并非如此。由于您没有向浏览器提供关于图片是否具有装饰性的说明，因此通常会通知图片存在，并可能会告诉用户文件名，这只是令人困惑。
最后建议您的图片代码中加入alt属性！
们继续学习图片标签在实际开发中的使用。
看案例：
事例中有的图片正常显示，有的图片没有正常显示，出现了一个破损的小图片，并且在破损的小图片右侧有一些文本。
文本作用就是对图片解释说明，这个图片由于某种原因不能正常显示但仍然能用文本来提示用户这个图片所展示的内容，尤其对屏幕阅读器友好，或者视力障碍者可以通过屏幕阅读器知道这里有个图片，图片想要展示什么内容。
实现这个效果很简单，只需要在 img 标签上添加一个 alt 属性
编辑器中，新建一个 image7.html，创建一个 img 图片标签，引入一个图片，添加 alt 属性，值为这是千锋教育的logo
浏览器中打开，并没有发现 alt 属性中的文本，alt 属性定义的图片描述，只有当图片加载失败时才会显示。
接下来我们就把图片的路径，修改成一个破损图片的路径，回到浏览器中，我们看到了一个破损的小图标，也有了相应的文本提示且占页面空间的。
为了进一步对图片进行解释说明 我们把鼠标放在正常显示的图片上面的时，鼠标的右下角会显示一个提示文本，这个效果只需要在 img 标签上添加一个 title 属性，title 是标签名，也是属性名，标签名和属性名并不冲突。
回到编辑器，新建一个 image8.html，创建一个 img 标签，引入一张图片，在 img 标签上添加一个 title 属性，赋值为 千锋HTML5学科——前端培训界的扛把子 回到浏览器查看效果，把鼠标放在图片上面，看到鼠标后面有了对应的文本提示 。
当鼠标位置不同，显示文本的位置也不同， title 属性定义的内容不占据页面空间 且默认隐藏的，只有鼠标划入的时候才会显示 。
网页图片两个有用的功能都实现了
文章配套视频链接：
「链接」
片
当我们在制作页面的时候，通常会遇到图片的三种表现形式，如下：
1、内容图片
内容图片是页面中真正的内容，没有内容图片，就无法完整的理解页面内容。如淘宝网上的商品展示图片，这些图片是网页的一部分，它们能帮助你决定这个页面的内容是否是你需要的。
内容图片
2、布局图片
布局图片出现在页面背景中，要想理解页面的内容，它们不是必须的。如苹果官网的这个图片，没有这个图片也能理解页面上文字描述的内容是什么意思。
布局图片
3、交互图片
图中用红色框起来的图片会给你浏览页面的时候带来一些帮助，如搜索图片，一看到就知道这里可以搜索想要的东西，购物车图片可以看到选购的产品，箭头图片点击可以看到更详细的产品等。
交互图片
在HTML中我们用 img 标签创建图片，英文是image的缩写。
<img src="" alt="">
内容图片
布局图片是在CSS中被创建出来的，使用CSS中的background属性，如：
1）background-color 定义背景颜色，设置背景图片时，要始终设置背景颜色，确保背景图片没有成功时会显示一个背景颜色
2）background-image 可以指向一个相对路径或者绝对路径来添加图片。
3）background-repeat可以设置背景是否平铺在容器中，包含四个关键字：
4）background-position 属性可以控制背景图片显示在什么位置，包含两个关键字，如：
background-position：top left 设置图片显示在容器的左上角，第一个关键字可以是top、center、bottom，第二个关键字可以是left、center、right
CSS中和背景相关的属性可以简写在一行中，如：
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是图片的颜色color，image，position，repeat，CSS属性能用简写就尽量用简写，简写比分开写性能更高。
布局图片
Web上最常用的三种图像格式
1）Jpeg 可以展示一张照片或者复杂图像
2）png最适合展示网页插画、logo和网页小图标
3）gif适合展示网页插画、logo和网页小图标
建议：
一般情况下用户交互图片都是一些小图标，所以使用png或gif作为用户交互图片；使用CSS的background属性以背景图片的形式为网页添加用户交互图片；推荐把用户交互图片放在同一个文件中，可以提高网络和服务器性能，如：
交互图片
交互图片
具体如何操作呢？后续教头会通过视频给大家详细演示，请继续关注。
*请认真填写需求信息，我们会在24小时内与您取得联系。
