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 />элемент, все, что следует за ним, начинается со следующей строки. Этот тег является примеромempty элемент, в котором открывающие и закрывающие теги не нужны, так как между ними нечего вставлять.

Тег <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 /> тег является примером empty элемент, в котором открывающие и закрывающие теги не нужны, так как между ними нечего вставлять.

В <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."

В случаях, когда вы не хотите, чтобы клиентский браузер прерывал текст, вам следует использовать неразрывный пробел.  вместо нормального пробела. Например, при кодировании «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>

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