Question

<div class="main" 
     style="cursor:pointer; background-color:#FFFFFF; height:400px; width:500px;" 
     onclick="location.href='http://www.yahoo.com';"></div>

我只是想尝试这样做，当点击div中的任何地方时，它就像一个链接并转到一个新页面。它工作正常，只是询问它是否干净/有效。谢谢！（我省略了第一个和最后一个＆lt;＆gt;所以它会在这里显示。）

Answer 1

您实际上并不需要<div>，您可以调整<a>元素的样式，以便它通过设置display: block显示为块级元素。这肯定是一个更清洁（并且可以说更容易）的解决方案。

Answer 2

是的，它是有效的HTML但是如果你真的想要做得对，你应该将css声明移动到一个单独的.css文件并动态添加onclick事件处理程序，这样你就可以完全分离内容和表示并应用不引人注目的DOM脚本最佳实践。

绝对最简单的方法是导入jQuery并使用click（）方法，这样就可以这样编写：

$('.main').click(function() {
  location.href='http://www.yahoo.com';
});

Answer 3

有效，是的。好的做法，没有。

有什么问题

<style>a.main { background-color:#FFFFFF; height:400px; width:500px; }</style>
<a class="main" href='http://www.yahoo.com'>...</a>

Answer 4

有效的HTML确定，这很简单，形式不错。

除非absolutely necessary，否则不应使用内联样式（style="..."）;添加另一个类，然后在那里设置样式。内联样式属性是cardinal sins if web development，IMO之一。

您不应该使用onclick=来分配javascript事件;将事件与addEventListener绑定。这是根据W3C，不推荐使用onclick方法和separates content from logic执行操作的正确方法。

你有没有使用锚（a）标签的原因？您可以通过在CSS中设置display: block;来使其成为块元素，在语义上更好地以这种方式标记链接，并且如果javascript不可用则提供graceful degradation。

这是有效的HTML吗？

4 个答案: