Span与div

✍ dations ◷ 2025-06-28 08:28:13 #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>

【劣】

相关

  • 父母亲本,指的是生成新个体的生物。而父母、家长、双亲、子女的定义则较广泛,只要是养育孩子成长的人,都可以用此称呼。语出《礼记·曲礼下》:“生曰父,曰母,曰妻;死曰考,曰妣,曰嫔。”。
  • 存有存有(梵语:अस्ति,希腊语:Είναι,拉丁语:Esse,法语:Être,德语:Sein,英语:Being)乃内容广泛且极为重要的哲学术语和概念,与现实(Reality)与存在(Existence)相关,所有客观性与主观性特征
  • 前庭球前庭球(英语:vestibular bulbs),也被称之为阴蒂球(clitoral bulbs),是一类勃起组织的集合,它位于阴蒂的内侧。它位于阴道前庭,接近于阴蒂、阴蒂脚,并在尿道、尿道海绵(英语:urethral spo
  • 圣母大殿圣母大殿(意大利语:Basilica di Santa Maria Maggiore)位于意大利罗马,是天主教会的四座特级宗座圣殿之一,另外三座是拉特朗圣若望大殿、城外圣保禄大殿和圣伯多禄大殿。在13世纪
  • VHSVHS是Video Home System的缩写,意为家用录像系统,是由日本JVC公司在1976年开发的一种家用录像机录制和播放标准。虽然VHS的官方翻译就是家用录像系统,但是最初VHS代表Vertical
  • vanillylamine香兰素胺(Vanillylamine),又称香草胺,是一种生物碱,是辣椒素生物合成的中间产物。由香兰素通过香兰素转氨酶而得到。并进一步与8-甲基-6-壬酸通过辣椒素合成酶的催化而转化为辣椒
  • Cu(HCOO)sub2/sub甲酸铜是铜(II)的甲酸盐,化学式为Cu(HCOO)2。可以以无水物、二水或四水合物的形式存在。也能和吡啶、尿素等形成加合物。甲酸铜可由甲酸和碱式碳酸铜反应得到,产物的形貌、颜
  • 大三元三双(英语:Triple-double),台湾常以麻将术语称之“大三元”,指篮球比赛中,球员的个人表现在下列正面数据中的任何三项达到两位数:得分、篮板、助攻、抢断和盖帽,最常见的三双是在于
  • 西北夏威夷群岛西北夏威夷群岛(英语:Northwestern Hawaiian Islands,或称Leeward Islands)指的是美国夏威夷群岛中,自考艾岛和尼豪岛以西到中途岛之间的岛屿及珊瑚礁。总共包括了33个岛屿。总面
  • 中堂水道中堂水道位于中国广东省东莞市西北部,东起高埗镇卢村接东江南干流来水,向西至中堂镇东向村汇入倒运海水道。全长6.5千米,平均比降0.58‰。中堂水道地处东江三角洲北部,地形起伏