HTML 03 - Basic Tags

HTML - Basic Tags

HTML tags are the fundamental elements of HTML used for defining the structure of the document. These are letters or words enclosed by angle brackets 尖括号 (<小于号 and >大于号).

Usually, most of the HTML tags contains an Opening 开始 and a Closing 结束 tag 标签. Each tag has a different meaning and the browser reads the tags and displays the contents enclosed by it accordingly.

For example, if we wrap any text within the paragraph (<p></p>) tag, browser displays it as a separate paragraph. In this tutorial we will discuss all the basic tags in HTML.

Heading Tags

You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.

Example

Following HTML example demonstrates various levels of headings.

复制代码
<!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>
复制代码

 

Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example.

Example

复制代码
<!DOCTYPE html>
<html>
<head>
   <title>Paragraph Example</title>
</head>
<body>
   <p>Here is the first paragraph of text.</p>
   <p>Here is the second paragraph of text.</p>
   <p>Here is the third paragraph of text.</p>
</body>
</html>
复制代码

 

Line Break Tag

Whenever you use the <br /> 换行 element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash. If you omit /əˈmɪt/ this space, older browsers will have trouble rendering the line break. If you miss the forward slash character and just use <br>, it is not valid in XHTML.

Example

复制代码
<!DOCTYPE html>
<html>
<head>
   <title>Line Break Example</title>
</head>
<body>
   <p>Hello<br /> You delivered your assignment on time.<br />
      Thanks<br /> Mahnaz</p>
</body>
</html>
复制代码

 

Centering the Content

You can use <center> tag to put any content in the center of the page or any table cell.

Example

复制代码
<!DOCTYPE html>
<html>
<head>
   <title>Centering 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>
复制代码

 

Horizontal Lines

Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

Example

Following example draws a horizontal line between two paragraphs.

复制代码
<!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>
复制代码

 On executing /ˈeksɪkjuːtɪŋ/ the above example, you can see a straight line dividing the two paragraphs.

The <hr> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <hr> element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontal line, while if you miss the forward slash character and just use <hr> it is not valid in XHTML

 

Preserve 保留 Formatting

Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can use the preformatted tag <pre>.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

Example

 
复制代码
<!DOCTYPE html>
<html>
<head>
   <title>Preserve Formatting Example</title>
</head>
<body>
   <pre>
      function testFunction( strText ){
         alert (strText)
      }
   </pre>
</body>
</html>
复制代码

 If you execute /ˈeksɪkjuːt/ the same code without using the <pre>...</pre> tags. The function will be displayed without the predefined format as shown below.

function testFunction( strText ){ alert (strText) }

 

Nonbreaking Spaces 空格

Suppose, if you want to use the phrase "12 Angry Men." Here, you would not want a browser to split the "12, Angry" and "Men" across two lines.

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

In cases, where you do not want the client browser to break text, you should use a nonbreaking space entity &nbsp; instead of a normal space. For example, when coding the "12 Angry Men" in a paragraph, you should use something similar to the following code.

Example

复制代码
<!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>
   <p>An example of this technique appears in the movie "12&nbsp;&nbsp;&nbsp;Angry Men."</p>
</body>
</html>
复制代码
&nbsp; 表示一个空格（=space）

 On executing the above example, it will display the sentence: An example of this technique appears in the movie "12 Angry Men.", twice. Since we have added 3 " " characters between 12 and Angry, the second time, you can observe three spaces. 

 

HTML 04 - Elements

 

posted @   emanlee  阅读(10)  评论(0)  编辑  收藏  举报
相关博文：
·  h32 Most commonly used tags in HTML
·  HTML 04 - Elements
·  HTML的基础知识
·  HTML基础知识
·  HTML具体元素
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
历史上的今天：
2022-05-13 AttributeError: The vocab attribute was removed from KeyedVector in Gensim 4.0.0.
2021-05-13 Shell/Linux 将一个文件中的每两行合并成一行
2017-05-13 Chromosome coordinate systems: 0-based, 1-based
2015-05-13 Oracle imp 导入数据出现 ORA-12560
点击右上角即可分享
微信分享提示
AI IDE Trae