bootstrap 学习笔记之span div差别

最新推荐文章于 2023-03-07 20:24:49 发布

原创最新推荐文章于 2023-03-07 20:24:49 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

web学习专栏收录该内容

2 篇文章

订阅专栏

本文通过一个简单的HTML示例对比了span与div元素的区别。span元素为内联元素，不会造成换行；而div元素为块级元素，默认情况下会独占一行。此示例有助于初学者理解这两种元素的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于bootstrap的学习

导航页面

在写导航页面的时候注意到span与div的区别

01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTML示例</title>
05 <style type="text/css">
06 .myspan1 { color: #FFFFFF; background-color: #800000; }
07 .myspan2 { color: #000000; background-color: #CCFFCC; }
08 .myspan3 { color: #FFFFFF; background-color: #000080; }
09 .myspan4 { color: #000000; background-color: #FFCCCC; }
10 .mydiv1 { color: #FFFFFF; background-color: #008000; }
11 .mydiv2 { color: #000000; background-color: #CCCCFF; }
12 .mydiv3 { color: #FFFFFF; background-color: #000000; }
13 .mydiv4 { color: #000000; background-color: #FFFFAA; }
14 </style>
15 </head>
16 <body>
17 <h2>生命必须元素</h2>
18 <span class="myspan1">水</span>
19 <span class="myspan2">维生素</span>
20 <span class="myspan3">蛋白质</span>
21 <span class="myspan4">矿物质</span>
22 <hr>
23 <div class="mydiv1">水</div>
24 <div class="mydiv2">维生素</div>
25 <div class="mydiv3">蛋白质</div>
26 <div class="mydiv4">矿物质</div>
27 </body>
28 </html>