HTML 块-html教程-PHP中文网

不同 HTML 块的语法

HTML 块的元素

HTML 块示例

示例#1

Example #4

Conclusion

首页

web前端

html教程

HTML 块

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:39 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML 是一种用于构建网页的语言，其中使用不同的块。这些元素是样式化的，分为两种不同的类型：HTML 块级元素和内联元素。所有这些类型的元素都包含在

中。 HTML 块的标记。块级元素的结构是为了设计网页的主要布局。

如果我们谈论结构视图，它会创建比内联元素视图更大的结构视图。每个块级元素都以占据屏幕整个宽度的新行开始。它们必须写在开头和结束标签 .

元素分组是以节或子节的形式划分布局的重要方法。可以将任何块元素放入另一个块元素中，我们也可以将内联元素放入 HTML Blocks 元素中，但不可能将块级元素放入内联元素中而不是中。元素标签。

不同 HTML 块的语法

让我们看看不同 HTML 块级元素的语法如下：

1。 div 元素：它作为块元素工作，占据屏幕的整个宽度并始终从新行开始。

<div>
{ ……Lines of code…...}
</div>

登录后复制

2。表：表用于以表格格式显示数据，包括表头、表体（具有表行和表列）。

<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

登录后复制

3。列表元素： 有序列表和无序列表。

<h6>An Unordered list </h6>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<h4>An Ordered list</h4>
<ol>
<li></li>
<li></li>
<li></li>
</ol>

登录后复制

4。放置表单元素：放置表单元素以创建 HTML 表单，如下所示。

<form>
<input type=”text” name=” ” />
<textarea rows=” 3” col=”5” name=””></textarea>
<input type=”submit” name=”” />
</form>

登录后复制

HTML 块的元素

用作 HTML 块级元素的不同元素如下：

：地址标签用于指定HTML文章中作者的联系信息。
:
文章用于指定独立的内容。
:
这是一种位于主要内容之外的元素；通常，它被视为侧边栏。
:
每当我们从其他来源获取内容时，都会使用块引用。
Canvas 是 Web 文档中用于提供图形空间的元素。
: 它是整个 Web 开发中最重要的元素，用于将 HTML 文档划分为多个部分或部分。
：
在 Web 表单中使用与组相关的标签或元素，这些标签或元素被组合到字段集中。

:
HTML 表单是使用此块级元素定义的。它最常用于 Web 开发过程。

：
用于表示网页的页脚部分。

-
: 这些是 HTML 语言中使用的标题，定义级别 1 到 6。

:
该元素用于指示网页的标题部分。

：
这是 HTML 5 中引入的最新元素，用于指示页面的部分，包括其中的导航链接。

:
部分元素用于表示其文档的通用部分。

:每当我们想要以表格格式显示数据时，表格就是一个完美的解决方案。它将为您的 HTML 文档创建一个表格。
如果您想在 HTML 文档中包含视频内容，那么也可以在代码中使用简单的视频元素。

：如果用户想要显示项目列表，则可以使用
元素。

：按顺序显示列表。
:
它将以无序的方式显示列表。

：
此元素用于以描述列表的格式描述不同的术语。

HTML 块示例

以下是一些 HTML 块的示例：

示例#1

在下面的示例中，我们将使用一些基本的 Html 块元素，如 div、p、标题、带有有序和无序列表的列表元素等。

代码：

<html> <head> <title>HTML Block Level Elements </title> </head> <body> <h1>HTML Block Level Elements </h1> <p>This is the example of HTML block elements showing multiple block level elements enclosed within it .Here we can also use inline elements too </p> <div> <h3>Example including div , p , headings elements, list elements</h3> <p>This example shows different kind of HTML block elements like div, p , headings in between h1 to h6 </p> </div> <h2>Example of Lists</h2> <h4>An Unordered HTML List showing Countries </h4> <ul> <li>Mumbai</li> <li>Pune</li> <li>Nagpur</li> </ul> <h4>An Ordered HTML List showing Countries</h4> <ol> <li>Mumbai</li> <li>Pune</li> <li>Nagpur</li> </ol> </body> </html>
登录后复制

输出：

Example #2

Here we will see another example in which we are creating a table.

Code:

<style> table { border-collapse: collapse; } th, td { border: 1px solid black; padding: 10px; text-align: left; } </style> <table> <tr> <th>Sr No</th> <th>Emp ID</th> <th>Emp Name</th> <th>Designation</th> </tr> <tr> <td>1</td> <td>111</td> <td>John</td> <td>Developer</td> </tr> <tr> <td>2</td> <td>112</td> <td>Alebela</td> <td>Tester</td> </tr> <tr> <td>3</td> <td>113</td> <td>Rakesh</td> <td>Project Manager</td> </tr> <tr> <td>4</td> <td>114</td> <td>Siya</td> <td>UX Designer</td> </tr> <tr> <td>5</td> <td>115</td> <td>Kuldeep</td> <td>Web Developer</td> </tr> </table>
登录后复制

Output:

Example #3

Now by using HTML blocks elements, we are going to create an HTML form as follows:

Code:

<!DOCTYPE html> <html> <head> <title>Password Input Control</title> </head> <body > <form > <h2>Welcome to HTMl Block Demo</h2> <h4>Please login here</h4> User ID : <input type = "text" name = "user_id" /> <br><br> Password: <input type = "password" name = "password" /> <br><br> <input type = "checkbox" name = "remember" value = "on"> Remember Me <br><br> <input type = "submit" name = "Login" value = "Submit" /> </form> </body> </html>
登录后复制

Output:

Example #4

Here we are trying to Address the element in HTML blocks.

Code:

<address> Presented BY <a href="mailto:[email protected]">Narendra Modi</a>.<br> Visit us at:Delhi<br> primeminister.com<br> Box 104, Red Fort<br> Delhi </address>
登录后复制

Output:

Conclusion

The above information concluded that the HTML blocks level element included in the HTML document’s body. It will create some large HTML blocks of sections like paragraphs or pages with the division. One can include another block-level element into the block-level elements. It’s also possible to include inline elements into the block-level element but including block-level elements into the inline elements is not possible.