Span与div

✍ dations ◷ 2025-09-14 06:46:10 #HTML

在HTML中,spandiv元素被用来表达一个逻辑区块。div在Dreamweaver也叫“层”,用于标示块级元素,而span标示行内元素。

绝大多数HTML元素具有语义上的意义 - 也就是说,这个元素表示了它的作用。例如,一个p元素应该包含一段文本,而一个h1元素应该包含页面的最高层级标题,可据此区分它们。但spandiv没有天生的语义含义,它们可以被用于指定特定的区块或行列。

div就像一个段落,在视觉上于页面隔离出了文档的一部分,它可以包含段落、标题、表格等。span元素的作用是选择特定文本,以便于指定特殊样式,。这些特性由层叠样式表(CSS)控制。

spandiv

当它们被标记为具有classid属性时,spandiv元素可以表示通过HTML无法描述的信息的类型。例如,<div id="byline">Fred Smith</div>可能被用于指示一个文档中作者的名称,而<span class="date">10th Feb 2010</span>可能被用于具体指示一个日期。

有三个主要的理由使用具有classid属性的spandiv标签:

也许spandiv元素的最常见用法就是用以携带classid属性,结合CSS以应用布局,排版,颜色和其它表现性的属性于部分内容。CSS不只是应用于视觉上的样式:当由语音浏览器(英语:voice browser)说出时,CSS样式可以影响语速,重音,丰富度甚至于立体声。

任何HTML内的元素的属性,应该描述它们语义上的目的,而不仅仅是它们在某个特定介质中所想要的表现属性。例如,<span class="red small">password too short</span>在语义上毫无意义,然而<span class="warning">password too short</span>会有用的多。通过对CSS的正确使用,“warnings”可能被渲染为一个红色,小字体,但当被打印出时,它们可能被省略,因为此时对它们做任何事情都为时已晚。也许被说出时它们可以被给与额外的重音,而且在语速上有一个较小的减少。第二个例子是语义化的标记,而不仅是表现上的,但当结合CSS时满足了这两种目的。

这种对部分页面内容进行的分组和标签被引进可能仅仅为了使页面语义上更有意义。

万维网联盟(W3C)已在运行一个主要的语义网项目,旨在使整个web对今天和未来的信息系统越来越有用。

在页面设计过程中,设计者对内容中每一个元素和子元素的确切目的和意义,有一个清晰的想法。如果表达该含义的标准的HTML元素存在,它们就应该被使用。如果没有,就封装一个恰当classidspandiv。至少,这样做将帮助未来的编辑者维护这个标记。

微格式运动是建立于语义化class的想法之上的一次尝试。例如,微格式敏感软件可能会自动发现如<span class="tel">123-456-7890</span>的元素且允许对该电话号码的自动拨号。

一旦HTML或者XHTML的标记被送达网页访问者的客户端浏览器,就会有客户端代码将需要导航于网页的内部结构(或者文档对象模型)的机会。最常见的原因是页面随着产生动态行为的JavaScript。例如,如果把鼠标移至"Buy now"的超链接上,它就意味价格,JavaScript代码可以做到这个,但无论它在标记中的哪里,JavaScript需要标识价格元素。如下的标记将足够:<div id="price">$45.99</div>

另一个例子是Ajax编程技术,其中,例如,点击一个超链接也许会引发JavaScript代码检索文本寻找新的报价,以代替页面中现有的那个,而不用重新加载整个网页。当新的文本从服务器端返回,JavaScript必须标识页面上的准确的区域,用新的信息代替。

不那么常见,但作为改进对网页的访问,以及必须使用spandiv元素的classid属性以在页面内导航的代码的重要例子包括自动测试工具的使用。在动态产生HTML(Dynamic web page)上,这也许包括自动页面测试工具如HttpUnit(英语:HttpUnit),xUnit(英语:XUnit)家族成员之一,的使用,以及应用于表单驱动的网站时的负载或压力测试工具如Apache JMeter(英语:Apache JMeter)。

明智的使用div和span是HTML和XHTML标记中的一个重要部分。

例如,当结构上和语义上一系列项目需要一个外部的包围元素,和进一步为每一个项目提供的容器时,则在HTML中有多种多样可用的列表结构,其中之一可能比一个自制的divspan元素的混合更加可取。

示例:

【优】

<ul class="menu">  <li>Main page</li>  <li>Contents</li>  <li>Help</li></ul>

【劣】

相关

  • 皮质醇皮质醇(法语:cortisol),又译成可的松(音译),属于肾上腺分泌的肾上腺皮质激素之中的糖皮质激素,在应付压力中扮演重要角色,故又被称为“压力荷尔蒙”。皮质醇会提高血压、血糖水平和产
  • 囊泡虫总门 (Alveolata)囊泡虫总门(学名:Alveolata)是一大类原生生物.囊泡虫类可分为4个门, 在形态上具有非常大的多样性,但根据细胞内的超微结构与基因具有密切亲缘关系:帕金虫属(Perkinsus)可能属于
  • 路德维希·密斯·凡德罗路德维希·密斯·凡德罗(Ludwig Mies van der Rohe,1886年3月27日-1969年8月17日)生于德国亚琛,过世于美国芝加哥,原名为玛丽亚·路德维希·密夏埃尔·密斯(Maria Ludwig Michael
  • span class=nowrapCo(NOsub3/sub)sub2/sub/span硝酸钴,化学式Co(NO3)2。硝酸钴是一种红色单斜柱状结晶,在潮湿空气中易潮解,易溶于水、乙醇、丙酮和乙酸甲酯,微溶于氨水,水溶液呈红色。55°C失去3个结晶水,再加热则失去1个结晶
  • 慕尼黑协定慕尼黑协定(英语:Munich Agreement;捷克语:Mnichovská zrada;德语:Münchner Abkommen;1938年9月29日─9月30日)是英国、法国、德国、意大利四国首脑──张伯伦(首相)、达拉第(总理)、
  • 槟威大桥槟威大桥(又称槟城大桥;马来语:Jambatan Pulau Pinang)是位于马来西亚槟城州的跨海大桥,为槟城州的著名地标。这长达13.5公里的大桥连接槟城州的槟岛和对岸的威省(请见图),属于高速
  • 邻苯二甲酸氢铜邻苯二甲酸氢铜是铜(II)的邻苯二甲酸的酸式盐,化学式为Cu2。将CuCl2·2H2O溶解在尽可能少的热的蒸馏水中,化学计量比的邻苯二甲酸氢钠溶液加入其中,冷却至室温,过滤可得产物(二水
  • 弗里德里希王储 (安哈尔特-德绍)弗里德里希(Frederick;1769年12月27日-1814年5月27日),出生于德绍。安哈尔特王储。是安哈尔特-德绍亲王利奥波德三世与勃兰登堡-施韦特的路易丝的独生子。
  • 胡振远胡振远(?-?),浙江山阴(今绍兴)人,清朝官员。胡振远本为议叙府经历,加捐嘉义县知县。嘉庆二十四年,(1819年)接替温溶,担任台湾府台湾县知县。
  • 帕特里克·斯图尔特帕特里克·斯图尔特爵士,OBE(Sir Patrick Stewart,1940年7月13日-),英国电影、电视剧和舞台剧演员,曾获得艾美奖和金球奖提名,他还是哈德斯菲尔德大学的名誉校长。在将近50年的时间