在本文中,我们将了解 HTML 中的 div 标签。 HTML 有两个重要的标签,用于一组许多其他 HTML 标签和内容,一个是
语法:
各种 HTML 标签都有开始和结束标签,例如:
div 标签必须打开
<div> Content of Div tag in HTML </div>
为了制作所需数据或内容的部分,在容器中使用多个 div 标签。例如:页眉、页脚、导航栏、表格、图像、文本等。我们可以使用 CSS 设计不同的 div 标签,并使用 JavaScript 轻松应用条件。
div标签可以将各种HTML标签和文本保存在一起。
您可以看到使用 div 标签和不使用 div 标签的示例。
代码:
<html> <head> <title>how to work div</title> <style type=text/css> .one{ background-color:orange; } .two{ background-color:yellow; } </style> </head> <body> <div class="one" > <h1> Content1 of div tag in Html </h1> <p> Div tag is used for group many HTML tag like table, list, paragraph in web page. Mostly div tag used in empty web page to partition or make section for content or HTML tags. </p> </div> <div class="two"> <h1> Content2 of div tag in Html </h1> <p> To make section of required data or content multiple div tags are used in container. Example: header, footer, navigation bar, table, images, texts etc. </p> </div> </body> </html>
输出:
说明:
代码:
<html> <head> <title>how to work div</title> <style type=text/css> p{ background-color:orange; } h1{ background-color:yellow; } </style> </head> <body> <h1> Content1 of div tag in Html </h1> <p> Div tag is used for a group many HTML tags like table, list, a paragraph on a web page. Mostly div tag used in empty web page to partition or make section for content or HTML tags. </p> <h1> Content2 of div tag in Html </h1> <p> To make section of required data or content multiple div tags are used in container. Example: header, footer, navigation bar, table, images, texts etc.</p> </body> </html>
输出:
说明:
以下是div标签的用途和需求:
下面给出了提到的示例:
这个例子是一个带有类的div标签。例如,左、中、右阶层。 div 是垂直放置的容器。但是我们可以在一个节中放置不同的div作为右侧、左侧或中间;这对于内容的位置管理很有用。
代码:
<html> <head> <title> Example1 </title> <style type=text/css> .leftdiv { float: left; background-color:blue; } .middlediv { float: left; background-color:green; } .rightdiv { float: left; background-color:black; } div{ padding : 1%; color: white; background-color:grey; width: 28%; border: 1px solid black; } </style> </head> <body> <div class="leftdiv"> <h2> Left Side </h2> <p>Div tag is used for group many HTML tag like table, list, paragraph in web page. Mostly div tag used for a web page to partition or make a section for content or HTML tags. To make a particular design for some special content div tag is useful because it does not affect the div layout and any CSS design. </p> </div> <div class="middlediv"> <h2> Middle Side </h2> <p>Div tag is used for group many HTML tag like table, list, paragraph in web page. Mostly div tag used in empty web page to partition or make section for content or HTML tags. To make particular design for some special content div tag is useful because it is does not affect on the div layout and any CSS design. </p> </div> <div class="rightdiv"> <h2> Right Side </h2> <p>Div tag is used for group many HTML tag like table, list, paragraph in web page. Mostly div tag used for a web page to partition or make a section for content or HTML tags. To make particular design for some special content div tag is useful because it is does not affect on the div layout and any CSS design. </p> </p> </div> </body> </html>
输出:
表格的 div 标签。
在此示例中,我们为表格使用了 div 标签。有时表格布局会发生变化,但表格放入 div 标签后不会影响布局。
代码:
<html> <head> <title> Example2 </title> <style type=text/css> div{ color:white; background-color:grey; border:solid black; } tr, td{ border: 1px solid grey; padding-top: 10px; padding-bottom: 10px; } th { padding-top: 10px; padding-bottom: 10px; text-align: left; } </style> </head> <body> <div> <h2> Student Information </h2> <table> <tr> <th>student name</th> <th>specialisation</th> <th>city</th> </tr> <tr> <td>vishu</td> <td>computer and IT </td> <td>kolkatta</td> </tr> <tr> <td>john</td> <td> graphics design</td> <td> delhi</td> </tr> <tr> <td>nagma</td> <td> mechatronics</td> <td>nagpur</td> </tr> <tr> <td>erfan </td> <td>animation video </td> <td>mumbai</td> </tr> <tr> <td> swadut </td> <td> electronics</td> <td> pune</td> </tr> <tr> <td> manasi </td> <td> CS </td> <td> pune</td> </tr> </table> </div> </body> </html>
输出:
带样式的 div 示例。
这是一个使用 CSS 样式的简单示例。
代码:
<html> <head> <title> Example3 </title> <style> div{ height:300px; width:500px; color:white; border:1px solid; background-color:grey; } </style> </head> <body> <center> <div> <caption> <h2> div tags in HTML</h3> </caption> <h3> Div tag is division tag used for group many HTML tag like table, list, paragraph in web page. </h3> </div> </center> </body> </html>
输出:
div标签是一个划分标签,用于在网页上进行分区。这是一个包含 HTML 标签和内容的空容器。使用 div 标签的 Web 应用程序看起来整洁、干净且有吸引力。 Web 应用程序对于用户和开发人员来说更容易理解。
以上是HTML 中的 div 标签的详细内容。更多信息请关注PHP中文网其他相关文章!