Основной курс HTML

Медиа HTML

Руководство по HTML

Основной учебник HTML5

API HTML5

Медиа HTML5

Маркеры HTML

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

Пример демонстрации锚а

Пример

<!DOCTYPE　html><html><head>
　　　　<meta　charset="UTF-8">
　　　　<title>Основной учебник(oldtoolbag.com), настройка锚а</title></head><body>
　　　　　<a　href="#bottom"　name="top">Перейти к концу</a>
　　　　<div　style="height:　5000px;　width:　300px;　background-color:　#123">Здесь показано, как перейти к началу и концу страницы</div>
　　　　<a　href="#top"　name="bottom">Вернуться к началу</a></body></html>

Проверьте, что ‹/›

Как установить锚

(а) Метод настройки внутреннего перехода 1:

Создание ссылок на锚 <a href="#miao">去找喵星人</a>; (внимание: значение атрибута href должно начинаться с #)
В нужном месте страницы установите锚 <a name="miao"></a>; (внимание: в теге a необходимо указать атрибут name, значение которого должно совпадать с значением href в п. [1], без #) в теге по мере необходимости填写 соответствующий текст, обычно не пишется содержимое.

(в) Метод настройки внутреннего перехода 2:

Создание ссылок на锚 <a href="#miao">去找喵星人</a>; (внимание: значение атрибута href должно начинаться с #)
Определение места锚а <h4 id="miao">喵星人基地</h4>; в теге, к которому нужно перейти, добавьте атрибут id, значение которого совпадает с значением href в п. ①, без #

　　 Внимание: метод 2 не требует добавления отдельного тега a для создания锚а, достаточно добавить id в нужном месте тега.

Пример

<!DOCTYPE　html><html><head>
　　　　<meta　charset="UTF-8">
　　　　<title>锚演示-基础教程oldtoolbag.com</title>
</head>
<body>
　　　　<ul>
　　　　　　　　<li><a　href="#miao">去找喵星人</a></li>
　　　　　　　　<li><a　href="#wang">去找汪星人</a></li>
　　　　　　　　<li><a　href="#meng">其他萌物</a></li>
　　　　</ul>
　　　　<a　name="miao"></a><!--设置锚点方法1-->
　　　　<h3　id="miao">喵星人基地</h3><!--设置锚点方法2-->
　　　　<p>喵喵喵~</p>
　　　　<p>喵喵喵~</p>
　　　　<p>喵喵喵~</p>
　　　　<p>喵喵喵~</p>
　　　　<p>喵喵喵~</p>
　　　　<p>喵喵喵~</p>
　　　　
　　　　<a　name="wang"></a>
　　　　<p>汪汪汪~</p>
　　　　<p>汪汪汪~</p>
　　　　<p>汪汪汪~</p>
　　　　<p>汪汪汪~</p>
　　　　<p>汪汪汪~</p>
　　　　<p>汪汪汪~</p>
　　　　<a name="meng"></a>
　　　　<p>Милый~</p>
　　　　<p>Милый~</p>
　　　　<p>Милый~</p>
　　　　<p>Милый~</p>
　　　　<p>Милый~</p>
　　　　<p>Милый~</p>
</body>
</html>

Проверьте, что ‹/›

Просмотр видео HTML (Video)Ссылки HTML