调用DIV元素和SPAN元素分组多元素

开发 前端
本文向大家描述一下如何利用DIV元素或SPAN元素可以分组多个元素,以创建页面的某些部分或者子部分,。这些元素自身不会影响页面的外观,但是它们通常与CSS一起使用,以允许用户添加样式到页面的某个部分。

你对利用DIV元素和SPAN元素分组元素方法是否熟悉,这里和大家分享一下,利用DIV元素或SPAN元素可以分组多个元素,以创建页面的某些部分或者子部分,相信本文介绍一定会让你有所收获。

利用DIV元素和SPAN元素分组元素

利用DIV元素或SPAN元素可以分组多个元素,以创建页面的某些部分或者子部分。这些元素自身不会影响页面的外观,但是它们通常与CSS一起使用,以允许用户添加样式到页面的某个部分(详情参考第7章)。例如,可以将页面中的所有脚注放置到一个DIV元素中,以表明DIV元素中的所有元素与该脚注相关。然后可以附加一个样式到这个DIV元素,从而使用一组特殊的样式规则来显示脚法。

如下代码演示了用于分组块级元素的DIV元素:

  1. <div class="footnotes"> 
  2.  <h2>Footnotes</h2>   
  3. <p><b>1</b> The World Wide Web was   
  4. inventedby Tim Berners-Lee</p>   
  5. <p><b>2</b> The W3C is the World Wide Web   
  6. Consortium who maintain many Web    
  7. standards</p> </div>   
  8.  

另一方面,可以使用SPAN元素仅分组内联元素。因此,如果句子或段落的某个部分需要分组,可以使用SPAN元素。下面的代码中添加了一个SPAN元素,以表明哪些内容与某位发明家相关。该SPAN元素中包含了一个粗体元素和一些文本:

  1. <div class="footnotes">   
  2. <h2>Footnotes</h2>   
  3. <p><span class="inventor"><b>1</b>   
  4. The World Wide Web was invented  
  5.  by Tim  Berners Lee</span></p>   
  6. <p><b>2</b> The W3C is the World Wide  
  7.  WebConsortium who maintain many Web  standards</p> 
  8. </div>   

该元素自身对文档在浏览器中的显示外观没有任何影响,但是它对标记添加了额外的意义,即将相关元素分组在一起。这种分组也可以供其他处理应用程序使用,或者用于使用CSS规则将特殊的样式赋给组中的元素(参见第7章)。

DIV元素和SPAN元素可以附带所有的通用属性和UI事件属性,甚至是逐渐淘汰的align属性(StrictXHTML1.0中已经移除该属性)。

【编辑推荐】

  1. 解析DIV元素与SPAN元素的区别
  2. JavaScript代码轻松实现DIV圆角
  3. 网页排版中IE6,IE7,Firefox浏览器兼容性写法
  4. CSS属性display:inline-block使用揭秘
  5. Firefox、IE7、IE6浏览器兼容问题概念解析

 

责任编辑:佚名 来源: 51cto.com
相关推荐

2010-09-13 11:25:56

DIV元素

2010-09-07 13:58:28

SPANDIV

2010-08-30 12:59:47

DIVSPAN

2010-09-08 17:11:29

CSS块元素CSS内联元素

2023-12-30 08:08:11

元素HTML块级元素

2021-07-29 10:00:24

Arrays工具类元素

2017-08-08 15:35:37

前端CSS伪元素

2010-08-16 11:33:16

DIV定位

2010-08-31 10:11:50

divuldl

2024-03-18 09:50:18

Selenium元素Python

2009-07-01 15:08:50

JSP指令和脚本元素

2010-08-16 10:25:23

DIVSPAN

2010-08-26 17:02:35

DIV定位

2010-06-17 16:29:57

UML组成

2009-09-16 16:52:50

LINQ to XML

2023-08-01 08:18:09

CSSUnset

2012-02-06 13:34:49

HibernateJava

2012-03-13 17:18:58

WEBKIT

2010-09-03 12:55:15

CSSblockinline

2010-07-05 16:48:32

UML关系图符号
点赞
收藏

51CTO技术栈公众号