<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- FAVICON-->
<link href="images/favicon.png" type="image/png" rel="shortcut icon">
<!-- SEO -->
<meta name="keywords" content="ключевое слово или фраза1, ключевое слово или фраза2, ...">
<meta name="description" content="Описание страницы в поисковике">
<base href="https://ya.ru/my_site/docs/">
<!-- VIEWPORT-->
<meta name="viewport" content="width=1024">
<!-- CSS-->
<link rel="stylesheet" type="text/css" href="style.css">
<style>CSS-стили</style>
<!-- JS-->
<script type="text/javascript" src="js/script.js"></script>
</head>
Вместо <link> для подключения внешних стилей можно использовать @import, заключенный в <style> перед </head> или <script>,
хотя <link> предпочтительней
<style>
@import url(css/styles.css);
p {color: red;} /*Браузер проигнорирует @import, если написать его ниже p*/
</style>
| Теги | Описание | Атрибуты | Описание |
|---|---|---|---|
| <meta> | Определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем | name="keywords" content="ключевое слово1, ключевое слово2,..." | Ключевые слова для поисковиков |
| name="description"
content="описание страницы" |
Описание страницы для поисковиков | ||
| charset="utf-8" | Кодировка страницы | ||
| name="viewport" | Отображение страницы, указывать всегда на сайтах без адаптивности базовое значение ширины контентной области | ||
| <title> | Заголовок страницы на вкладке браузера | ||
| <link> | Устанавливает связь с внешними документами, вроде файла со стилями | href="css/style.css" | Путь к внешнему файлу |
| rel="stylesheet" | Определяет отношения между текущим документом и файлом, на который делается ссылка | ||
| type="text/css" | Тип данных подключаемого файла | ||
| link rel="shortcut icon" href="/images/favicon.png" type="image/png" | Установить иконку на закладке | ||
|
<script>
Подключать внутри <head> НЕ РЕКОМЕНДУЕТСЯ (кроме библиотек) |
Тег <script> предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах. <script> может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа |
src="js/script.js"
async defer |
Путь к внешнему файлу
При наличии атрибута async браузер при возможности запускает скрипт асинхронно. Это означает, что указанный в атрибуте src файл будет выполняться без ожидания загрузки и отображения веб-страницы. В то же время и страница не ожидает результата выполнения скрипта, а продолжает загружаться как обычно. Атрибут defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Работает только при наличии атрибута src. |
| <noscript> | Будет выполняться код внутри этого тега, если JS не будет работать в браузере, либо заблокирован в настройках | Обычно внутри этого тега вставляют <link> со стилями, убирающими интерактивные кнопки управления, чтобы у посетителей не было неработающих элементов на видимой странице | |
| <style> | <style> применяется для определения стилей элементов веб-страницы. Элемент <style> необходимо использовать внутри контейнера <head>. Можно задавать несколько <style> | type="text/css" | Тип данных |
| <base> | База файлов сайта | type="text/css" |
Если адрес документа указан как <base href="http://www.megasite.ru/hzchd/">, то при добавлении рисунков достаточно использовать относительный адрес <img src="images/labuda.gif">. При этом полный путь к изображению будет http://www.megasite.ru/hzchd/images/labuda.gif
<base href="1/2/3/"> <img src="img/hotkeys_simbols.jpg"> Полный адрес картинки: <img src="1/2/3/img/hotkeys_simbols.jpg"> |
<!--[if gte IE 6]>
<link htef="css/style_ie rel="stylesheet" type="text/css">
<![endif]-->
Версия браузера:
lt - версия меньше указанной
lte - версия меньше или равная указанной
gt - версия равна указанной
gte - версия больше или равна указанной
При помощи других логических операторов (& - и, | - или, ! - не) выполнятся группирование условных комментариев для различных версий IE.
[if (IE 6) & (IE 7)] – 6-я версия И 7-я версия
[if (IE 6) | (IE 7)] – 6-я версия ИЛИ 7-я версия
[if !(IE 8)] – НЕ 8-я версия
[if (gt IE 5)&(lt IE 7)] - 5-я И меньше 7-ой
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +
"progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
article,aside,details,figcaption,
figure,footer,header,hgroup,menu,
nav,section {
display:block;
}
Можно создвать стили для каждой страницы, но home.css должен стоять после основного styles.css
<meta http-equiv="REFRESH" content="10; URL=http://www.mysite.com/homepage.htm">
Будет производится перенаправление на сайт http://www.mysite.com/homepage.htm после 10 секунд задержки