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

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

1

2

中国主要城市

3

4

北京

5

上海

6

广州

7

8

9

10

11

美国主要城市

12

13

纽约

14

洛杉矶

15

华盛顿

16

西雅图

17

18

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

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

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

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

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

1

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

3

4                                                  详细信息

5                                                  购买

6

7

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

1

2

3

4

5

6

7

8

9

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

"无意义"的div和span标签

HTML

元素是块级元素,它是可用于组合其他 HTML 元素的容器.

元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...

Div和Span标签显示与隐藏

本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...

HTML 的 <div> 和 <span> 标签

这篇文章里会涉及到两个术语,这里先明确一下: 块级元素,block level element 内联元素(或者叫行内元素),inline element 大多数 HTML 元素被定义为块级元素和内联元 ...

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

一.形如ABC独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:blo ...

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

一.形如ABC独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:blo ...

div和span标签

------------------------ ------------------------ ------------------------ 块级标签独占一行,不和别的标签在同一行显示:行内标 ...

IT兄弟连 HTML5教程 “无意义”的HTML元素div和span

HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签a创建链接,标签h1创建标题等),然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用.但实际上, ...

div、span绑定内容改变事件

内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...

div和span显示在同一行

div和span标签的区别 div  是块级元素标签,独占一行,后面跟的内容换行显示 span  是内联元素标签,后面可以跟其他显示内容,不独占一行 display属性可以改变内联元素和块级元素的状态 ...

随机推荐

POSTMAN as debugger for integration APPs

Chrome Menu: Window > Extensions > Postman - REST Client 0.8.4.10 起个标题,有空总结一下一个经验,关于Netsuite i ...

如何解决sublime text 2总是在新窗口中打开文件及文件夹

如何在原窗口打开文件 具体设置:Preferences -> Settings – Default -> 搜索open_files_in_new_window,将其true 改为 fals ...

iOS 设置铃声---加载音乐和音频然后进行播放

在有些应用中需要用到背景音乐和音效,那在程序中是这么实现的. 1.首先加载背景音乐需要用到AVFoundation框架 2.音乐资源都是在包里的,所以需要获得包路径,涉及方法- (id)initWit ...

Vim应用

:q!不保存退出 :set number显示行数 :wq保存并退出 ==先输入100,再输入==.从这行开始向下100行,进行自动缩进对齐

.NET系统架构改造的经验和教训

转自: http://robbinfan.com/blog/43/rid-off-dotnet-experience 在互联网行业,基于Unix/Linux的网站系统架构毫无疑问是当今主流的架构解决方 ...

自学javaee程序员之路--ssm的小项目(一)

大家好~我叫王聪,缩写是WC(不是厕所!不是厕所!).是一名某内陆大四的学生.这两个月自学了javaee---关于web的一些心得,分享记录一下.建立这个博客的目的是望各位前辈学长指正批评~~也是建立 ...

分布式系统之消息中间件rabbitmq

分布式系统之消息中间件rabbitmq 博客分类: 感谢:  一般php 用rabbitmq  java 用activemq  http://spartan1.iteye.com/blog/11802 ...

echarts简单的折线图

加jar包  首先 在jsp页面中 选好 ...

github使用入门

连接地址 github使用入门 连接地址: https://zhuanlan.zhihu.com/p/21193604?refer=passer

css div下第一个span,CSS之div和span标签相关推荐

  1. css div下第一个span,CSS入门教程——div和span

    div和span是什么意思? 相对与其他XHTML标签,div和span对于它们包含的元素是没有意义的.例如当你看到 标签,你知道里面是标题,当你看到 下面我们就来看看div和span的应用实例. 块 ...

  2. 纯css导航下拉_纯CSS标签导航

    纯css导航下拉 The appearence of "tab" navigation is relatively easy to create, but making a tab ...

  3. html用css做下拉菜单,纯css实现下拉菜单

    纯css实现下拉菜单 1.效果如下: 2.html代码 时间最近 时间最近 评论最多 被赞最多 3.css代码 * { margin: 0; padding: 0; } ul { list-style ...

  4. 多个css样式合并到一个“目录”css文件中

    执行访问jsp后发现没有效果 同样的代码,在html中效果对比如下: 具体原因:不清楚,暂时记着~~~在jsp中不支持@import这种css样式的引用 转载于:https://www.cnblogs ...

  5. html字体下划线下移,CSS下划线与文字间距距离设置(CSS文字下划线距离设置)

    CSS设置下划线与文字间距距离(CSS文字下划线距离设置) css下划线与文字上下距离设置,文字字体下划线样式技巧篇,如何改变文字与下划线距离间距?这里CSS5为大家介绍通过下边框border-bot ...

  6. css文字下划线效果

    css文字下划线效果 使用css实现下划线在鼠标放上去从左往右,离开也是从左往右的效果 利用 :hover 改变下划线的宽度,来实现这个效果 宽度改变的方向是从元素的定位来决定的,所以初始右定位设为0 ...

  7. 实现一个行内三个div等分_一个div,包含三个小的div,平均分布的样式

    从11月份开始,自学前端开发,写静态页面中,经常用到一个大的div下包含三个小的div,平均分布div大小样式,写过多次,也多次忘记,每次都要现找资料,不想之后,在这么麻烦,索性今天自己记录一下,方便 ...

  8. HTML下拉菜单为什么无线拉长,【CSS】怎么拉长一个div的高度

    请看技巧与提示的那里,由于文字不是很多,导致在大屏幕上,这个div太短了,现在页面有点难看,但是在比较小的屏幕(笔记本屏幕),效果还是可以的,这个该怎么决解呢? 我希望的效果如下 回答: $(&quo ...

  9. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用 _height: 100px; I ...

最新文章

  1. TCP/IP详解--第九章
  2. 华为 mysql实例监控,华为云文档数据库服务DDS监控告警全新优化
  3. jquery技巧(持续更新。。)
  4. AsyncTask类的使用
  5. MySQL基本操作——增删查改
  6. c语言多种选,教你轻松学会C语言系列之——一种更简洁、更经典的选择结构
  7. Avalonia跨平台入门第十一篇之自定义Window
  8. 动手学CV-目标检测入门教程4:模型结构
  9. 日文邮件变成乱码解决方案
  10. 参考:创业公司搭建自己的技术架构
  11. 数据库备份工具mysqldump重要参数详解
  12. python---set集合
  13. 新大一C语言程序设计与算法入门学习路线
  14. IDM如何设置深色模式
  15. 如何利用Social Listening从社会化媒体中“提炼”有价值的信息?
  16. ISSN码和ISBN码的区别
  17. 英国和中国的时差是多
  18. 找工作时,如何区分对方是不是培训机构?
  19. 一文读懂|什么是dToF激光雷达技术?
  20. 汇编语言简明教程 实验报告

热门文章

  1. 学习C#十五天的总结
  2. 排序——宇宙总统(洛谷 P1781)
  3. PHP百度收录量查询接口源码,PHP百度收录量查询接口源码
  4. 矢量归一化_7. 从矢量观测到姿态观测
  5. dell t40 固态系统盘_天元戴尔(DELL)T40配置教程
  6. MogDB数据库安装部署之xlog目录设置
  7. 记一次library cache lock/library cache pin导致的函数编译hang住分析及处理过程
  8. 几万年前,有一只猴子大闹地府后删库跑路...
  9. 详解CNN实现中文文本分类过程
  10. 破解数据匮乏现状:纵向联邦学习场景下的逻辑回归(LR)