Ссылка А, Семантика, письменность и лучшие практики.
Видя эту тему в Javaeye, дискуссия была довольно интересной, и я не мог не принять участие. Семантическое мышление
Прежде всего, кнопка «Ссылка А и кнопка» семантическая и не может быть заменена из -за удобства использования. A - это аббревиатура якоря, якорная точка, используемая для навигации или местонахождения. Типичное использование:
<a href = http: //www.w3c.org/> w3c Веб-сайт </a> <a name = anchor-one> Это место якоря.
Вы также можете указать атрибуты имени и href одновременно. Это основные знания. Если у вас есть какие -либо вопросы, пожалуйста, обратитесь к спецификации HTML 4.01.
Давайте поговорим о кнопках (включая кнопку и <input type = кнопка /отправить />). Семантически, кнопка является частью формы, и запускаемое действие связано с формой. Если нет никакой работы формы, вы не должны использовать кнопки. Приведите несколько примеров:
Приведенная выше изображение представляет собой некоторые ссылки, хотя она выглядит как кнопка, она семантически.
Кнопки отображения и сортировки на рисунке выше являются формой работы. Семантически, более уместно использовать кнопку или вход. (Примечание: страница результатов поиска Taobao в настоящее время использует A, которая предназначена для постепенного улучшения, и будет упомянута ниже)
Короче говоря, ссылки и кнопки имеют свою семантику и сценарии использования и не могут быть заменены по желанию. Письменный анализ
Мир никогда не бывает таким простым. В сегодняшнем веб -мире JavaScript ссылка A часто используется для запуска событий JS:
<a href = onclick = что -то ()> тест 1 </a> <a href =# onclick = что -то (); вернуть false >> test 2 </a> <a href = javascript: void (0) Onclick = что -то () >> Тест 3 </a> <a href = javascript: void ()> test 4 </a>
Прежде всего, есть проблема с первым методом написания, потому что HREF будет автоматически завершен в соответствии с IE.
Второй способ написать его непосредственно предотвращает событие по умолчанию в событии OnClick, поэтому # in href = # может быть на самом деле любое значение. Использование # означает, что когда нет JS, он останется на этой странице после нажатия (примечание: когда A ниже одного экрана, этот метод написания приведет к возвращению страницы вверх).
Третий способ написания заключается в том, что значение hREF представляет собой псевдопротокол JavaScript, а void-это неарный оператор JavaScript (например,!, TypeOf). Функция оператора void состоит в том, чтобы выполнить только следующее выражение и не возвращать какое -либо значение. Похоже, что void (0) блокирует событие по умолчанию, но на самом деле, следующие методы написания в порядке:
<a href = javascript: void (1) onclick = что -то () >> тест 3 </a> <a href = javaScript:;; onclick = что -то () >> тест 3 </a> <a href = javascript: onclick = что -то () >> тест 3 </a> <a href = javascript: вернуть true onclick = что -то () >> тест 3 </a>
Поскольку операция по умолчанию A является содержанием псевдопротокола JavaScript, добавление void или нет, вызовет другие события. (Примечание: в соответствии с Opera, когда в псевдопротоколе будет изменено возвратное значение, мы обычно пишем void (0) или пустые операторы)
Понимая третий способ написания, вы поймете четвертый способ написания: href = javaScript: что -то аннулирует (). Одним из преимуществ такого способа является то, что когда мышь приостановлена, пользователь может видеть функцию, выполняемую через строку состояния. Это может быть преимуществом для разработчиков, но для обычных пользователей это действительно повысит доверие? Или это чувство страха? Без данных вы не можете сделать выводы.
В дополнение к вышеуказанному методу записи, есть еще один рекомендуемый метод написания, который должен добавить крючок в класс или идентификатор, а затем добавить события через крючок в JS. Отражение
Я не хочу обсуждать, какой из приведенных выше стилей письма является лучшим. Давайте подумаем о вопросе происхождения: почему мы используем для запуска событий JS? Причины, о которых я могу придумать:
Видно, что кроме плавающего стиля нет никакой существенной причины. Давайте отбросим проблему стиля на данный момент и посмотрим на пример:
Выше приведено операционная панель Google Reader. Если вы заинтересованы, вы могли бы также обстрелить его. Используется тег:
Приостановленный стиль мыши совсем не проблема:
В CSS просто добавьте курсор: указатель.
Из приведенного выше примера мы можем сделать вывод: если вы просто запускаете действие JS без какой -либо навигации или семантики позиционирования, вы можете использовать SPAN или другие подходящие теги, и нет необходимости использовать неправильное использование (использование того, что будет вызовать проблемы: во -первых, вам необходимо удалить событие по умолчанию, а во -вторых, информация в строке статуса будет запутать или даже бояться обычных пользователей).
Конечно, если это сама ссылка, вы просто хотите добавить некоторые приложения для сортировки логики JS или сортировки форм перед навигацией, учитывая ее с точки зрения постепенного улучшения, наилучшая практика - написать все значения HREF, чтобы в браузерах, которые не поддерживают JS, удобство использования могла быть гарантирована. Лучшие практики
Это не резюме, это не одноразовое завершение. Лучшая практика - это всего лишь серия принципов. Необходимо подумать об этом перед написанием кода:
Коды имеют жизнь, Tag Kingdom - это зоопарк, знакомый с ними, все прекрасно.