Question

我将在整个网站上使用一些全局图像。 HTML5使用这些元素的正确标记是什么。我可以使用没有src属性的img标签，或者我应该只使用div而不用担心alt标签或你在代码上看到的方式是否合适？

＆＃13;

.social-links div{
display:inline-block;
  vertical-align:middle;
}
.icon-icon-facebook {
  background-image: url(../images/global/spritesheet.png);
  background-position: -111px -145px;
  width: 23px;
  height: 23px;
}
.icon-icon-google-plus {
  background-image: url(../images/global/spritesheet.png);
  background-position: -134px -145px;
  width: 23px;
  height: 23px;
}
.icon-icon-instagram {
  background-image: url(../images/global/spritesheet.png);
  background-position: -124px -111px;
  width: 23px;
  height: 23px;
}
.icon-icon-linkedin {
  background-image: url(../images/global/spritesheet.png);
  background-position: -147px -111px;
  width: 23px;
  height: 23px;
}
.icon-icon-pinterest {
  background-image: url(../images/global/spritesheet.png);
  background-position: -170px -111px;
  width: 23px;
  height: 23px;
}
.icon-icon-twitter {
  background-image: url(../images/global/spritesheet.png);
  background-position: -65px -145px;
  width: 23px;
  height: 23px;
}
.icon-icon-youtube {
  background-image: url(../images/global/spritesheet.png);
  background-position: -88px -145px;
  width: 23px;
  height: 23px;
}

＆＃13;

          <div class="col-md-2">
            <ul class="social-links">
              <li><div role="img" class="icon-icon-facebook" title="facebook icon"></div>Facebook</li>
              <li><div role="img" class="icon-icon-twitter" title="twitter icon"></div>Twitter</li>
              <li><div role="img" class="icon-icon-pinterest" title="pinterest icon"></div>Pinterest</li>
              <li><div role="img" class="icon-icon-instagram" title="instagram icon"></div>Instagram</li>
              <li><div role="img" class="icon-icon-google-plus" title="google-plus icon"></div>Google Plus</li>
              <li><div role="img" class="icon-icon-linkedin" title="linkedin icon"></div>LinkedIn</li>
              <li><div role="img" class="icon-icon-youtube" title="youtube icon"></div>YouTube</li>
            </ul>
          </div>

＆＃13;

Answer 1

我会在:before元素上使用它。由于图标后跟文本，因此您不需要此处的角色属性。此外，图标在这里支持＆＃34;设计＆＃34;重要的是，它不会在您的文档中添加任何内容，因此您不必为其添加标题。

另外，＆＃34; img＆＃34;角色在HTML5中无效。请查看此处的文档以获取有关角色的更多信息：

http://www.w3.org/wiki/PF/XTech/HTML5/RoleAttribute

我这样做：

HTML

     <div class="col-md-2">
        <ul class="social-links">
          <li class="facebook">Facebook</li>
          <...></...>
         </ul>
     </div>

CSS

 .social-link .facebook:before {
    background-image: url(../images/global/spritesheet.png);
    background-position: -111px -145px;
    content: '';
    display: inline-block;
    margin-right: 15px /* Set the desired margin here */;
    width: 23px;
    height: 23px;
 }

有关：before伪元素的更多信息，请看这里： https://developer.mozilla.org/fr/docs/Web/CSS/%3Abefore

为HTML5使用精灵表图像的有效方法

1 个答案: