HTML — основные теги


Оглавление

    Показать оглавление

Теги заголовков

Любой документ начинается с заголовка. Вы можете использовать разные размеры для заголовков. HTML также имеет шесть уровней заголовков, в которых используются элементы

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

При отображении любого заголовка браузер добавляет одну строку до и одну после заголовка.

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
	
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
	
</html>

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

Тег абзаца

Тег

<p>

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

<p>

и закрытие

</p>

тег, как показано ниже в примере:

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

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

Тег разрыва строки

Всякий раз, когда вы используете элемент

<br />

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

Тег

<br />

имеет пробел между символами

br

и косая черта. Если вы опустите этот пробел, старые браузеры будут иметь проблемы с отображением разрыва строки, а если вы пропустите косую черту и просто используете

<br> 

это недействительно в XHTML.

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

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

Центрирование содержимого

Вы можете использовать тег

<center>

чтобы поместить любой контент в центр страницы или любую ячейку таблицы.

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

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

Горизонтальные линии

Горизонтальные линии используются для визуального разделения разделов документа. Тег

<hr>

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

Например, вы можете указать линию между двумя абзацами, как в приведенном ниже примере:

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

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

Снова тег

<hr />

является примером элемента пустой, где вам не нужны открывающий и закрывающий теги, так как между ними нет ничего.

Элемент

<hr />

имеет пробел между символами hr и косой чертой. Если вы опустите этот пробел, старые браузеры будут иметь проблемы с отображением горизонтальной линии, а если вы пропустите косую черту и просто используете

<hr>

это недействительно в XHTML

Сохранить форматирование

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

<pre>

Любой текст между началом

<pre>

тег и закрытие

</pre>

тег сохранит форматирование исходного документа.

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

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

Попробуйте использовать тот же код, не сохраняя его внутри тегов.

<pre>...</pre>

Неразрывные пробелы

Предположим, вы хотите использовать фразу «12 разгневанных мужчин». Здесь вы бы не хотели, чтобы браузер разделял «12, Angry» и «Men» на две строки:

An example of this technique appears in the movie "12 Angry Men."

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

&nbsp;

вместо обычного пробела. Например, при кодировании «12 разгневанных мужчин» в абзаце вы должны использовать что-то похожее на следующий код:

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

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