<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:900,500,600,200,400,700' rel='stylesheet' type='text/css'>
<title>Layout</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navbar-header">
<img src="img/logo.png" / alt="selva">
</div>
</div>
<div class="container theme-showcase">
<div class="container">
<div class="banner-div">
<img src="img/banner.png" class="banner"/>
<img src="img/issue-no-img.png" class="issue-badge"/>
<span class="issue">Issue No.<br /><b>376</b></span>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/left-note-img.png"/ alt="">
</div>
<div class="col-md-4 align-center">
<p><span class="new-radius"> NEW! </span> <span class="new">JUN 07, 2003</span></p>
<p><i>Get your breaks points on.</i></p>
<span>
<h1>DOT NET ARTICLES</h1>
</span>
<span class="comments"><i>by</i> <a href="#">JOHN WOO</a> <i> - 10 Commments</i></span><br/>
</div>
<div class="col-md-4 pull-right">
<div class="input-group">
<input type="text" class="form-control search-input-box" placeholder="Search..." />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<hr class="hr-style"/>
<p class = "header-pgf">
Text, navigation, and tables, oh, my! What's a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay's new book, available now from New Riders.
</p>
<hr class="hr-style">
<h1 class="more-apart">More from A List Apart</h1>
<hr class="hr-style">
<div class="row">
<div class="col-md-3">
<h2>Columnists</h2>
<p>JACK MCGRANE <i>on</i> CONTENT</p>
<p class="pgf-header">The Alternative is Nothing</p>
<img src="img/thumb1.jpg" class="float-left"/>
<p>We're witnessing one of thr latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.</p>
</div>
<div class="col-md-3">
<h2>From the Blog</h2>
<p class="pgf-header">Maps Should Be Crafted.Not "Plugged In"></p>
<p>Web designers: erase the line between "the map" and "the content" by harnessing the power of open-source Leafler and your own fresh creative thinking. In the tradition of ALA's recent "Hack Your Maps." Happy Cog's Brandon Rosage shares how to make location a central aspect of the content experience-not just a visual aid.</p>
</div>
<div class="col-md-3">
<p class="md-3">Amazon Web Services Introduces a New API</p>
<p>Amazon Web Services Identity and Access Management(IAM) is expanding to support web identity federation. Developers can integrate Amazon.com, Facebook, or Google odentity into their app by using the new AWS Security Token Services(STS) API, AssumeRoleWithWebIdentity. to request temporary security credentials.</p>
</div>
<div class="col-md-3">
<h5>Gratitude</h5>
<p>Thanks to our RSS sponser Typekit-offering desktop and web fonts in a single subscription starting June 17</p>
<div class="well align-center">
<img src="img/mothers-day.jpg" /> <br/>
<p class="font-10">Two special Mothers' Say Kits are available from Field Notes Brand. Ad via The Deck </p>
</div>
<div class="job-board">
<h5>Job Board</h5>
<a href="#" >New York Times is looking for a <br />Ruby on Rails Web Developer.</a>
More on the <a href ="#">Job Board ></a>
</div>
</div>
</div>
</div>
</div>
<!-- /container -->
<div class="footer" style="">
<div class="container">
<div class="list-footer" style="font-size:13px;">
<span><img src="img/article-logo.png" /></span>
<span>ARTICLES</span>
<span>COLUMNS</span>
<span>BLOG</span>
<span>TOPICS</span>
</div>
<div class = "list-footer" style="font-size:12px;">
<span>ABOUT</span>
<span>AUTHORS</span>
<span>MASTHEAD</span>
<span>CONTRIBUTE</span>
<span>STYLE GUIDE</span>
<span>CONTACT</span>
<span>SPONSORSHIPS</span>
</div>
<hr class="hr-style"/>
<div class="row">
<div class="col-md-6">
<img src="img/dot-net-ad.jpg" class="footer-image"/>
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<a class="footer-link" href="#">ask here. ></a>
</div>
<div class="col-md-6">
<img src="img/shopify-expert-ad.jpg" class="footer-image"/>
<p class="footer-title">Shopify Expert</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<a class="footer-link" href="#">click to view</a>
</div>
</div>
<hr class="hr-style" />
<div style="text-align:center">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</div>
</div>
</body>
</html>
我对HTML有一点怀疑。在HTML中添加图片时，需要alt属性。
但我知道使用alt atrribute，删除此属性后，我的网页没有变化。
所以我想知道是否需要alt属性？
答案 0 :(得分：2)
alt标记用于使使用屏幕阅读器和此类或非可视浏览器的用户更容易访问您的网站，因为他们无法查看图片。
如果您有alt标签，则会改为使用它。
http://www.w3.org/QA/Tips/altAttribute
等效的文本为您的网站带来以下好处 其访客在以下常见情况下：
如今，Web浏览器可用于各种各样的容量不同的平台;有些人根本不能显示图像，或者只能显示一组有限的图像;有些可以配置为不加载图像。如果您的代码在其图像中设置了alt属性，则大多数浏览器都会显示您提供的描述而不是图像。
有些访客无法看到图像，无论是盲人，色盲还是低视; alt属性对那些可以依赖它的人很有帮助，可以很好地了解页面上的内容。
搜索引擎机器人属于上述两个类别：如果您希望将您的网站编入索引，请使用alt属性确保它们不会错过您网页的重要部分。< / p>
根据HTML 4.01 specification，alt属性是必需的，但您的页面会显示是否存在alt属性。如果您在浏览器中关闭图像加载，它只会以不同的方式显示。
由您决定是否让那些不愿意或无法查看图片的人更容易访问您的网站，这取决于您。
答案 1 :(得分：1)
是有效问题。除非你知道它的重要性，否则你不会注意到差异。
建议在技术上使用alt，并将其作为网页设计的指南。
在浏览器中关闭图像，您将看到不同之处。 Alt用作图像的替代，完全描述图像。 如果网站运行缓慢且图片无法加载至少用户将能够查看图像的描述。
它也有助于SEO（搜索引擎优化） 因此，这是一种最佳实践。
希望这说清楚。
答案 2 :(得分：0)
需要alt属性才能让没有看到图片的人可以访问该页面，例如使用基于语音的浏览器或盲文设备的盲人以及使用“无图像”中的普通浏览器的人模式（例如，使用慢速连接时）。除了这一基本重要性之外，alt属性也可用于其他环境，例如搜索引擎在搜索带有文本查询的图像时。
实际重要性因页面，图像和用户的性质以及alt文本的充分性而异。
特别是，使用空字符串alt=""告诉非可视浏览器他们应该忽略img元素。没有它，这样的浏览器倾向于宣布存在图像，例如拼出图像的URL;这对用户来说非常烦人，如果图像只是装饰，或者除了说明文本中表达的内容之外没有任何消息的主题图像，这是非常不必要的。