Мой Справочник | HTML

Мой Справочник | HTML | Ссылки

Ссылки
Теги	Описание	Атрибуты	Описание
<a>	Ссылка (строчная) По стандарту html5, ссылками можно оборачивать блочные элементы, главное чтобы внутри них не было интерактивных элементов (button, input и других ссылок)	href href="#" href="mailto: " href="tel: "	ссылка на URL-адрес, html-файл, e-mail или id (ОБЯЗАТЕЛЬНЫЙ АТРИБУТ)
		target	открыть ссылку: self - в текущей вкладке(по ум.); blank - в новой вкладке;
		download	предлагает скачать указанный по ссылке файл
		hreflang="en"	идентифицирует язык текста по ссылке
		title	Всплывающая фраза при наведении
		type	Устанавливает MIME-тип документа, на который указывает ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут type должен добавляться только при наличии атрибута href MIME-типы
		rel	Атрибут rel определяет отношения между текущим документом и документом, на который ведёт ссылка, заданная атрибутом href. Несмотря на то, что большинство браузеров не поддерживают атрибут rel, на сайтах часто можно встретить код rel="nofollow", предназначенный для поисковых систем Google и Яндекс. Ссылки, помеченные таким образом, не передают PageRank и ТИЦ. Атрибуты rel
<map>	Cлужит контейнером для элементов <area>, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования — в связывании элемента с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в <img>, задаваемого атрибутом usemap, так и в <map>, устанавливаемого атрибутом name.	name	Имя карты
<map>		ID	Идентификатор
<area>	Каждый элемент <area> определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Элемент <area> задаёт форму области, её размеры, устанавливает адрес документа, на который следует сделать ссылку. <area> всегда располагается в контейнере <map>, который связывает координаты областей с изображением. Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.	href	Задаёт адрес документа, на который следует перейти
		coords	Координаты активной области (coords="38, 122, 76, 132, 116")
		shape	Форма области: circle - Область в виде окружности, default - Указывает всю область, poly - Область в виде полигона (многоугольника), rect - Прямоугольная область)
		target	Имя окна или фрейма, куда браузер будет загружать документ (_blank, self)

Ссылка на сайт(абсолютная http)

<a href="http://ya.ru" hreflang="ru" target="self" rel="nofollow">Ссылка на сайт Яндекс</a>
Ссылка на сайт Яндекс

Ссылка на сайт(относительная локальная)

<a href="../index.html" hreflang="ru" target="self" rel="nofollow">На главную</a>
На главную

Ссылка на скачивание

<a href="../files/html.png" title="Нажмите, чтобы скачать" download>Скачать файл</a>
Скачать файл

Изображение-ссылка

<a href="../index.html"><img src="../files/html.png" alt="picture" width="100"></a>

Карта для изображения-ссылки

<map id="FaceMap" name="FaceMap"> <area href="https://yandex.ru/images" shape="circle" coords="119, 70, 20" alt="Smiling Mouth" target="_blank"> </map> <img src="..pict/smile.jpg" usemap="#FaceMap" alt="Smiling">
Smiling
Наведите на глаз
Генератор карты - imagemap-generator.dariodomi.de

Якорные ссылки


	<ul>

	    <li><a href="#chapter1">Глава1</a></li>

	    <li><a href="#chapter2">Глава2</a></li>

	    <li><a href="#chapter3">Глава3</a></li>

	</ul>



	<h2 id="chapter1">Глава1</h2>

	<p>Some text...</p>


	<h2 id="chapter2">Глава1</h2>

	<p>Some text...</p>


	<h2 id="chapter3">Глава1</h2>

	<p>Some text...</p>


	<a href="#body">Наверх</a>

Глава1
Глава2
Глава3

Глава1

Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text

Глава2

Глава3

Наверх

Почтовые ссылки (mailto:)


		<a href="mailto:me@myplace.com">Email Me</a>

		<a href="mailto:me@myplace.com?subject=Automatic%20Email&body=I%20love%20your%20site.">Email Me</a>

mailto:me@myplace.com - почтовая ссылка (me@myplace.com);
?subject=Automatic%20Email - тема письма (Automatic)
%20 - пробел
&body=I%20love%20your%20site. - текст письма (I love your site.)

pointer-events: none; - заблокировать переход по ссылке

Для ссылок-обёрток


        a {

  display: flex;

  height: 100%;

      }