Question

我在Web开发方面有点先发制人，我想知道在HTML设计中使用锚点的最佳做法是什么。我目前正在设计和列出我可以点击列表项（li）然后使用jQuery执行特定功能。我也使用一些图像作为可点击按钮，但是，我想知道使用锚点是否更好的做法。

Answer 1

试试这很简单即。 'onclick'javascript事件。这可以在DOM的任何元素上使用它。

例如：

<div onclick="alert('Hey this is working')">Click me</div>

Answer 2

如果您想从一个页面重定向到另一个，则应使用锚标记。但是，如果您想添加事件，那么它全部取决于标记。

通常你可以编写内联js或css代码这不是一个好习惯。虽然您可以使用css或id并在单独的JS文件中编写您的个性化代码。

例如： -

<ul id="primary-nav">
  <li> Home </li>
  <li> About </li>
</ul>

在页面上添加jquery后，您可以写下所需的代码： -

(function(){
  $("#primary-nav").on("click", function(){
    // Your Code;
  })
})

最佳做法的一些示例如下： -

HTML样板

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible"/>
    <title>Your Page Title</title>
    <meta name="description" content="goes here..."/>
    <meta name="keywords" content="keyword 1, keyword 2"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="robots"/>

    <link rel="stylesheet" href="your-single-deployment-stylesheet.css">
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
    <!-- JS Links should sit on the bottom of the page! -->
</head>
<body>
... content
<script src="yourJavascript.js"></script>
</body>
</html>

CSS

包含错误名称

的代码示例

.s-scr {
  overflow: auto;
}
.cb {
  background: #000;
}

更好名称

的代码示例

.is-scrollable {
  overflow: auto;
}
.column-body {
  background: #000;
}

包含错误名称

的代码示例

.right-red {
  float: right;
  color: red;
}

更好名称

的代码示例

.text-highlight {
  float: right;
  color: red;
}

的JavaScript

//avoid repeating var in variable declaration
var foo;
var bar;
var lorem;
var ipsum;

//comma seperated variable declarations
var foo,
    bar,
    lorem,
    ipsum;

避免多步骤定义

var foo = {};

foo.prop = 'bar';

foo.method = function() {};

//defined in a single assignment
var foo = {   
  prop: 'bar',    
  method: function() {}
}

为避免污染全局命名空间，请使用以下代码段

(function( window, undefined ) {
  var foo = 1; //private variable

})( window );

查看我在GitHub上的其他帖子，了解最佳做法，即www.github.com/ananddeepsingh

在html中使用Anchor的最佳做法是什么？

2 个答案: