CSS之div和span标签

div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。

这两个东西,都是最最重要的“盒子”。


1                <div>

2                         <h3>中国主要城市</h3>

3                         <ul>

4                                 <li>北京</li>

5                                 <li>上海</li>

6                                 <li>广州</li>

7                         </ul>

8                </div>

9         

10              <div>

11                       <h3>美国主要城市</h3>

12                       <ul>

13                               <li>纽约</li>

14                               <li>洛杉矶</li>

15                               <li>华盛顿</li>

16                               <li>西雅图</li>

17                       </ul>

18              </div>

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

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

span也是表达“小区域、小跨度”的标签,但是是一个“文本级”的标签。

就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

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


1                                 <p>

2                                         简介简介简介简介简介简介简介简介

3                                         <span>

4                                                  <a href="">详细信息</a>

5                                                  <a href="">购买</a>

6                                         </span>

7                                 </p>

div标签是最最重要的布局标签:


1                <div class="header">

2                         <div class="logo"></div>

3                         <div class="nav"></div>

4                </div>

5                <div class="content">

6                         <div class="guanggao"></div>

7                         <div class="dongxi"></div>

8                </div>

9                <div class="footer"></div>

所以,我们亲切的称呼这种模式叫做“div+css”。div标签负责布局,负责结构,负责分块。css负责样式。

时间: 2024-10-11 21:50:06

CSS之div和span标签的相关文章

Div和Span标签显示与隐藏

本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuery的函数与语法,在网页中放置一个铵钮,用户点一点隐藏或显示.还放置了一个div标签和一个span标签. 在asp.net mvc环境中进行,在控制中创建一个Action: 接下来创建一个视图(标记1): 标记2,在网页添加一个铵钮,value为“hide”,说明铵钮当前状态是show.标记3,添加d

(前端)html与css,8、div和span标签

1.div和span的认识 通常称为"盒子" div是大的范围,span是小的范围 div:division,范围.区域.分割,并没有什么特殊语义,经常用来布局. div里经常放置一些具有某些特殊功能.相似类型的标签,这就是布局过程. div是一个典型的容器级标签,可放置任何的标签. span:小区域.小跨度.常用于小范围调整布局. span在p标签内:一般认为p>span>p 2.简单的div+css布局 最开始使用表格布局,结构和样式不分离. div+css:结构和样式

CSS中如何把Span标签设置为固定宽度

一.形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:block; } 实际验证结果:IE6 OK, FIREFOX 3 OK. 一.形如<span>ABC</span>DEF格式行设置SPAN为固定宽度的方法如下: span {width:60px; text-align:center;  display:block; float:left;

CSS 中如何把 Span 标签设置为固定宽度

一.形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:block; } 实际验证结果:IE6 OK, FIREFOX 3 OK. 一.形如<span>ABC</span>DEF格式行设置SPAN为固定宽度的方法如下: span {width:60px; text-align:center;  display:block; float:left;

div、span绑定内容改变事件

内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法,代码如下: 1 <meta charset="UTF-8"> 2 <script src="jquery.min.js"></script> 3 <span id="s"> 4 <span id=

HTML中Div、span、label标签的区别

div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它最官方的语义,但是这样的官方语义太让人迷惑,大的结构还好,但是小的地方到底是用div还是用span仍然让人迷惑.其实恰恰是<Microsoft MSDN Library>里面的定义让人豁然开朗. div:指定渲染HTML的容器 span:指定内嵌文本容器 通俗地讲就是如果里面还有其他标签的时候就用

HTML列表(组标签)+div(布局标签)与span

一.列表 HTML中常见的列表有三种,分别是: 1.无序列表,是一组描述列表语义的组标签,列表中每个项之间没有先后顺序:如图: 1)组标签:组标签就是由多个标签组成的一个整体,它们之间共同存在:例如 :ul标签,ol标签,dl标签: 2)ul : 是英文 unordered list "无序列表"的意思: 3)li : 是英文 list item "列表项"的意思: 4)ul标签 里边只能存放 li标签,li标签也不能单独存在,但li标签是容器级标签,里边可以放任何

div、span、label标签的区别

1.div <div> 可定义文档中的分区或节(division/section). <div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用任何格式与其关联. 如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效. div是一个块级元素,用来为HTML文档内大块的内容提供结构和背景 2.span <span> 标签被用来组合文档中的行内元素.(也就是一行内可以被<span>划分好几个区

CSS文字超出div或者span时显示省略号

我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all; } Html代码就不用写了,一个div 或者span class = "title"即可.