【问题标题】:Simple HTML problem with hrefhref 的简单 HTML 问题
【发布时间】:2017-02-14 11:12:44
【问题描述】:

我正在尝试创建超链接到某些 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>

【问题讨论】:

  • 您的页面无法加载。链接会发生什么?

标签: html image hyperlink href imagesource


【解决方案1】:

不知道是否还有更多,但您在以下位置缺少结束引号:

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

【讨论】:

  • 每个td 标签都缺少它们。
  • 是的,找到了错误。就是这样。
【解决方案2】:

如果您执行以下操作,将更容易诊断、维护和调整您的网页。

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

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

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>

【讨论】:

    【解决方案3】:

    一个好主意是通过W3 Validator 运行您的代码:

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

    它会告诉您 HTML 格式错误的原因。

    【讨论】:

      【解决方案4】:

      您的最后一个 &lt;td&gt; 标记也没有正确关闭。

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

      最后应该是&lt;/td&gt; 而不是&lt;td&gt;

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-05-10
        • 2013-05-05
        • 1970-01-01
        • 1970-01-01
        • 2011-02-19
        • 1970-01-01
        相关资源
        最近更新 更多