Вопросы HTML-разметки - PullRequest
Новая
       11

Вопросы HTML-разметки

0 голосов
/ 07 сентября 2011

Так как я все больше и больше занимаюсь веб-разработкой, я трачу много времени на изучение разметки на страницах других людей. Одна вещь, которую я бросил, это использование якорей против div. Вот пример.

Итак, у меня есть такая разметка, как эта 

<ul>
    <li>
        <div>
            <input type="hidden" value="#"/>
            div
        </div>
    </li>
    <li>
        <a href="#">anchor</a>
    </li>
</ul>

В первом случае у меня есть div со скрытым полем, которое может содержать URL-адрес или значение для использования в javascript. Следующий способ - это то же самое, только я использую якорь.

Мой CSS выглядит так: 

li {
    text-align:center;
    padding-bottom:5px;
}
div, a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding:2px 5px;
}
div {
    background: #aaa;
    color:#fff;
}
div:hover {
    cursor:pointer;
}
a{
    background: #777;
    display:block;
    text-decoration:none;
    color:#fff;
}

и мой javascript выглядит так: 

$(function() {
    $('div, a').click(function(e) {
        e.preventDefault();
        alert('clicked');
    });
});

Я видел много страниц, которые идут по первому маршруту с div и используют javascript, чтобы установить расположение окон через скрытое поле. Это правильно, или я правильно, когда я устанавливаю стиль якоря, чтобы заблокировать?

Кроме того, на другой полусвязанной ноте вместо того, чтобы вкладывать изображение в якорь для создания ссылки на изображение, я начал использовать другой подход. Я установил привязку на блок, установил ширину и высоту, а затем установил фоновое изображение. Является ли этот подход правильным и безопасным во всех браузерах?

Спасибо

1 Ответ

1 голос
/ 07 сентября 2011

Обычно якоря используются для перехода окна браузера в определенную часть страницы, например: 

http://www.example.com/#article-comments

Существует определенная цель для тега привязки, поэтому ее следует использовать.

С другой стороны, если у вас есть кнопка почты: 

<div id="mail">Email</div>

Вы не собираетесь переходить по URL-адресу и ожидать, что кнопка автоматически сработает (это может произойти, но это не должно произойти). Большинство кнопок и ссылок в интерфейсе Gmail на самом деле <div> s, так как привязки не подходят.

...