Мы узнали, что типичный HTML-документ будет иметь следующую структуру:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
В этой главе будет немного больше подробностей о части заголовка, которая представлена HTML-тегом.
<head>
Тег
<head>
представляет собой контейнер различных важных тегов, таких как теги
<title> <meta> <link> <base> <style> <script> <noscript>
title
HTML-тег
<title>
используется для указания заголовка HTML-документа. Ниже приведен пример присвоения заголовка HTML-документу:
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Это даст следующий результат:
meta
HTML-тег
<meta>
используется для предоставления метаданных о документе HTML, которые включают информацию об истечении срока действия страницы, авторе страницы, списке ключевых слов, описании страницы и т. д.
Ниже приведены некоторые из важных случаев использования тега
<meta>
внутри HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by BasicIT.org">
<!-- Author information -->
<meta name = "author" content = "BasicIT.org">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 24 June 2026 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Это даст следующий результат:
base
HTML-тег
<base>
используется для указания базового URL-адреса для всех относительных URL-адресов на странице, что означает, что все остальные URL-адреса будут объединены в базовый URL-адрес при поиске данного элемента.
Например, все заданные страницы и изображения будут найдены после префикса заданных URL-адресов базовым URL-адресом https://basicit.org/ directory :
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://basicit.org/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>
Это даст следующий результат:
Но если вы измените базовый URL-адрес на что-то другое, например, если базовый URL-адрес https://basicit.org/home, тогда изображение и другие указанные ссылки станут выглядеть как https://basicit.org/home/images/logo.png. и https://basicit.org/html/index.htm
link
HTML-тег
<link>
используется для указания отношений между текущим документом и внешним ресурсом. Ниже приведен пример связывания файла внешней таблицы стилей, доступного в подкаталоге css в корневом каталоге веб-сайта:
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://basicit.org" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Это даст следующий результат:
style
HTML-тег
<style>
используется для указания таблицы стилей для текущего HTML-документа. Ниже приведен пример определения нескольких правил таблицы стилей внутри тега.
<style>
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://basicit.org" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>
Это даст следующий результат:
Примечание. Чтобы узнать, как работает каскадная таблица стилей, ознакомьтесь с отдельным учебным пособием, доступным по адресу css.
script
HTML-тег
<script>
используется для включения либо внешнего файла сценария, либо для определения внутреннего сценария для HTML-документа. Ниже приведен пример, в котором мы используем JavaScript для определения простой функции JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "https://basicit.org/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>
Это приведет к следующему результату, где вы можете попытаться нажать на данную кнопку:
Примечание. Чтобы узнать, как работает JavaScript, ознакомьтесь с отдельным учебным пособием, доступным по адресу javascript.