HTML教程-HTML<div>标签

HTML <div>标签用于将大段的HTML元素分组在一起。

我们知道每个标签都有特定的用途，例如<p>标签用于指定段落，<h1>到<h6>标签用于指定标题，但<div>标签就像是一个容器单元，用于封装其他页面元素，并将HTML文档分成多个部分。

Web开发人员通常使用<div>标签将HTML元素分组在一起，并一次性为许多元素应用CSS样式。例如：如果将一组段落元素包装在<div>元素中，您可以利用CSS样式，一次性为所有段落应用字体样式，而不是为每个段落元素编写相同的样式。

<div style="border:1px solid pink;padding:20px;font-size:20px">
  <p>Welcome to Javatpoint.com, Here you get tutorials on latest technologies.</p>
  <p>This is the second paragraph.</p>
</div>

输出：

Welcome to Javatpoint.com, Here you get tutorials on latest technologies.

This is the second paragraph.

HTML <div>标签和<span>标签的区别

<div>标签	<span>标签
HTML <div>是块级元素。	HTML <span>是内联元素。
HTML <div>元素用于包装大段的元素。	HTML <span>元素用于包装少量的文本、图像等。

---

HTML <div>示例：登录表单

在此示例中，我们使用<div>标签创建了一个框。框内有一个登录表单。让我们看一下CSS和HTML代码。

CSS代码：

.loginform {
  padding: 10px;
  border: 1px solid pink;
  border-radius: 10px;
  float: right;
  margin-top: 10px;
}
.formheading {
  background-color: red;
  color: white;
  padding: 4px;
  text-align: center;
}
.sub {
  background-color: blue;
  padding: 7px 40px 7px 40px;
  color: white;
  font-weight: bold;
  margin-left: 70px;
  border-radius: 5px;
}

HTML代码：

<div class="loginform">
  <h3 class="formheading">Please Login</h3>
  <form action="LoginServlet" method="post">
    <table>
      <tr>
        <td>Email:</td>
        <td><input type="email" name="email"></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" name="password"></td>
      </tr>
      <tr>
        <td colspan="2" style="text-align:center">
          <input class="sub" type="submit" value="login">
        </td>
      </tr>
    </table>
  </form>
</div>

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<div>	是	是	是	是	是