Вверху: язык разметки - элементы фразы
Первоначальный источник главы 7 Якоря точка
Правильный способ сказать, что ссылки в HTML должны называться якорями. Они не только позволяют нам указывать на документы, но и на определенные абзацы на странице, а также могут использоваться в качестве удобного инструмента для точных ссылок. Пусть объект ссылки приблизится к фокусу. В этой главе мы увидим четыре различных привязки, объясняющих преимущества каждого метода, а также представим, как атрибут заголовка может улучшить простоту использования ссылок. Кроме того, мы также будем использовать CSS для проектирования стилей для ссылок. Когда вам нужно указать определенную часть страницы, маркировка якоря - лучший способ сделать это.
Это общая ситуация при разработке веб -сайта. Вы хотите ссылаться на определенную часть определенной страницы, но пользователь может читать на другой странице. Выберите любой из четырех методов, обсуждаемых, чтобы позволить вам достичь своей цели.
В примере, предположим, мы намерены ссылаться на конкретный заголовок на одной странице: Метод A: Имя отверстия
<p> <a href =#oranges> о апельсинах </a> </p>
... немного текста ...
<a name = oranges> </a>
<h2> апельсины вкусные </h2>
... больше текста ...
Используйте якорный тег с пустым контентом и атрибутом имени, чтобы отметить определенную точку ссылки. Возможно, это метод, с которым вы знакомы. Поместите пустой контент <a> перед заголовком и подключите его (используя символ #, за которым следует значение атрибута имени), которое позволяет нам подключаться к определенной части страницы. Когда страница содержит длинный список элементов, которые необходимо прокрутить, мы можем легко подключиться к конкретному проекту с помощью этого метода.
На рисунке 7-1 показан результат после нажатия на ссылку на апельсины, что означает прыгать на место, которое мы идентифицируем <ame = oranges> </a>, что именно на заголовке.
Рисунок 7-1. Пример нажатия, чтобы подключиться к конкретной ссылке на якорь
Эффект хорош, но впустую пустой тег, чтобы определить местоположение ссылки, немного противоречит семантике. Метод B может улучшить это. Метод B: Все в имени
<p> <a href =#oranges> о апельсинах </a> </p>
... немного текста ...
<h2> <a name = oranges> апельсины вкусные </a> </h2>
... больше текста ...
Как и метод A, мы все еще используем тег <a> с атрибутом имени, но на этот раз мы выводим его вне заголовка, на которое я хочу ссылаться. Это выглядит более семантическим. В методе A наш объект соединения ... ну, нет ничего, но в методе B мы не только объясняем, что этот текст является частью тега заголовка, но и одним из якорей соединений этой страницы. Будьте осторожны с глобальным стилем <a>
Если используется метод B, есть место, на которое вы должны обратить внимание. Если вы указываете глобальные стили CSS для всех элементов <a> (цвет, размер текста, украшение текста и т. Д.), Эти стили будут переоценить стили, которые вы указываете для элементов <h2>. Причина, по которой это происходит, заключается в том, что в этом примере тег <a> является дочерним элементом, расположенным в теге <h2>, который его окружает.
Например, если у вас есть такое заявление в вашем CSS:
a {
Цвет: зеленый;
шрифт-вес: жирный шрифт;
Текстовое декорация: подчеркивание;
}
Метод B и этот CSS заставит заголовок стать зеленым, смелым и подчеркнутым, как <a> на других страницах, возможно, отличающимся от ожидаемого вами стиля <h2>.
Мы можем использовать: Link Pseudo-Class <a>, чтобы избежать этого явления (а также получить другие преимущества), которое будет подробно обсуждаться позже в этой главе. Более богатые атрибуты имени
Одним из преимуществ использования метода B (и метода а) является то, что атрибут имени может обрабатывать более распространенные имена якоря. В частности, это возможность использовать символы внутри имени
Например, если вы используете метод B, вы можете сделать это (здесь представляет символ E):
<p> <a href =#resum é> мое резюме é </a> </p>
... немного текста ...
<h2> <a name = resum é> резюме Дэна é </a> </h2>
... больше текста ...
Эта функция очень важна при работе с персонажами, которые не принадлежат английским буквам.
Но есть несколько методов, которые стоит упомянуть. Следующий метод не требует использования <a> для установки точки привязки. Давайте посмотрим на метод C.
Метод C: Отбросьте имя
<p> <a href =#oranges> о апельсинах </a> </p>
... немного текста ...
<h2 id = апельсины> апельсины - это вкусные </h2>
... больше текста ...
Ах, функция атрибута идентификатора похожа на атрибут имени, который также может указать точки привязки для страницы. Кроме того, метод C также устраняет метод A и B использует атрибут имени в качестве дополнительного тега <a>. Мы сократили исходный код, который всегда был хорошей вещью.
Поскольку атрибут ID может быть добавлен в любой тег, мы можем легко добавить якоря в любой элемент на странице. В этом примере мы решаем добавить якоря к заголовку, но мы также можем легко добавить якоря в <viv>, <form>, <p>, <ul> ... и все другие теги. Одно убийство, две птицы с одной птицей
Фактически, в большинстве случаев мы можем добавить стили или сценарии к атрибуту ранее существовавшего идентификатора, который является еще одним преимуществом метода C. Из -за этого нам не нужно добавлять дополнительный код, чтобы просто установить якорь.
Например, давайте предположим, что у вас есть форма, чтобы оставить комментарии в нижней части длинной страницы, и вы хотите добавить ссылку в верхнюю часть страницы. В этой форме установлен ID = комментарии для указания уникального стиля. Вот как мы можем напрямую подключить идентификаторы как якоря, не добавляя тег <a> с атрибутом имени.
Код выглядит так:
<p> <a href =#Комментарии> Добавить комментарий! </a> </p>
... много текста ...
<form id = комментарии action =/path/to/script>
... формируйте элементы ...
</form>
Кроме того, если ваша страница длинная, то вы добавляете ссылку на верхний якорь внизу, чтобы пользователь мог вернуться к вершине.
Стоит отметить, что, хотя он выглядит очень подходящим, лучше избегать использования TOP при указании имен якоря. Некоторые браузеры сохраняют это имя для особых целей. Использование этого имени может привести к непоследовательным результатам. Лучше всего выбрать подобное имя, но не вызывает проблем. Может использовать #Gemesis? Или # У вас есть своя идея.
Древний браузер с идентификационными атрибутами
При использовании только атрибута ID в качестве якоря существует важный недостаток, который стоит упомянуть, то есть некоторые древние браузеры не поддерживают этот метод. О, это действительно необходимо рассмотреть при определении вашего собственного якоря, а также является неудачным примером совместимости вперед. Давайте посмотрим на последний пример, метод D. Метод D: вместе
<p> <a href =#oranges> о апельсинах </a> </p>
... немного текста ...
<h2> <a id = oranges name = oranges> апельсины вкусные </a> </h2>
... больше текста ...
Если вы хотите достичь совместимости вперед и обратной совместимости при помечении якорях, вам, вероятно, понравится этот метод. Как древние, так и будущие браузеры могут правильно идентифицировать названные метки якоря, но потому что W3C не рекомендует атрибут имени (http://www.w3.org/tr/xhtml1/#c_8) в рекомендации xhtml1.0, вы также используете атрибут ID для поддержки будущих браузеров.
То же, что и метод B, мы должны обратить внимание на глобальный стиль, который влияет на тег <a>.
Общее имя
Если вы решите использовать метод D, приемлемо выбрать одно и то же имя для атрибутов идентификатора и имени (может быть очень удобно), но это возможно, только если они находятся на одном и том же теге. Кроме того, существует только несколько конкретных тегов, которые позволяют это, что, если быть точным, включает <a>, <pplet>, <Frame>, <img>, <Map>. Поэтому мы перемещаем id = апельсины от <h2> к якорному тегу.
Теперь, когда мы увидели четыре метода установления точек привязки, давайте обобрим преимущества и недостатки каждого метода.
Предыдущая страница 1 2 3 Следующая страница Прочитайте полный текст