首页前端开发JavaScript什么是div标签?HTML中div标签怎么使用?

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

时间2024-01-29 00:58:03发布访客分类JavaScript浏览450
导读:收集整理的这篇文章主要介绍了什么是div标签?HTML中div标签怎么使用?,觉得挺不错的,现在分享给大家,也给大家做个参考。HTML中的div标签是实现网页的重要基础,是学习HTML知识必不可少的内容,本篇文章就来为大家介绍关于HTML中...
收集整理的这篇文章主要介绍了什么是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>
    

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

上述只有文字显示,现在让我们用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>
    

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

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

以上就是什么是div标签?HTML中div标签怎么使用?的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: 什么是超文本下一篇:如何解决htmlbody元的高度问题猜你在找的JavaScript相关文章 html font标签如何设置字体大小?html font标签属性用法介绍2022-05-16vue3+TypeScript+vue-router的使用方法2022-04-16vue3获取当前路由地址2022-04-16如何利用React实现图片识别App2022-04-16JavaScript展开运算符和剩余运算符的区别详解2022-04-16微信小程序中使用vant框架的具体步骤2022-04-16Vue elementUI表单嵌套表格并对每行进行校验详解2022-04-16如何利用Typescript封装本地存储2022-04-16微信小程序中wxs文件的一些妙用分享2022-04-16JavaScript的Set数据结构详解2022-04-16 其他相关热搜词更多phpjavapython程序员load

若转载请注明出处: 什么是div标签?HTML中div标签怎么使用?
本文地址: https://pptw.com/jishu/590390.html
如何在HTML中插入一行?html横线标签hr全新讲解 html文件有哪些部分

游客 回复需填写必要信息