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

-2

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

来源

2016-07-25 kjHajem

什么是这些锚在讲什么？ – madalinivascu

你是否偶然在谈论使用''标签来表示不是真正的链接，而是JavaScript驱动的行为？ –

锚链是他所指的......我不认为需要澄清。 '锚'是一个非常有名的术语，不是吗？ – Lee

如果你想从一个页面重定向到另一个，你应该使用锚标记。但是，如果你想添加事件，所以它的全部取决于标记。

通常情况下，您可以编写内联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

的代码坏话与更好的名称

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

示例代码

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

示例例与坏话与更好的名称

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

的代码

.right-red { 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() {} 
}

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

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

})(window);

结帐我的其他职位学习最佳实践，即www.github.com/ananddeepsingh

来源

2016-07-25 09:01:02

很好的答案，谢谢。 – kjHajem

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

如：

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

来源

2016-07-25 08:42:13

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

回答

相关问题