关于 href 的简单 HTML 问题

Question

我正在尝试创建超链接到某些 URL 的图像，但超链接似乎不起作用。

我正在使用下面给出的代码 http://windchimes.co.in/ index_w%20-%20Copy.html

你能告诉我为什么图标的超链接不起作用吗？

<td width="29" style="padding-bottom: 42px;><a href="http://windchimes.co.in/blog" target="_blank"><img align="middle" title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif"></a></td><td width="29" style="padding-bottom: 42px;> <a href="http://www.linkedin.com/groups?gid=120310" target="_blank"><img align="middle" title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif"></a></td><td width="29" style="padding-bottom: 42px;> <a href="http://www.facebook.com/group.php?gid=72425590275" target="_blank"><img align="middle" title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif"></a></td><td width="29" style="padding-bottom: 42px;> <a href="http://twitter.com/windchimesindia" target="_blank"><img align="middle" title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif"></a></td><td width="29" style="padding-bottom: 42px;> <a href="http://www.youtube.com/user/Windchimesindia" target="_blank"><img align="middle" title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif"></a><td>

Answer 1

不知道是否还有更多，但您错过了以下位置的结束引号：

 <td width="29" style="padding-bottom: 42px;>
                                          ^^^

Answer 2

如果执行以下操作，诊断、维护和调整网页会容易得多。

1. 将您的关注点分开 - 您的 HTML 应该描述文档，而不是其样式。将您的样式规则放入级联样式表（CSS）中，这也意味着您将满足下一个规则
2. 不要重复自己。所有这些元素的宽度和样式规则都完全相同。这意味着如果你想将宽度更改为 30px，你必须查找/替换这些项目中的每一个（如果你自动化查找和替换，你必须希望你不会意外地替换你不想要的东西布局
3. 您的代码 - 通过正确地标记您的 HTML 代码，您将发现诸如缺少结束标记之类的错误，因为它会立即看起来错误
4. - 这将发现错误 。您将帮助您避免代码中的两个问题 - 缺少引号和缺少结束标记。

这是代码的干净版本...

CSS：

td.myClass {
    width: 29px;
    padding-bottom: 42px;
    text-align: center;
}

和 HTML：

<td style="myClass">
    <a href="http://windchimes.co.in/blog" target="_blank">
        <img title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif">
    </a>
</td>
<td style="myClass">
    <a href="http://www.linkedin.com/groups?gid=120310" target="_blank">
        <img title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif">
    </a>
</td>
<td style="myClass">
    <a href="http://www.facebook.com/group.php?gid=72425590275" target="_blank">
        <img title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif">
    </a>
</td>
<td style="myClass">
    <a href="http://twitter.com/windchimesindia" target="_blank">
        <img title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif">
    </a>
</td>
<td style="myClass">
    <a href="http://www.youtube.com/user/Windchimesindia" target="_blank">
        <img title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif">
    </a>
</td>

Answer 3

一个好主意是通过 W3 验证器 运行代码：

http: //validator.w3.org/check?uri=http://windchimes.co.in/index_w%2520-%2520Copy.html

它会告诉您 HTML 在哪些方面存在格式错误。

Answer 4

您的最后一个 标记也未正确关闭。

<td width="29" style="padding-bottom: 42px;>
...
<td>

末尾应为 而不是 。