Содержание

html — В чем разница между window.location.href и ?

Я только что прочитал некоторую концепцию о свойстве и методе window.location. И я знаю, что

1. window.location.href = "http://google.com"
2. window.location.assign("http://google.com")
3. window.location.replace("http://google.com")

Все они могут перенаправить нашу страницу на целевой URL-адрес, с той лишь разницей, что window.location.replace не записывает историю, поэтому мы не можем вернуться на предыдущую страницу напрямую.

Теперь мне просто интересно, в чем разница между window.location.href и <a href="http://google.com">Google</a>, тег также записывает историю. И для какой ситуации мы их используем соответственно?

0

CHEN HE 2 Май 2020 в 04:53

2 ответа

Разница в том, как они могут быть использованы (ну, потерпи меня).

Настройка window.location.href — это способ программно установить URL. Например, window.location.href = 'https://www.google.com' переместит пользователя на страницу поиска Google. Пользователь не сможет использовать эти знания, если он не откроет консоль разработчика.

Использование тега привязки <a href="https://www.google.com">Google</a> покажет гиперссылку, по которой пользователь может щелкнуть, перейдя на страницу поиска Google. Этот тег также более вероятно будет интерпретироваться программой чтения с экрана более подходящим образом, чем кнопка с onclick, которая перемещает их в Google, устанавливая

window.location.href вручную в Javascript.

0

Ezra 2 Май 2020 в 02:06

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

window.location.href запускается только JavaScript или в контексте JS. Принимая во внимание, что тег <a> определяет гиперссылку в HTML. Это действительно зависит от того, как вы хотите вызвать эту новую страницу. У вас может быть гиперссылка, по которой пользователь может щелкнуть / нажать, или вы можете запустить загрузку страницы с помощью некоторых функций JS, которые запускаются определенными действиями.

Точнее говоря, тег a распространен на веб-страницах, потому что браузеры понимают его и могут применить к нему стиль CSS, чтобы выглядеть лучше. Что касается window.location.href, то для него нет аспекта пользовательского интерфейса, это просто строка кода JS, которую можно вызвать, чтобы (1) получить URL-адрес текущей веб-страницы или (2) установить для него значение, чтобы перенаправить пользователя на некоторые другие URL.

0

b_o 2 Май 2020 в 02:06

61553496

href — атрибут тега a

Атрибут href тега <a> задает адрес документа, на который произойдет переход при нажатии на ссылку. Настольные Мобильные
Internet Explorer Chrome Opera Safari Firefox
1 1 1 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Правило написания атрибута href у тега a

<a href="адрес ссылки">...</a>

Адреса ссылок могут быть абсолютными или относительными. Абсолютный адрес состоит из трех частей:

  1. Протокол (http://, или https://).
  2. Доменное имя сайта. Например, site.ru.
  3. Полное имя файла целевого документа (включая папки) относительно корня сайта. Например, /analiz/seo.php.

Все вместе это выглядит так: http://site.ru/analiz/seo.php.

Разберем теперь как правильно писать относительные ссылки:

  • Относительная ссылка на целевой документ в той же папке, что и исходный документ:
    <a href="Целевой документ.html">Ссылка</a>
  • Относительная ссылка на документ в папке, которая находится на одном уровне с исходным документом:
    <a href="Папка/Целевой документ.html">Ссылка</a>
  • Относительная ссылка на документ, который находится на уровень выше исходного документа:
    <a href="../Целевой документ.html">Ссылка</a>
  • Относительная ссылка на документ, который находится в корне сайта:
     
    <a href="/Целевой документ.html">Ссылка</a>
Пример с тегом <a> и атрибутом href

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Атрибут href у HTML тега a</title>
</head>
<body>
  <p>
    <a href="chapter1.html">Глава 1</a>
    <a href="chapter2.html">Глава 2</a>
    <a href="chapter3.html">Глава 3</a>
    <a href="chapter4.html">Глава 4</a>
  </p>
</body>
</html>

Атрибут href


Определение и использование

Для элементов <a> и <area> атрибут href указывает URL-адрес страницы, к которой переходит ссылка.

Для элементов <base> атрибут href указывает базовый URL-адрес для всех относительных URL-адресов на странице.

Для элементов <link> атрибут href указывает расположение (URL) внешнего ресурса (чаще всего файл таблицы стилей).

Относится к

Атрибут href может использоваться для следующих элементов:

Пример

Пример

Атрибут href указывает назначение ссылки:

<a href=»https://html5css.ru»>Visit html5css</a>

Пример области

Изображение-карта, с щелчком области:


usemap=»#planetmap»>

<map name=»planetmap»>
  <area shape=»rect» coords=»0,0,82,126″ href=»sun.htm» alt=»Sun»>
  <area shape=»circle» coords=»90,58,3″ href=»mercur.htm» alt=»Mercury»>
  <area shape=»circle» coords=»124,58,8″ href=»venus.htm» alt=»Venus»>
</map>

Базовый пример

Укажите базовый URL-адрес для всех относительных URL-адресов на странице:

<head>
<base href=»https://html5css.ru/images/»>
</head>

Пример ссылки

Ссылка на внешнюю таблицу стилей:

<link rel=»stylesheet» type=»text/css» href=»theme.css»>

Поддержка браузера

Атрибут href имеет следующую поддержку браузера для каждого элемента:

Элемент
aДаДаДаДаДа
areaДаДаДаДаДа
baseДаДаДаДаДа
linkДаДаДаДаДа

Формат ссылки для телефонных звонков в мобильных браузераx (href=»tel:…»)

На сегодняшний день большинство мобильных устройств с браузером также являются телефонами! Так почему бы не создавать для телефонных номеров на вашей странице ссылки, кликая по которым вызывалось бы встроенное приложене для звонков. Если вы создаете сайт бизнес руководства, консалтингового агенства или просто продаете пирожки на своем сайте, большинство людей предпочтут позвонить вам в 1-2 тача вместо нудного заполнения формы (особенно на мобильном девайсе).

Мы уже писали об URI-схемах для отправки смс тут.

Первым стандартом, де-факто (скопированным с японских I-MODE стандартов) является использование tel: схемы. Он был предложен в качестве стандарта в RFC 5341, но будьте осторожны, потому что большинство предложенных там параметров не работают на всех устройствах.

Сегодня поддержка tel: URI-схемы есть почти в каждом мобильном устройстве, в том числе в Safari на IOS, Android Browser, WebOS Browser, Symbian браузер, Internet Explorer, Opera Mini и т.п.

Очень простой и лаконичный синтаксис:

html
<a href="tel:+1234567890"> Звоните нам бесплатно! </ a>

href=”tel:…”

Если пользователь кликает по такой ссылке, мобильное приложение попросит подтверждения вызова с указанием полного номера. Это позволит избежать мошенничества или обмана пользователя при звонках в другую страну или на премиум-номер.

На десктопе, с установленным Skype (или подобным софтом), система попросит вас подтвердить открытие внешнего приложения, при клике на такую ссылку.

Я рекомендую указывать телефонный номер в международном формате: знак плюс (+), код страны, код местной зоны и номер абонента. Мы ведь иногда действительно не знаем, где наши посетители физически расположены. Если они находятся в той же стране, или даже в том же районе, международный формат также будет работать.

Существуют, также другие варианты которые вы можете встретить. Давайте посмотрим несколько примеров для ознакомления, просто что-бы знать, что такое бывает.’])*)’)»

This captures the tag name (a or img) into the group «Tag_Name», the URL type (href or src) into the group «URL_Type», and the URL into the group «URL» (I know, I got a bit creative with the group names).

It handles either type of quotes (" or '), and even though any type of quotes in a URL should already be encoded into entities, it will ignore any single-escaped quote characters \' and \".

It does not ignore unclosed tags (therefore malformed HTML), it will find an opening for one of the tags such as <a or img, then proceed to ignore everything except a greater than (>) up until it finds the matching URL type of attribute (href for a tags and src for img tags), then match the contents. It then quits and does not worry about the rest of the tag!

Let me know if you’d like me to break it down for you, but here is a sampling of the matches it made for this very page:

<Match>                                  'Tag' 'URL_Type' 'URL'
---------------------------------------- ----- ---------- -----------------------------
<a href="http://meta.stackoverflow.com"   a     href      http://meta.stackoverflow.com
<a href="/about"                          a     href      /about
<a href="/faq"                            a     href      /faq
<a href="/"                               a     href      /
<a href="/questions"   a     href      /questions
...
<img src="/posts/8066248/ivc/d499"        img   src       /posts/8066248/ivc/d499

It found a total of 140 tags (I am assuming additional posters will increase this somewhat)

Разница между SRC и HREF

Примечание: @Джон-Инь ответ более уместно, учитывая изменения в спецификациях.

да. Существует различие между src и href и они не могут быть взаимозаменяемыми. Мы используем src на заменить и href для установления связи между ссылочным документом и внешним ресурс.

href (гипертекстовая ссылка) атрибут определяет расположение веб-ресурса, определяя таким образом связь или связь между текущим элементом (в случае якоря a) или текущий документ (в случае link) и целевой якорь или ресурс, определенный этим атрибутом. Когда мы пишем:

<link href="style.css" rel="stylesheet" />

браузер понимает, что этот ресурс стилей и обработка разбор страницы есть не приостановлено (рендеринг может быть приостановлен, так как браузеру нужны правила стиля для рисования и визуализации страницы). Это не похоже на сброс содержимого файла css внутри style тег. (Следовательно, желательно использовать link, а не @import для прикрепления таблиц стилей к вашему html-документу.)

src (Source) атрибут просто вставляет ресурс в текущий документ в месте определения элемента. Для например. Когда браузер находит

<script src="script.js"></script>

загрузка и обработка страницы приостанавливается до тех пор, пока браузер не извлекает, компилирует и выполняет файл. Это похоже на сброс содержимого файла js внутри script тег. Аналогично обстоит дело и с img тег. Это пустой тег и содержание, которое должно прийти внутри него, определяется . Браузер приостанавливает загрузку до тех пор, пока не получит и не загрузит изображение. [так же обстоит дело и с iframe]

именно по этой причине рекомендуется загружать все файлы JavaScript внизу (перед </body> tag)

обновление: см. @John-Yin’s ответ для получения дополнительной информации о том, как это реализовано в соответствии с спецификациями HTML 5.

html — Что такое href = «#» и почему оно используется?

О гиперссылках:

Основное использование тегов привязки — <a></a> — это гиперссылок . Это в основном означает, что они куда-то вас заберут. Для гиперссылок требуется свойство href, поскольку оно указывает местоположение.

Hash:

Хеш — # в гиперссылке указывает идентификатор элемента html, на который следует прокручивать окно.

href="#some-id" прокрутит до элемента на текущей странице, например, <div>.

href="//site.com/#some-id" перейдет в site.com и выделите идентификатор на этой странице.

Прокрутите вверх:

href="#" не указывает имя идентификатора, но имеет соответствующее местоположение — верхнюю часть страницы. Нажав на якорь с помощью href="#", вы переместитесь в положение прокрутки вверх.

Просмотрите эту демонстрацию.

Это ожидаемое поведение в соответствии с документацией w3.

Заполнители гиперссылки:

Пример, где заполнитель гиперссылки имеет смысл, находится в предварительном просмотре шаблона. На одностраничных демонстрационных шаблонах я часто видел <a href="#">, так что тег привязки является гиперссылкой, но никуда не денется. Почему бы не оставить свойство href пустым? Пустое свойство href на самом деле является гиперссылкой на текущую страницу. Другими словами, это приведет к обновлению страницы. Как я уже говорил, href="#" также является гиперссылкой и вызывает прокрутку. Следовательно, наилучшее решение для заполнителей гиперссылок на самом деле — href="#!" Идея состоит в том, что, надеюсь, на странице нет элемента с id="!" (кто это делает !?), и поэтому гиперссылка ни на что не ссылается — так что ничего не происходит.

О тегах привязки:

Другой вопрос, который может вас заинтересовать: «Почему бы просто не оставить свойство href выключенным?». Обычно я слышал, что свойство href является обязательным, поэтому оно «должно» присутствовать на якорях. Это ЛОЖЬ! Свойство href требуется только для того, чтобы якорь действительно был гиперссылкой! Прочтите это с w3 . Итак, почему бы просто не оставить это для заполнителей? Браузеры отображают стили по умолчанию для элементов и изменяют стиль по умолчанию для тега привязки, который не имеет свойства href. Вместо этого он будет рассматриваться как обычный текст. Это даже меняет поведение браузера относительно элемента. Строка состояния (внизу экрана) не будет отображаться при наведении курсора на якорь без свойства href. Лучше всего использовать значение метки-заполнителя для привязки, чтобы убедиться, что оно рассматривается как гиперссылка.

Посмотрите эту демонстрацию , демонстрирующую различия в стиле и поведении.

Краткое и простое руководство »

в атрибутах HTML

Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше
Атрибут
Как использовать (для создания гиперссылок) в HTML
Что делает HTML Атрибут Href: краткое и простое руководство ?
Указывает связанный документ, ресурс или расположение.

Пример кода 

   Подробнее об атрибуте href

Различные формы URL-адресов

URL-адрес может быть:

Полностью квалифицированный (включая протокол)
https: // html.com
https://html.com
URL с относительным (неуказанным) протоколом
//html.com
Протокол для конкретного браузера
chrome: // settings /
Относительно текущей страницы
следующей
Относительно текущего домена
/
/ wp-content / uploads / flamingo.jpg

Значения атрибута href

Имя значения Примечания
url URL-адрес (URI) связанного ресурса.

Все атрибуты привязки

Элемент
Имя атрибута Значения Примечания
hreflang Задает язык связанного ресурса.
загрузка Указывает браузеру загрузить связанный ресурс, а не открывать его.
target _blank
_parent
_self
_top
имя фрейма		 Определяет контекст, в котором будет открываться связанный ресурс.
заголовок текст Определяет заголовок ссылки, который отображается пользователю в виде всплывающей подсказки.
href url Указывает связанный документ, ресурс или расположение.
имя

Адам — ​​технический писатель, специализирующийся на документации и руководствах для разработчиков.

Поддержка браузером href

html — Что такое href = «#» и почему он используется?

О гиперссылках:

Основное использование тегов привязки — — это гиперссылки . По сути, это означает, что они вас куда-то ведут. Для гиперссылок требуется свойство href , поскольку оно определяет местоположение.

хэш:

Хэш — # в гиперссылке указывает идентификатор элемента html, до которого следует прокрутить окно.

href = "# some-id" будет прокручиваться к элементу на текущей странице, например

.

href = "// site.com/#some-id" перейдет на site.com и перейдет к идентификатору на этой странице.

Выделите наверх:

href = "#" не указывает имя идентификатора, но имеет соответствующее местоположение — верх страницы. Щелчок якоря с href = "#" переместит позицию прокрутки вверх.

См. Эту демонстрацию.

Это ожидаемое поведение согласно документации w3.

Заполнители гиперссылок:

Примером использования заполнителя гиперссылки является предварительный просмотр шаблона. В одностраничных демонстрациях шаблонов я часто встречал , так что тег привязки является гиперссылкой, но никуда не денется. Почему бы не оставить поле href пустым? Пустое свойство href фактически является гиперссылкой на текущую страницу.Другими словами, это вызовет обновление страницы. Как я уже говорил, href = "#" также является гиперссылкой и вызывает прокрутку. Поэтому лучшим решением для заполнителей гиперссылок является href = "#!" Идея здесь в том, что, надеюсь, на странице нет элемента с id = "!" (кто это делает !?), поэтому гиперссылка ни на что не ссылается — так что ничего не происходит.

О тегах привязки:

Другой вопрос, который может вас заинтересовать: «Почему бы просто не отключить свойство href?».Я часто слышал, что свойство href является обязательным, поэтому оно «должно» присутствовать на якорях. Это ЛОЖЬ! Свойство href требуется только для того, чтобы привязка действительно была гиперссылкой! Прочтите это из w3 . Так почему бы просто не оставить это для заполнителей? Браузеры отображают стили по умолчанию для элементов и изменят стиль по умолчанию для тега привязки, у которого нет свойства href. Вместо этого он будет считаться обычным текстом. Это даже меняет поведение браузера в отношении элемента.Строка состояния (внизу экрана) не будет отображаться при наведении курсора на привязку без свойства href. Лучше всего использовать для привязки значение href-заполнителя, чтобы гарантировать, что она обрабатывается как гиперссылка.

См. Эту демонстрацию , демонстрирующую различия в стиле и поведении.

HTML-тегов / ссылок / ссылок на именованный якорь

Элемент A определяет привязку.

Вы можете создать ссылку на именованный якорь, используя атрибут name (или атрибут id).

При связывании в одном документе элемент A устанавливается следующим образом.

 
    связанный текст   

(Целевая точка)
    именованный якорь
Атрибут Значение Пояснение
href = «» # имя якоря числовой знак (#) и имя привязки
name = «» имя якоря произвольное имя
Создать именованный якорь
  • Имена привязок в документе должны быть уникальными.
  • Имена привязок чувствительны к регистру.
  • В имя привязки могут быть включены следующие символы.
    дефис (-), подчеркивание (_), двоеточие (:), точка (.)
    name = «anchor_name»
  • Имена якорей должны начинаться с алфавита.
    name = «a001»
Ссылка на именованный якорь
  • Введите цифровой знак (#) и имя привязки.
    href = «# a001»

Пример

Пример использования атрибута имени
 
 
 Индекс TAG 
 

 
 Пример привязки 
 

 
 
   Меню     


 
 
   a001     

 текст абзаца... 


 
 
   a002     

 текст абзаца ... 


 
 
   a003     

 текст абзаца ... 






    Перейти в меню
Выход
Пример страницы
Пример использования атрибута id
 
 
 Индекс TAG 
 

 
 Пример привязки 
 

 
 Меню 
 


 
 a001 
 

 текст абзаца... 


 
 a002 
 

 текст абзаца ... 


 
 a003 
 

 текст абзаца ... 






    Перейти в меню
Выход
Пример страницы
Связать теги
Связанный документ

HTML-ссылок, href, имя



5.1 Глобальные ссылки

Ссылки — это то место, где они есть во всемирной паутине. Веб-сайт обычно начинается с «домашней» страницы который содержит ссылки на другие страницы, локальные для него самого, и страницы, которые находятся где-то еще в Интернете, может сидеть на сервере на другом конце света.

Если вы хотите указать куда-нибудь ссылку, используйте тег . A обозначает Anchor , это точка привязки в документе в другом месте.Есть несколько способов связи, и они описаны ниже.


Набрав тег веб-сайт Intel в любом месте тело вашего HTML-документа даст вам этот веб-сайт Intel. Если вы нажмете на Веб-сайт Intel, и вы подключены к Интернету, тогда вас сбросят прочь, чтобы увидеть прелести веб-сайта Intel. Бит http://www.intel.com называется URL-адресом, который стоит для унифицированного указателя ресурсов .В отличие от HTML, URL-адреса чувствительны к регистру.
Обратите внимание на то, что у вас есть небольшая добавка к тегу , где вы вводите описание, в этом case «Веб-сайт Intel». Этот текст заключен во весь тег и является используется браузером для предоставления «точки щелчка». Эта «точка щелчка» обычно выделяется в определенном цвете, таком как синий (для непосещенных) и красный (для посещенных), это ваш Гипертекстовая ссылка. Эти цвета можно изменить в каскадных таблицах стилей.
Раздражающая особенность, которую вы, возможно, заметили в этом, заключается в том, что, когда вы перешли на другой веб-сайт, вы теряете страницу, на которую изначально смотрели. Это не то, что вы как разработчик веб-сайта может захотеть, если вы хотите, чтобы люди легко возвращались на исходную страницу. Чтобы решить эту проблему, в тег привязки, содержащий ссылку, вставьте атрибут TARGET = «_ blank» и назовите новую страницу как-то вроде «Новое окно». Например, Новое окно . Теперь при нажатии на ссылку открывается новое окно. Попробуйте перейти по следующей ссылке, Новое окно, она написана точно так же, как только что описано.

5.2 Локальные ссылки

Нам не нужно метаться по миру, мы можем ссылаться на другой HTML-документ. в локальной сети или на собственном жестком диске.


Набрав Never Never Land , вы получите ссылку на Never Never Land — это еще одна веб-страница того же каталог в качестве текущей страницы.Нажмите сейчас! Если страница находилась в каталоге с именем «разное» тогда вместо этого введите .
OK! Теперь ты снова с нами! Обратите внимание, как вы вернулись в то же место, что и вы оставили. Это делается с помощью строки там же, где и гипертекстовая ссылка. Это предоставляет браузеру тег, который фиксируется на при возвращении. Если вы посмотрели текст на другой странице (вы знаете, какой юкки окрашен!) тогда вы увидите ссылку здесь , filelink имя, которое я придумал для тега возврата. Хеш используется для указания парсеру искать имя. в том же документе, это называется Закладка . Для закладок вы можете сделать прочь с HREF и используйте вместо него NAME .

5.3 Ссылки и графика


Попробуем еще один! Нажмите на

Сколько раз вы поднимались и опускались? Забавно, не правда ли? Маленькие вещи….!

Я подсунул небольшой рисунок и использовал его вместо слов, чтобы указать точку щелчка. Для этого нужно ввести что-то вроде . Сделать не так уж сложно, но довольно эффективно!

Вы можете использовать якорь для создания ссылки на электронную почту, например Чей-то адрес электронной почты .Когда пользователь нажимает на эту ссылку, его почтовый клиент открывается с адресом кто-то: где-то.cog.uk . Этот реальный адрес, конечно, не имеет смысла. Вы можете задаться вопросом, почему я не сделал этого для себя Адрес электронной почты на главной странице этого сайта. Я обнаружил, что веб-пауки или веб-боты «путешествовать» по Интернету в поисках адресов электронной почты для использования в целях рассылки спама. Поэтому вы можете быть удобнее использовать вместо этого изображение, содержащее текст вашего электронного письма, тем самым сводя к минимуму риск получить большую часть рассылаемого абсолютного мусора.

Вы мудры, возможно включите альтернативное слово для тех браузеров, которые не поддерживают графику, или для пользователей, которые хотят не загружать графику, чтобы ускорить просмотр. Для в предыдущем примере вы могли ввести Перейти в конец страницы . Команда ALT = «» позволяет вам предоставить альтернативный текст, если изображение не загружается по какой-либо причине, ссылка будет до сих пор работаю.Современные браузеры улавливают ключевое слово ALT и отображают всплывающее окно, когда вы указатель мыши находится над изображением. Попробуйте это на графике на этой странице!

Обратите внимание, что в каталоге используется /, а не \ . Всегда используйте / даже если вы работаете на машинах DOS, он автоматически переводится, однако ящики Unix будут не распознает \ как каталог, и файлы не будут доступны. Серверы Unix — самые распространенные HTTP-серверы в Интернете.

А вот прекрасная фотография моей поместной церкви:





A — привязка

A — привязка

Элемент A обозначает привязку — гипертекстовую ссылку или место назначения ссылки. Атрибут HREF определяет гипертекстовую ссылку на другой ресурс, такой как документ HTML или изображение JPEG.Примеры:

Значение атрибута HREF — это URI ссылки. Необязательный атрибут TITLE может использоваться для краткого описания содержимого ссылки и отображается в некоторых браузерах как «всплывающая подсказка».

Содержимое элемента A , используемого в качестве ссылки, должно быть как можно более контекстным. Другими словами, пользователь должен иметь возможность извлекать все элементы A из документа и при этом иметь представление о том, что скрывается за каждой ссылкой. Текст ссылки, содержащий Щелкните здесь или просто здесь — это очень плохая форма.

Атрибут TARGET используется с кадрами для указания кадра, в котором должна отображаться ссылка.Если фрейма с таким именем не существует, ссылка отображается в новом окне, если пользователь не переопределит ее. Имена специальных фреймов начинаются с подчеркивания:

  • _blank отображает ссылку в новом безымянном окне
  • _self отображает ссылку в текущем кадре (полезно для переопределения BASE TARGET )
  • _parent отображает ссылку в непосредственном родительском элементе FRAMESET
  • _top отображает ссылку в полном окне без рамки

В HTML 4 значение атрибута TARGET равно без учета регистра , так что _top и _TOP имеют одинаковое значение.Однако большинство браузеров обрабатывают значение атрибута TARGET как с учетом регистра и не распознают _TOP как имеющее особое значение _top .

Необязательные атрибуты HREFLANG и CHARSET указывают язык и кодировку символов, соответственно, ссылки. Язык должен быть указан в соответствии с RFC 1766; Примеры включают en для английского языка, en-US для американского английского и ja для японского.Примеры кодировок символов включают ISO-8859-1 , Shift_JIS и UTF-8 .

Атрибут ACCESSKEY определяет один символ Юникода в качестве сочетания клавиш для перехода по ссылке. Сущности ( , например, & eacute; ) могут использоваться как значение ACCESSKEY .

Атрибут TABINDEX определяет число от 0 до 32767, чтобы указать порядок перехода элемента.Якорь с TABINDEX = 0 или без атрибута TABINDEX будет посещен после любых элементов с положительным TABINDEX . Среди положительных значений TABINDEX фокус первым получает меньшее число. В случае ничьей элемент, который появляется первым в документе HTML , имеет приоритет.

Атрибуты REL и REV определяют отношения между привязкой и связанным ресурсом. REL определяет связь между текущим документом и связанным документом, а REV определяет связь в противоположном направлении.Например,

...

указывает, что foo.html является глоссарием для текущего документа, а

...

указывает, что текущий документ является подразделом bar.html . Значение атрибутов REL и REV представляет собой список типов ссылок, разделенных пробелами.

Необязательный атрибут TYPE указывает тип Интернет-носителя ссылки.Этот атрибут редко используется на практике, но в сочетании с селекторами атрибутов CSS он позволяет стилизовать ссылки в зависимости от типа носителя.

Атрибут ИМЯ определяет место назначения для ссылки. Например, документ, содержащий

Мой заголовок

, определяет место назначения ссылки с именем «foo» в указанном заголовке. Затем можно использовать HREF = «# foo» в элементе A в том же документе или HREF = «somedoc».html # foo « из другого документа.

Элемент A не может содержать другой элемент A , поэтому нужно быть осторожным, чтобы именованные привязки не содержали привязки ссылок. Авторы могут использовать как NAME , так и HREF атрибутов в одном элементе A , чтобы избежать этой проблемы.

HTML 4 Атрибут ID предназначен для устранения необходимости в A NAME . Атрибут ID может использоваться практически с любым элементом для определения ссылки пункт назначения, чтобы вместо предыдущего примера можно было использовать следующее:

Мой заголовок

Старые браузеры, такие как Netscape 4. x не поддерживает ID адресатов ссылки. Авторы могут поддерживать доступность в старых браузерах, продолжая использовать НАИМЕНОВАНИЕ вместо или в дополнение к ID .

ИМЯ и Значения идентификатора должны быть уникальными в любом документе, а разные значения должны отличаться не только в зависимости от регистра. ID значения должны начинаться с буквы в диапазоне от A до Z или от a до z, за ними могут следовать A-Z, a-z, 0-9, дефисы, подчеркивания, двоеточия или точки.При связывании с именованным якорем имя обрабатывается с учетом регистра.

Атрибуты SHAPE и COORDS из A могут использоваться для создания клиентских карт изображений через элемент OBJECT . Значение по умолчанию SHAPE — rect , что определяет прямоугольную область с использованием COORDS = « слева , сверху , справа , снизу » . Другие значения SHAPE :

  • по умолчанию , который определяет все изображение;
  • круг , который определяет круговую область с помощью COORDS = « center-x , center-y , radius » ;
  • poly , который определяет многоугольную область с помощью COORDS = « x 1 , y 1 , x 2 , y 2 , … , x N , y N «.

Значения координат относятся к левому верхнему углу объекта и могут быть выражены в пикселях или процентах. Значение радиуса в процентах для круглых областей рассчитывается относительно меньшего из значений ширины и высоты объекта. Если два или более регионов перекрываются, приоритет имеет самый ранний указанный регион.

В дополнение к основным событиям, общим для большинства элементов, A принимает следующие атрибуты событий для сценариев на стороне клиента:

  • ONFOCUS , когда ссылка получает фокус;
  • ONBLUR , когда ссылка теряет фокус.

Дополнительная информация

Создание ссылки для загрузки с использованием атрибута загрузки HTML5

По умолчанию ваш тег привязки — это навигационная ссылка, она перейдет к ссылке, указанной в атрибуте href .

Однако, когда вы добавляете атрибут download , он превращает его в ссылку для загрузки. Запрос на загрузку файла. Загруженный файл будет иметь то же имя, что и исходное имя файла. Однако вы также можете установить собственное имя файла, передав значение атрибуту загрузки 🤩

Ограничения загрузки

Атрибут загрузки работает только для URL-адресов того же происхождения.Поэтому, если href не совпадает с источником, что и сайт, это не сработает. Другими словами, вы можете скачивать только те файлы, которые принадлежат этому сайту. Этот атрибут следует тем же правилам, что и в политике одинакового происхождения .

Что такое политика

одинакового происхождения ?

Эта политика представляет собой механизм безопасности, который помогает изолировать потенциально вредоносные документы и уменьшить возможные векторы атак. Что это значит для нашего атрибута download ? Что ж, это означает, что пользователи могут загружать только файлы с исходного сайта.Давайте посмотрим на пример:

Происхождение: https://www.samanthaming.com
https://www.samanthaming.com/logo.png Это будет работать
https://www.google.com/logo.png Это не сработает

Вы можете узнать больше об этой политике в MDN Web Doc

Browser Support

Эта функция поддерживается не всеми браузерами (кашель IE).Поэтому, если вы ориентируетесь на конкретный браузер, убедитесь, что вы проверили совместимость, прежде чем использовать этот атрибут.

Могу ли я использовать: Атрибут загрузки

Какой вариант использования для передачи нового имени файла?

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

Мой ответ: Да, это было бы идеально. Но иногда у вас может быть собственное соглашение об именах файлов, которое вам нужно соблюдать, что может не иметь смысла для пользователя.Таким образом, возможность передать собственное имя файла может быть полезно 👍

  • @dj_yanic: Хороший вариант использования: я отслеживаю номер версии своего резюме, но рекрутеру, скачавшему его с моего сайта, не нужно знаю, какая это версия.

  • @ build.script.log: также вы можете программно изменить имя файла, например, чтобы включить дату или имя пользователя. Аккуратный совет!

  • @vikneshwaran_jk: Я использовал этот атрибут загрузки на своем личном веб-сайте портфолио, чтобы сделать свое резюме загружаемым (pdf).Просто мощный👌

  • chriskelly7777: Очень удобный совет. Небольшая ошибка, которая изначально застала меня врасплох, заключается в том, что это работает только с запросами одного и того же происхождения, а не с перекрестным происхождением, где оно игнорируется: переполнение стека — просто чтобы спасти кого-то еще, выдергивающего собственные волосы, как я

Ресурсы

HTML-тег ссылки: тег A и тег кнопки

В этой статье мы узнаем, как использовать тег HTML Link , тег A и тег Button на вашем веб-сайте с HTML5 для ссылки на другие страницы.Эта статья основана на видео, записанном Густаво с Copahost. Рекомендуем посмотреть.

Итак, темы этой статьи:

Что такое тег ссылки HTML?

Прежде всего, если вы хотите создать ссылку на другую страницу внутри вашего веб-сайта или даже на внешнюю страницу, вы можете использовать тег A . Тег A — очень простой тег. Давайте проверим
, как это сделать.

Итак, это основной тег A: .

Итак, как вы можете видеть, вам нужно использовать атрибут HREF в теге ссылки HTML. В атрибуте HREF вы должны разместить ссылку на страницу, на которую хотите перейти. Атрибут HREF — это просто цель тега HTML Link. С его помощью вы можете ссылаться на внутреннюю страницу вашего веб-сайта или даже на внешний сайт.

Итак, в этом первом примере видео Густаво у нас есть страница с именем page.htm .

Это страница, которую мы сейчас должны редактировать.При этом мы разместим текст внутри ссылки.

Итак, давайте сделаем образец текста, как в примере ниже.

  Текст ссылки здесь

Теперь внутри атрибута HREF мы должны разместить целевую страницу, на которую будем ссылаться.

Внутренняя ссылка

Например, если вы переходите по ссылке на другую страницу внутри своего веб-сайта, вы должны поместить туда имя страницы.

В своем первом примере Густаво собирается связать таблицы.htm . Для этого он помещает имя страницы в атрибут HREF. Как код ниже:

  Текст ссылки здесь

После этого следует сохранить страницу, чтобы увидеть обновления. Итак, давайте посмотрим, как это выглядит.

Итак, теперь вы можете увидеть текст ссылки на странице, который является содержимым тега A. И если вы нажмете на эту ссылку, вы перейдете на table.htm, который должен быть внутренним файлом на вашем веб-сайте. .

Таким образом, вы только что связались с tables.htm .

Внешняя ссылка

Чтобы сделать ссылку на внешний веб-сайт, вы должны просто поместить URL-адрес веб-сайта в атрибут HREF.

Например, если вы хотите создать ссылку на Copahost.com, вы должны поместить полный URL-адрес в атрибут HREF тега ссылки HTML. Как в примере ниже:

  Текст ссылки здесь

Теперь, когда вы откроете свою страницу и нажмете на ссылку, вы будете перенаправлены на внешний веб-сайт.В этом примере на веб-сайт CopaHost.

Целевой атрибут тега ссылки HTML

Внутри тега A мы можем использовать атрибут target . С помощью целевого атрибута вы можете указать, где открывать эту новую ссылку.

Например, мы можем разместить цель для открытия в новой вкладке в веб-браузере.

Для этого следует использовать целевой атрибут со значением _blank . Это должно быть похоже на target = _blank. Это означает открыть в новой вкладке.

Итак, давайте посмотрим на пример ниже:

  Текст ссылки здесь

В видео Густаво, когда он сохраняет свою страницу с приведенным выше кодом, перезагружает ее и щелкает по ссылке, вы видите, что эта ссылка откроется в другой вкладке.

Итак, у вас будет вкладка с вашей текущей страницей, а ссылка откроется в новой вкладке в браузере.

Использование изображения в качестве ссылки

Итак, внутри тега HTML Link мы можем использовать и текст, и изображение.Мы также можем использовать другие элементы HTML.

До сих пор мы просто использовали текстовый формат в качестве примера. Текст был «текст ссылки здесь». Итак, теперь вы узнаете, как изменить это с помощью изображения. Таким образом, вместо текста ссылки у вас будет изображение, указывающее на нужную страницу.

Прежде всего, вы должны стереть текст внутри тега ссылки HTML. Затем вы должны добавить тег изображения внутри тега A. Как код ниже:

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

Итак, щелкнув по этому изображению, мы перейдем на желаемую страницу.

HTML-тег кнопки в виде ссылки

Мы также можем использовать кнопку как ссылку, а не только текст или изображение.

Итак, теперь вы должны использовать тег Button для создания кнопки.Давайте поместим текст под названием «название кнопки» внутри кнопки. Код должен быть похож на пример кода ниже:

Итак, когда вы сохраните страницу с этим кодом, у вас будет простой тег кнопки с заголовком кнопки «Заголовок кнопки». Как на изображении ниже:

Но сейчас при нажатии на кнопку ничего не произойдет. Это потому, что нам нужно использовать атрибут onClick , чтобы установить функцию для перенаправления пользователя на другую страницу.

Добавление JavaScript для установки ссылки в теге кнопки HTML

Итак, теперь мы добавили атрибут onClick. Теперь вам нужно поместить внутрь него « document.location », что представляет собой небольшую команду JavaScript . Как код ниже:

 <кнопка>
    Название кнопки

Теперь внутри этого document.location вы должны разместить или веб-страницу, или URL-адрес, на который вы хотите выполнить перенаправление. Например, давайте перенаправим на внутреннюю страницу с названием таблицы.htm . Как в примере кода ниже:

 <кнопка>
    Название кнопки

После сохранения кнопка остается той же самой, но при нажатии на нее его команда document.location просто перенаправляет нас на эту страницу tables.htm.

Вы также можете поместить туда внешний URL. Как в примере кода ниже:

 <кнопка>
    Название кнопки

Прямо сейчас у нас внутри document.location вместо веб-страницы, у нас есть полный URL.

Итак, когда вы сохраняете страницу и нажимаете на кнопку, она просто перенаправляет вас на желаемую страницу.

Заключение

Наконец, теперь вы знаете, как использовать тег ссылки HTML и как ссылки HTML работают как с тегом A, так и с тегом Button.

.

No related posts.