HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签a创建链接,标签h1创建标题等),然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们的应用十分广泛。需要记住的是,div和span是“无意义”的标签,它们的存在纯粹是为了应用CSS样式,所以当样式表失效时,它们就没有了任何作用。

它们被用来组合成一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于,span是内联的(行内标记),用在一小块的内联HTML中;而div(division)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码,为HTML文档内大块的内容提供结构和背景的元素,可以包含段落、标题、表格甚至其他部分,这使得div便于建立不同集成的类。

div的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含的元素的特性由div标签的属性来控制,或者通过使用样式表格式化这个块来进行控制。

IT兄弟连 HTML5教程 “无意义”的HTML元素div和span的更多相关文章

  1. IT兄弟连 HTML5教程 HTML文档头部元素head

    HTML头部标记是<head>,主要包括页面的一些基本描述语句,以及CSS和JavaScript,一般都可以定义在头部元素中.它用于包含当前文档的有关信息,例如网页标题和关键字等.通常位于 ...

  2. IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素

    HTML5有一些新的表单元素:<datalist>.<keygen>.<output>.不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性, ...

  3. IT兄弟连 HTML5教程 HTML5的基本语法 小结及习题

    小结 一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这些逻辑上统一的对象称为元素.HTML文档主体结构分为两部分,一部分是定义文档类型,另一部分则是定义文档主体的结构框 ...

  4. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题

    小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...

  5. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

  6. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  7. IT兄弟连 HTML5教程 多媒体应用 新增多媒体播放元素

    在HTML5之前,要在网站上展示视频.音频.动画等多媒体信息,除了使用第三方自主开发的播放器,使用最多的工具应该算是Flash了,但是它们都需要在浏览器中安装各种插件才能使用,有时速度很慢.HTML5 ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题

    小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...

  9. IT兄弟连 HTML5教程 多媒体应用 小结及习题

    小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文 ...

随机推荐

  1. python迭代器生成器-迭代器和list区别

    迭代 生成 for循环遍历的原理 for循环遍历的原理就是迭代,in后面必须是可迭代对象 为什么要有迭代器 对于序列类型:字符串.列表.元组,我们可以使用索引的方式迭代取出其包含的元素.但对于字典.集 ...

  2. lvm讲解、磁盘故障小案例

    第4周第3次课(4月11日) 课程内容: 4.10/4.11/4.12 lvm讲解4.13 磁盘故障小案例 4.10/4.11/4.12 lvm讲解 lvm可以给磁盘扩容和缩容,结构图如下. 首先创建 ...

  3. num += num 与 num = num+ num

    a = 100def test(num): num += num print(num) test(a)print(a) 200100 这里 num += num 与 num = num+ num 不能 ...

  4. Java 从入门到进阶之路(十二)

    在之前的文章我们介绍了一下 Java 类的重写及与重载的区别,本章我们来看一下 Java 类的 private,static,final. 我们在之前引入 Java 类概念的时候是通过商场收银台来引入 ...

  5. 智能家居CC2530功率放大组网RFX2401C和AT2401C的区别

    两者最大的区别就是RFX2401C的增益为12dbmAT2401C的增益为14dbm这就会导致AT2401C的功耗会比RFX2401C大一点点,但距离也会相对更远,并且增加了EDS防静电等级,多出2个 ...

  6. jQuery中的层级选择器

    话不多说,请看效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  7. HashMap的常见问题

    关于HashMap的一些常见的问题,自己总结一下: 首选HashMap在jdk1.7和jdk1.8里面的实现是不同的,在jdk1.7中HashMap的底层实现是通过数组+链表的形式实现的,在jdk1. ...

  8. ARTS-S golang常用代码段

    通过http下载文件 func DownloadFile(filepath string, url string) error { out, err := os.Create(filepath) if ...

  9. JS页面跳转和打开新窗口方式

    1.window.location.href=URL : 在本窗体打开一个新的页面,也是最常用的一种方法: 2.window.open(URL)  :  在一个新的窗口打开一个新的页面: 3.loca ...

  10. 【Git】Windows 配置 SSH-Key

    查看本地公钥是否存在 执行以下语句来判断是否已经存在本地公钥 cat ~/.ssh/id_rsa.pub 如果出现如下截图,则本地公钥不存在,继续按步骤进行. 如果看到一长串以 ssh-rsa 或 s ...