Любой документ начинается с заголовка. Вы можете использовать разные размеры для заголовков. 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."
В тех случаях, когда вы не хотите, чтобы клиентский браузер разбивал текст, вы должны использовать неразрывный пробел.
вместо обычного пробела. Например, при кодировании «12 разгневанных мужчин» в абзаце вы должны использовать что-то похожее на следующий код:
<!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>
Это даст следующий результат: