Почему H2 больше, чем H1?


в следующем фрагменте кода, почему содержание H2 больше, чем содержание H1?

<article>
    <section>
    <header>
        <h1>First Header</h1>
    </header>
    </section>
    <section>
    <header>
        <h2>Second Header</h2>
    </header>
    </section>
</article>

http://jsfiddle.net/abugp/

почему содержание H1 больше в приведенном ниже фрагменте, но не выше?

<h1>First Line</h1>
<h2>Second Line</h2>

http://jsfiddle.net/59T43/

3   51   2014-04-06 23:03:12

3 ответа:

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

глядя на вашу скрипку в Chrome 33, я вижу эффект, который вы описываете. Щелчок правой кнопкой мыши по заголовкам и выбор "проверить элемент" показывает, что проблема вызвана наличием <article> и/или <section> теги вокруг заголовки.

в частности, таблица стилей Chrome по умолчанию обычно включает в себя правила:

h1 { font-size: 2em }

и:

h2 { font-size: 1.5em }

однако, первое правило переопределено внутри <article> и/или <section> теги по некоторым более конкретным правилам, предположительно предназначенные для того, чтобы заголовки разделов были меньше обычных заголовков "полной страницы":

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
}

:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
}

нестандартное :-webkit-any(...) селектор предположительно просто соответствует любому из тегов, перечисленных в скобках. Этот эффект таков, что любой <h1> заголовки внутри <article>,<aside>,<nav> или <section> теги уменьшаются до размера обычного <h2> заголовок и каких-либо <h1> внутри два такие теги сжимаются дальше вниз, предположительно до размера нормального <h3> или так.

принципиально, таблица стилей Chrome по умолчанию не есть такие специальные правила в отношении <h2> теги, поэтому они всегда (в Chrome 33, во всяком случае) будут отображаться в том же размере. Таким образом, когда в окружении двух или более <article> и/или <section> теги <h1> будет меньше, чем <h2>.

Это из-за требований к стилю документации. Вы можете найти подробную информацию на HTML 5.1 documentation @ 10.3.7 разделы и заголовки

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