什么是div标签?HTML中div标签怎么使用?

HTML中的div标签是实现网页的重要基础,是学习HTML知识必不可少的内容,本篇文章就来为大家介绍关于HTML中div标签的使用方法

什么是div标签

div标签表示一组必要的结构。目的是将夹在div标签间的字符分成块状。因此,单独的div标签没有诸如改变颜色或改变字符样式的效果

另外,如果div标签不适合其他元素,则就暂时不要使用它。

但是,实际上,当需要指定哪个元素时,我们经常会使用div标签

通过将id和class添加到div标签并使用CSS处理id和class,你就可以更改div标签中的颜色或改变为其他样式。

div标签与Section标签的比较

我认为section标签在文档上显示单个集合比较合适

section标签用于将组指示为文档。

我认为章节有章节的项

正如章节子句的这个概念一样,section标签一个块,如果它被提取,通常没有意义。

在报纸文章中,即使你只剪辑章节项,我也不认为整篇文章的意图可以传达。

通过比较,section标签的使用方式与div标签的使用方式不同,而是作为句子用于表示组。

div标签用法

写下div标签如下。

<div>内容</div>

如上所述,div标签通过添加id和class非常有用。如何分配id和class如下。

<div id=id名>内容</div>
<div id=class名>内容</div>

顺便说一下id和class

顺便说一下,id和class是什么?id和class被称为属性,id是I具有D号之类的东西,具有相同id名称的东西只能在该页面内使用一次。

相反,我们将id属性用于我们仅使用一次的事物。

另一方面,class属性可以在同一页面上使用多次。如果要指定“此元素和此元素的颜色相同”,请使用class属性

当然,即使你只使用一次,也可以使用class属性

我们来看实际的例子

我们先来看看div标签包围的结果

对于id和class,我们指定每个名词的颜色名称

使用以下源代码创建div.html并在浏览器中打开它。

div.html

<html>
  <head>
    <Meta charset=utf-8 />
  </head>
  <body>
    <div id=red>苹果</div>
    <div class=skyblue>天空</div>
    <div class=yellow>香蕉</div>
    <div class=blue>大海</div>
    <div class=lightyellow>蒲公英</div>
  </body>
</html>

在浏览器中显示效果如下:

2345截图20181126115725.png

上述只有文字显示,现在让我们用CSS作为背景上色。

<!DOCTYPE html>
<html>
  <head>
    <Meta charset=utf-8 />
    <title></title>
    <style type=text/css>
 #red {
        background-color: #FF0000;
      }
      .skyblue {
        background-color: skyblue;
      }
      .yellow{
        background-color: yellow;
      }
      .blue{
        background-color: blue;
      }
      .beige{
        background-color: beige;
      }
 </style>
  </head>
  <body>
  <div id=red>苹果</div>
    <div class=skyblue>天空</div>
    <div class=yellow>香蕉</div>
    <div class=blue>大海</div>
    <div class=beige>蒲公英</div>
  </body>
</html>

在浏览器中显示效果如下:

2345截图20181126133204.png

可以看到背景是彩色的,也还可以确认指定了多个相同的类。

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些