div标签 if语句用法_HTML Div标签用法示例教程

最新推荐文章于 2023-03-30 10:23:06 发布

cunjiu9486

最新推荐文章于 2023-03-30 10:23:06 发布

阅读量5.7k

点赞数

文章标签： css html js css3 javascript ViewUI

原文链接：https://www.poftut.com/html-div-tag-usage-tutorial-with-examples/

版权

div标签 if语句用法

<div> is a very useful and popular HTML tag. <div> is mainly used to group multiple HTML elements and provide some attributes to this group of elements. As a popular and longtime tag, it is supported by all of the web browsers like Google Chrome, Mozilla Firefox, Microsoft Edge/Explorer, Opera, Safari, etc.

<div>是非常有用且流行HTML标记。 <div>主要用于对多个HTML元素进行分组，并为该组元素提供一些属性。作为流行且长期的标签，所有网络浏览器(例如Google Chrome，Mozilla Firefox，Microsoft Edge / Explorer，Opera，Safari等)都支持该标签。

定义Div <div>元素 (Define Div <div> Element)

A div element can be defined with starting and closing tags <div> and </div>. We can use all of the other HTML elements inside the div element. In this part, we will provide an example that contains some text, button, etc. inside a div element.

可以使用开始和结束标签<div>和</div>定义div元素。我们可以使用div元素内的所有其他HTML元素。在这一部分中，我们将提供一个示例，该示例在div元素内包含一些文本，按钮等。

<html>
   <head>
      <style></style>
   </head>
   <body>
      <div>
         This is poftut.com
         <button>ABC</button>
      </div>
   </body>
</html>

具有内联属性的Div样式 (Div Styling with Inline Attributes)

Like other HTML tags, div tags can be styled in different ways. We can style inside the div tag by using style attribute. In this example, we will provide the style inside the tag.

像其他HTML标记一样，div标记可以用不同的方式设置样式。我们可以使用style属性在div标签内设置style 。在此示例中，我们将在标签内提供样式。

<html>
   <head>
      <style></style>
   </head>
   <body>
      <div style="border:5px dotted black">
         This is poftut.com
         <button>ABC</button>
      </div>
   </body>
</html>

带CSS样式标签的Div样式(Div Styling with CSS Style Tag)

We can also style a div with the style tag. We will just put the style tag inside the head tag and then use div {} and put style information into curly braces.

我们还可以使用style标签为div设置样式。我们将样式标签放在head标签内，然后使用div {}并将样式信息放入花括号中。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {width:200px;background:#D8FBD6;border:3px dotted black;padding:8px;}
      </style>
   </head>
   <body>
      <div>
         This is poftut.com
         <button>ABC</button>
      </div>
   </body>
</html>

Div属性 (Div Attributes)

Div provides standard and general attributes of the HTML tags like id, class, etc. In this example, we will set the id as mydiv. The class mylist.

Div提供了HTML标记的标准和常规属性，例如id，class等。在此示例中，我们将id设置为mydiv 。班级mylist 。

<html>
   <head>
      <style>
         #mydiv {width:200px;background:#D8FBD6;border:3px dotted black;padding:8px;}
      </style>
   </head>
   <body>
      <div id='mydiv' class='mylist'>
         This is poftut.com
         <button>ABC</button>
      </div>
      <div>
         This is poftut.com
         <button>ABC</button>
      </div>
   </body>
</html>

Div Div Div(Div Inside Div)

We can put divs inside divs. We will just put div tags inside divs. In this example, we will put 2 divs inside one div.

我们可以将div放入div中。我们将div标签放入div中。在此示例中，我们将2个div放入一个div中。

<html>
   <head>
      <style>
         #mydiv {width:200px;background:#D8FBD6;border:3px dotted black;padding:8px;}
         #parentdiv {width:400px;background:#D8FBD6;border:3px dotted black;padding:14px;}
      </style>
   </head>
   <body>
      <div id='parentdiv'>
      <div id='mydiv' class='mylist'>
         This is poftut.com
         <button>ABC</button>
      </div>
      <div id='mydiv'>
         This is poftut.com
         <button>ABC</button>
      </div>
      <div>
   </body>
</html>

LEARN MORE What Is DOM (Document Object Model)?

了解更多什么是DOM(文档对象模型)？

翻译自: https://www.poftut.com/html-div-tag-usage-tutorial-with-examples/

div标签 if语句用法

cunjiu9486

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
div标签 if语句用法_HTML Div标签用法示例教程

div标签 if语句用法<div> is a very useful and popular HTML tag. <div> is mainly used to group multiple HTML elements and provide some attributes to this group of elements. As a popular and longti...
复制链接

扫一扫