当前位置: 动力学知识库 > 问答 > 编程问答 >

html - What to use as a "button" in a webpage?

问题描述:

I've been looking through various websites and came across multiple ways to make "buttons". What are the pros and cons to each way?

<div class='btn'><a>Click Me!</a></div>

<span class='btn'><a>Click Me!</a></span>

<a class='btn'>Click Me!</a>

CSS:

.btn{

display:inline-block;

min-width:100px;

text-decoration:none;

cursor: pointer;

}

网友答案:

Those are all three the exact same thing. They're all just a link, the only difference is that parent class is used as a selector target. They are effectively identical.

There is one differences between the first and second 2, though. a div, by default, is a block element while a span and an a tag are both inline, thus a dive fills up the entire width of the container, but that can be changed with css (as your example does).

Why not just, I don't know.. call me crazy.. but why not just use an actual button?

The only reason I can think of to NOT use a button is if you want the links to be search spider visible. If you're going to use javascript to post a form, then i suggest using a button instead.

网友答案:

I recommend reading this article by Chris Coyer. It's titled "When (and when not to) use an anchor tag?".

Here's an excerpt:

I think if you are going to put a href attribute on the anchor that actually does something even if JavaScript is disabled, then the anchor is the right choice. If the app is totally JavaScript dependent all behavior is attached via JavaScript, I guess it doesn't really matter what element you use. Maybe it's even better not to use an anchor since the behavior probably bears no resemblance to what anchor links do. You could probably talk me out of that though. The thing is, anchors give you ("for free") lots of the visual functionality that you want with deep browser support. So...

网友答案:

I'm not sure about the a tag (more info here), but the span tag is inline and the div tag isn't. Otherwise they're all pretty much the same.

网友答案:

the <div> and the <span> must have an action using javascript but the <a> can have a link to another page without using java script code

网友答案:

If you are using a form submit i prefer to use a input button. As it doesn't need further Javascript code to submit a form.

The difference between span and div is that div is a container element whereas span is not. How this is helpful to you? Check out his link.

If you dont want to apply any style and if you are okay in writing (or) if its a simple get request to server (or) if you are willing to write some javascript event handlers then go with anchor tags

网友答案:

I think the best method is the third one because you use only one DOM element instead of two. This will improve the performance and will make your code more semantically because you are not creating empty DOM elements for styling.

In addition, with the example 1 and 2 if the anchor is smaller than 100px the clickable zone will be smaller than the example 3.

分享给朋友:
您可能感兴趣的文章:
随机阅读: