Как я могу написать <a>тег в стандартном HTML? - PullRequest
Новая
       10

Как я могу написать <a>тег в стандартном HTML?

2 голосов
/ 03 марта 2012

У меня есть две страницы, созданные с использованием HTML, и я использую следующие стандарты 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

Эти две страницы index.html , другая - about.html .Я создаю логотип на странице индекса в виде следующей

HTML-разметки Index.html 

<div class="logo"></div>

в CSS. Я делаю следующее 

.logo {
background: url ('../images/logo.png') no-repeat;
height: 300px;
width: 100px;
}

На странице about.html я пишу следующую html-разметку 

<a href="index.html">
   <div class="logo"></div>
</a>

Приведенная выше разметка работает нормально, но когда я использую w3c validator предупреждает меня, так как это не стандартная разметка.

Мой вопрос: как я могу сделать разметку html соответствующей стандартам и дать тот же результат?

Ответы [ 6 ]

3 голосов
/ 03 марта 2012

У вас есть два варианта, если вам нужно сохранить эту структуру разметки:

  1. Используйте тип документа HTML5, где элементы уровня блока внутри якорей, такие как <a><div>this</div></a>, являются действительными и допустимыми.

    Тип документа HTML5: <!doctype html>

    Только учтите, что в настоящее время нет официальной службы проверки HTML5.

  2. Используйте встроенный элемент, такой как <span> для логотипа: 

    <a href="index.html">
   <span class="logo"></span>
</a>

Если вы используете # 2, просто добавьте display:block в свой CSS для .logo

В зависимости от ваших целей дизайнаи другая разметка, вам вполне может вообще не понадобиться внутренний элемент, и вы можете просто стилизовать сам элемент <a>, задав ему class="logo".

3 голосов
/ 03 марта 2012

Вы должны сделать это скорее: 

<a href="index.html" class="logo"></a>

И тогда ваш CSS будет применяться непосредственно к a вместо вложенного пустого div. Вам нужно будет добавить display: block; в CSS, потому что a имеет другое значение по умолчанию display.

2 голосов
/ 03 марта 2012

Проблема, которую вы видите в валидаторе, заключается в том, что <div> является тегом уровня блока, а тег <a> является встроенным тегом.

Встроенные теги не могут содержать теги уровня блокаВот почему валидатор жалуется.

На самом деле, это правило широко игнорируется, потому что в противном случае многие вещи становятся довольно сложными для превращения в ссылки.Кроме того, это относится только к более старым версиям HTML и xhtml (xhtml особенно суетлив об этом);текущий стандарт HTML5 действительно позволяет это, потому что они видели проблемы, вызванные наличием правила.

Таким образом, краткий ответ - использовать вместо этого HTML-тип документа (<!DOCTYPE HTML>), и ваша проблема исчезнет.

«Правильный» ответ - стилизовать тег <a> с помощью display:block; или display:inline-block;, чтобы он мог содержать элементы уровня блока.Это сделает это правильно синтаксически.Однако это обычно не удовлетворяет валидатору, поскольку он просто смотрит на типы отображения по умолчанию, а не на CSS.

В качестве альтернативы, переключите <div> для <span>.Это удовлетворит валидатор, и вы все равно можете использовать display:block и друзей, чтобы заставить его работать как <div>.

Надежда, которая помогает.

0 голосов
/ 03 марта 2012

Нет, это недопустимо, и тег Div внутри тега Anchor Согласно разделу 4 стандартов W3c.

Тег anchor является элементом iline, а Div -элемент уровня block.Вы не можете поместить элемент уровня block внутрь и элемент inline.

Вот еще одна хорошая SO-дискуссия по вашему вопросу.
Правильно ли когда-нибудь помещать div в якорь?

0 голосов
/ 03 марта 2012

Ссылки (теги a) - это встроенные элементы, означающие, что несколько элементов помещаются на одной строке, тогда как div s - это блочные элементы, что означает только один элемент на строку. Недопустимый HTML 4.01 для вставки элемента блочного стиля в элемент встроенного стиля, так как это препятствует тому, чтобы встроенный элемент фактически отображался как встроенный.

Подробнее о встроенных и блочных элементах см. На этой странице: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

0 голосов
/ 03 марта 2012

Вместо использования изображения логотипа в качестве фона поместите тег внутри DIV.Вы не можете обернуть тег вокруг элемента блока, как DIV.

...