Любой документ начинается с заголовка. Вы можете использовать разные размеры для ваших заголовков. 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 Angry Men». Здесь вы не хотели бы, чтобы браузер разделял «12, Angry» и «Men» на две строки —
An example of this technique appears in the movie "12 Angry Men."
В тех случаях, когда вы не хотите, чтобы клиентский браузер разбивал текст, вы должны использовать неразрывный пробел & nbsp; вместо нормального пространства. Например, при кодировании «12 Angry Men» в абзаце, вы должны использовать что-то похожее на следующий код —
пример
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
Это даст следующий результат —