Как включить CSS и JS на страницах?

Я знаю как <link type="stylesheet" href=".." /> и <script type="text/javascript" src=".." /> работы. Но у меня есть понимание того, где они должны быть в контексте W3C, а также в контексте хорошей практики программирования. Я был много примеров, где они находятся в заголовке. Я не знаю почему, но кажется законным. Но какое влияние это имеет место, когда они находятся где-то еще в HTML-коде?Как включить CSS и JS на страницах?

Возьмем, к примеру, файл header, который включен PHP на все страницы веб-сайта, и этот заголовочный файл имеет свои собственные файлы CSS \ JS. Таким образом, они могут быть включены в сам файл заголовка, а затем в середине тела HTML страницы, включая заголовочный файл, будет link и тег script. Другим вариантом является их размещение в разделе head каждого файла, но затем изменения должны быть сделаны на каждой странице.

Мои вопросы:

Где link и script теги должны быть в соответствии с W3C?
Какое влияние это будет иметь место, если они находятся в середине тела HTML, как в примере выше?
Какое лучшее решение с точки зрения хорошей практики программирования?
Как сделать следующее include, имея страницу, совместимую с W3C, и таким образом, что мне не нужно обновлять каждую страницу при изменении файла CSS \ JS.
- Рассмотрите включенный фрагмент кода независимо от страницы включения.

Просто для ясности короткий пример: (Рассмотрим такую же ситуацию и для файла JS)

header.html:

<link rel="stylesheet" href="header.css" />  <!--- Should this be here? ---> 
<nav> 
    <ul> 
    <li>Menu item1</li> 
    <li>Menu item2</li> 
    </ul> 
</nav>

index.php:

<html> 
    <head> 
     <link rel="stylesheet" href="header.css" />  <!--- Or should it be here? ---> 
    </head> 
    <body> 
     <?php include('header.html'); ?> 
     <!--- Some HTML code ----> 
    </body> 
</html>

header.css:

nav{ color: #00FF00; }

источник

2012-06-23 Ramzi Kahil

Простой

Put Scripts at the Bottom. 
Put Stylesheets at the Top

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

Для javascipts

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

FYI: http://developer.yahoo.com/performance/rules.html#css_top
http://developer.yahoo.com/performance/rules.html#js_bottom

[EDIT]
Для вашего нового вопроса,

Сделать что header.html на динамическую страницу.
Когда это включено, прочитайте данные из выходного буфера (если вы не используете ), используя ob_get_contents.
Затем вы можете ввести файл css в головную часть.
Эхо это.
Очистить буфер с помощью ob_end_clean();

Некоторые фреймворки, такие как zend, позволяют вам управлять этим с помощью helpers.

источник

2012-06-23 11:01:39 Venu

Спасибо, но у вас есть решение для заостренной проблемы, которая возникает, когда я включаю независимый код фрагмент на главную страницу? –

почему вы не можете переместить это " ........ " код header.html? – Venu

обновлен другим способом! - – Venu

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

Head предназначен для (Цитируя W3C):

«Информация о текущем документе, например, как его название, ключевые слова, которые могут быть полезны для поисковых систем, а также другие данные, которые не считается содержание документа " Via: http://www.w3.org/TR/html401/struct/global.html#h-7.4.1

вы кладете JS в заголовке, когда вам необходимо загрузить их до того, как пользователь загружает страницу. GoogleAnalytics или другие службы или элементы пользовательского интерфейса могут быть загружены в тело. Люди, у которых медленное подключение к Интернету, будут вам благодарны. Содержимое вашего размера будет загружаться первым, а не nice2have элементы вашего сайта.

источник

2012-06-23 11:00:53

<html> 
    <head> 

    <link type="stylesheet" href=".." /> 
    <script type="text/javascript" src=".." /> 

    </head> 
    <body> 

    <!-- here html codes --> 

    </body> 
</html>

источник

2012-06-23 11:23:06 Ibra038

Вы должны использовать ссылку и сценарий тег в головной секции Пример кода:

<html> 
    <head> 
    <link href="YOUR URL" rel="stylesheet" type="text/css"/> 
    <script type="text/javascript" src="YOUR URL"></script> 
</head> 
<body> 
    <!--HTML tags--> 
</body> 
</html>

источник

2012-06-23 13:29:20 Prakash

Как включить CSS и JS на страницах?

ответ

Смежные вопросы