Java网络 1.11 div 和 span

举报
我是小白呀iamarookie 发表于 2021/09/10 00:18:41 2021/09/10
【摘要】 div 和 span 概述div 标签代码实现 span 标签代码实现 概述 div 和 span 是非常重要的标签. div 的语义是 division “分割”, span 的...

概述

div 和 span 是非常重要的标签. div 的语义是 division “分割”, span 的语义就是 span “范围, 跨度”. 在 CSS 课程中你将知道, 这两个东西, 都是最重要的 “盒子”.

div 标签

div 在浏览器中, 默认是不会增加任何的效果改变的. 但是语义便利, div 中的所有元素是一个小区域.

div 标签是一个容器级标签, 里面什么都能放, 甚至可以放 div 自己.

代码实现

<div>
    <h1>中国主要城市</h1>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>杭州</li>
    </ul>
</div>
<div>
    <h1>美国主要城市</h1>
    <ul>
        <li>纽约</li>
        <li>洛杉矶</li>
        <li>华盛顿</li>
        <li>西雅图</li>
    </ul>
</div>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

执行结果:
在这里插入图片描述

span 标签

span 也是表达 “小区域, 小跨度” 的标签, 但是是一个文本级的标签. 也就是说, span 里面只能放置文字, 图片, 表单元素. span 里面不能放 p, h, ul, dl, ol, div.

span 里面是放置小元素的, div 里面是放置大东西的.

代码实现

<p>简介简介简介简介
    <span>
        <a href="">详细信息</a>
        <a href="">购买</a>
    </span>
</p>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="ad"></div>
    <div class="stuff"></div>
</div>
<div class="footer"></div>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

div 标签是最重要的布局标签, 至于 class 是什么意思, css 课程里面我们会学习, 暂时先不用管.

注: 我们称这种模式叫做 “div + css”. div 标签负责布局, 结构, 分块, css 负责样式.

文章来源: iamarookie.blog.csdn.net,作者:我是小白呀,版权归原作者所有,如需转载,请联系作者。

原文链接:iamarookie.blog.csdn.net/article/details/112301407

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200