这篇文章主要介绍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>
在浏览器中显示效果如下:
可以看到背景是彩色的,也还可以确认指定了多个相同的类。
以上是HTML中div标签如何使用的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。