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

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

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

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

  1. какая разница, если я положу его в <head> или где-нибудь еще вокруг HTML-кода?
  2. что делать, если у меня есть два CSS (или Javascript) файлов? Поскольку я могу включить только один файл перед другим, какой файл будет использоваться веб-браузера для отображения веб-страницы?
10 51
javascript html css css3

10 ответов:

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

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

и файл Javascript перед закрытием </body> tag

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

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

62

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

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

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

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

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

поместите Скрипты внизу

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

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

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

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

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

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

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

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

4

на мой взгляд лучший способ-это 1) Поместите файл CSS в часть заголовка между тегом head Причина-первая страница показывает представление для этого css требует 2) и весь файл js должен помещаться перед тегом закрытия тела. причина в том, что после отображения всех компонентов js может применяться

4

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

2

вы должны положить его в

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

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

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

консорциума W3C спецификация HTML4 FTW!

1

и если у вас есть более чем одна .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>
0

согласно моему исследованию в css место всегда внутри .например: -

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

а для скрипта его depen : -

  1. если внутри документа сценария. напишите настоящее, тогда оно будет в теге head.
  2. если скрипт содержит атрибут DEFER, потому что defer скачал все параллельно
0