Учебники

HTML — заголовок

Декабрь 15, 2018

Мы узнали, что типичный 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>.

HTML-тег <title>

HTML-тег <title> используется для указания заголовка HTML-документа. Ниже приведен пример присвоения заголовка HTML-документу.

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Title Tag Example</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

Это даст следующий результат —

HTML-тег <meta>

HTML-тег <meta> используется для предоставления метаданных о документе HTML, который включает информацию об истечении срока действия страницы, авторе страницы, списке ключевых слов, описании страницы и т. Д.

Ниже приведено несколько важных примеров использования тега <meta> внутри документа HTML.

Live Demo 

<!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 Tutorials Point">

      <!-- Author information -->
      <meta name = "author" content = "Tutorials Point">

      <!-- 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, 21 June 2006 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>

Это даст следующий результат —

HTML тег <base>

HTML-тег <base> используется для указания базового URL-адреса для всех относительных URL-адресов на странице, что означает, что все остальные URL-адреса будут объединены в базовый URL-адрес при определении местоположения для данного элемента.

Например, все указанные страницы и изображения будут искать после добавления префикса к заданным URL-адресам с базовым URL-адресом http://www.tutorialspoint.com/ directory —

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
   </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-адрес будет http://www.tutorialspoint.com/home, тогда изображение и другие ссылки станут похожими на http://www.tutorialspoint.com/home/images. /logo.png и http://www.tutorialspoint.com/html/index.htm

HTML тег <link>

HTML-тег <link> используется для определения отношений между текущим документом и внешним ресурсом. Ниже приведен пример для ссылки на файл внешней таблицы стилей, доступный в подкаталоге css в корневом веб-каталоге:

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

Это даст следующий результат —

HTML тег <style>

HTML-тег <style> используется для указания таблицы стилей для текущего HTML-документа. Ниже приведен пример определения нескольких правил таблицы стилей внутри тега <style>.

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML style Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
	
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

Это даст следующий результат —

Примечание. Чтобы узнать, как работает каскадная таблица стилей, просмотрите отдельный учебник, доступный по адресу css

HTML-тег <script>

HTML-тег <script> используется для включения внешнего файла сценария или определения внутреннего сценария для документа HTML. Ниже приведен пример, в котором мы используем JavaScript для определения простой функции JavaScript:

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.tutorialspoint.com/" />
      
      <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.

46
Share: