Где я должен помещать код CSS и Javascript на веб-страницу HTML?

При создании веб-страницы, куда я должен поместить следующий код?

<link rel=stylesheet type="text/css" href="css/layout.css">

Должен ли я помещать его в <head> или я должен поместить его в <body>? Просьба уточнить следующие вопросы:

Какая разница, если я поместил его в <head> или где-нибудь еще в HTML-код?
Что делать, если у меня есть два файла CSS (или Javascript)? Так как я могу включить только один файл перед другим, какой файл будет использоваться веб-браузером для отображения веб-страницы?

Ответ 1

На мой взгляд, лучшей практикой является размещение CSS файла в заголовке

<head>
  <link rel="stylesheet" href="css/layout.css" type="text/css">
</head>

и файл Javascript перед закрывающим тегом </body>

  <script type="text/javascript" src="script.js"></script>
</body>

Также, если у вас есть, как вы сказали два файла CSS. Браузер будет использовать оба. Если бы были какие-то селекторы, т.е. .content {}, которые были одинаковыми в обоих файлах CSS, браузер перезаписывал аналогичные свойства первого со вторыми свойствами. Если это имеет смысл.

Ответ 2

Поместите стили в верхней части Ссылки на обсуждение

При исследовании производительности в Yahoo!, мы обнаружили, что перемещение таблиц стилей в документ HEAD делает страницы загружаемыми быстрее. Это связано с тем, что установка таблиц стилей в HEAD позволяет странице обрабатывать постепенно.

Передние инженеры, которые заботятся об эффективности, хотят, чтобы страница загружалась постепенно; то есть мы хотим, чтобы браузер отображал все содержимое, которое у него есть, как можно скорее. Это особенно важно для страниц с большим количеством контента и для пользователей с более медленными подключениями к Интернету. Важность предоставления пользователям визуальной обратной связи, например показателей прогресса, была хорошо изучена и задокументирована. В нашем случае страница HTML - индикатор прогресса! Когда браузер постепенно загружает страницу, заголовок, панель навигации, логотип вверху и т.д. Все служат визуальной обратной связью для пользователя, который ждет страницу. Это улучшает общий пользовательский интерфейс.

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

В спецификации HTML четко указано, что таблицы стилей должны быть включены в HEAD страницы: "В отличие от A, [LINK] может появляться только в разделе HEAD документа, хотя это может появляться любое количество раз". Ни один из альтернатив, пустой белый экран или вспышка незакрепленного контента не стоят риска. Оптимальным решением является следовать спецификации HTML и загружать ваши таблицы стилей в документе HEAD.

Поместите скрипты в нижней части

Проблема, вызванная скриптами, заключается в том, что они блокируют параллельные загрузки. Спецификация HTTP/1.1 предполагает, что браузеры загружают не более двух компонентов параллельно по имени узла. Если вы обслуживаете свои изображения из нескольких имен хостов, вы можете получить более двух загрузок, которые будут происходить параллельно. Однако при загрузке script браузер не запускает никаких других загрузок даже на разных именах хостов.

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

Альтернативное предложение, которое часто возникает, заключается в использовании отложенных сценариев. Атрибут DEFER указывает, что script не содержит document.write и является ключом к браузерам, что они могут продолжать рендеринг. К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer script может быть отложен, но не так сильно, как хотелось бы. Если a script можно отложить, его также можно перенести в нижнюю часть страницы. Это ускорит загрузку ваших веб-страниц.

Ответ 3

Вы должны поместить ссылки стилей и javascript <script> в <head>, поскольку это продиктовано форматами. Однако некоторые помещают javascript <script> в нижней части тела, так что содержимое страницы будет загружаться, не дожидаясь <script>, но это компромисс, поскольку выполнение script будет задерживаться до загрузки других ресурсов.
CSS имеет приоритет в том порядке, в котором они связаны (в обратном порядке): сначала переопределяется вторым, переопределяется третьим и т.д.

Ответ 4

Вы должны поместить CSS в <head>, потому что это говорит спецификация.

Если у вас есть несколько файлов CSS, они будут загружены в том порядке, в котором вы поместите их в код. Если во втором файле CSS есть стиль, он перезаписывает стиль в первом; Это произойдет по дизайну. Таким образом, каскадные таблицы стилей.

Большинство браузеров будут по-прежнему эффективно выводить файлы CSS из головы, но ваш код не является семантически правильным.

Вы можете использовать ссылки на файлы JavaScript в любом месте документа. Существуют разные причины использовать их в <head> и некоторых других местах на странице. (Например, аналитический код Google должен быть помещен внизу.)

Ответ 5

CSS включает в себя head перед тем, как включить js script. Javascript может идти в любом месте, но на самом деле функция файла может определить местоположение. Если он строит содержимое страницы, поставьте его на голову. Если его использовать для событий или отслеживания, вы можете поставить его перед </body>

Ответ 6

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

Ответ 7

Относительно <link /> и <style /> у вас нет выбора, они должны быть в разделе <head /> (см. one и два).

Относительно <script /> он может отображаться как в <head />, так и в <body /> (см. три), обычно лучше всего поставить их в <head />, так как они не являются действительно "контентом" (где "контент" - это то, что пользователь видит на экране), это нечто большее, что "работает" над "контентом".

W3C спецификация HTML4 FTW!

Ответ 8

И если у вас есть более одного .css или .js файла для вызова, просто включите их один за другим или:

<head>

<link href="css/grid.css" rel="stylesheet" />

<link href="css/style.css" rel="stylesheet" />

<script src="js/jquery-1.4.4.min.js"></script>

<script src="js/jquery.animate-colors-min.js"></script>

</head>